@openedx/frontend-app-learner-dashboard 1.0.0-alpha.0

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

@@ -0,0 +1,236 @@
+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 { useEmailSettings } from './hooks';
+import SocialShareMenu, { testIds } from './SocialShareMenu';
+import messages from './messages';
+
+jest.mock('react-share', () => ({
+  FacebookShareButton: () => 'FacebookShareButton',
+  TwitterShareButton: () => 'TwitterShareButton',
+}));
+
+jest.mock('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', () => ({
+  reduxHooks: {
+    useMasqueradeData: jest.fn(),
+    useCardCourseData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardSocialSettingsData: jest.fn(),
+    useTrackCourseEvent: jest.fn((...args) => ({ trackCourseEvent: args })),
+  },
+}));
+jest.mock('./hooks', () => ({
+  useEmailSettings: jest.fn(),
+}));
+
+const props = {
+  cardId: 'test-card-id',
+  emailSettings: { show: jest.fn() },
+};
+
+const mockHook = (fn, returnValue, options = {}) => {
+  if (options.isCardHook) {
+    when(fn).calledWith(props.cardId).mockReturnValueOnce(returnValue);
+  } else {
+    when(fn).calledWith().mockReturnValueOnce(returnValue);
+  }
+};
+
+const courseName = 'test-course-name';
+
+const socialShare = {
+  facebook: {
+    isEnabled: true,
+    shareUrl: 'facebook-share-url',
+    socialBrand: 'facebook-social-brand',
+  },
+  twitter: {
+    isEnabled: true,
+    shareUrl: 'twitter-share-url',
+    socialBrand: 'twitter-social-brand',
+  },
+};
+
+const mockHooks = (returnVals = {}) => {
+  mockHook(
+    reduxHooks.useCardEnrollmentData,
+    {
+      isEmailEnabled: !!returnVals.isEmailEnabled,
+      isExecEd2UCourse: !!returnVals.isExecEd2UCourse,
+    },
+    { isCardHook: true },
+  );
+  mockHook(reduxHooks.useCardCourseData, { courseName }, { isCardHook: true });
+  mockHook(reduxHooks.useMasqueradeData, { isMasquerading: !!returnVals.isMasquerading });
+  mockHook(
+    reduxHooks.useCardSocialSettingsData,
+    {
+      facebook: { ...socialShare.facebook, isEnabled: !!returnVals.facebook?.isEnabled },
+      twitter: { ...socialShare.twitter, isEnabled: !!returnVals.twitter?.isEnabled },
+    },
+    { isCardHook: true },
+  );
+};
+
+let el;
+const render = () => {
+  el = shallow(<SocialShareMenu {...props} />);
+};
+
+describe('SocialShareMenu', () => {
+  describe('behavior', () => {
+    beforeEach(() => {
+      mockHooks();
+      render();
+    });
+    it('initializes intl hook', () => {
+      expect(useIntl).toHaveBeenCalledWith();
+    });
+    it('initializes local hooks', () => {
+      when(useEmailSettings).expectCalledWith();
+    });
+    it('initializes redux hook data ', () => {
+      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');
+    });
+  });
+  describe('render', () => {
+    it('renders null if exec ed course', () => {
+      mockHooks({ isExecEd2UCourse: true });
+      render();
+      expect(el.isEmptyRender()).toEqual(true);
+    });
+    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);
+        });
+        if (isMasquerading) {
+          it('is disabled', () => {
+            expect(loadToggle().props.disabled).toEqual(true);
+          });
+        } else {
+          it('is enabled', () => {
+            expect(loadToggle().props.disabled).toEqual(false);
+          });
+        }
+        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,
+        }));
+      });
+    };
+    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,
+        }));
+      });
+    };
+    describe('all enabled', () => {
+      beforeEach(() => {
+        mockHooks({
+          facebook: { isEnabled: true },
+          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);
+        });
+      });
+      testEmailSettingsDropdown();
+      testFacebookShareButton();
+      testTwitterShareButton();
+    });
+    describe('only email enabled', () => {
+      beforeEach(() => {
+        mockHooks({ isEmailEnabled: true });
+        render();
+      });
+      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);
+      });
+      describe('masquerading', () => {
+        beforeEach(() => {
+          mockHooks({ isEmailEnabled: true, isMasquerading: true });
+          render();
+        });
+        testEmailSettingsDropdown(true);
+      });
+    });
+    describe('only facebook enabled', () => {
+      beforeEach(() => {
+        mockHooks({ facebook: { isEnabled: true } });
+        render();
+      });
+      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);
+      });
+    });
+    describe('only twitter enabled', () => {
+      beforeEach(() => {
+        mockHooks({ twitter: { isEnabled: true } });
+        render();
+      });
+      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);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,81 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCardMenu render show dropdown hide unenroll item and disable email snapshot 1`] = `
+<Fragment>
+  <Dropdown
+    onToggle={[MockFunction hooks.handleToggleDropdown]}
+  >
+    <Dropdown.Toggle
+      alt="Course actions dropdown"
+      as="IconButton"
+      iconAs="Icon"
+      id="course-actions-dropdown-test-card-id"
+      src={[MockFunction icons.MoreVert]}
+      variant="primary"
+    />
+    <Dropdown.Menu>
+      <SocialShareMenu
+        cardId="test-card-id"
+        emailSettings={
+          {
+            "hide": [MockFunction emailSettingHide],
+            "isVisible": false,
+            "show": [MockFunction emailSettingShow],
+          }
+        }
+      />
+    </Dropdown.Menu>
+  </Dropdown>
+  <UnenrollConfirmModal
+    cardId="test-card-id"
+    closeModal={[MockFunction unenrollHide]}
+    show={false}
+  />
+</Fragment>
+`;
+
+exports[`CourseCardMenu render show dropdown show unenroll and enable email snapshot 1`] = `
+<Fragment>
+  <Dropdown
+    onToggle={[MockFunction hooks.handleToggleDropdown]}
+  >
+    <Dropdown.Toggle
+      alt="Course actions dropdown"
+      as="IconButton"
+      iconAs="Icon"
+      id="course-actions-dropdown-test-card-id"
+      src={[MockFunction icons.MoreVert]}
+      variant="primary"
+    />
+    <Dropdown.Menu>
+      <Dropdown.Item
+        data-testid="unenrollModalToggle"
+        disabled={false}
+        onClick={[MockFunction unenrollShow]}
+      >
+        Unenroll
+      </Dropdown.Item>
+      <SocialShareMenu
+        cardId="test-card-id"
+        emailSettings={
+          {
+            "hide": [MockFunction emailSettingHide],
+            "isVisible": false,
+            "show": [MockFunction emailSettingShow],
+          }
+        }
+      />
+    </Dropdown.Menu>
+  </Dropdown>
+  <UnenrollConfirmModal
+    cardId="test-card-id"
+    closeModal={[MockFunction unenrollHide]}
+    show={false}
+  />
+  <EmailSettingsModal
+    cardId="test-card-id"
+    closeModal={[MockFunction emailSettingHide]}
+    show={false}
+  />
+</Fragment>
+`;

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

@@ -0,0 +1,58 @@
+import { useKeyedState, StrictDict } from '@edx/react-unit-test-utils';
+
+import track from '../../../../tracking';
+import { reduxHooks } from '../../../../hooks';
+
+export const stateKeys = StrictDict({
+  isUnenrollConfirmVisible: 'isUnenrollConfirmVisible',
+  isEmailSettingsVisible: 'isEmailSettingsVisible',
+});
+
+export const useUnenrollData = () => {
+  const [isVisible, setIsVisible] = useKeyedState(stateKeys.isUnenrollConfirmVisible, false);
+  return {
+    show: () => setIsVisible(true),
+    hide: () => setIsVisible(false),
+    isVisible,
+  };
+};
+
+export const useEmailSettings = () => {
+  const [isVisible, setIsVisible] = useKeyedState(stateKeys.isEmailSettingsVisible, false);
+  return {
+    show: () => setIsVisible(true),
+    hide: () => setIsVisible(false),
+    isVisible,
+  };
+};
+
+export const useHandleToggleDropdown = (cardId) => {
+  const trackCourseEvent = reduxHooks.useTrackCourseEvent(
+    track.course.courseOptionsDropdownClicked,
+    cardId,
+  );
+  return (isOpen) => {
+    if (isOpen) {
+      trackCourseEvent();
+    }
+  };
+};
+
+export const useOptionVisibility = (cardId) => {
+  const { isEnrolled, isEmailEnabled } = reduxHooks.useCardEnrollmentData(cardId);
+  const { twitter, facebook } = reduxHooks.useCardSocialSettingsData(cardId);
+  const { isEarned } = reduxHooks.useCardCertificateData(cardId);
+
+  const shouldShowUnenrollItem = isEnrolled && !isEarned;
+  const shouldShowDropdown = (
+    shouldShowUnenrollItem
+    || isEmailEnabled
+    || facebook.isEnabled
+    || twitter.isEnabled
+  );
+
+  return {
+    shouldShowUnenrollItem,
+    shouldShowDropdown,
+  };
+};

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

@@ -0,0 +1,153 @@
+import { mockUseKeyedState } from '@edx/react-unit-test-utils';
+
+import { reduxHooks } from 'hooks';
+import track from 'tracking';
+
+import * as hooks from './hooks';
+
+jest.mock('hooks', () => ({
+  reduxHooks: {
+    useCardCertificateData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardSocialSettingsData: jest.fn(),
+    useTrackCourseEvent: jest.fn(),
+  },
+}));
+
+const trackCourseEvent = jest.fn();
+reduxHooks.useTrackCourseEvent.mockReturnValue(trackCourseEvent);
+const cardId = 'test-card-id';
+let out;
+
+const state = mockUseKeyedState(hooks.stateKeys);
+
+describe('CourseCardMenu hooks', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    state.mock();
+  });
+  describe('useUnenrollData', () => {
+    beforeEach(() => {
+      state.mockVals({ isUnenrollConfirmVisible: true });
+      out = hooks.useUnenrollData();
+    });
+    describe('behavior', () => {
+      it('initializes isUnenrollConfirmVisible state to false', () => {
+        state.expectInitializedWith(state.keys.isUnenrollConfirmVisible, false);
+      });
+    });
+    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);
+      });
+      test('hide sets state value to false', () => {
+        out.hide();
+        expect(state.setState.isUnenrollConfirmVisible).toHaveBeenCalledWith(false);
+      });
+    });
+  });
+
+  describe('useEmailSettings', () => {
+    beforeEach(() => {
+      state.mockVals({ isEmailSettingsVisible: true });
+      out = hooks.useEmailSettings();
+    });
+    describe('behavior', () => {
+      it('initializes isEmailSettingsVisible state to false', () => {
+        state.expectInitializedWith(state.keys.isEmailSettingsVisible, false);
+      });
+    });
+    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);
+      });
+      test('hide sets state value to false', () => {
+        out.hide();
+        expect(state.setState.isEmailSettingsVisible).toHaveBeenCalledWith(false);
+      });
+    });
+  });
+
+  describe('useHandleToggleDropdown', () => {
+    beforeEach(() => { out = hooks.useHandleToggleDropdown(cardId); });
+    describe('behavior', () => {
+      it('initializes course event tracker with event name and card ID', () => {
+        expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
+          track.course.courseOptionsDropdownClicked,
+          cardId,
+        );
+      });
+    });
+    describe('returned method', () => {
+      it('calls trackCourseEvent iff true is passed', () => {
+        out(false);
+        expect(trackCourseEvent).not.toHaveBeenCalled();
+        out(true);
+        expect(trackCourseEvent).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('useOptionVisibility', () => {
+    const mockReduxHooks = (returnVals = {}) => {
+      reduxHooks.useCardSocialSettingsData.mockReturnValueOnce({
+        facebook: { isEnabled: !!returnVals.facebook?.isEnabled },
+        twitter: { isEnabled: !!returnVals.twitter?.isEnabled },
+      });
+      reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
+        isEnrolled: !!returnVals.isEnrolled,
+        isEmailEnabled: !!returnVals.isEmailEnabled,
+      });
+      reduxHooks.useCardCertificateData.mockReturnValueOnce({
+        isEarned: !!returnVals.isEarned,
+      });
+    };
+    describe('shouldShowUnenrollItem', () => {
+      it('returns true if enrolled and not earned', () => {
+        mockReduxHooks({ isEnrolled: true });
+        expect(hooks.useOptionVisibility(cardId).shouldShowUnenrollItem).toEqual(true);
+      });
+      it('returns false if not enrolled', () => {
+        mockReduxHooks();
+        expect(hooks.useOptionVisibility(cardId).shouldShowUnenrollItem).toEqual(false);
+      });
+      it('returns false if enrolled but also earned', () => {
+        mockReduxHooks({ isEarned: true });
+        expect(hooks.useOptionVisibility(cardId).shouldShowUnenrollItem).toEqual(false);
+      });
+    });
+
+    describe('shouldShowDropdown', () => {
+      it('returns false if not enrolled and both email and socials are disabled', () => {
+        mockReduxHooks();
+        expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(false);
+      });
+      it('returns false if enrolled but already earned, and both email and socials are disabled', () => {
+        mockReduxHooks({ isEnrolled: true, isEarned: true });
+        expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(false);
+      });
+      it('returns true if either social is enabled', () => {
+        mockReduxHooks({ facebook: { isEnabled: true } });
+        expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(true);
+        mockReduxHooks({ twitter: { isEnabled: true } });
+        expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(true);
+      });
+      it('returns true if email is enabled', () => {
+        mockReduxHooks({ isEmailEnabled: true });
+        expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(true);
+      });
+      it('returns true if enrolled and not earned', () => {
+        mockReduxHooks({ isEnrolled: true });
+        expect(hooks.useOptionVisibility(cardId).shouldShowDropdown).toEqual(true);
+      });
+    });
+  });
+});

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

@@ -0,0 +1,85 @@
+import { useContext } from 'react';
+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';
+import UnenrollConfirmModal from '../../../../containers/UnenrollConfirmModal';
+import { reduxHooks } from '../../../../hooks';
+
+import SocialShareMenu from './SocialShareMenu';
+import {
+  useEmailSettings,
+  useUnenrollData,
+  useHandleToggleDropdown,
+  useOptionVisibility,
+} from './hooks';
+
+import messages from './messages';
+
+export const testIds = StrictDict({
+  unenrollModalToggle: 'unenrollModalToggle',
+});
+
+export const CourseCardMenu = ({ cardId }) => {
+  const { formatMessage } = useIntl();
+
+  const emailSettings = useEmailSettings();
+  const unenrollModal = useUnenrollData();
+  const handleToggleDropdown = useHandleToggleDropdown(cardId);
+  const { shouldShowUnenrollItem, shouldShowDropdown } = useOptionVisibility(cardId);
+  const { isMasquerading } = useContext(MasqueradeUserContext);
+  const { isEmailEnabled } = reduxHooks.useCardEnrollmentData(cardId);
+
+  if (!shouldShowDropdown) {
+    return null;
+  }
+
+  return (
+    <>
+      <Dropdown onToggle={handleToggleDropdown}>
+        <Dropdown.Toggle
+          id={`course-actions-dropdown-${cardId}`}
+          as={IconButton}
+          src={MoreVert}
+          iconAs={Icon}
+          variant="primary"
+          alt={formatMessage(messages.dropdownAlt)}
+        />
+        <Dropdown.Menu>
+          {shouldShowUnenrollItem && (
+            <Dropdown.Item
+              disabled={isMasquerading}
+              onClick={unenrollModal.show}
+              data-testid={testIds.unenrollModalToggle}
+            >
+              {formatMessage(messages.unenroll)}
+            </Dropdown.Item>
+          )}
+          <SocialShareMenu cardId={cardId} emailSettings={emailSettings} />
+        </Dropdown.Menu>
+      </Dropdown>
+      <UnenrollConfirmModal
+        show={unenrollModal.isVisible}
+        closeModal={unenrollModal.hide}
+        cardId={cardId}
+      />
+      {isEmailEnabled && (
+        <EmailSettingsModal
+          show={emailSettings.isVisible}
+          closeModal={emailSettings.hide}
+          cardId={cardId}
+        />
+      )}
+    </>
+  );
+};
+CourseCardMenu.propTypes = {
+  cardId: PropTypes.string.isRequired,
+};
+
+export default CourseCardMenu;