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

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

@@ -1,36 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  unenroll: {
-    id: 'learner-dash.courseCardMenu.unenroll',
-    description: 'Course unenroll menu button',
-    defaultMessage: 'Unenroll',
-  },
-  dropdownAlt: {
-    id: 'learner-dash.courseCardMenu.dropdownAlt',
-    description: 'Course action menu alt-text',
-    defaultMessage: 'Course actions dropdown',
-  },
-  emailSettings: {
-    id: 'learner-dash.courseCardMenu.emailSettings',
-    description: 'Course email settings menu button',
-    defaultMessage: 'Email settings',
-  },
-  shareToFacebook: {
-    id: 'learner-dash.courseCardMenu.shareToFacebook',
-    description: 'Course Facebook Sharing button',
-    defaultMessage: 'Share to Facebook',
-  },
-  shareToTwitter: {
-    id: 'learner-dash.courseCardMenu.shareToTwitter',
-    description: 'Course Twitter Sharing button',
-    defaultMessage: 'Share to Twitter',
-  },
-  shareQuote: {
-    id: 'learner-dash.courseCardMenu.shareQuote',
-    description: 'Social sharing quote',
-    defaultMessage: 'I\'m taking {courseName} online with {socialBrand}.  Check it out!',
-  },
-});
-
-export default messages;

package/src/containers/CourseCard/components/CourseCardTitle.jsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import track from '../../../tracking';
-import { reduxHooks } from '../../../hooks';
-import useActionDisabledState from './hooks';
-
-const { courseTitleClicked } = track.course;
-
-export const CourseCardTitle = ({ cardId }) => {
-  const { courseName } = reduxHooks.useCardCourseData(cardId);
-  const { homeUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const handleTitleClicked = reduxHooks.useTrackCourseEvent(
-    courseTitleClicked,
-    cardId,
-    homeUrl,
-  );
-  const { disableCourseTitle } = useActionDisabledState(cardId);
-  return (
-    <h3>
-      {disableCourseTitle ? (
-        <span className="course-card-title" data-testid="CourseCardTitle">{courseName}</span>
-      ) : (
-        <a
-          href={homeUrl}
-          className="course-card-title"
-          data-testid="CourseCardTitle"
-          onClick={handleTitleClicked}
-        >
-          {courseName}
-        </a>
-      )}
-    </h3>
-  );
-};
-
-CourseCardTitle.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-CourseCardTitle.defaultProps = {};
-
-export default CourseCardTitle;

package/src/containers/CourseCard/components/CourseCardTitle.test.jsx

@@ -1,73 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { reduxHooks } from '@src/hooks';
-import useActionDisabledState from './hooks';
-import CourseCardTitle from './CourseCardTitle';
-import track from '@src/tracking';
-
-jest.mock('@src/tracking', () => ({
-  course: {
-    courseTitleClicked: jest.fn().mockName('segment.courseTitleClicked'),
-  },
-}));
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCardCourseData: jest.fn(),
-    useCardCourseRunData: jest.fn(),
-    useTrackCourseEvent: jest.fn(),
-  },
-}));
-
-jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));
-
-describe('CourseCardTitle', () => {
-  const props = {
-    cardId: 'test-card-id',
-  };
-
-  const courseName = 'Test Course';
-  const homeUrl = 'http://test.com';
-  const handleTitleClick = jest.fn();
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-    reduxHooks.useCardCourseData.mockReturnValue({ courseName });
-    reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
-    reduxHooks.useTrackCourseEvent.mockReturnValue(handleTitleClick);
-  });
-
-  it('renders course name as link when not disabled', async () => {
-    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
-    render(<CourseCardTitle {...props} />);
-
-    const user = userEvent.setup();
-    const link = screen.getByRole('link', { name: courseName });
-    expect(link).toHaveAttribute('href', homeUrl);
-
-    await user.click(link);
-    expect(handleTitleClick).toHaveBeenCalled();
-  });
-
-  it('renders course name as span when disabled', () => {
-    useActionDisabledState.mockReturnValue({ disableCourseTitle: true });
-    render(<CourseCardTitle {...props} />);
-
-    const text = screen.getByText(courseName);
-    expect(text).toBeInTheDocument();
-    expect(text.tagName.toLowerCase()).toBe('span');
-  });
-
-  it('uses correct hooks with cardId', () => {
-    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
-    render(<CourseCardTitle {...props} />);
-
-    expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
-    expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
-    expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
-      track.course.courseTitleClicked,
-      props.cardId,
-      homeUrl,
-    );
-  });
-});

package/src/containers/CourseCard/components/RelatedProgramsBadge/hooks.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { useIntl } from '@openedx/frontend-base';
-
-import { StrictDict } from '@src/utils';
-import { reduxHooks } from '@src/hooks';
-
-import messages from './messages';
-import * as module from './hooks';
-
-export const state = StrictDict({
-  isOpen: (val) => React.useState(val), // eslint-disable-line
-});
-
-export const useRelatedProgramsBadgeData = ({ cardId }) => {
-  const [isOpen, setIsOpen] = module.state.isOpen(false);
-  const { formatMessage } = useIntl();
-  const numPrograms = reduxHooks.useCardRelatedProgramsData(cardId).length;
-  let programsMessage = '';
-  if (numPrograms) {
-    programsMessage = formatMessage(
-      numPrograms === 1 ? messages.badgeLabelSingular : messages.badgeLabelPlural,
-      { numPrograms },
-    );
-  }
-
-  return {
-    numPrograms,
-    programsMessage,
-    isOpen,
-    openModal: () => setIsOpen(true),
-    closeModal: () => setIsOpen(false),
-  };
-};
-
-export default useRelatedProgramsBadgeData;

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

@@ -1,90 +0,0 @@
-import { useIntl } from '@openedx/frontend-base';
-
-import { MockUseState } from '@src/testUtils';
-import { reduxHooks } from '@src/hooks';
-
-import * as hooks from './hooks';
-import messages from './messages';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCardRelatedProgramsData: jest.fn(),
-  },
-}));
-jest.mock('@openedx/frontend-base', () => {
-  const { formatMessage } = jest.requireActual('@src/testUtils');
-  return {
-    ...jest.requireActual('@openedx/frontend-base'),
-    useIntl: () => ({
-      formatMessage,
-    }),
-  };
-});
-
-const cardId = 'test-card-id';
-
-const state = new MockUseState(hooks);
-let numPrograms = 27;
-
-describe('RelatedProgramsBadge hooks', () => {
-  const { formatMessage } = useIntl();
-  let out;
-  describe('state values', () => {
-    state.testGetter(state.keys.isOpen);
-  });
-  beforeEach(() => {
-    jest.clearAllMocks();
-    reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({
-      length: numPrograms,
-    });
-  });
-  describe('useRelatedProgramsBadgeData', () => {
-    beforeEach(() => {
-      state.mock();
-      reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({
-        length: numPrograms,
-      });
-      out = hooks.useRelatedProgramsBadgeData({ cardId });
-    });
-    afterEach(state.restore);
-
-    test('openModal sets isOpen to true as useCallback', () => {
-      out.openModal();
-      expect(state.setState.isOpen).toHaveBeenCalledWith(true);
-    });
-
-    test('closeModal sets isOpen to false as useCallback', () => {
-      out.closeModal();
-      expect(state.setState.isOpen).toHaveBeenCalledWith(false);
-    });
-
-    test('isOpen returns state value for isOpen', () => {
-      expect(out.isOpen).toEqual(state.stateVals.isOpen);
-    });
-
-    test('forwards numPrograms from relatedPrograms.length for the cardId', () => {
-      expect(out.numPrograms).toEqual(numPrograms);
-    });
-    test('returns empty programsMessage if no programs', () => {
-      reduxHooks.useCardRelatedProgramsData.mockReset();
-      reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({ length: 0 });
-      out = hooks.useRelatedProgramsBadgeData({ cardId });
-      expect(out.programsMessage).toEqual('');
-    });
-    test('returns badgeLabelSingular programsMessage if 1 programs', () => {
-      reduxHooks.useCardRelatedProgramsData.mockReset();
-      reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce({ length: 1 });
-      out = hooks.useRelatedProgramsBadgeData({ cardId });
-      expect(out.programsMessage).toEqual(formatMessage(
-        messages.badgeLabelSingular,
-        { numPrograms: 1 },
-      ));
-    });
-    test('returns badgeLabelSingular programsMessage if multiple programs', () => {
-      expect(out.programsMessage).toEqual(formatMessage(
-        messages.badgeLabelPlural,
-        { numPrograms },
-      ));
-    });
-  });
-});

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

@@ -1,39 +0,0 @@
-/* eslint-disable quotes */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { Button, Icon } from '@openedx/paragon';
-import { Program } from '@openedx/paragon/icons';
-
-import RelatedProgramsBadgeModal from '@src/containers/RelatedProgramsModal';
-import useRelatedProgramsBadgeData from './hooks';
-
-export const RelatedProgramsBadge = ({ cardId }) => {
-  const {
-    isOpen, openModal, closeModal, numPrograms, programsMessage,
-  } = useRelatedProgramsBadgeData({ cardId });
-
-  if (numPrograms === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <Button
-        data-testid="RelatedProgramsBadge"
-        className="pl-0 mr-0 justify-content-start align-self-start flex-shrink-1"
-        variant="tertiary"
-        size="sm"
-        onClick={openModal}
-      >
-        <Icon src={Program} className="mr-2 pr-0" /> {programsMessage}
-      </Button>
-      <RelatedProgramsBadgeModal {...{ isOpen, closeModal, cardId }} />
-    </>
-  );
-};
-RelatedProgramsBadge.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-export default RelatedProgramsBadge;

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

@@ -1,34 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import { IntlProvider } from '@openedx/frontend-base';
-import RelatedProgramsBadge from '../RelatedProgramsBadge';
-import useRelatedProgramsBadge from './hooks';
-
-jest.mock('@src/containers/RelatedProgramsModal', () => 'RelatedProgramsModal');
-jest.mock('./hooks', () => jest.fn());
-
-const hookProps = {
-  isOpen: true,
-  openModal: jest.fn().mockName('useRelatedProgramsBadge.openModal'),
-  closeModal: jest.fn().mockName('useRelatedProgramsBadge.closeModal'),
-  numPrograms: 3,
-  programsMessage: 'useRelatedProgramsBadge.programsMessage',
-}
-
-const cardId = 'test-card-id';
-
-describe('RelatedProgramsBadge component', () => {
-  it('should not render if no programs', () => {
-    useRelatedProgramsBadge.mockReturnValueOnce({ ...hookProps, numPrograms: 0 });
-    render(<IntlProvider locale="en"><RelatedProgramsBadge cardId={cardId} /></IntlProvider>);
-    const button = screen.queryByRole('button', { name: hookProps.programsMessage });
-    expect(button).toBeNull();
-    const dialog = screen.queryByRole('dialog');
-    expect(dialog).toBeNull();
-  });
-  it('3 programs closed', () => {
-    useRelatedProgramsBadge.mockReturnValue({ ...hookProps, isOpen: false });
-    render(<IntlProvider locale="en"><RelatedProgramsBadge cardId={cardId} /></IntlProvider>);
-    const button = screen.getByRole('button', { name: hookProps.programsMessage });
-    expect(button).toBeInTheDocument();
-  });
-});

package/src/containers/CourseCard/components/RelatedProgramsBadge/messages.js

@@ -1,13 +0,0 @@
-export const messages = {
-  badgeLabelPlural: {
-    id: 'learner-dash.courseCard.relatedProgramsBadge.label.plural',
-    description: 'Label test indicating number of related programs for a course card',
-    defaultMessage: '{numPrograms} Related Programs',
-  },
-  badgeLabelSingular: {
-    id: 'learner-dash.courseCard.relatedProgramsBadge.label.singular',
-    description: 'Label test indicating a single related program for a course card',
-    defaultMessage: '{numPrograms} Related Program',
-  },
-};
-export default messages;

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

@@ -1,33 +0,0 @@
-import { useContext } from 'react';
-
-import MasqueradeUserContext from '../../../data/contexts/MasqueradeUserContext';
-import { reduxHooks } from '../../../hooks';
-
-export const useActionDisabledState = (cardId) => {
-  const { isMasquerading } = useContext(MasqueradeUserContext);
-  const {
-    hasAccess, isAudit, isAuditAccessExpired,
-  } = reduxHooks.useCardEnrollmentData(cardId);
-  const {
-    isEntitlement, isFulfilled, canChange, hasSessions,
-  } = reduxHooks.useCardEntitlementData(cardId);
-
-  const { resumeUrl, homeUrl } = reduxHooks.useCardCourseRunData(cardId);
-
-  const disableBeginCourse = !homeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
-  const disableResumeCourse = !resumeUrl || (isMasquerading || !hasAccess || (isAudit && isAuditAccessExpired));
-  const disableViewCourse = !hasAccess || (isAudit && isAuditAccessExpired);
-  const disableSelectSession = !isEntitlement || isMasquerading || !hasAccess || (!canChange || !hasSessions);
-
-  const disableCourseTitle = (isEntitlement && !isFulfilled) || disableViewCourse;
-
-  return {
-    disableBeginCourse,
-    disableResumeCourse,
-    disableViewCourse,
-    disableSelectSession,
-    disableCourseTitle,
-  };
-};
-
-export default useActionDisabledState;

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

@@ -1,176 +0,0 @@
-import { reduxHooks } from '@src/hooks';
-
-import * as hooks from './hooks';
-import { renderHook } from '@testing-library/react';
-import MasqueradeUserContext from '@src/data/contexts/MasqueradeUserContext';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useMasqueradeData: jest.fn(),
-    useCardEnrollmentData: jest.fn(),
-    useCardEntitlementData: jest.fn(),
-    useCardCourseRunData: jest.fn(),
-  },
-}));
-
-const cardId = 'my-test-course-number';
-
-describe('useActionDisabledState', () => {
-  const defaultData = {
-    isMasquerading: false,
-    isEntitlement: false,
-    isFulfilled: false,
-    canChange: false,
-    hasSessions: false,
-    hasAccess: false,
-    isAudit: false,
-    isAuditAccessExpired: false,
-    resumeUrl: 'resume.url',
-    homeUrl: 'home.url',
-  };
-  const mockHooksData = (args) => {
-    const {
-      isMasquerading,
-      isEntitlement,
-      isFulfilled,
-      canChange,
-      hasSessions,
-      hasAccess,
-      isAudit,
-      isAuditAccessExpired,
-      resumeUrl,
-      homeUrl,
-    } = { ...defaultData, ...args };
-    reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
-    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
-      hasAccess,
-      isAudit,
-      isAuditAccessExpired,
-    });
-    reduxHooks.useCardEntitlementData.mockReturnValueOnce({
-      isEntitlement,
-      isFulfilled,
-      canChange,
-      hasSessions,
-    });
-    reduxHooks.useCardCourseRunData.mockReturnValueOnce({
-      resumeUrl,
-      homeUrl,
-    });
-  };
-
-  const runHook = (masqueradeValue = { isMasquerading: false }) => {
-    const { result } = renderHook(() => hooks.useActionDisabledState(cardId), {
-      wrapper: ({ children }) => (
-        <MasqueradeUserContext.Provider value={masqueradeValue}>
-          {children}
-        </MasqueradeUserContext.Provider>
-      ),
-    });
-    return result.current;
-  };
-  describe('disableBeginCourse', () => {
-    const testDisabled = (data, expected) => {
-      mockHooksData(data);
-      expect(runHook({ isMasquerading: data.isMasquerading ?? false }).disableBeginCourse).toBe(expected);
-    };
-    it('disable when homeUrl is invalid', () => {
-      testDisabled({ homeUrl: null }, true);
-    });
-    it('disable when isMasquerading is true', () => {
-      testDisabled({ isMasquerading: true }, true);
-    });
-    it('disable when hasAccess is false', () => {
-      testDisabled({ hasAccess: false }, true);
-    });
-    it('disable when isAudit is true and isAuditAccessExpired is true', () => {
-      testDisabled({ isAudit: true, isAuditAccessExpired: true }, true);
-    });
-    it('enable when all conditions are met', () => {
-      testDisabled({ hasAccess: true }, false);
-    });
-  });
-  describe('disableResumeCourse', () => {
-    const testDisabled = (data, expected) => {
-      mockHooksData(data);
-      expect(runHook({ isMasquerading: data.isMasquerading ?? false }).disableResumeCourse).toBe(expected);
-    };
-    it('disable when resumeUrl is invalid', () => {
-      testDisabled({ resumeUrl: null }, true);
-    });
-    it('disable when isMasquerading is true', () => {
-      testDisabled({ isMasquerading: true }, true);
-    });
-    it('disable when hasAccess is false', () => {
-      testDisabled({ hasAccess: false }, true);
-    });
-    it('disable when isAudit is true and isAuditAccessExpired is true', () => {
-      testDisabled({ isAudit: true, isAuditAccessExpired: true }, true);
-    });
-    it('enable when all conditions are met', () => {
-      testDisabled({ hasAccess: true }, false);
-    });
-  });
-  describe('disableViewCourse', () => {
-    const testDisabled = (data, expected) => {
-      mockHooksData(data);
-      expect(runHook({ isMasquerading: data.isMasquerading ?? false }).disableViewCourse).toBe(expected);
-    };
-    it('disable when hasAccess is false', () => {
-      testDisabled({ hasAccess: false }, true);
-    });
-    it('disable when isAudit is true and isAuditAccessExpired is true', () => {
-      testDisabled({ isAudit: true, isAuditAccessExpired: true }, true);
-    });
-    it('enable when all conditions are met', () => {
-      testDisabled({ hasAccess: true }, false);
-    });
-  });
-  describe('disableSelectSession', () => {
-    const testDisabled = (data, expected) => {
-      mockHooksData(data);
-      expect(runHook({ isMasquerading: data.isMasquerading ?? false }).disableSelectSession).toBe(expected);
-    };
-    it('disable when isEntitlement is false', () => {
-      testDisabled({ isEntitlement: false }, true);
-    });
-    it('disable when isMasquerading is true', () => {
-      testDisabled({ isMasquerading: true }, true);
-    });
-    it('disable when hasAccess is false', () => {
-      testDisabled({ hasAccess: false }, true);
-    });
-    it('disable when canChange is false', () => {
-      testDisabled({ canChange: false }, true);
-    });
-    it('disable when hasSessions is false', () => {
-      testDisabled({ hasSessions: false }, true);
-    });
-    it('enable when all conditions are met', () => {
-      testDisabled(
-        {
-          isEntitlement: true,
-          hasAccess: true,
-          canChange: true,
-          hasSessions: true,
-        },
-        false,
-      );
-    });
-  });
-  describe('disableCourseTitle', () => {
-    const testDisabled = (data, expected) => {
-      mockHooksData(data);
-      expect(runHook({ isMasquerading: data.isMasquerading ?? false }).disableCourseTitle).toBe(expected);
-    };
-    it('disable when isEntitlement is true and isFulfilled is false', () => {
-      testDisabled({ isEntitlement: true, isFulfilled: false }, true);
-    });
-    it('disable when disableViewCourse is true', () => {
-      testDisabled({ hasAccess: false }, true);
-    });
-    it('enable when all conditions are met', () => {
-      testDisabled({ isEntitlement: true, isFulfilled: true, hasAccess: true }, false);
-    });
-  });
-});

package/src/containers/CourseCard/hooks.js

@@ -1,23 +0,0 @@
-import { useIntl } from '@openedx/frontend-base';
-import { useWindowSize, breakpoints } from '@openedx/paragon';
-import { reduxHooks } from '../../hooks';
-
-export const useIsCollapsed = () => {
-  const { width } = useWindowSize();
-  return width < breakpoints.small.maxWidth;
-};
-
-export const useCardData = ({ cardId }) => {
-  const { formatMessage } = useIntl();
-  const { title, bannerImgSrc } = reduxHooks.useCardCourseData(cardId);
-  const { isEnrolled } = reduxHooks.useCardEnrollmentData(cardId);
-
-  return {
-    isEnrolled,
-    title,
-    bannerImgSrc,
-    formatMessage,
-  };
-};
-
-export default useCardData;

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

@@ -1,58 +0,0 @@
-import { useIntl } from '@openedx/frontend-base';
-
-import { reduxHooks } from '@src/hooks';
-
-import * as hooks from './hooks';
-
-jest.mock('@src/hooks', () => ({
-  reduxHooks: {
-    useCardCourseData: jest.fn(),
-    useCardEnrollmentData: jest.fn(),
-  },
-}));
-
-jest.mock('@openedx/frontend-base', () => {
-  const { formatMessage } = jest.requireActual('@src/testUtils');
-  return {
-    ...jest.requireActual('@openedx/frontend-base'),
-    useIntl: () => ({
-      formatMessage,
-    }),
-  };
-});
-
-const cardId = 'my-test-course-number';
-
-describe('CourseCard hooks', () => {
-  let out;
-  const { formatMessage } = useIntl();
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  describe('useCardData', () => {
-    const courseData = {
-      title: 'fake-title',
-      bannerImgSrc: 'my-banner-url',
-    };
-    const runHook = ({ course = {} }) => {
-      reduxHooks.useCardCourseData.mockReturnValueOnce({
-        ...courseData,
-        ...course,
-      });
-      reduxHooks.useCardEnrollmentData.mockReturnValue({ isEnrolled: 'test-is-enrolled' });
-      out = hooks.useCardData({ cardId });
-    };
-    beforeEach(() => {
-      runHook({});
-    });
-    it('forwards formatMessage from useIntl', () => {
-      expect(out.formatMessage).toEqual(formatMessage);
-    });
-    it('passes course title and banner URL form course data', () => {
-      expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(cardId);
-      expect(out.title).toEqual(courseData.title);
-      expect(out.bannerImgSrc).toEqual(courseData.bannerImgSrc);
-    });
-  });
-});