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

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

@@ -1,97 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-
-import CourseCardActionSlot from 'slots/CourseCardActionSlot';
-import SelectSessionButton from './SelectSessionButton';
-import BeginCourseButton from './BeginCourseButton';
-import ResumeButton from './ResumeButton';
-import ViewCourseButton from './ViewCourseButton';
-
-import CourseCardActions from '.';
-
-jest.mock('hooks', () => ({
-  reduxHooks: {
-    useCardCourseRunData: jest.fn(),
-    useCardEnrollmentData: jest.fn(),
-    useCardEntitlementData: jest.fn(),
-    useMasqueradeData: jest.fn(),
-  },
-}));
-
-jest.mock('slots/CourseCardActionSlot', () => 'CustomActionButton');
-jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
-jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
-jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
-jest.mock('./ResumeButton', () => 'ResumeButton');
-
-const cardId = 'test-card-id';
-const props = { cardId };
-
-let el;
-describe('CourseCardActions', () => {
-  const mockHooks = ({
-    isEntitlement = false,
-    isExecEd2UCourse = false,
-    isFulfilled = false,
-    isArchived = false,
-    isVerified = false,
-    hasStarted = false,
-    isMasquerading = false,
-  } = {}) => {
-    reduxHooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isFulfilled });
-    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ isArchived });
-    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isExecEd2UCourse, isVerified, hasStarted });
-    reduxHooks.useMasqueradeData.mockReturnValueOnce({ isMasquerading });
-  };
-  const render = () => {
-    el = shallow(<CourseCardActions {...props} />);
-  };
-  describe('behavior', () => {
-    it('initializes redux hooks', () => {
-      mockHooks();
-      render();
-      expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
-      expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
-      expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
-    });
-  });
-  describe('output', () => {
-    describe('entitlement course', () => {
-      it('renders ViewCourseButton if fulfilled', () => {
-        mockHooks({ isEntitlement: true, isFulfilled: true });
-        render();
-        expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
-      });
-      it('renders SelectSessionButton if not fulfilled', () => {
-        mockHooks({ isEntitlement: true });
-        render();
-        expect(el.instance.findByType(SelectSessionButton)[0].props.cardId).toEqual(cardId);
-      });
-    });
-    describe('not entitlement, verified, or exec ed', () => {
-      it('renders CourseCardActionSlot and ViewCourseButton for archived courses', () => {
-        mockHooks({ isArchived: true });
-        render();
-        expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
-        expect(el.instance.findByType(ViewCourseButton)[0].props.cardId).toEqual(cardId);
-      });
-      describe('unstarted courses', () => {
-        it('renders CourseCardActionSlot and BeginCourseButton', () => {
-          mockHooks();
-          render();
-          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
-          expect(el.instance.findByType(BeginCourseButton)[0].props.cardId).toEqual(cardId);
-        });
-      });
-      describe('active courses (started, and not archived)', () => {
-        it('renders CourseCardActionSlot and ResumeButton', () => {
-          mockHooks({ hasStarted: true });
-          render();
-          expect(el.instance.findByType(CourseCardActionSlot)[0].props.cardId).toEqual(cardId);
-          expect(el.instance.findByType(ResumeButton)[0].props.cardId).toEqual(cardId);
-        });
-      });
-    });
-  });
-});

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

@@ -1,26 +0,0 @@
-import { defineMessages } from '@openedx/frontend-base';
-
-const messages = defineMessages({
-  beginCourse: {
-    id: 'learner-dash.courseCard.actions.beginCourse',
-    description: 'Course card begin-course button text',
-    defaultMessage: 'Begin Course',
-  },
-  resume: {
-    id: 'learner-dash.courseCard.actions.resume',
-    description: 'Course card resume button text',
-    defaultMessage: 'Resume',
-  },
-  viewCourse: {
-    id: 'learner-dash.courseCard.actions.viewCourse',
-    description: 'Course card view-course button text',
-    defaultMessage: 'View Course',
-  },
-  selectSession: {
-    id: 'learner-dash.courseCard.actions.selectSession',
-    description: 'Course card select-session button text',
-    defaultMessage: 'Select Session',
-  },
-});
-
-export default messages;

package/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.jsx

@@ -1,95 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import { MailtoLink, Hyperlink } from '@openedx/paragon';
-import { CheckCircle } from '@openedx/paragon/icons';
-import { useIntl } from '@openedx/frontend-base';
-
-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
-
-import messages from './messages';
-
-const { useFormatDate } = utilHooks;
-
-export const CertificateBanner = ({ cardId }) => {
-  const certificate = reduxHooks.useCardCertificateData(cardId);
-  const {
-    isAudit,
-    isVerified,
-  } = reduxHooks.useCardEnrollmentData(cardId);
-  const { isPassing } = reduxHooks.useCardGradeData(cardId);
-  const { isArchived } = reduxHooks.useCardCourseRunData(cardId);
-  const { minPassingGrade, progressUrl } = reduxHooks.useCardCourseRunData(cardId);
-  const { supportEmail, billingEmail } = reduxHooks.usePlatformSettingsData();
-  const { formatMessage } = useIntl();
-  const formatDate = useFormatDate();
-
-  const emailLink = address => <MailtoLink to={address}>{address}</MailtoLink>;
-
-  if (certificate.isRestricted) {
-    return (
-      <Banner variant="danger">
-        {supportEmail ? formatMessage(messages.certRestricted, { supportEmail: emailLink(supportEmail) }) : formatMessage(messages.certRestrictedNoEmail)}
-        {isVerified && '  '}
-        {isVerified && (billingEmail ? formatMessage(messages.certRefundContactBilling, { billingEmail: emailLink(billingEmail) }) : formatMessage(messages.certRefundContactBillingNoEmail))}
-      </Banner>
-    );
-  }
-  if (certificate.isDownloadable) {
-    return (
-      <Banner variant="success" icon={CheckCircle}>
-        {formatMessage(messages.certReady)}
-        {certificate.certPreviewUrl && (
-          <>
-            {'  '}
-            <Hyperlink isInline destination={certificate.certPreviewUrl}>
-              {formatMessage(messages.viewCertificate)}
-            </Hyperlink>
-          </>
-        )}
-      </Banner>
-    );
-  }
-  if (!isPassing) {
-    if (isAudit) {
-      return (
-        <Banner>
-          {formatMessage(messages.passingGrade, { minPassingGrade })}
-        </Banner>
-      );
-    }
-    if (isArchived) {
-      return (
-        <Banner variant="warning">
-          {formatMessage(messages.notEligibleForCert)}
-          {'  '}
-          <Hyperlink isInline destination={progressUrl}>{formatMessage(messages.viewGrades)}</Hyperlink>
-        </Banner>
-      );
-    }
-    return (
-      <Banner variant="warning">
-        {formatMessage(messages.certMinGrade, { minPassingGrade })}
-      </Banner>
-    );
-  }
-  if (certificate.isEarnedButUnavailable) {
-    return (
-      <Banner>
-        {formatMessage(
-          messages.gradeAndCertReadyAfter,
-          { availableDate: formatDate(certificate.availableDate) },
-        )}
-      </Banner>
-    );
-  }
-
-  return null;
-};
-CertificateBanner.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-export default CertificateBanner;

package/src/containers/CourseCard/components/CourseCardBanners/CertificateBanner.test.jsx

@@ -1,227 +0,0 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-import CertificateBanner from './CertificateBanner';
-import messages from './messages';
-
-jest.mock('hooks', () => ({
-  utilHooks: {
-    useFormatDate: jest.fn(() => date => date),
-  },
-  reduxHooks: {
-    useCardCertificateData: jest.fn(),
-    useCardCourseRunData: jest.fn(),
-    useCardEnrollmentData: jest.fn(),
-    useCardGradeData: jest.fn(),
-    usePlatformSettingsData: jest.fn(),
-  },
-}));
-
-jest.mock('components/Banner', () => 'Banner');
-
-describe('CertificateBanner', () => {
-  const props = { cardId: 'cardId' };
-  reduxHooks.useCardCourseRunData.mockReturnValue({
-    minPassingGrade: 0.8,
-    progressUrl: 'progressUrl',
-  });
-
-  const defaultCertificate = {
-    availableDate: '10/20/3030',
-    isRestricted: false,
-    isDownloadable: false,
-    isEarnedButUnavailable: false,
-  };
-  const defaultEnrollment = {
-    isAudit: false,
-    isVerified: false,
-  };
-  const defaultCourseRun = { isArchived: false };
-  const defaultGrade = { isPassing: false };
-  const defaultPlatformSettings = {};
-  const createWrapper = ({
-    certificate = {},
-    enrollment = {},
-    grade = {},
-    courseRun = {},
-    platformSettings = {},
-  }) => {
-    reduxHooks.useCardGradeData.mockReturnValueOnce({ ...defaultGrade, ...grade });
-    reduxHooks.useCardCertificateData.mockReturnValueOnce({ ...defaultCertificate, ...certificate });
-    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
-    reduxHooks.useCardCourseRunData.mockReturnValueOnce({ ...defaultCourseRun, ...courseRun });
-    reduxHooks.usePlatformSettingsData.mockReturnValueOnce({ ...defaultPlatformSettings, ...platformSettings });
-    return shallow(<CertificateBanner {...props} />);
-  };
-  /** TODO: Update tests to validate snapshots **/
-  describe('snapshot', () => {
-    test('is restricted', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted with support email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted with billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        platformSettings: {
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified with support email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified with billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is restricted and verified with support and billing email', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is passing and is downloadable', () => {
-      const wrapper = createWrapper({
-        grade: { isPassing: true },
-        certificate: { isDownloadable: true },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('not passing and is downloadable', () => {
-      const wrapper = createWrapper({
-        grade: { isPassing: false },
-        certificate: { isDownloadable: true },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('not passing and audit', () => {
-      const wrapper = createWrapper({
-        enrollment: {
-          isAudit: true,
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('not passing and has finished', () => {
-      const wrapper = createWrapper({
-        courseRun: { isArchived: true },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('not passing and not audit and not finished', () => {
-      const wrapper = createWrapper({});
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is passing and is earned but unavailable', () => {
-      const wrapper = createWrapper({
-        grade: {
-          isPassing: true,
-        },
-        certificate: {
-          isEarnedButUnavailable: true,
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-    test('is passing and not downloadable render empty', () => {
-      const wrapper = createWrapper({
-        grade: {
-          isPassing: true,
-        },
-      });
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-  describe('behavior', () => {
-    it('is restricted', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
-      });
-      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
-      expect(bannerMessage).toEqual(messages.certRestricted.defaultMessage);
-      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
-    });
-    it('is restricted and verified', () => {
-      const wrapper = createWrapper({
-        certificate: {
-          isRestricted: true,
-        },
-        enrollment: {
-          isVerified: true,
-        },
-        platformSettings: {
-          supportEmail: 'suport@email',
-          billingEmail: 'billing@email',
-        },
-      });
-      const bannerMessage = wrapper.instance.findByType('format-message-function').map(el => el.props.message.defaultMessage).join('\n');
-      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
-      expect(bannerMessage).toContain(messages.certRefundContactBilling.defaultMessage);
-    });
-  });
-});

package/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.jsx

@@ -1,57 +0,0 @@
-/* eslint-disable max-len */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Hyperlink } from '@openedx/paragon';
-import { useIntl } from '@openedx/frontend-base';
-
-import { utilHooks, reduxHooks } from '../../../../hooks';
-import Banner from '../../../../components/Banner';
-
-import messages from './messages';
-
-export const CourseBanner = ({ cardId }) => {
-  const {
-    isVerified,
-    isAuditAccessExpired,
-    coursewareAccess = {},
-  } = reduxHooks.useCardEnrollmentData(cardId);
-  const courseRun = reduxHooks.useCardCourseRunData(cardId);
-  const { formatMessage } = useIntl();
-  const formatDate = utilHooks.useFormatDate();
-
-  const { hasUnmetPrerequisites, isStaff, isTooEarly } = coursewareAccess;
-
-  if (isVerified) { return null; }
-
-  return (
-    <>
-      {isAuditAccessExpired
-        && (
-          <Banner>
-            {formatMessage(messages.auditAccessExpired)}
-            {'  '}
-            <Hyperlink isInline destination="">
-              {formatMessage(messages.findAnotherCourse)}
-            </Hyperlink>
-          </Banner>
-        )}
-
-      {(!isStaff && isTooEarly && courseRun.startDate) && (
-        <Banner>
-          {formatMessage(messages.courseHasNotStarted, {
-            startDate: formatDate(courseRun.startDate),
-          })}
-        </Banner>
-      )}
-
-      {(!isStaff && hasUnmetPrerequisites) && (
-        <Banner>{formatMessage(messages.prerequisitesNotMet)}</Banner>
-      )}
-    </>
-  );
-};
-CourseBanner.propTypes = {
-  cardId: PropTypes.string.isRequired,
-};
-
-export default CourseBanner;

package/src/containers/CourseCard/components/CourseCardBanners/CourseBanner.test.jsx

@@ -1,131 +0,0 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-import { Hyperlink } from '@openedx/paragon';
-
-import { reduxHooks } from 'hooks';
-import { formatMessage } from 'testUtils';
-import { CourseBanner } from './CourseBanner';
-
-import messages from './messages';
-
-jest.mock('components/Banner', () => 'Banner');
-jest.mock('hooks', () => ({
-  utilHooks: {
-    useFormatDate: () => date => date,
-  },
-  reduxHooks: {
-    useCardCourseRunData: jest.fn(),
-    useCardEnrollmentData: jest.fn(),
-  },
-}));
-
-const cardId = 'my-test-course-number';
-
-let el;
-
-const enrollmentData = {
-  isVerified: false,
-  isAuditAccessExpired: false,
-  coursewareAccess: {
-    hasUnmetPrerequisites: false,
-    isStaff: false,
-    isTooEarly: false,
-  },
-};
-const courseRunData = {
-  isActive: false,
-  startDate: '11/11/3030',
-  marketingUrl: 'marketing-url',
-};
-
-const render = (overrides = {}) => {
-  const {
-    courseRun = {},
-    enrollment = {},
-  } = overrides;
-  reduxHooks.useCardCourseRunData.mockReturnValueOnce({
-    ...courseRunData,
-    ...courseRun,
-  });
-  reduxHooks.useCardEnrollmentData.mockReturnValueOnce({
-    ...enrollmentData,
-    ...enrollment,
-  });
-  el = shallow(<CourseBanner cardId={cardId} />);
-};
-
-describe('CourseBanner', () => {
-  test('initializes data with course number from enrollment, course and course run data', () => {
-    render();
-    expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
-    expect(reduxHooks.useCardEnrollmentData).toHaveBeenCalledWith(cardId);
-  });
-  test('no display if learner is verified', () => {
-    render({ enrollment: { isVerified: true } });
-    expect(el.isEmptyRender()).toEqual(true);
-  });
-  describe('audit access expired', () => {
-    beforeEach(() => {
-      render({ enrollment: { isAuditAccessExpired: true } });
-    });
-    test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('messages: auditAccessExpired', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.auditAccessExpired.defaultMessage);
-      expect(el.instance.findByType(Hyperlink)[0].children[0].el).toEqual(messages.findAnotherCourse.defaultMessage);
-    });
-  });
-  describe('unmet prerequisites', () => {
-    beforeEach(() => {
-      render({ enrollment: { coursewareAccess: { hasUnmetPrerequisites: true } } });
-    });
-    test('snapshot: unmetPrerequisites', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-    test('messages: prerequisitesNotMet', () => {
-      expect(el.instance.children[0].children[0].el).toContain(messages.prerequisitesNotMet.defaultMessage);
-    });
-  });
-  describe('too early', () => {
-    describe('no start date', () => {
-      beforeEach(() => {
-        render({ enrollment: { coursewareAccess: { isTooEarly: true } }, courseRun: { startDate: null } });
-      });
-      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
-      test('messages', () => expect(el.instance.children).toEqual([]));
-    });
-    describe('has start date', () => {
-      beforeEach(() => {
-        render({ enrollment: { coursewareAccess: { isTooEarly: true } } });
-      });
-      test('snapshot', () => expect(el.snapshot).toMatchSnapshot());
-
-      test('messages: courseHasNotStarted', () => {
-        expect(el.instance.children[0].children[0].el).toContain(
-          formatMessage(messages.courseHasNotStarted, { startDate: courseRunData.startDate }),
-        );
-      });
-    });
-  });
-  describe('staff', () => {
-    beforeEach(() => {
-      render({ enrollment: { coursewareAccess: { isStaff: true } } });
-    });
-    test('snapshot: isStaff', () => {
-      expect(el.snapshot).toMatchSnapshot();
-    });
-  });
-  test('snapshot: stacking banners', () => {
-    render({
-      enrollment: {
-        coursewareAccess: {
-          isStaff: true,
-          isTooEarly: true,
-          hasUnmetPrerequisites: true,
-        },
-      },
-    });
-    expect(el.snapshot).toMatchSnapshot();
-  });
-});

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

@@ -1,58 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CreditBanner component render with error state snapshot 1`] = `
-<Banner
-  variant="danger"
->
-  <p
-    className="credit-error-msg"
-    data-testid="credit-error-msg"
-  >
-    <format-message-function
-      message={
-        {
-          "defaultMessage": "An error occurred with this transaction.  For help, contact {supportEmailLink}.",
-          "description": "",
-          "id": "learner-dash.courseCard.banners.credit.error",
-        }
-      }
-      values={
-        {
-          "supportEmailLink": <MailtoLink
-            to="test-support-email"
-          >
-            test-support-email
-          </MailtoLink>,
-        }
-      }
-    />
-  </p>
-  <ContentComponent
-    cardId="test-card-id"
-  />
-</Banner>
-`;
-
-exports[`CreditBanner component render with error state with no email snapshot 1`] = `
-<Banner
-  variant="danger"
->
-  <p
-    className="credit-error-msg"
-    data-testid="credit-error-msg"
-  >
-    An error occurred with this transaction.
-  </p>
-  <ContentComponent
-    cardId="test-card-id"
-  />
-</Banner>
-`;
-
-exports[`CreditBanner component render with no error state snapshot 1`] = `
-<Banner>
-  <ContentComponent
-    cardId="test-card-id"
-  />
-</Banner>
-`;