feat: Added PluginSlot wrapping UpgradeNotification components (#1366)

* chore: Updated PluginSlot mock to support children and test ids * chore: Updated mocked PluginSlot * chore: Added unit test for MockedPluginSlot * fix: Updated slot name ids
openedx · Apr 19, 2024 · d3ef306 · d3ef306
1 parent 377da57
commit d3ef306
Show file tree

Hide file tree

Showing 7 changed files with 138 additions and 31 deletions.
diff --git a/src/course-home/outline-tab/OutlineTab.jsx b/src/course-home/outline-tab/OutlineTab.jsx
@@ -5,6 +5,7 @@ import { sendTrackEvent } from '@edx/frontend-platform/analytics';
 import { getAuthenticatedUser } from '@edx/frontend-platform/auth';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
 import { Button } from '@openedx/paragon';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { AlertList } from '../../generic/user-messages';
 
 import CourseDates from './widgets/CourseDates';
@@ -123,6 +124,20 @@ const OutlineTab = ({ intl }) => {
     }
   }, [location.search]);
 
+  const upgradeNotificationProps = {
+    offer,
+    verifiedMode,
+    accessExpiration,
+    contentTypeGatingEnabled: datesBannerInfo.contentTypeGatingEnabled,
+    marketingUrl,
+    upsellPageName: 'course_home',
+    userTimezone,
+    timeOffsetMillis,
+    courseId,
+    org,
+    shouldDisplayBorder: true,
+  };
+
   return (
     <>
       <div data-learner-type={learnerType} className="row w-100 mx-0 my-3 justify-content-between">
@@ -194,19 +209,13 @@ const OutlineTab = ({ intl }) => {
               />
             )}
             <CourseTools />
-            <UpgradeNotification
-              offer={offer}
-              verifiedMode={verifiedMode}
-              accessExpiration={accessExpiration}
-              contentTypeGatingEnabled={datesBannerInfo.contentTypeGatingEnabled}
-              marketingUrl={marketingUrl}
-              upsellPageName="course_home"
-              userTimezone={userTimezone}
-              shouldDisplayBorder
-              timeOffsetMillis={timeOffsetMillis}
-              courseId={courseId}
-              org={org}
-            />
+            <PluginSlot
+              id="outline_tab"
+              pluginProps={{ upgradeNotificationProps }}
+              testId="outline-tab-slot"
+            >
+              <UpgradeNotification {...upgradeNotificationProps} />
+            </PluginSlot>
             <CourseDates />
             <CourseHandouts />
           </div>

diff --git a/src/course-home/outline-tab/OutlineTab.test.jsx b/src/course-home/outline-tab/OutlineTab.test.jsx
@@ -132,6 +132,21 @@ describe('Outline Tab', () => {
       expect(expandedSectionNode).toHaveAttribute('aria-expanded', 'true');
     });
 
+    it('renders the Notification wrapper', async () => {
+      const { courseBlocks } = await buildMinimalCourseBlocks(courseId, 'Title', { resumeBlock: true });
+      setTabData({
+        course_blocks: { blocks: courseBlocks.blocks },
+      });
+      await fetchAndRender();
+
+      const pluginSlot = screen.getByTestId('outline-tab-slot');
+      expect(pluginSlot).toBeInTheDocument();
+
+      // The Upgrade Notification should be inside the PluginSlot.
+      const UpgradeNotification = pluginSlot.querySelector('.upgrade-notification');
+      expect(UpgradeNotification).toBeInTheDocument();
+    });
+
     it('handles expand/collapse all button click', async () => {
       await fetchAndRender();
       // Button renders as "Expand All"

diff --git a/...urse/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx b/...urse/new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.jsx
@@ -1,6 +1,7 @@
 import React, { useContext, useEffect, useMemo } from 'react';
 
 import { sendTrackEvent } from '@edx/frontend-platform/analytics';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import { useModel } from '../../../../../../generic/model-store';
 import UpgradeNotification from '../../../../../../generic/upgrade-notification/UpgradeNotification';
 import { WIDGETS } from '../../../../../../constants';
@@ -66,24 +67,32 @@ const NotificationsWidget = () => {
 
   if (hideNotificationbar || !isNotificationbarAvailable) { return null; }
 
+  const upgradeNotificationProps = {
+    offer,
+    verifiedMode,
+    accessExpiration,
+    contentTypeGatingEnabled,
+    marketingUrl,
+    upsellPageName: 'in_course',
+    userTimezone,
+    timeOffsetMillis,
+    courseId,
+    org,
+    upgradeNotificationCurrentState,
+    setupgradeNotificationCurrentState: setUpgradeNotificationCurrentState, // TODO: Check typo in component?
+    shouldDisplayBorder: false,
+    toggleSidebar: () => toggleSidebar(currentSidebar, WIDGETS.NOTIFICATIONS),
+  };
+
   return (
     <div className="border border-light-400 rounded-sm" data-testid="notification-widget">
-      <UpgradeNotification
-        offer={offer}
-        verifiedMode={verifiedMode}
-        accessExpiration={accessExpiration}
-        contentTypeGatingEnabled={contentTypeGatingEnabled}
-        marketingUrl={marketingUrl}
-        upsellPageName="in_course"
-        userTimezone={userTimezone}
-        shouldDisplayBorder={false}
-        timeOffsetMillis={timeOffsetMillis}
-        courseId={courseId}
-        org={org}
-        upgradeNotificationCurrentState={upgradeNotificationCurrentState}
-        setupgradeNotificationCurrentState={setUpgradeNotificationCurrentState}
-        toggleSidebar={() => toggleSidebar(currentSidebar, WIDGETS.NOTIFICATIONS)}
-      />
+      <PluginSlot
+        id="notification_widget"
+        pluginProps={{ upgradeNotificationProps }}
+        testId="notification-widget-slot"
+      >
+        <UpgradeNotification {...upgradeNotificationProps} />
+      </PluginSlot>
     </div>
   );
 };

diff --git a/...new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.jsx b/...new-sidebar/sidebars/discussions-notifications/notifications/NotificationsWidget.test.jsx
@@ -92,9 +92,14 @@ describe('NotificationsWidget', () => {
         <NotificationsWidget />
       </SidebarContext.Provider>,
     );
-    const UpgradeNotification = document.querySelector('.upgrade-notification');
 
+    const pluginSlot = screen.getByTestId('notification-widget-slot');
+    expect(pluginSlot).toBeInTheDocument();
+
+    // The Upgrade Notification should be inside the PluginSlot.
+    const UpgradeNotification = pluginSlot.querySelector('.upgrade-notification');
     expect(UpgradeNotification).toBeInTheDocument();
+
     expect(screen.getByRole('link', { name: 'Upgrade for $149' })).toBeInTheDocument();
     expect(screen.queryByText('You have no new notifications at this time.')).not.toBeInTheDocument();
   });

diff --git a/src/setupTest.js b/src/setupTest.js
@@ -28,11 +28,12 @@ import { fetchCourse, fetchSequence } from './courseware/data';
 import { appendBrowserTimezoneToUrl, executeThunk } from './utils';
 import buildSimpleCourseAndSequenceMetadata from './courseware/data/__factories__/sequenceMetadata.factory';
 import { buildOutlineFromBlocks } from './courseware/data/__factories__/learningSequencesOutline.factory';
+import MockedPluginSlot from './tests/MockedPluginSlot';
 
 jest.mock('@openedx/frontend-plugin-framework', () => ({
   ...jest.requireActual('@openedx/frontend-plugin-framework'),
   Plugin: () => 'Plugin',
-  PluginSlot: () => 'PluginSlot',
+  PluginSlot: MockedPluginSlot,
 }));
 
 jest.mock('@src/generic/plugin-store', () => ({

diff --git a/src/tests/MockedPluginSlot.jsx b/src/tests/MockedPluginSlot.jsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const MockedPluginSlot = ({ children, testId }) => {
+  if (!testId) { return children ?? 'PluginSlot'; } // Return its content if PluginSlot slot is wrapping any.
+
+  return <div data-testid={testId}>{children}</div>;
+};
+
+MockedPluginSlot.displayName = 'PluginSlot';
+
+MockedPluginSlot.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]),
+  testId: PropTypes.string,
+};
+
+MockedPluginSlot.defaultProps = {
+  children: undefined,
+  testId: undefined,
+};
+
+export default MockedPluginSlot;
diff --git a/src/tests/MockedPluginSlot.test.jsx 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 as plain "PluginSlot" text node if no clildren nor testId is', () => {
+    render(<MockedPluginSlot />);
+
+    const component = screen.getByText('PluginSlot');
+    expect(component).toBeInTheDocument();
+  });
+
+  it('renders as the slot children directly if there is content within and no testId', () => {
+    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 a div when a testId is provided ', () => {
+    render(
+      <MockedPluginSlot testId="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();
+  });
+});