components unit test (#23)

Co-authored-by: Ben Warzeski <bwarzeski@edx.org>

src/containers/CourseCard/components/CourseCardActions/BeginCourseButton.test.jsx

@@ -0,0 +1,36 @@
+import { shallow } from 'enzyme';
+
+import { hooks } from 'data/redux';
+import BeginCourseButton from './BeginCourseButton';
+
+jest.mock('data/redux', () => ({
+  hooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+  },
+}));
+
+describe('BeginCourseButton', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  hooks.useCardCourseRunData.mockReturnValue({
+    homeUrl: 'homeUrl',
+  });
+  describe('snapshot', () => {
+    test('renders default button when learner has access to the course', () => {
+      hooks.useCardEnrollmentData.mockReturnValueOnce({
+        hasAccess: true,
+      });
+      const wrapper = shallow(<BeginCourseButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('renders disabled button when learner does not have access to the course', () => {
+      hooks.useCardEnrollmentData.mockReturnValueOnce({
+        hasAccess: false,
+      });
+      const wrapper = shallow(<BeginCourseButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardActions/ResumeButton.test.jsx

@@ -0,0 +1,56 @@
+import { shallow } from 'enzyme';
+
+import { hooks } from 'data/redux';
+import ResumeButton from './ResumeButton';
+
+jest.mock('data/redux', () => ({
+  hooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+  },
+}));
+
+describe('ResumeButton', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  hooks.useCardCourseRunData.mockReturnValue({
+    resumeUrl: 'resumeUrl',
+  });
+  describe('snapshot', () => {
+    test('renders default button when learner has access to the course', () => {
+      hooks.useCardEnrollmentData.mockReturnValueOnce({
+        hasAccess: true,
+      });
+      const wrapper = shallow(<ResumeButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('renders disabled button when learner does not have access to the course', () => {
+      hooks.useCardEnrollmentData.mockReturnValueOnce({
+        hasAccess: false,
+      });
+      const wrapper = shallow(<ResumeButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('behavior', () => {
+    it('renders disabled button when audit access expired', () => {
+      hooks.useCardEnrollmentData.mockReturnValueOnce({
+        hasAccess: true,
+        isAudit: true,
+        isAuditAccessExpired: true,
+      });
+      const wrapper = shallow(<ResumeButton {...props} />);
+      expect(wrapper.prop('disabled')).toEqual(true);
+    });
+    it('renders enabled button when audit access not expired', () => {
+      hooks.useCardEnrollmentData.mockReturnValueOnce({
+        hasAccess: true,
+        isAudit: true,
+        isAuditAccessExpired: false,
+      });
+      const wrapper = shallow(<ResumeButton {...props} />);
+      expect(wrapper.prop('disabled')).toEqual(false);
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardActions/SelectSessionButton.test.jsx

@@ -0,0 +1,61 @@
+import { shallow } from 'enzyme';
+
+import { hooks } from 'data/redux';
+import SelectSessionButton from './SelectSessionButton';
+
+jest.mock('data/redux', () => ({
+  hooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+    useUpdateSelectSessionModalCallback: () => jest.fn().mockName('mockOpenSessionModal'),
+  },
+}));
+
+describe('SelectSessionButton', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  hooks.useCardCourseRunData.mockReturnValue({
+    resumeUrl: 'resumeUrl',
+  });
+  const createWrapper = ({ hasAccess, canChange, hasSessions }) => {
+    hooks.useCardEnrollmentData.mockReturnValueOnce({
+      hasAccess,
+    });
+    hooks.useCardEntitlementData.mockReturnValueOnce({
+      canChange,
+      hasSessions,
+    });
+    return shallow(<SelectSessionButton {...props} />);
+  };
+  describe('snapshot', () => {
+    test('renders default button', () => {
+      const wrapper = createWrapper({ hasAccess: true, canChange: true, hasSessions: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+    it('renders disabled button when user does not have access to the course', () => {
+      const wrapper = createWrapper({ hasAccess: false, canChange: true, hasSessions: true });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('behavior', () => {
+    it('default render', () => {
+      const wrapper = createWrapper({ hasAccess: true, canChange: true, hasSessions: true });
+      expect(wrapper.prop('disabled')).toEqual(false);
+      expect(wrapper.prop('href')).toEqual('resumeUrl');
+      expect(wrapper.prop('onClick').getMockName())
+        .toEqual(hooks.useUpdateSelectSessionModalCallback().getMockName());
+    });
+    it('disabled if learner doesn\'t have access, cannot change sessions, or does not have sessions', () => {
+      const noAccess = createWrapper({ hasAccess: false, canChange: true, hasSessions: true });
+      expect(noAccess.prop('disabled')).toEqual(true);
+
+      const cannotChange = createWrapper({ hasAccess: true, canChange: false, hasSessions: true });
+      expect(cannotChange.prop('disabled')).toEqual(true);
+
+      const noSessions = createWrapper({ hasAccess: true, canChange: true, hasSessions: false });
+      expect(noSessions.prop('disabled')).toEqual(true);
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardActions/UpgradeButton.test.jsx

@@ -0,0 +1,31 @@
+import { shallow } from 'enzyme';
+
+import { hooks } from 'data/redux';
+import UpgradeButton from './UpgradeButton';
+
+jest.mock('data/redux', () => ({
+  hooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+  },
+}));
+
+describe('UpgradeButton', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  const upgradeUrl = 'upgradeUrl';
+  hooks.useCardCourseRunData.mockReturnValue({ upgradeUrl });
+  describe('snapshot', () => {
+    test('can upgrade', () => {
+      hooks.useCardEnrollmentData.mockReturnValueOnce({ canUpgrade: true });
+      const wrapper = shallow(<UpgradeButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('cannot upgrade', () => {
+      hooks.useCardEnrollmentData.mockReturnValueOnce({ canUpgrade: false });
+      const wrapper = shallow(<UpgradeButton {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardActions/ViewCourseButton.test.jsx

@@ -0,0 +1,49 @@
+import { shallow } from 'enzyme';
+
+import { hooks } from 'data/redux';
+import ViewCourseButton from './ViewCourseButton';
+
+jest.mock('data/redux', () => ({
+  hooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+  },
+}));
+
+describe('ViewCourseButton', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  const marketingUrl = 'marketingUrl';
+  hooks.useCardCourseRunData.mockReturnValue({ marketingUrl });
+  const createWrapper = ({ hasAccess, isEntitlement, isExpired }) => {
+    hooks.useCardEnrollmentData.mockReturnValueOnce({ hasAccess });
+    hooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isExpired });
+    return shallow(<ViewCourseButton {...props} />);
+  };
+  describe('snapshot', () => {
+    test('default button', () => {
+      const wrapper = createWrapper({ hasAccess: true, isEntitlement: false, isExpired: false });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('disabled button', () => {
+      const wrapper = createWrapper({ hasAccess: false, isEntitlement: false, isExpired: false });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('behavior', () => {
+    it('disabled button without access', () => {
+      const wrapper = createWrapper({ hasAccess: false, isEntitlement: false, isExpired: false });
+      expect(wrapper.prop('disabled')).toEqual(true);
+    });
+    it('disabled button with access', () => {
+      const wrapper = createWrapper({ hasAccess: true, isEntitlement: true, isExpired: true });
+      expect(wrapper.prop('disabled')).toEqual(true);
+    });
+    it('enabled button', () => {
+      const wrapper = createWrapper({ hasAccess: true, isEntitlement: false, isExpired: false });
+      expect(wrapper.prop('disabled')).toEqual(false);
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardActions/__snapshots__/BeginCourseButton.test.jsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BeginCourseButton snapshot renders default button when learner has access to the course 1`] = `
+<Button
+  as="a"
+  disabled={false}
+  href="homeUrl"
+>
+  Begin Course
+</Button>
+`;
+
+exports[`BeginCourseButton snapshot renders disabled button when learner does not have access to the course 1`] = `
+<Button
+  as="a"
+  disabled={true}
+  href="homeUrl"
+>
+  Begin Course
+</Button>
+`;

src/containers/CourseCard/components/CourseCardActions/__snapshots__/ResumeButton.test.jsx.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ResumeButton snapshot renders default button when learner has access to the course 1`] = `
+<Button
+  as="a"
+  href="resumeUrl"
+>
+  Resume
+</Button>
+`;
+
+exports[`ResumeButton snapshot renders disabled button when learner does not have access to the course 1`] = `
+<Button
+  as="a"
+  disabled={true}
+  href="resumeUrl"
+>
+  Resume
+</Button>
+`;

src/containers/CourseCard/components/CourseCardActions/__snapshots__/SelectSessionButton.test.jsx.snap

@@ -0,0 +1,23 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SelectSessionButton snapshot renders default button 1`] = `
+<Button
+  as="a"
+  disabled={false}
+  href="resumeUrl"
+  onClick={[MockFunction mockOpenSessionModal]}
+>
+  Resume
+</Button>
+`;
+
+exports[`SelectSessionButton snapshot renders disabled button when user does not have access to the course 1`] = `
+<Button
+  as="a"
+  disabled={true}
+  href="resumeUrl"
+  onClick={[MockFunction mockOpenSessionModal]}
+>
+  Resume
+</Button>
+`;

src/containers/CourseCard/components/CourseCardActions/__snapshots__/UpgradeButton.test.jsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UpgradeButton snapshot can upgrade 1`] = `
+<Button
+  as="a"
+  disabled={false}
+  href="upgradeUrl"
+  iconBefore={[MockFunction icons.Locked]}
+  variant="outline-primary"
+>
+  Upgrade
+</Button>
+`;
+
+exports[`UpgradeButton snapshot cannot upgrade 1`] = `
+<Button
+  as="a"
+  disabled={true}
+  href="upgradeUrl"
+  iconBefore={[MockFunction icons.Locked]}
+  variant="outline-primary"
+>
+  Upgrade
+</Button>
+`;

src/containers/CourseCard/components/CourseCardActions/__snapshots__/ViewCourseButton.test.jsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ViewCourseButton snapshot default button 1`] = `
+<Button
+  as="a"
+  disabled={false}
+  href="marketingUrl"
+>
+  View Course
+</Button>
+`;
+
+exports[`ViewCourseButton snapshot disabled button 1`] = `
+<Button
+  as="a"
+  disabled={true}
+  href="marketingUrl"
+>
+  View Course
+</Button>
+`;

src/containers/CourseCard/components/CourseCardActions/__snapshots__/index.test.jsx.snap

@@ -1,36 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CourseCard Actions component does not render secondary button if null is returned for secondary props 1`] = `
+exports[`CourseCardActions snapshot show begin course button when verified and not entitlement and has started 1`] = `
 <ActionRow
   data-test-id="CourseCardActions"
 >
-  <Button
-    cardId="test-course-number"
-    prop1="primary-prop1"
-    prop2="primary-prop2"
-  >
-    primary-children
-  </Button>
+  <BeginCourseButton
+    cardId="cardId"
+  />
 </ActionRow>
 `;
 
-exports[`CourseCard Actions component loads primary and secondary button props from hook 1`] = `
+exports[`CourseCardActions snapshot show resume button when verified and not entitlement and has started 1`] = `
 <ActionRow
   data-test-id="CourseCardActions"
 >
-  <Button
-    cardId="test-course-number"
-    prop1="primary-prop1"
-    prop2="primary-prop2"
-  >
-    primary-children
-  </Button>
-  <Button
-    cardId="test-course-number"
-    prop1="primary-prop1"
-    prop2="primary-prop2"
-  >
-    primary-children
-  </Button>
+  <ResumeButton
+    cardId="cardId"
+  />
+</ActionRow>
+`;
+
+exports[`CourseCardActions snapshot show select session button when not verified and entitlement 1`] = `
+<ActionRow
+  data-test-id="CourseCardActions"
+>
+  <SelectSessionButton
+    cardId="cardId"
+  />
+</ActionRow>
+`;
+
+exports[`CourseCardActions snapshot show upgrade button when not verified and not entitlement 1`] = `
+<ActionRow
+  data-test-id="CourseCardActions"
+>
+  <UpgradeButton
+    cardId="cardId"
+  />
+  <BeginCourseButton
+    cardId="cardId"
+  />
+</ActionRow>
+`;
+
+exports[`CourseCardActions snapshot show view course button when not verified and entitlement and fulfilled 1`] = `
+<ActionRow
+  data-test-id="CourseCardActions"
+>
+  <ViewCourseButton
+    cardId="cardId"
+  />
 </ActionRow>
 `;

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

@@ -0,0 +1,103 @@
+import { shallow } from 'enzyme';
+
+import { hooks } from 'data/redux';
+import CourseCardActions from '.';
+
+jest.mock('data/redux', () => ({
+  hooks: {
+    useCardCourseRunData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardEntitlementData: jest.fn(),
+  },
+}));
+
+jest.mock('./UpgradeButton', () => 'UpgradeButton');
+jest.mock('./SelectSessionButton', () => 'SelectSessionButton');
+jest.mock('./ViewCourseButton', () => 'ViewCourseButton');
+jest.mock('./BeginCourseButton', () => 'BeginCourseButton');
+jest.mock('./ResumeButton', () => 'ResumeButton');
+
+describe('CourseCardActions', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  const createWrapper = ({
+    isEntitlement, isFulfilled, isArchived, isVerified, hasStarted,
+  }) => {
+    hooks.useCardEntitlementData.mockReturnValueOnce({ isEntitlement, isFulfilled });
+    hooks.useCardCourseRunData.mockReturnValueOnce({ isArchived });
+    hooks.useCardEnrollmentData.mockReturnValueOnce({ isVerified, hasStarted });
+    return shallow(<CourseCardActions {...props} />);
+  };
+  describe('snapshot', () => {
+    test('show upgrade button when not verified and not entitlement', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('show select session button when not verified and entitlement', () => {
+      const wrapper = createWrapper({
+        isEntitlement: true, isFulfilled: false, isArchived: false, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('show begin course button when verified and not entitlement and has started', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: true, hasStarted: false,
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('show resume button when verified and not entitlement and has started', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: true, hasStarted: true,
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('show view course button when not verified and entitlement and fulfilled', () => {
+      const wrapper = createWrapper({
+        isEntitlement: true, isFulfilled: true, isArchived: false, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
+  describe('behavior', () => {
+    it('show upgrade button when not verified and not entitlement', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper.find('UpgradeButton')).toHaveLength(1);
+    });
+    it('show select session button when not verified and entitlement', () => {
+      const wrapper = createWrapper({
+        isEntitlement: true, isFulfilled: false, isArchived: false, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper.find('SelectSessionButton')).toHaveLength(1);
+    });
+    it('show begin course button when verified and not entitlement and has started', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: true, hasStarted: false,
+      });
+      expect(wrapper.find('BeginCourseButton')).toHaveLength(1);
+    });
+    it('show resume button when verified and not entitlement and has started', () => {
+      const wrapper = createWrapper({
+        isEntitlement: false, isFulfilled: false, isArchived: false, isVerified: true, hasStarted: true,
+      });
+      expect(wrapper.find('ResumeButton')).toHaveLength(1);
+    });
+    it('show view course button when not verified and entitlement and fulfilled', () => {
+      const wrapper = createWrapper({
+        isEntitlement: true, isFulfilled: true, isArchived: false, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper.find('ViewCourseButton')).toHaveLength(1);
+    });
+    it('show view course button when not verified and entitlement and fulfilled and archived', () => {
+      const wrapper = createWrapper({
+        isEntitlement: true, isFulfilled: true, isArchived: true, isVerified: false, hasStarted: false,
+      });
+      expect(wrapper.find('ViewCourseButton')).toHaveLength(1);
+    });
+  });
+});

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

@@ -0,0 +1,151 @@
+import { shallow } from 'enzyme';
+
+import { hooks } from 'data/redux';
+import CertificateBanner from './CertificateBanner';
+import messages from './messages';
+
+jest.mock('data/redux', () => ({
+  hooks: {
+    useCardCertificateData: jest.fn(),
+    useCardEnrollmentData: jest.fn(),
+    useCardGradeData: jest.fn(),
+    useCardCourseRunData: jest.fn(),
+    usePlatformSettingsData: jest.fn(),
+  },
+}));
+
+jest.mock('Components/Banner', () => 'Banner');
+
+describe('CertificateBanner', () => {
+  const props = {
+    cardId: 'cardId',
+  };
+  hooks.usePlatformSettingsData.mockReturnValue({
+    supportEmail: 'suport@email',
+    billingEmail: 'billing@email',
+  });
+  hooks.useCardCourseRunData.mockReturnValue({
+    minPassingGrade: 0.8,
+    progressUrl: 'progressUrl',
+  });
+
+  const defaultCertificate = {
+    isRestricted: false,
+    isDownloadable: false,
+    isEarnedButUnavailable: false,
+  };
+  const defaultEnrollment = {
+    isAudit: false,
+    isVerified: false,
+    hasFinished: false,
+  };
+  const defaultGrade = {
+    isPassing: false,
+  };
+  const createWrapper = ({
+    certificate = {},
+    enrollment = {},
+    grade = {},
+  }) => {
+    hooks.useCardGradeData.mockReturnValueOnce({ ...defaultGrade, ...grade });
+    hooks.useCardCertificateData.mockReturnValueOnce({ ...defaultCertificate, ...certificate });
+    hooks.useCardEnrollmentData.mockReturnValueOnce({ ...defaultEnrollment, ...enrollment });
+    return shallow(<CertificateBanner {...props} />);
+  };
+  describe('snapshot', () => {
+    test('is restricted', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('is restricted and verified', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+        enrollment: {
+          isVerified: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('not passing and audit', () => {
+      const wrapper = createWrapper({
+        enrollment: {
+          isAudit: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('not passing and has finished', () => {
+      const wrapper = createWrapper({
+        enrollment: {
+          hasFinished: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('not passing and not audit and not finished', () => {
+      const wrapper = createWrapper({});
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('is passing and is downloadable', () => {
+      const wrapper = createWrapper({
+        grade: {
+          isPassing: true,
+        },
+        certificate: {
+          isDownloadable: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('is passing and is earned but unavailable', () => {
+      const wrapper = createWrapper({
+        grade: {
+          isPassing: true,
+        },
+        certificate: {
+          isEarnedButUnavailable: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('is passing and not downloadable render empty', () => {
+      const wrapper = createWrapper({
+        grade: {
+          isPassing: true,
+        },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+  describe('behavior', () => {
+    it('is restricted', () => {
+      const wrapper = createWrapper({
+        certificate: {
+          isRestricted: true,
+        },
+      });
+      const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('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,
+        },
+      });
+      const bannerMessage = wrapper.find('format-message-function').map(el => el.prop('message').defaultMessage).join('\n');
+      expect(bannerMessage).toContain(messages.certRestricted.defaultMessage);
+      expect(bannerMessage).toContain(messages.certRefundContactBilling.defaultMessage);
+    });
+  });
+});

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

@@ -61,7 +61,7 @@ const render = (overrides = {}) => {
 };
 
 describe('CourseBanner', () => {
-  it('initializes data with course number from enrollment, course and course run data', () => {
+  test('initializes data with course number from enrollment, course and course run data', () => {
     render();
     expect(appHooks.useCardCourseData).toHaveBeenCalledWith(cardId);
     expect(appHooks.useCardCourseRunData).toHaveBeenCalledWith(cardId);
@@ -145,9 +145,6 @@ describe('CourseBanner', () => {
     test('snapshot: isStaff', () => {
       expect(el).toMatchSnapshot();
     });
-    test('messages: staffAccessOnly', () => {
-      expect(el.text()).toContain(messages.staffAccessOnly.defaultMessage);
-    });
   });
   test('snapshot: stacking banners', () => {
     render({

src/containers/CourseCard/components/CourseCardBanners/EntitlementBanner.test.jsx

@@ -39,7 +39,7 @@ const render = (overrides = {}) => {
 const dispatch = useDispatch();
 
 describe('EntitlementBanner', () => {
-  it('initializes data with course number from entitlement', () => {
+  test('initializes data with course number from entitlement', () => {
     render();
     expect(appHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
     expect(appHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(dispatch, cardId);

src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CertificateBanner.test.jsx.snap

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CertificateBanner snapshot is passing and is downloadable 1`] = `
+<Banner
+  icon={[MockFunction icons.CheckCircle]}
+  variant="success"
+>
+  Congratulations.  Your certificate is ready.
+    
+  <Hyperlink>
+    View Certificate.
+  </Hyperlink>
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is passing and is earned but unavailable 1`] = `
+<Banner>
+  Your grade and certificate will be ready after Invalid Date.
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is passing and not downloadable render empty 1`] = `""`;
+
+exports[`CertificateBanner snapshot is restricted 1`] = `
+<Banner
+  variant="danger"
+>
+  <format-message-function
+    message={
+      Object {
+        "defaultMessage": "Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know by contacting {supportEmail}.",
+        "description": "Restricted certificate warning message",
+        "id": "learner-dash.courseCard.banners.certificateRestricted",
+      }
+    }
+    values={
+      Object {
+        "supportEmail": <MailtoLink
+          to="suport@email"
+        >
+          suport@email
+        </MailtoLink>,
+      }
+    }
+  />
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot is restricted and verified 1`] = `
+<Banner
+  variant="danger"
+>
+  <format-message-function
+    message={
+      Object {
+        "defaultMessage": "Your Certificate of Achievement is being held pending confirmation that the issuance of your Certificate is in compliance with strict U.S. embargoes on Iran, Cuba, Syria, and Sudan.  If you think our system has mistakenly identified you as being connected with one of those countries, please let us know by contacting {supportEmail}.",
+        "description": "Restricted certificate warning message",
+        "id": "learner-dash.courseCard.banners.certificateRestricted",
+      }
+    }
+    values={
+      Object {
+        "supportEmail": <MailtoLink
+          to="suport@email"
+        >
+          suport@email
+        </MailtoLink>,
+      }
+    }
+  />
+    
+  <format-message-function
+    message={
+      Object {
+        "defaultMessage": "If you would like a refund on your Certificate of Achievement, please contact our billing address {billingEmail}",
+        "description": "Message to learners to contact billing for certificate refunds",
+        "id": "learner-dash.courseCard.banners.certificateRefundContactBilling",
+      }
+    }
+    values={
+      Object {
+        "billingEmail": <MailtoLink
+          to="billing@email"
+        >
+          billing@email
+        </MailtoLink>,
+      }
+    }
+  />
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot not passing and audit 1`] = `
+<Banner>
+  Grade required to pass the course: 0.8
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot not passing and has finished 1`] = `
+<Banner
+  variant="warning"
+>
+  You are not eligible for a certificate.
+  .
+    
+  <Hyperlink
+    destination="progressUrl"
+  >
+    View grades.
+  </Hyperlink>
+</Banner>
+`;
+
+exports[`CertificateBanner snapshot not passing and not audit and not finished 1`] = `
+<Banner
+  variant="warning"
+>
+  Grade required for a certificate: 0.8
+</Banner>
+`;

src/containers/CourseCard/components/CourseCardBanners/__snapshots__/CourseBanner.test.jsx.snap

@@ -38,27 +38,9 @@ exports[`CourseBanner course run active and cannot upgrade snapshot: (upgradseDe
 </Fragment>
 `;
 
-exports[`CourseBanner snapshot: stacking banners 1`] = `
-<Fragment>
-  <Banner>
-    You can't access this course just yet because the course hasn't started yet. The course will start on 11/11/3030.
-  </Banner>
-  <Banner>
-    You can't access this course just yet because you have not met the pre-requisites.
-  </Banner>
-  <Banner>
-    Staff access only.
-  </Banner>
-</Fragment>
-`;
+exports[`CourseBanner snapshot: stacking banners 1`] = `<Fragment />`;
 
-exports[`CourseBanner staff snapshot: isStaff 1`] = `
-<Fragment>
-  <Banner>
-    Staff access only.
-  </Banner>
-</Fragment>
-`;
+exports[`CourseBanner staff snapshot: isStaff 1`] = `<Fragment />`;
 
 exports[`CourseBanner too early snapshot: tooEarly 1`] = `
 <Fragment>

src/containers/CourseCard/components/CourseCardContent.jsx

@@ -9,11 +9,11 @@ import { hooks as appHooks } from 'data/redux';
 
 import RelatedProgramsBadge from './RelatedProgramsBadge';
 import CourseCardMenu from './CourseCardMenu';
-
-import messages from '../messages';
 import CourseCardActions from './CourseCardActions';
 import CourseCardDetails from './CourseCardDetails';
 
+import messages from '../messages';
+
 export const CourseCardContent = ({ cardId, orientation }) => {
   const { formatMessage } = useIntl();
   const { courseName, bannerImgSrc } = appHooks.useCardCourseData(cardId);

src/containers/CourseCard/components/CourseCardContent.test.jsx

@@ -0,0 +1,36 @@
+import { shallow } from 'enzyme';
+
+import { hooks } from 'data/redux';
+import CourseCardContent from './CourseCardContent';
+
+jest.mock('data/redux', () => ({
+  hooks: {
+    useCardCourseData: jest.fn(),
+  },
+}));
+
+jest.mock('./CourseCardActions', () => 'CourseCardActions');
+jest.mock('./CourseCardDetails', () => 'CourseCardDetails');
+jest.mock('./RelatedProgramsBadge', () => 'RelatedProgramsBadge');
+jest.mock('./CourseCardMenu', () => 'CourseCardMenu');
+
+describe('CourseCardContent', () => {
+  const props = {
+    cardId: 'test-card-id',
+    orientation: 'vertical',
+  };
+  hooks.useCardCourseData.mockReturnValue({
+    courseName: 'test-course-name',
+    bannerImgSrc: 'test-banner-img-src',
+  });
+  describe('snapshot', () => {
+    test('orientation vertical', () => {
+      const wrapper = shallow(<CourseCardContent {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('orientation horizontal', () => {
+      const wrapper = shallow(<CourseCardContent {...props} orientation="horizontal" />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

src/containers/CourseCard/components/CourseCardDetails/index.test.jsx

@@ -15,7 +15,7 @@ jest.mock('./hooks', () => ({
 const cardId = 'test-card-id';
 
 describe('CourseCard Details component', () => {
-  it('has change session button on entitlement course', () => {
+  test('has change session button on entitlement course', () => {
     const mockHook = (args) => () => ({
       providerName: 'provider-name',
       accessMessage: 'access-message',
@@ -34,7 +34,7 @@ describe('CourseCard Details component', () => {
     expect(el.text().match(/•/g)).toHaveLength(3);
   });
 
-  it('does not have change session button on regular course', () => {
+  test('does not have change session button on regular course', () => {
     const mockHook = (args) => () => ({
       providerName: 'provider-name',
       accessMessage: 'acess-message',

src/containers/CourseCard/components/CourseCardLayout.test.jsx

@@ -0,0 +1,29 @@
+import { shallow } from 'enzyme';
+
+import CourseCardLayout from './CourseCardLayout';
+import { useIsCollapsed } from '../hooks';
+
+jest.mock('../hooks', () => ({
+  useIsCollapsed: jest.fn(),
+}));
+
+jest.mock('./CourseCardBanners', () => 'CourseCardBanners');
+jest.mock('./CourseCardContent', () => 'CourseCardContent');
+
+describe('CourseCardLayout', () => {
+  const props = {
+    cardId: 'test-card-id',
+  };
+  describe('snapshot', () => {
+    test('is collapsed', () => {
+      useIsCollapsed.mockReturnValue(true);
+      const wrapper = shallow(<CourseCardLayout {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('is not collapsed', () => {
+      useIsCollapsed.mockReturnValue(false);
+      const wrapper = shallow(<CourseCardLayout {...props} />);
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+});

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCardMenu snapshot 1`] = `
+<Fragment>
+  <Dropdown>
+    <Dropdown.Toggle
+      alt="Actions dropdown"
+      as="IconButton"
+      iconAs="Icon"
+      id="dropdown-toggle-with-iconbutton"
+      src={[MockFunction icons.MoreVert]}
+      variant="primary"
+    />
+    <Dropdown.Menu>
+      <Dropdown.Item
+        onClick={[MockFunction unenrollShow]}
+      >
+        Unenroll
+      </Dropdown.Item>
+      <Dropdown.Item
+        onClick={[MockFunction emailSettingShow]}
+      >
+        Email Settings
+      </Dropdown.Item>
+      <Dropdown.Item
+        href="#/action-3"
+      >
+        Share to Facebook
+      </Dropdown.Item>
+      <Dropdown.Item
+        href="#/action-3"
+      >
+        Share to Twitter
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
+  <UnenrollConfirmModal
+    cardId="test-card-id"
+    closeModal={[MockFunction unenrollHide]}
+    show={false}
+  />
+  <EmailSettingsModal
+    cardId="test-card-id"
+    closeModal={[MockFunction emailSettingHide]}
+    show={false}
+  />
+</Fragment>
+`;

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

@@ -0,0 +1,58 @@
+import { MockUseState } from 'testUtils';
+
+import * as hooks from './hooks';
+
+const state = new MockUseState(hooks);
+
+describe('CourseCardMenu hooks', () => {
+  describe('state values', () => {
+    state.testGetter(state.keys.isUnenrollConfirmVisible);
+    state.testGetter(state.keys.isEmailSettingsVisible);
+  });
+
+  describe('useUnenrollData', () => {
+    let out;
+    beforeEach(() => {
+      state.mock();
+      out = hooks.useUnenrollData();
+    });
+    afterEach(state.restore);
+
+    test('default state', () => {
+      expect(out.isVisible).toEqual(state.stateVals.isUnenrollConfirmVisible);
+    });
+
+    test('show', () => {
+      out.show();
+      state.expectSetStateCalledWith(state.keys.isUnenrollConfirmVisible, true);
+    });
+
+    test('hide', () => {
+      out.hide();
+      state.expectSetStateCalledWith(state.keys.isUnenrollConfirmVisible, false);
+    });
+  });
+
+  describe('useEmailSettings', () => {
+    let out;
+    beforeEach(() => {
+      state.mock();
+      out = hooks.useEmailSettings();
+    });
+    afterEach(state.restore);
+
+    test('default state', () => {
+      expect(out.isVisible).toEqual(state.stateVals.isEmailSettingsVisible);
+    });
+
+    test('show', () => {
+      out.show();
+      state.expectSetStateCalledWith(state.keys.isEmailSettingsVisible, true);
+    });
+
+    test('hide', () => {
+      out.hide();
+      state.expectSetStateCalledWith(state.keys.isEmailSettingsVisible, false);
+    });
+  });
+});

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

@@ -0,0 +1,31 @@
+import { shallow } from 'enzyme';
+
+import CourseCardMenu from '.';
+import useCourseCardMenuData from './hooks';
+
+jest.mock('./hooks', () => jest.fn());
+
+describe('CourseCardMenu', () => {
+  const props = {
+    cardId: 'test-card-id',
+  };
+  const defaultEmailSettingsModal = {
+    isVisible: false,
+    show: jest.fn().mockName('emailSettingShow'),
+    hide: jest.fn().mockName('emailSettingHide'),
+  };
+  const defaultUnenrollModal = {
+    isVisible: false,
+    show: jest.fn().mockName('unenrollShow'),
+    hide: jest.fn().mockName('unenrollHide'),
+  };
+
+  test('snapshot', () => {
+    useCourseCardMenuData.mockReturnValue({
+      emailSettingsModal: defaultEmailSettingsModal,
+      unenrollModal: defaultUnenrollModal,
+    });
+    const wrapper = shallow(<CourseCardMenu {...props} />);
+    expect(wrapper).toMatchSnapshot();
+  });
+});

src/containers/CourseCard/components/__snapshots__/CourseCardContent.test.jsx.snap

@@ -0,0 +1,87 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCardContent snapshot orientation horizontal 1`] = `
+<Fragment>
+  <Card.ImageCap
+    src="test-banner-img-src"
+    srcAlt="Course thumbnail"
+  />
+  <Card.Body>
+    <Card.Header
+      actions={
+        <CourseCardMenu
+          cardId="test-card-id"
+        />
+      }
+      title={
+        <span
+          data-testid="CourseCardTitle"
+        >
+          test-course-name
+        </span>
+      }
+    />
+    <Card.Section
+      className="pt-0"
+    >
+      <CourseCardDetails
+        cardId="test-card-id"
+      />
+    </Card.Section>
+    <Card.Footer
+      orientation="vertical"
+      textElement={
+        <RelatedProgramsBadge
+          cardId="test-card-id"
+        />
+      }
+    >
+      <CourseCardActions
+        cardId="test-card-id"
+      />
+    </Card.Footer>
+  </Card.Body>
+</Fragment>
+`;
+
+exports[`CourseCardContent snapshot orientation vertical 1`] = `
+<Fragment>
+  <Card.ImageCap
+    src="test-banner-img-src"
+    srcAlt="Course thumbnail"
+  />
+  <Card.Body>
+    <Card.Header
+      actions={
+        <CourseCardMenu
+          cardId="test-card-id"
+        />
+      }
+      title={
+        <span
+          data-testid="CourseCardTitle"
+        >
+          test-course-name
+        </span>
+      }
+    />
+    <Card.Section
+      className="pt-0"
+    >
+      <CourseCardDetails
+        cardId="test-card-id"
+      />
+    </Card.Section>
+    <RelatedProgramsBadge
+      cardId="test-card-id"
+    />
+    <Card.Footer
+      orientation="horizontal"
+    >
+      <CourseCardActions
+        cardId="test-card-id"
+      />
+    </Card.Footer>
+  </Card.Body>
+</Fragment>
+`;

src/containers/CourseCard/components/__snapshots__/CourseCardLayout.test.jsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseCardLayout snapshot is collapsed 1`] = `
+<div
+  className="mb-4.5 course-card"
+  data-testid="CourseCard"
+>
+  <Card
+    orientation="vertical"
+  >
+    <div
+      className="d-flex flex-column w-100"
+    >
+      <div
+        className="d-flex"
+      >
+        <CourseCardContent
+          cardId="test-card-id"
+        />
+      </div>
+      <div
+        className="course-card-banners"
+        data-testid="CourseCardBanners"
+      >
+        <CourseCardBanners
+          cardId="test-card-id"
+        />
+      </div>
+    </div>
+  </Card>
+</div>
+`;
+
+exports[`CourseCardLayout snapshot is not collapsed 1`] = `
+<div
+  className="mb-4.5 course-card"
+  data-testid="CourseCard"
+>
+  <Card
+    orientation="horizontal"
+  >
+    <div
+      className="d-flex flex-column w-100"
+    >
+      <div
+        className="d-flex"
+      >
+        <CourseCardContent
+          cardId="test-card-id"
+        />
+      </div>
+      <div
+        className="course-card-banners"
+        data-testid="CourseCardBanners"
+      >
+        <CourseCardBanners
+          cardId="test-card-id"
+        />
+      </div>
+    </div>
+  </Card>
+</div>
+`;