@openedx/frontend-app-learner-dashboard 1.0.0-alpha.3 → 1.0.0-alpha.5

package/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.test.jsx

@@ -1,35 +1,20 @@
+import { IntlProvider } from '@openedx/frontend-base';
+import { render, screen } from '@testing-library/react';
 import { when } from 'jest-when';
-import * as ReactShare from 'react-share';
-
-import { useIntl } from '@openedx/frontend-base';
-import { formatMessage, shallow } from '@edx/react-unit-test-utils';
-
-import track from 'tracking';
-import { reduxHooks } from 'hooks';
+import track from '@src/tracking';
+import { reduxHooks } from '@src/hooks';
+import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 
 import { useEmailSettings } from './hooks';
-import SocialShareMenu, { testIds } from './SocialShareMenu';
+import SocialShareMenu from './SocialShareMenu';
 import messages from './messages';
 
-jest.mock('react-share', () => ({
-  FacebookShareButton: () => 'FacebookShareButton',
-  TwitterShareButton: () => 'TwitterShareButton',
-}));
-
-jest.mock('tracking', () => ({
+jest.mock('@src/tracking', () => ({
   socialShare: 'test-social-share-key',
 }));
 
-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
-  useIntl: jest.fn().mockReturnValue({
-    formatMessage: jest.requireActual('@edx/react-unit-test-utils').formatMessage,
-  }),
-}));
-
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
-    useMasqueradeData: jest.fn(),
     useCardCourseData: jest.fn(),
     useCardEnrollmentData: jest.fn(),
     useCardSocialSettingsData: jest.fn(),
@@ -47,9 +32,9 @@ const props = {
 
 const mockHook = (fn, returnValue, options = {}) => {
   if (options.isCardHook) {
-    when(fn).calledWith(props.cardId).mockReturnValueOnce(returnValue);
+    when(fn).calledWith(props.cardId).mockReturnValue(returnValue);
   } else {
-    when(fn).calledWith().mockReturnValueOnce(returnValue);
+    when(fn).calledWith().mockReturnValue(returnValue);
   }
 };
 
@@ -78,7 +63,6 @@ const mockHooks = (returnVals = {}) => {
     { isCardHook: true },
   );
   mockHook(reduxHooks.useCardCourseData, { courseName }, { isCardHook: true });
-  mockHook(reduxHooks.useMasqueradeData, { isMasquerading: !!returnVals.isMasquerading });
   mockHook(
     reduxHooks.useCardSocialSettingsData,
     {
@@ -89,19 +73,19 @@ const mockHooks = (returnVals = {}) => {
   );
 };
 
-let el;
-const render = () => {
-  el = shallow(<SocialShareMenu {...props} />);
-};
+const renderComponent = (isMasquerading = false) => render(
+  <IntlProvider locale="en">
+    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
+      <SocialShareMenu {...props} />
+    </MasqueradeUserContext.Provider>
+  </IntlProvider>,
+);
 
 describe('SocialShareMenu', () => {
   describe('behavior', () => {
     beforeEach(() => {
       mockHooks();
-      render();
-    });
-    it('initializes intl hook', () => {
-      expect(useIntl).toHaveBeenCalledWith();
+      renderComponent();
     });
     it('initializes local hooks', () => {
       when(useEmailSettings).expectCalledWith();
@@ -110,7 +94,6 @@ describe('SocialShareMenu', () => {
       when(reduxHooks.useCardEnrollmentData).expectCalledWith(props.cardId);
       when(reduxHooks.useCardCourseData).expectCalledWith(props.cardId);
       when(reduxHooks.useCardSocialSettingsData).expectCalledWith(props.cardId);
-      when(reduxHooks.useMasqueradeData).expectCalledWith();
       when(reduxHooks.useTrackCourseEvent).expectCalledWith(track.socialShare, props.cardId, 'twitter');
       when(reduxHooks.useTrackCourseEvent).expectCalledWith(track.socialShare, props.cardId, 'facebook');
     });
@@ -118,53 +101,45 @@ describe('SocialShareMenu', () => {
   describe('render', () => {
     it('renders null if exec ed course', () => {
       mockHooks({ isExecEd2UCourse: true });
-      render();
-      expect(el.isEmptyRender()).toEqual(true);
+      renderComponent();
+      const emailSettingsButton = screen.queryByRole('button', { name: messages.emailSettings.defaultMessage });
+      expect(emailSettingsButton).toBeNull();
+      const facebookShareButton = screen.queryByRole('button', { name: 'facebook' });
+      expect(facebookShareButton).toBeNull();
+      const twitterShareButton = screen.queryByRole('button', { name: 'twitter' });
+      expect(twitterShareButton).toBeNull();
     });
     const testEmailSettingsDropdown = (isMasquerading = false) => {
       describe('email settings dropdown', () => {
-        const loadToggle = () => el.instance.findByTestId(testIds.emailSettingsModalToggle)[0];
         it('renders', () => {
-          expect(el.instance.findByTestId(testIds.emailSettingsModalToggle).length).toEqual(1);
+          const emailSettingsButton = screen.getByRole('button', { name: messages.emailSettings.defaultMessage });
+          expect(emailSettingsButton).toBeInTheDocument();
         });
         if (isMasquerading) {
           it('is disabled', () => {
-            expect(loadToggle().props.disabled).toEqual(true);
+            const emailSettingsButton = screen.getByRole('button', { name: messages.emailSettings.defaultMessage });
+            expect(emailSettingsButton).toBeInTheDocument();
+            expect(emailSettingsButton).toHaveAttribute('aria-disabled', 'true');
+            expect(emailSettingsButton).toHaveClass('disabled');
           });
         } else {
           it('is enabled', () => {
-            expect(loadToggle().props.disabled).toEqual(false);
+            const emailSettingsButton = screen.getByRole('button', { name: messages.emailSettings.defaultMessage });
+            expect(emailSettingsButton).toBeEnabled();
           });
         }
-        test('show email settings modal on click', () => {
-          expect(loadToggle().props.onClick).toEqual(props.emailSettings.show);
-        });
       });
     };
     const testFacebookShareButton = () => {
-      test('renders facebook share button with courseName and brand', () => {
-        const button = el.instance.findByType(ReactShare.FacebookShareButton)[0];
-        expect(button.props.url).toEqual(socialShare.facebook.shareUrl);
-        expect(button.props.onClick).toEqual(
-          reduxHooks.useTrackCourseEvent(track.socialShare, props.cardId, 'facebook'),
-        );
-        expect(button.props.title).toEqual(formatMessage(messages.shareQuote, {
-          courseName,
-          socialBrand: socialShare.facebook.socialBrand,
-        }));
+      it('renders facebook share button', () => {
+        const facebookShareButton = screen.getByRole('button', { name: 'facebook' });
+        expect(facebookShareButton).toBeInTheDocument();
       });
     };
     const testTwitterShareButton = () => {
-      test('renders twitter share button with courseName and brand', () => {
-        const button = el.instance.findByType(ReactShare.TwitterShareButton)[0];
-        expect(button.props.url).toEqual(socialShare.twitter.shareUrl);
-        expect(button.props.onClick).toEqual(
-          reduxHooks.useTrackCourseEvent(track.socialShare, props.cardId, 'twitter'),
-        );
-        expect(button.props.title).toEqual(formatMessage(messages.shareQuote, {
-          courseName,
-          socialBrand: socialShare.twitter.socialBrand,
-        }));
+      it('renders twitter share button', () => {
+        const twitterShareButton = screen.getByRole('button', { name: 'twitter' });
+        expect(twitterShareButton).toBeInTheDocument();
       });
     };
     describe('all enabled', () => {
@@ -174,19 +149,7 @@ describe('SocialShareMenu', () => {
           twitter: { isEnabled: true },
           isEmailEnabled: true,
         });
-        render();
-      });
-      describe('email settings dropdown', () => {
-        const loadToggle = () => el.instance.findByTestId(testIds.emailSettingsModalToggle)[0];
-        it('renders', () => {
-          expect(el.instance.findByTestId(testIds.emailSettingsModalToggle).length).toEqual(1);
-        });
-        it('is enabled', () => {
-          expect(loadToggle().props.disabled).toEqual(false);
-        });
-        test('show email settings modal on click', () => {
-          expect(loadToggle().props.onClick).toEqual(props.emailSettings.show);
-        });
+        renderComponent();
       });
       testEmailSettingsDropdown();
       testFacebookShareButton();
@@ -194,42 +157,49 @@ describe('SocialShareMenu', () => {
     });
     describe('only email enabled', () => {
       beforeEach(() => {
+        jest.clearAllMocks();
         mockHooks({ isEmailEnabled: true });
-        render();
+        renderComponent();
       });
       testEmailSettingsDropdown();
       it('does not render facebook or twitter controls', () => {
-        expect(el.instance.findByType(ReactShare.FacebookShareButton).length).toEqual(0);
-        expect(el.instance.findByType(ReactShare.TwitterShareButton).length).toEqual(0);
+        const facebookShareButton = screen.queryByRole('button', { name: 'facebook' });
+        expect(facebookShareButton).toBeNull();
+        const twitterShareButton = screen.queryByRole('button', { name: 'twitter' });
+        expect(twitterShareButton).toBeNull();
       });
-      describe('masquerading', () => {
-        beforeEach(() => {
-          mockHooks({ isEmailEnabled: true, isMasquerading: true });
-          render();
-        });
-        testEmailSettingsDropdown(true);
+    });
+    describe('masquerading', () => {
+      beforeEach(() => {
+        mockHooks({ isEmailEnabled: true });
+        renderComponent(true);
       });
+      testEmailSettingsDropdown(true);
     });
     describe('only facebook enabled', () => {
       beforeEach(() => {
         mockHooks({ facebook: { isEnabled: true } });
-        render();
+        renderComponent();
       });
       testFacebookShareButton();
       it('does not render email or twitter controls', () => {
-        expect(el.instance.findByTestId(testIds.emailSettingsModalToggle).length).toEqual(0);
-        expect(el.instance.findByType(ReactShare.TwitterShareButton).length).toEqual(0);
+        const emailSettingsButton = screen.queryByRole('button', { name: messages.emailSettings.defaultMessage });
+        expect(emailSettingsButton).toBeNull();
+        const twitterShareButton = screen.queryByRole('button', { name: 'twitter' });
+        expect(twitterShareButton).toBeNull();
       });
     });
     describe('only twitter enabled', () => {
       beforeEach(() => {
         mockHooks({ twitter: { isEnabled: true } });
-        render();
+        renderComponent();
       });
       testTwitterShareButton();
       it('does not render email or facebook controls', () => {
-        expect(el.instance.findByTestId(testIds.emailSettingsModalToggle).length).toEqual(0);
-        expect(el.instance.findByType(ReactShare.FacebookShareButton).length).toEqual(0);
+        const emailSettingsButton = screen.queryByRole('button', { name: messages.emailSettings.defaultMessage });
+        expect(emailSettingsButton).toBeNull();
+        const facebookShareButton = screen.queryByRole('button', { name: 'facebook' });
+        expect(facebookShareButton).toBeNull();
       });
     });
   });

package/src/containers/CourseCard/components/CourseCardMenu/hooks.js

@@ -1,15 +1,16 @@
-import { useKeyedState, StrictDict } from '@edx/react-unit-test-utils';
+import { useState } from 'react';
 
-import track from '../../../../tracking';
 import { reduxHooks } from '../../../../hooks';
+import track from '../../../../tracking';
+import { StrictDict } from '../../../../utils';
 
-export const stateKeys = StrictDict({
-  isUnenrollConfirmVisible: 'isUnenrollConfirmVisible',
-  isEmailSettingsVisible: 'isEmailSettingsVisible',
+export const state = StrictDict({
+  isUnenrollConfirmVisible: (val) => useState(val), // eslint-disable-line
+  isEmailSettingsVisible: (val) => useState(val), // eslint-disable-line
 });
 
 export const useUnenrollData = () => {
-  const [isVisible, setIsVisible] = useKeyedState(stateKeys.isUnenrollConfirmVisible, false);
+  const [isVisible, setIsVisible] = state.isUnenrollConfirmVisible(false);
   return {
     show: () => setIsVisible(true),
     hide: () => setIsVisible(false),
@@ -18,7 +19,7 @@ export const useUnenrollData = () => {
 };
 
 export const useEmailSettings = () => {
-  const [isVisible, setIsVisible] = useKeyedState(stateKeys.isEmailSettingsVisible, false);
+  const [isVisible, setIsVisible] = state.isEmailSettingsVisible(false);
   return {
     show: () => setIsVisible(true),
     hide: () => setIsVisible(false),

package/src/containers/CourseCard/components/CourseCardMenu/hooks.test.js

@@ -1,11 +1,10 @@
-import { mockUseKeyedState } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-import track from 'tracking';
+import { reduxHooks } from '@src/hooks';
+import track from '@src/tracking';
+import { MockUseState } from '@src/testUtils';
 
 import * as hooks from './hooks';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardCertificateData: jest.fn(),
     useCardEnrollmentData: jest.fn(),
@@ -19,7 +18,7 @@ reduxHooks.useTrackCourseEvent.mockReturnValue(trackCourseEvent);
 const cardId = 'test-card-id';
 let out;
 
-const state = mockUseKeyedState(hooks.stateKeys);
+const state = new MockUseState(hooks);
 
 describe('CourseCardMenu hooks', () => {
   beforeEach(() => {
@@ -28,7 +27,6 @@ describe('CourseCardMenu hooks', () => {
   });
   describe('useUnenrollData', () => {
     beforeEach(() => {
-      state.mockVals({ isUnenrollConfirmVisible: true });
       out = hooks.useUnenrollData();
     });
     describe('behavior', () => {
@@ -37,9 +35,6 @@ describe('CourseCardMenu hooks', () => {
       });
     });
     describe('output', () => {
-      test('state is loaded from current state value', () => {
-        expect(out.isVisible).toEqual(true);
-      });
       test('show sets state value to true', () => {
         out.show();
         expect(state.setState.isUnenrollConfirmVisible).toHaveBeenCalledWith(true);
@@ -53,7 +48,6 @@ describe('CourseCardMenu hooks', () => {
 
   describe('useEmailSettings', () => {
     beforeEach(() => {
-      state.mockVals({ isEmailSettingsVisible: true });
       out = hooks.useEmailSettings();
     });
     describe('behavior', () => {
@@ -62,9 +56,6 @@ describe('CourseCardMenu hooks', () => {
       });
     });
     describe('output', () => {
-      test('state is loaded from current state value', () => {
-        expect(out.isVisible).toEqual(state.values.isEmailSettingsVisible);
-      });
       test('show sets state value to true', () => {
         out.show();
         expect(state.setState.isEmailSettingsVisible).toHaveBeenCalledWith(true);
@@ -77,7 +68,9 @@ describe('CourseCardMenu hooks', () => {
   });
 
   describe('useHandleToggleDropdown', () => {
-    beforeEach(() => { out = hooks.useHandleToggleDropdown(cardId); });
+    beforeEach(() => {
+      out = hooks.useHandleToggleDropdown(cardId);
+    });
     describe('behavior', () => {
       it('initializes course event tracker with event name and card ID', () => {
         expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(

package/src/containers/CourseCard/components/CourseCardMenu/index.jsx

@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { useIntl } from '@openedx/frontend-base';
 import { Dropdown, Icon, IconButton } from '@openedx/paragon';
 import { MoreVert } from '@openedx/paragon/icons';
-import { StrictDict } from '@edx/react-unit-test-utils';
 
 import MasqueradeUserContext from '../../../../data/contexts/MasqueradeUserContext';
 import EmailSettingsModal from '../../../../containers/EmailSettingsModal';
@@ -21,9 +20,9 @@ import {
 
 import messages from './messages';
 
-export const testIds = StrictDict({
+export const testIds = {
   unenrollModalToggle: 'unenrollModalToggle',
-});
+};
 
 export const CourseCardMenu = ({ cardId }) => {
   const { formatMessage } = useIntl();

package/src/containers/CourseCard/components/CourseCardMenu/index.test.jsx

@@ -1,26 +1,21 @@
 import { when } from 'jest-when';
-
-import { Dropdown } from '@openedx/paragon';
-import { shallow } from '@edx/react-unit-test-utils';
-import { useIntl } from '@openedx/frontend-base';
-
-import EmailSettingsModal from 'containers/EmailSettingsModal';
-import UnenrollConfirmModal from 'containers/UnenrollConfirmModal';
-import { reduxHooks } from 'hooks';
-import SocialShareMenu from './SocialShareMenu';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { IntlProvider } from '@openedx/frontend-base';
+import { reduxHooks } from '@src/hooks';
+import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
 import * as hooks from './hooks';
-import CourseCardMenu, { testIds } from '.';
+import CourseCardMenu from '.';
+import messages from './messages';
 
-jest.mock('@openedx/frontend-base', () => ({
-  ...jest.requireActual('@openedx/frontend-base'),
-  useIntl: jest.fn().mockReturnValue({
-    formatMessage: jest.requireActual('@edx/react-unit-test-utils').formatMessage,
-  }),
+jest.mock('@src/hooks', () => ({
+  reduxHooks: {
+    useCardEnrollmentData: jest.fn(),
+  },
 }));
-jest.mock('hooks', () => ({
-  reduxHooks: { useMasqueradeData: jest.fn(), useCardEnrollmentData: jest.fn() },
-}));
-jest.mock('./SocialShareMenu', () => 'SocialShareMenu');
+jest.mock('./SocialShareMenu', () => jest.fn(() => <div>SocialShareMenu</div>));
+jest.mock('@src/containers/EmailSettingsModal', () => jest.fn(() => <div>EmailSettingsModal</div>));
+jest.mock('@src/containers/UnenrollConfirmModal', () => jest.fn(() => <div>UnenrollConfirmModal</div>));
 jest.mock('./hooks', () => ({
   useEmailSettings: jest.fn(),
   useUnenrollData: jest.fn(),
@@ -44,13 +39,11 @@ const unenrollData = {
   hide: jest.fn().mockName('unenrollHide'),
 };
 
-let el;
-
 const mockHook = (fn, returnValue, options = {}) => {
   if (options.isCardHook) {
-    when(fn).calledWith(props.cardId).mockReturnValueOnce(returnValue);
+    when(fn).calledWith(props.cardId).mockReturnValue(returnValue);
   } else {
-    when(fn).calledWith().mockReturnValueOnce(returnValue);
+    when(fn).calledWith().mockReturnValue(returnValue);
   }
 };
 
@@ -74,7 +67,6 @@ const mockHooks = (returnVals = {}) => {
     },
     { isCardHook: true },
   );
-  mockHook(reduxHooks.useMasqueradeData, { isMasquerading: !!returnVals.isMasquerading });
   mockHook(
     reduxHooks.useCardEnrollmentData,
     { isEmailEnabled: !!returnVals.isEmailEnabled },
@@ -82,18 +74,19 @@ const mockHooks = (returnVals = {}) => {
   );
 };
 
-const render = () => {
-  el = shallow(<CourseCardMenu {...props} />);
-};
+const renderComponent = (isMasquerading = false) => render(
+  <IntlProvider locale="en">
+    <MasqueradeUserContext.Provider value={{ isMasquerading }}>
+      <CourseCardMenu {...props} />
+    </MasqueradeUserContext.Provider>
+  </IntlProvider>
+);
 
 describe('CourseCardMenu', () => {
-  describe('behavior', () => {
+  describe('hooks', () => {
     beforeEach(() => {
       mockHooks();
-      render();
-    });
-    it('initializes intl hook', () => {
-      expect(useIntl).toHaveBeenCalledWith();
+      renderComponent();
     });
     it('initializes local hooks', () => {
       when(hooks.useEmailSettings).expectCalledWith();
@@ -102,54 +95,36 @@ describe('CourseCardMenu', () => {
       when(hooks.useOptionVisibility).expectCalledWith(props.cardId);
     });
     it('initializes redux hook data ', () => {
-      when(reduxHooks.useMasqueradeData).expectCalledWith();
       when(reduxHooks.useCardEnrollmentData).expectCalledWith(props.cardId);
     });
   });
   describe('render', () => {
     it('renders null if showDropdown is false', () => {
       mockHooks();
-      render();
-      expect(el.isEmptyRender()).toEqual(true);
+      renderComponent();
+      const dropdown = screen.queryByRole('button', { name: messages.dropdownAlt.defaultMessage });
+      expect(dropdown).toBeNull();
     });
-    const testHandleToggle = () => {
-      it('displays Dropdown with onToggle=handleToggleDropdown', () => {
-        expect(el.instance.findByType(Dropdown)[0].props.onToggle).toEqual(handleToggleDropdown);
-      });
-    };
-    const testUnenrollConfirmModal = () => {
-      it('displays UnenrollConfirmModal with cardId and unenrollModal data', () => {
-        const modal = el.instance.findByType(UnenrollConfirmModal)[0];
-        expect(modal.props.show).toEqual(unenrollData.isVisible);
-        expect(modal.props.closeModal).toEqual(unenrollData.hide);
-        expect(modal.props.cardId).toEqual(props.cardId);
-      });
-    };
-    const testSocialShareMenu = () => {
-      it('displays SocialShareMenu with cardID and emailSettings', () => {
-        const menu = el.instance.findByType(SocialShareMenu)[0];
-        expect(menu.props.cardId).toEqual(props.cardId);
-        expect(menu.props.emailSettings).toEqual(emailSettings);
-      });
-    };
     describe('show dropdown', () => {
       describe('hide unenroll item and disable email', () => {
-        beforeEach(() => {
-          mockHooks({ shouldShowDropdown: true });
-          render();
-        });
-        test('snapshot', () => {
-          expect(el.snapshot).toMatchSnapshot();
-        });
-        testHandleToggle();
-        testSocialShareMenu();
-        it('does not render unenroll modal toggle', () => {
-          expect(el.instance.findByTestId(testIds.unenrollModalToggle).length).toEqual(0);
-        });
-        it('does not render EmailSettingsModal', () => {
-          expect(el.instance.findByType(EmailSettingsModal).length).toEqual(0);
+        it('displays Dropdown and renders SocialShareMenu and UnenrollConfirmModal', async () => {
+          mockHooks({
+            shouldShowDropdown: true,
+          });
+          renderComponent();
+          const user = userEvent.setup();
+          const dropdown = screen.getByRole('button', { name: messages.dropdownAlt.defaultMessage });
+          expect(dropdown).toBeInTheDocument();
+          await user.click(dropdown);
+          const unenrollOption = screen.queryByRole('button', { name: messages.unenroll.defaultMessage });
+          expect(unenrollOption).toBeNull();
+          const socialShareMenu = screen.getByText('SocialShareMenu');
+          expect(socialShareMenu).toBeInTheDocument();
+          const unenrollConfirmModal = screen.getByText('UnenrollConfirmModal');
+          expect(unenrollConfirmModal).toBeInTheDocument();
+          const emailSettingsModal = screen.queryByText('EmailSettingsModal');
+          expect(emailSettingsModal).toBeNull();
         });
-        testUnenrollConfirmModal();
       });
       describe('show unenroll and enable email', () => {
         const hookProps = {
@@ -157,57 +132,48 @@ describe('CourseCardMenu', () => {
           isEmailEnabled: true,
           shouldShowUnenrollItem: true,
         };
-        beforeEach(() => {
-          mockHooks(hookProps);
-          render();
-        });
-        test('snapshot', () => {
-          expect(el.snapshot).toMatchSnapshot();
-        });
-        testHandleToggle();
-        testSocialShareMenu();
         describe('unenroll modal toggle', () => {
-          let toggle;
           describe('not masquerading', () => {
-            beforeEach(() => {
+            it('renders all components', async () => {
               mockHooks(hookProps);
-              render();
-              [toggle] = el.instance.findByTestId(testIds.unenrollModalToggle);
-            });
-            it('renders unenroll modal toggle', () => {
-              expect(el.instance.findByTestId(testIds.unenrollModalToggle).length).toEqual(1);
-            });
-            test('onClick from unenroll modal hook', () => {
-              expect(toggle.props.onClick).toEqual(unenrollData.show);
-            });
-            test('disabled', () => {
-              expect(toggle.props.disabled).toEqual(false);
+              renderComponent();
+
+              const user = userEvent.setup();
+              const dropdown = screen.getByRole('button', { name: messages.dropdownAlt.defaultMessage });
+              expect(dropdown).toBeInTheDocument();
+              await user.click(dropdown);
+
+              const unenrollOption = screen.getByRole('button', { name: messages.unenroll.defaultMessage });
+              expect(unenrollOption).toBeInTheDocument();
+              const socialShareMenu = screen.getByText('SocialShareMenu');
+              expect(socialShareMenu).toBeInTheDocument();
+              const unenrollConfirmModal = screen.getByText('UnenrollConfirmModal');
+              expect(unenrollConfirmModal).toBeInTheDocument();
+              const emailSettingsModal = screen.getByText('EmailSettingsModal');
+              expect(emailSettingsModal).toBeInTheDocument();
             });
           });
           describe('masquerading', () => {
-            beforeEach(() => {
-              mockHooks({ ...hookProps, isMasquerading: true });
-              render();
-              [toggle] = el.instance.findByTestId(testIds.unenrollModalToggle);
-            });
-            it('renders', () => {
-              expect(el.instance.findByTestId(testIds.unenrollModalToggle).length).toEqual(1);
-            });
-            test('onClick from unenroll modal hook', () => {
-              expect(toggle.props.onClick).toEqual(unenrollData.show);
-            });
-            test('disabled', () => {
-              expect(toggle.props.disabled).toEqual(true);
+            it('renders but unenroll is disabled', async () => {
+              mockHooks({ ...hookProps });
+              renderComponent(true);
+
+              const user = userEvent.setup();
+              const dropdown = screen.getByRole('button', { name: messages.dropdownAlt.defaultMessage });
+              expect(dropdown).toBeInTheDocument();
+              await user.click(dropdown);
+              const unenrollOption = screen.getByRole('button', { name: messages.unenroll.defaultMessage });
+              expect(unenrollOption).toBeInTheDocument();
+              expect(unenrollOption).toHaveAttribute('aria-disabled', 'true');
+              const socialShareMenu = screen.getByText('SocialShareMenu');
+              expect(socialShareMenu).toBeInTheDocument();
+              const unenrollConfirmModal = screen.getByText('UnenrollConfirmModal');
+              expect(unenrollConfirmModal).toBeInTheDocument();
+              const emailSettingsModal = screen.getByText('EmailSettingsModal');
+              expect(emailSettingsModal).toBeInTheDocument();
             });
           });
         });
-        testUnenrollConfirmModal();
-        it('displays EmaiSettingsModal with cardId and emailSettingsModal data', () => {
-          const modal = el.instance.findByType(EmailSettingsModal)[0];
-          expect(modal.props.show).toEqual(emailSettings.isVisible);
-          expect(modal.props.closeModal).toEqual(emailSettings.hide);
-          expect(modal.props.cardId).toEqual(props.cardId);
-        });
       });
     });
   });