feat: program card tests

src/containers/RelatedProgramsModal/components/ProgramCard.jsx

@@ -10,23 +10,11 @@ import {
 } from '@edx/paragon';
 import { Program } from '@edx/paragon/icons';
 
+import messages from './messages';
 import './index.scss';
 
 export const whiteFontWrapper = (node) => (<span className="text-white">{node}</span>);
 
-export const messages = {
-  courses: {
-    id: 'learnerDashboard.programCard.courses',
-    defaultMessage: '{numCourses} Courses',
-    description: 'Number of courses in a program, displayed at the bottom of program card',
-  },
-  duration: {
-    id: 'learnerDashboard.programCard.duration',
-    defaultMessage: '{numWeeks} Weeks',
-    description: 'Number of weeks in a program, displayed at the bottom of program card',
-  },
-};
-
 export const ProgramCard = ({ data }) => {
   const { formatMessage } = useIntl();
   const numCoursesMessage = formatMessage(
@@ -45,9 +33,9 @@ export const ProgramCard = ({ data }) => {
       <Card.ImageCap
         className="program-card-banner"
         src={data.bannerUrl}
-        srcAlt="Program banner"
+        srcAlt={formatMessage(messages.bannerAlt)}
         logoSrc={data.logoUrl}
-        logoAlt="Provider logo"
+        logoAlt={formatMessage(messages.logoAlt)}
       />
       <Card.Header
         title={whiteFontWrapper(data.title)}

src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import ProgramCard from './ProgramCard';
+
+const props = {
+  data: {
+    estimatedNumberOfWeeks: 1,
+    numberOfCourses: 2,
+    bannerUrl: 'props.data.bannerUrl',
+    logoUrl: 'props.data.logoUrl',
+    title: 'props.data.title',
+    provider: 'props.data.provider',
+    programType: 'props.data.programType',
+    programUrl: 'props.data.programUrl',
+    programTypeUrl: 'props.data.programTypeUrl',
+  },
+};
+
+describe('RelatedProgramsModal ProgramCard', () => {
+  test('snapshot', () => {
+    expect(shallow(<ProgramCard {...props} />)).toMatchSnapshot();
+  });
+});

src/containers/RelatedProgramsModal/components/__snapshots__/ProgramCard.test.jsx.snap

@@ -0,0 +1,70 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RelatedProgramsModal ProgramCard snapshot 1`] = `
+<Card
+  className="program-card d-inline-block bg-primary-500 text-white pb-3.5"
+  style={
+    Object {
+      "color": "white",
+      "width": "18rem",
+    }
+  }
+>
+  <Card.ImageCap
+    className="program-card-banner"
+    logoAlt={
+      <formatMessage
+        msg="Provider logo"
+      />
+    }
+    logoSrc="props.data.logoUrl"
+    src="props.data.bannerUrl"
+    srcAlt={
+      <formatMessage
+        msg="Programm banner"
+      />
+    }
+  />
+  <Card.Header
+    subtitle={
+      <span
+        className="text-white"
+      >
+        props.data.provider
+      </span>
+    }
+    title={
+      <span
+        className="text-white"
+      >
+        props.data.title
+      </span>
+    }
+  />
+  <div
+    className="ml-4"
+  >
+    <Badge
+      className="program-type-badge"
+      variant="light"
+    >
+      <Icon
+        className="d-inline-block"
+      />
+       
+      props.data.programType
+    </Badge>
+    <div
+      className="program-summary mt-2"
+    >
+      <formatMessage
+        msg="{numCourses} Courses"
+      />
+       • 
+      <formatMessage
+        msg="{numWeeks} Weeks"
+      />
+    </div>
+  </div>
+</Card>
+`;

src/containers/RelatedProgramsModal/components/messages.js

@@ -0,0 +1,24 @@
+export const messages = {
+  courses: {
+    id: 'learnerDashboard.programCard.courses',
+    defaultMessage: '{numCourses} Courses',
+    description: 'Number of courses in a program, displayed at the bottom of program card',
+  },
+  duration: {
+    id: 'learnerDashboard.programCard.duration',
+    defaultMessage: '{numWeeks} Weeks',
+    description: 'Number of weeks in a program, displayed at the bottom of program card',
+  },
+  logoAlt: {
+    id: 'learnerDashboard.programCard.logoAlt',
+    defaultMessage: 'Provider logo',
+    description: 'Program provider logo alt-text',
+  },
+  bannerAlt: {
+    id: 'learnerDashboard.programCard.bannerAlt',
+    defaultMessage: 'Programm banner',
+    description: 'Program banner logo alt-text',
+  },
+};
+
+export default messages;