test: update tests for pluggable component

test: another tests

Author: johnvente

package-lock.json

@@ -48,6 +48,7 @@
     "@loadable/component": "^5.15.3",
     "@openedx-plugins/communications-app-check-box-form": "file:plugins/communications-app/CheckBoxForm",
     "@openedx-plugins/communications-app-input-form": "file:plugins/communications-app/InputForm",
+    "@openedx-plugins/communications-app-test-component": "file:plugins/communications-app/TestComponent",
     "@tinymce/tinymce-react": "3.14.0",
     "axios": "0.27.2",
     "classnames": "2.3.2",

package.json

@@ -0,0 +1,18 @@
+import PropTypes from 'prop-types';
+
+const TestComponent = ({ handleClick, title }) => (
+  <button type="button" onClick={handleClick} data-testid="button-test">
+    {title}
+  </button>
+);
+
+TestComponent.defaultProps = {
+  handleClick: () => {},
+};
+
+TestComponent.propTypes = {
+  handleClick: PropTypes.func,
+  title: PropTypes.string.isRequired,
+};
+
+export default TestComponent;

plugins/communications-app/TestComponent/index.jsx

@@ -0,0 +1,20 @@
+{
+  "name": "@openedx-plugins/communications-app-test-component",
+  "version": "1.0.0",
+  "description": "edx input form to use it in this mfe",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "peerDependencies": {
+    "@edx/frontend-app-communications": "*",
+    "@edx/frontend-platform": "*",
+    "@edx/paragon": "*",
+    "prop-types": "*",
+    "react": "*"
+  },
+  "peerDependenciesMeta": {
+    "@edx/frontend-app-communications": {
+      "optional": true
+    }
+  }
+}

plugins/communications-app/TestComponent/package.json

@@ -2,59 +2,11 @@
 
 exports[`PluggableComponent renders correctly 1`] = `
 <div>
-  <div
-    class="pgn__form-group p-3 border border-success-300"
-    data-testid="plugin-input"
+  <button
+    data-testid="button-test"
+    type="button"
   >
-    <label
-      class="pgn__form-label h3 text-primary-500"
-      for="randomID"
-    >
-      Hello
-    </label>
-    <div
-      class="row container-fluid"
-    >
-      <div
-        class="pgn__form-control-decorator-group col-3"
-      >
-        <input
-          class="form-control is-valid"
-          id="randomID"
-        />
-      </div>
-      <p
-        class="col-8"
-      >
-        @openedx-plugins/communications-app-input-form
-      </p>
-    </div>
-    <div
-      class="pgn__form-control-description pgn__form-text pgn__form-text-valid"
-    >
-      <span
-        class="pgn__icon"
-      >
-        <svg
-          aria-hidden="true"
-          fill="none"
-          focusable="false"
-          height="24"
-          role="img"
-          viewBox="0 0 24 24"
-          width="24"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2Z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-      <div>
-        You are correct
-      </div>
-    </div>
-  </div>
+    button title
+  </button>
 </div>
 `;

src/components/PluggableComponent/__snapshots__/index.test.jsx.snap

@@ -1,30 +1,49 @@
-import React from 'react';
-import { render, waitFor, screen } from '@testing-library/react';
+import React, { useState } from 'react';
+import {
+  render, waitFor, screen, fireEvent,
+} from '@testing-library/react';
 import PluggableComponent from '.';
 
+const ToggleContentComponent = () => {
+  const [showContent, setShowContent] = useState(false);
+
+  return (
+    <div>
+      <button type="button" onClick={() => setShowContent((prev) => !prev)}>
+        Toggle Content
+      </button>
+      {showContent && <div data-testid="toggle-content">Toggle On</div>}
+    </div>
+  );
+};
+
 describe('PluggableComponent', () => {
+  beforeEach(() => {
+    jest.resetModules();
+  });
   it('renders correctly', async () => {
+    const handleClickMock = jest.fn();
     const props = {
-      isValid: true,
-      controlId: 'randomID',
-      label: 'Hello',
-      feedbackText: 'You are correct',
+      title: 'button title',
+      handleClick: handleClickMock,
     };
+
     const { container } = render(
       <PluggableComponent
         id="pluggableComponent"
-        as="communications-app-input-form"
+        as="communications-app-test-component"
         {...props}
       >
         <h1>Hi this is the original component</h1>
       </PluggableComponent>,
     );
 
     await waitFor(() => {
-      const inputForm = screen.getByTestId('plugin-input');
-      expect(inputForm).toBeInTheDocument();
-      expect(screen.getByText(props.label)).toBeInTheDocument();
-      expect(screen.getByText(props.feedbackText)).toBeInTheDocument();
+      const buttonComponent = screen.getByTestId('button-test');
+      expect(buttonComponent).toBeInTheDocument();
+      expect(screen.getByText(props.title)).toBeInTheDocument();
+      fireEvent.click(buttonComponent);
+      expect(handleClickMock).toHaveBeenCalled();
       expect(container).toMatchSnapshot();
     });
   });
@@ -43,7 +62,7 @@ describe('PluggableComponent', () => {
     });
   });
 
-  it('loads children component when import object', async () => {
+  it('loads children component when import is empty', async () => {
     render(
       <PluggableComponent
         id="test-pluggable"
@@ -59,4 +78,69 @@ describe('PluggableComponent', () => {
       expect(defaultComponent).toBeInTheDocument();
     });
   });
+
+  it('returns null when do not have children and import is invalid', async () => {
+    render(
+      <PluggableComponent
+        id="test-pluggable"
+        as="invalid-module"
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByTestId('plugin')).not.toBeInTheDocument();
+    });
+  });
+
+  test('updates component when props change', async () => {
+    const { rerender } = render(
+      <PluggableComponent
+        id="test-pluggable"
+        as="communications-app-test-component"
+        title="Testing title component"
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Testing title component')).toBeInTheDocument();
+    });
+
+    rerender(
+      <PluggableComponent
+        id="test-pluggable"
+        as="communications-app-test-component"
+        title="Testing a new title component"
+      />,
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Testing a new title component')).toBeInTheDocument();
+    });
+  });
+
+  it('updates component when children change', async () => {
+    const { getByText, getByTestId } = render(
+      <PluggableComponent
+        id="test-pluggable"
+        as="default-children"
+      >
+        <ToggleContentComponent />
+      </PluggableComponent>,
+    );
+
+    await waitFor(() => {
+      const toggleContent = screen.queryByTestId('toggle-content');
+      expect(toggleContent).not.toBeInTheDocument();
+    });
+
+    const toggleButton = getByText('Toggle Content');
+    fireEvent.click(toggleButton);
+
+    // Now, after toggling the content, we expect it to be visible inside PluggableComponent
+    await waitFor(() => {
+      const toggleContent = getByTestId('toggle-content');
+      expect(toggleContent).toBeInTheDocument();
+      expect(toggleContent).toHaveTextContent('Toggle On');
+    });
+  });
 });