test: Deprecate react-unit-test-utils 9/15 (#668)

src/containers/RelatedProgramsModal/__snapshots__/index.test.jsx.snap

@@ -1,169 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RelatedProgramsModal snapshot: closed 1`] = `
-<ModalDialog
-  className="related-programs-modal p-4"
-  data-testid="RelatedProgramsModal"
-  hasCloseButton={true}
-  isFullscreenOnMobile={true}
-  isOpen={false}
-  onClose={[MockFunction props.closeModal]}
-  size="lg"
-  title="Related Programs"
->
-  <ModalDialog.Header
-    aria-level={2}
-    as="h3"
-    className="programs-title m-0 p-0"
-  >
-    Related Programs
-  </ModalDialog.Header>
-  <ModalDialog.Header
-    as="h4"
-    className="programs-header p-0"
-  />
-  <ModalDialog.Body
-    className="pl-0 overflow-scroll"
-  >
-    <p>
-      Are you looking to expand your knowledge?  Enrolling in a Program lets you take a series of courses in the subject that you're interested in
-    </p>
-    <Container>
-      <Row>
-        <Col
-          key="program-1-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program1",
-                },
-                "programUrl": "program-1-url",
-              }
-            }
-          />
-        </Col>
-        <Col
-          key="program-2-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program2",
-                },
-                "programUrl": "program-2-url",
-              }
-            }
-          />
-        </Col>
-        <Col
-          key="program-3-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program3",
-                },
-                "programUrl": "program-3-url",
-              }
-            }
-          />
-        </Col>
-      </Row>
-    </Container>
-  </ModalDialog.Body>
-</ModalDialog>
-`;
-
-exports[`RelatedProgramsModal snapshot: open 1`] = `
-<ModalDialog
-  className="related-programs-modal p-4"
-  data-testid="RelatedProgramsModal"
-  hasCloseButton={true}
-  isFullscreenOnMobile={true}
-  isOpen={true}
-  onClose={[MockFunction props.closeModal]}
-  size="lg"
-  title="Related Programs"
->
-  <ModalDialog.Header
-    aria-level={2}
-    as="h3"
-    className="programs-title m-0 p-0"
-  >
-    Related Programs
-  </ModalDialog.Header>
-  <ModalDialog.Header
-    as="h4"
-    className="programs-header p-0"
-  />
-  <ModalDialog.Body
-    className="pl-0 overflow-scroll"
-  >
-    <p>
-      Are you looking to expand your knowledge?  Enrolling in a Program lets you take a series of courses in the subject that you're interested in
-    </p>
-    <Container>
-      <Row>
-        <Col
-          key="program-1-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program1",
-                },
-                "programUrl": "program-1-url",
-              }
-            }
-          />
-        </Col>
-        <Col
-          key="program-2-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program2",
-                },
-                "programUrl": "program-2-url",
-              }
-            }
-          />
-        </Col>
-        <Col
-          key="program-3-url"
-          lg={6}
-          sm={12}
-        >
-          <ProgramCard
-            data={
-              {
-                "programData": {
-                  "dataFor": "program3",
-                },
-                "programUrl": "program-3-url",
-              }
-            }
-          />
-        </Col>
-      </Row>
-    </Container>
-  </ModalDialog.Body>
-</ModalDialog>
-`;

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

@@ -1,23 +1,47 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import ProgramCard from './ProgramCard';
 
 const props = {
   data: {
     numberOfCourses: 2,
-    bannerImgSrc: 'props.data.bannerImgSrc',
-    logoImgSrc: 'props.data.logoImgSrc',
-    title: 'props.data.title',
-    provider: 'props.data.provider',
-    programType: 'props.data.programType',
-    programUrl: 'props.data.programUrl',
-    programTypeUrl: 'props.data.programTypeUrl',
+    bannerImgSrc: 'test bannerImgSrc',
+    logoImgSrc: 'test logoImgSrc',
+    title: 'test title',
+    provider: 'test provider',
+    programType: 'test programType',
+    programUrl: 'test programUrl',
+    programTypeUrl: 'test programTypeUrl',
   },
 };
 
+jest.unmock('@openedx/paragon');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('react');
+
 describe('RelatedProgramsModal ProgramCard', () => {
-  test('snapshot', () => {
-    expect(shallow(<ProgramCard {...props} />).snapshot).toMatchSnapshot();
+  describe('renders', () => {
+    beforeEach(() => render(<IntlProvider locale="en"><ProgramCard {...props} /></IntlProvider>));
+    it('bannerImg and logo', () => {
+      const logo = screen.getByRole('img', { name: `${props.data.provider} logo` });
+      const bannerImg = screen.getByRole('img', { name: /bannerAlt/i });
+      expect(logo).toBeInTheDocument();
+      expect(bannerImg).toBeInTheDocument();
+    });
+    it('title and subtitle', () => {
+      const title = screen.getByText(props.data.title);
+      const subtitle = screen.getByText(props.data.provider);
+      expect(title).toBeInTheDocument();
+      expect(subtitle).toBeInTheDocument();
+    });
+    it('badge', () => {
+      const badge = screen.getByText(props.data.programType);
+      expect(badge).toBeInTheDocument();
+    });
+    it('courses number', () => {
+      const coursesNumber = screen.getByText(`${props.data.numberOfCourses} Courses`);
+      expect(coursesNumber).toBeInTheDocument();
+    });
   });
 });

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

@@ -1,60 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RelatedProgramsModal ProgramCard snapshot 1`] = `
-<Card
-  as="a"
-  className="program-card mx-auto bg-primary-500 text-white mb-3.5 pb-3.5"
-  href="props.data.programUrl"
-  isClickable={true}
-  style={
-    {
-      "color": "white",
-      "width": "18rem",
-    }
-  }
->
-  <Card.ImageCap
-    className="program-card-banner"
-    logoAlt="props.data.provider logo"
-    logoSrc="props.data.logoImgSrc"
-    src="props.data.bannerImgSrc"
-    srcAlt=""
-  />
-  <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"
-        src={[MockFunction icons.Program]}
-      />
-       
-      props.data.programType
-    </Badge>
-    <div
-      className="program-summary mt-2"
-    >
-      2 Courses
-    </div>
-  </div>
-</Card>
-`;

src/containers/RelatedProgramsModal/index.test.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { reduxHooks } from 'hooks';
 import RelatedProgramsModal from '.';
+import messages from './messages';
 
-jest.mock('./components/ProgramCard', () => 'ProgramCard');
+jest.mock('./components/ProgramCard', () => jest.fn(() => <div>ProgramCard</div>));
 jest.mock('hooks', () => ({
   reduxHooks: {
     useCardCourseData: jest.fn(),
@@ -12,9 +13,13 @@ jest.mock('hooks', () => ({
   },
 }));
 
-const cardId = 'test-course-number';
+jest.unmock('@openedx/paragon');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('react');
+
+const cardId = 'test-card-id';
 const courseData = {
-  courseTitle: 'hookProps.courseTitle',
+  courseName: 'test course',
 };
 const programData = {
   list: [
@@ -45,16 +50,27 @@ describe('RelatedProgramsModal', () => {
     reduxHooks.useCardRelatedProgramsData.mockReturnValueOnce(programData);
   });
   it('initializes hooks with cardId', () => {
-    shallow(<RelatedProgramsModal {...props} />);
+    render(<IntlProvider locale="en"><RelatedProgramsModal {...props} /></IntlProvider>);
     expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(cardId);
     expect(reduxHooks.useCardRelatedProgramsData).toHaveBeenCalledWith(cardId);
   });
-  test('snapshot: open', () => {
-    expect(shallow(<RelatedProgramsModal {...props} />).snapshot).toMatchSnapshot();
-  });
-  test('snapshot: closed', () => {
-    expect(
-      shallow(<RelatedProgramsModal {...props} isOpen={false} />).snapshot,
-    ).toMatchSnapshot();
+  describe('renders', () => {
+    beforeEach(() => render(<IntlProvider locale="en"><RelatedProgramsModal {...props} /></IntlProvider>));
+    it('display header', () => {
+      const header = screen.getByRole('heading', { name: messages.header.defaultMessage });
+      expect(header).toBeInTheDocument();
+    });
+    it('displays course name', () => {
+      const courseName = screen.getByText(courseData.courseName);
+      expect(courseName).toBeInTheDocument();
+    });
+    it('displays description', () => {
+      const description = screen.getByText((text) => text.includes('Are you looking to expand your knowledge?'));
+      expect(description).toBeInTheDocument();
+    });
+    it('displays program cards', () => {
+      const programCards = screen.getAllByText('ProgramCard');
+      expect(programCards.length).toEqual(programData.list.length);
+    });
   });
 });