From d7a5b222ee224a4eaf6cfb53aa972e3b01ec9d91 Mon Sep 17 00:00:00 2001
From: Marcos <rigoli82@gmail.com>
Date: Fri, 9 Aug 2024 11:17:34 -0300
Subject: [PATCH] feat: Added PluginSlot to wrap IDVerificationPage component

---
 package.json                        |  1 +
 src/index.jsx                       | 10 ++++++-
 src/setupTest.js                    |  8 ++++++
 src/tests/MockedPluginSlot.jsx      | 26 +++++++++++++++++
 src/tests/MockedPluginSlot.test.jsx | 43 +++++++++++++++++++++++++++++
 5 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 src/tests/MockedPluginSlot.jsx
 create mode 100644 src/tests/MockedPluginSlot.test.jsx

diff --git a/package.json b/package.json
index 9a8fbb1..3066b1f 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "build": "fedx-scripts webpack",
     "i18n_extract": "fedx-scripts formatjs extract",
     "lint": "fedx-scripts eslint --ext .js --ext .jsx .",
+    "lint:fix": "npm run lint -- --fix",
     "snapshot": "fedx-scripts jest --updateSnapshot",
     "start": "fedx-scripts webpack-dev-server --progress",
     "test": "TZ=UTC fedx-scripts jest --coverage --passWithNoTests"
diff --git a/src/index.jsx b/src/index.jsx
index cef8bc4..b966bfa 100755
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -12,6 +12,7 @@ import { Route, Routes, Outlet } from 'react-router-dom';
 
 import Header from '@edx/frontend-component-header';
 import FooterSlot from '@openedx/frontend-slot-footer';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
 import configureStore from './data/configureStore';
 import AccountSettingsPage, { NotFoundPage } from './account-settings';
@@ -40,7 +41,14 @@ subscribe(APP_READY, () => {
         >
           <Route path="/notifications/:courseId" element={<NotificationPreferences />} />
           <Route path="/notifications" element={<NotificationCourses />} />
-          <Route path="/id-verification/*" element={<IdVerificationPage />} />
+          <Route
+            path="/id-verification/*"
+            element={(
+              <PluginSlot id="id_verification_page_plugin">
+                <IdVerificationPage />
+              </PluginSlot>
+          )}
+          />
           <Route path="/" element={<AccountSettingsPage />} />
           <Route path="/notfound" element={<NotFoundPage />} />
           <Route path="*" element={<NotFoundPage />} />
diff --git a/src/setupTest.js b/src/setupTest.js
index 95b3726..e2e601f 100755
--- a/src/setupTest.js
+++ b/src/setupTest.js
@@ -1,3 +1,11 @@
 import 'core-js/stable';
 import 'regenerator-runtime/runtime';
 import '@testing-library/jest-dom';
+
+import MockedPluginSlot from './tests/MockedPluginSlot';
+
+jest.mock('@openedx/frontend-plugin-framework', () => ({
+  ...jest.requireActual('@openedx/frontend-plugin-framework'),
+  Plugin: () => 'Plugin',
+  PluginSlot: MockedPluginSlot,
+}));
diff --git a/src/tests/MockedPluginSlot.jsx b/src/tests/MockedPluginSlot.jsx
new file mode 100644
index 0000000..e86952e
--- /dev/null
+++ b/src/tests/MockedPluginSlot.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const MockedPluginSlot = ({ children, id }) => (
+  <div data-testid={id}>
+    PluginSlot_{id}
+    { children && <div>{children}</div> }
+  </div>
+);
+
+MockedPluginSlot.displayName = 'PluginSlot';
+
+MockedPluginSlot.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+  id: PropTypes.string,
+};
+
+MockedPluginSlot.defaultProps = {
+  children: undefined,
+  id: undefined,
+};
+
+export default MockedPluginSlot;
diff --git a/src/tests/MockedPluginSlot.test.jsx b/src/tests/MockedPluginSlot.test.jsx
new file mode 100644
index 0000000..b830b68
--- /dev/null
+++ b/src/tests/MockedPluginSlot.test.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import MockedPluginSlot from './MockedPluginSlot';
+
+describe('MockedPluginSlot', () => {
+  it('renders mock plugin with "PluginSlot" text', () => {
+    render(<MockedPluginSlot id="test_plugin" />);
+
+    const component = screen.getByText('PluginSlot_test_plugin');
+    expect(component).toBeInTheDocument();
+  });
+
+  it('renders as the slot children directly if there is content within', () => {
+    render(
+      <div role="article">
+        <MockedPluginSlot>
+          <q role="note">How much wood could a woodchuck chuck if a woodchuck could chuck wood?</q>
+        </MockedPluginSlot>
+      </div>,
+    );
+
+    const component = screen.getByRole('article');
+    expect(component).toBeInTheDocument();
+
+    // Direct children
+    const quote = component.querySelector(':scope > q');
+    expect(quote.getAttribute('role')).toBe('note');
+  });
+
+  it('renders mock plugin with a data-testid ', () => {
+    render(
+      <MockedPluginSlot id="guybrush">
+        <q role="note">I am selling these fine leather jackets.</q>
+      </MockedPluginSlot>,
+    );
+
+    const component = screen.getByTestId('guybrush');
+    expect(component).toBeInTheDocument();
+
+    const quote = component.querySelector('[role=note]');
+    expect(quote).toBeInTheDocument();
+  });
+});