chore: course banner logic and tests

src/containers/CourseCard/components/Banners/CourseBanner.jsx

@@ -3,21 +3,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Hyperlink } from '@edx/paragon';
 
-import { useCardValues } from 'hooks';
-import { selectors } from 'data/redux';
-
 import Banner from 'components/Banner';
-
-const { cardData } = selectors;
+import { useCourseBannerData } from './hooks';
+import messages from './messages';
 
 export const CourseBanner = ({ courseNumber }) => {
-  const courseData = useCardValues(courseNumber, {
-    isVerified: cardData.isVerified,
-    isCourseRunActive: cardData.isCourseRunActive,
-    canUpgrade: cardData.canUpgrade,
-    isAuditAccessExpired: cardData.isAuditAccessExpired,
-    courseWebsite: cardData.courseWebsite,
-  });
+  const { courseData, formatMessage } = useCourseBannerData({ courseNumber });
 
   if (courseData.isVerified) { return null; }
 
@@ -25,22 +16,28 @@ export const CourseBanner = ({ courseNumber }) => {
     if (courseData.canUpgrade) {
       return (
         <Banner>
-          Your audit access to this course has expired.  Upgrade now to access your course again.
+          {formatMessage(messages.auditAccessExpired)}
+          {'  '}
+          {formatMessage(messages.upgradeToAccess)}
         </Banner>
       );
     }
     return (
       <Banner>
-        Your audit access to this course has expired. <Hyperlink destination="">Find another course</Hyperlink>
+        {formatMessage(messages.auditAccessExpired)}
+        {'  '}
+        <Hyperlink destination="">{formatMessage(messages.findAnotherCourse)}</Hyperlink>
       </Banner>
     );
   }
   if (courseData.isCourseRunActive && !courseData.canUpgrade) {
     return (
       <Banner>
-        Your upgrade deadline for this course has passed.  To upgrade, enroll in a session that is farther in the future.
+        {formatMessage(messages.upgradeDeadlinePassed)}
         {'  '}
-        <Hyperlink destination={courseData.courseWebsite || ''}>Explore course details.</Hyperlink>
+        <Hyperlink destination={courseData.courseWebsite || ''}>
+          {formatMessage(messages.exploreCourseDetails)}
+        </Hyperlink>
       </Banner>
     );
   }

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

@@ -0,0 +1,89 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Hyperlink } from '@edx/paragon';
+
+import { formatMessage } from 'testUtils';
+import { CourseBanner } from './CourseBanner';
+
+import * as hooks from './hooks';
+import messages from './messages';
+
+jest.mock('components/Banner', () => 'Banner');
+
+jest.mock('./hooks', () => ({
+  useCourseBannerData: jest.fn(),
+}));
+
+const courseNumber = 'my-test-course-number';
+
+const courseData = {
+  isVerified: false,
+  isCourseRunActive: false,
+  canUpgrade: false,
+  isAuditAccessExpired: false,
+  courseWebsite: 'test-course-website',
+};
+
+let el;
+
+const render = (overrides) => {
+  hooks.useCourseBannerData.mockReturnValueOnce({
+    courseData: {
+      ...courseData,
+      ...overrides,
+    },
+    formatMessage,
+  });
+  el = shallow(<CourseBanner courseNumber={courseNumber} />);
+};
+
+describe('CourseBanner', () => {
+  test('no display if learner is verified', () => {
+    render({ isVerified: true });
+    expect(el.isEmptyRender()).toEqual(true);
+  });
+  describe('audit access expired, can upgrade', () => {
+    beforeEach(() => {
+      render({ isAuditAccessExpired: true, canUpgrade: true });
+    });
+    test('snapshot: (auditAccessExpired, upgradeToAccess)', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
+      expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.text()).toContain(messages.upgradeToAccess.defaultMessage);
+    });
+  });
+  describe('audit access expired, cannot upgrade', () => {
+    beforeEach(() => {
+      render({ isAuditAccessExpired: true });
+    });
+    test('snapshot: (auditAccessExpired, findAnotherCourse hyperlink)', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: (auditAccessExpired, upgradeToAccess)', () => {
+      expect(el.text()).toContain(messages.auditAccessExpired.defaultMessage);
+      expect(el.find(Hyperlink).text()).toEqual(messages.findAnotherCourse.defaultMessage);
+    });
+  });
+  describe('course run active and cannot upgrade', () => {
+    beforeEach(() => {
+      render({ isCourseRunActive: true });
+    });
+    test('snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('messages: (upgradseDeadlinePassed, exploreCourseDetails hyperlink)', () => {
+      expect(el.text()).toContain(messages.upgradeDeadlinePassed.defaultMessage);
+      const link = el.find(Hyperlink);
+      expect(link.text()).toEqual(messages.exploreCourseDetails.defaultMessage);
+      expect(link.props().destination).toEqual(courseData.courseWebsite);
+    });
+  });
+  test('no display if audit access not expired and (course is not active or can upgrade)', () => {
+    render();
+    expect(el.isEmptyRender()).toEqual(true);
+    render({ isCourseRunActive: true, canUpgrade: true });
+    expect(el.isEmptyRender()).toEqual(true);
+  });
+});

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CourseBanner audit access expired, can upgrade snapshot: (auditAccessExpired, upgradeToAccess) 1`] = `
+<Banner>
+  Your audit access to this course has expired.
+    
+  Upgrade now to access your course again.
+</Banner>
+`;
+
+exports[`CourseBanner audit access expired, cannot upgrade snapshot: (auditAccessExpired, findAnotherCourse hyperlink) 1`] = `
+<Banner>
+  Your audit access to this course has expired.
+    
+  <Hyperlink
+    destination=""
+  >
+    Find another course
+  </Hyperlink>
+</Banner>
+`;
+
+exports[`CourseBanner course run active and cannot upgrade snapshot: (upgradseDeadlinePassed, exploreCourseDetails hyperlink) 1`] = `
+<Banner>
+  Your upgrade deadline for this course has passed.  To upgrade, enroll in a session that is farther in the future.
+    
+  <Hyperlink
+    destination="test-course-website"
+  >
+    Explore course details.
+  </Hyperlink>
+</Banner>
+`;

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

@@ -0,0 +1,20 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { useCardValues } from 'hooks';
+import { selectors } from 'data/redux';
+
+const { cardData } = selectors;
+
+export const useCourseBannerData = ({ courseNumber }) => ({
+  courseData: useCardValues(courseNumber, {
+    isVerified: cardData.isVerified,
+    isCourseRunActive: cardData.isCourseRunActive,
+    canUpgrade: cardData.canUpgrade,
+    isAuditAccessExpired: cardData.isAuditAccessExpired,
+    courseWebsite: cardData.courseWebsite,
+  }),
+  formatMessage: useIntl().formatMessage,
+});
+
+export default {
+  useCourseBannerData,
+};

src/containers/CourseCard/components/Banners/messages.js

@@ -0,0 +1,31 @@
+import { StrictDict } from 'utils';
+
+export const messages = StrictDict({
+  auditAccessExpired: {
+    id: 'learner-dash.courseCard.banners.auditAccessExpired',
+    description: 'Audit access expiration banner message',
+    defaultMessage: 'Your audit access to this course has expired.',
+  },
+  upgradeToAccess: {
+    id: 'learner-dash.courseCard.banners.upgradeToAccess',
+    description: 'Upgrade prompt for audit-expired learners that can still upgrade',
+    defaultMessage: 'Upgrade now to access your course again.',
+  },
+  findAnotherCourse: {
+    id: 'learner-dash.courseCard.banners.findAnotherCourse',
+    description: 'Action prompt taking learners to course exploration',
+    defaultMessage: 'Find another course',
+  },
+  upgradeDeadlinePassed: {
+    id: 'learner-dash.courseCard.banners.upgradeDeadlinePassed',
+    description: 'Audit upgrade deadline passed banner message',
+    defaultMessage: 'Your upgrade deadline for this course has passed.  To upgrade, enroll in a session that is farther in the future.',
+  },
+  exploreCourseDetails: {
+    id: 'learner-dash.courseCard.banners.exploreCourseDetails',
+    description: 'Action prompt taking learners to course details page',
+    defaultMessage: 'Explore course details.',
+  },
+});
+
+export default messages;