fix: show cert for not-passing courses and hide link when missing URL (#131)

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

@@ -40,6 +40,21 @@ export const CertificateBanner = ({ cardId }) => {
       </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 (
@@ -63,17 +78,6 @@ export const CertificateBanner = ({ cardId }) => {
       </Banner>
     );
   }
-  if (certificate.isDownloadable) {
-    return (
-      <Banner variant="success" icon={CheckCircle}>
-        {formatMessage(messages.certReady)}
-        {'  '}
-        <Hyperlink isInline destination={certificate.certPreviewUrl}>
-          {formatMessage(messages.viewCertificate)}
-        </Hyperlink>
-      </Banner>
-    );
-  }
   if (certificate.isEarnedButUnavailable) {
     return (
       <Banner>

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

@@ -54,6 +54,7 @@ describe('CertificateBanner', () => {
     reduxHooks.useCardCourseRunData.mockReturnValueOnce({ ...defaultCourseRun, ...courseRun });
     return shallow(<CertificateBanner {...props} />);
   };
+  /** TODO: Update tests to validate snapshots **/
   describe('snapshot', () => {
     test('is restricted', () => {
       const wrapper = createWrapper({
@@ -74,6 +75,20 @@ describe('CertificateBanner', () => {
       });
       expect(wrapper).toMatchSnapshot();
     });
+    test('is passing and is downloadable', () => {
+      const wrapper = createWrapper({
+        grade: { isPassing: true },
+        certificate: { isDownloadable: true },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
+    test('not passing and is downloadable', () => {
+      const wrapper = createWrapper({
+        grade: { isPassing: false },
+        certificate: { isDownloadable: true },
+      });
+      expect(wrapper).toMatchSnapshot();
+    });
     test('not passing and audit', () => {
       const wrapper = createWrapper({
         enrollment: {
@@ -92,17 +107,6 @@ describe('CertificateBanner', () => {
       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: {

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

@@ -6,12 +6,6 @@ exports[`CertificateBanner snapshot is passing and is downloadable 1`] = `
   variant="success"
 >
   Congratulations.  Your certificate is ready.
-    
-  <Hyperlink
-    isInline={true}
-  >
-    View Certificate.
-  </Hyperlink>
 </Banner>
 `;
 
@@ -113,6 +107,15 @@ exports[`CertificateBanner snapshot not passing and has finished 1`] = `
 </Banner>
 `;
 
+exports[`CertificateBanner snapshot not passing and is downloadable 1`] = `
+<Banner
+  icon={[MockFunction icons.CheckCircle]}
+  variant="success"
+>
+  Congratulations.  Your certificate is ready.
+</Banner>
+`;
+
 exports[`CertificateBanner snapshot not passing and not audit and not finished 1`] = `
 <Banner
   variant="warning"