@openedx/frontend-app-learner-dashboard 1.0.0-alpha.4 → 1.0.0-alpha.5

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

@@ -1,11 +1,12 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import { formatMessage } from '@src/testUtils';
 
-import { reduxHooks } from 'hooks';
+import { reduxHooks } from '@src/hooks';
 import EntitlementBanner from './EntitlementBanner';
+import messages from './messages';
 
-jest.mock('components/Banner', () => 'Banner');
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   utilHooks: {
     useFormatDate: () => date => date,
   },
@@ -18,9 +19,7 @@ jest.mock('hooks', () => ({
   },
 }));
 
-const cardId = 'my-test-course-number';
-
-let el;
+const cardId = 'test-card-id';
 
 const entitlementData = {
   isEntitlement: true,
@@ -31,33 +30,43 @@ const entitlementData = {
 };
 const platformData = { supportEmail: 'test-support-email' };
 
-const render = (overrides = {}) => {
+const renderComponent = (overrides = {}) => {
   const { entitlement = {} } = overrides;
   reduxHooks.useCardEntitlementData.mockReturnValueOnce({ ...entitlementData, ...entitlement });
   reduxHooks.usePlatformSettingsData.mockReturnValueOnce(platformData);
-  el = shallow(<EntitlementBanner cardId={cardId} />);
+  return render(<IntlProvider locale="en"><EntitlementBanner cardId={cardId} /></IntlProvider>);
 };
 
 describe('EntitlementBanner', () => {
-  test('initializes data with course number from entitlement', () => {
-    render();
+  it('initializes data with course number from entitlement', () => {
+    renderComponent();
     expect(reduxHooks.useCardEntitlementData).toHaveBeenCalledWith(cardId);
     expect(reduxHooks.useUpdateSelectSessionModalCallback).toHaveBeenCalledWith(cardId);
   });
-  test('no display if not an entitlement', () => {
-    render({ entitlement: { isEntitlement: false } });
-    expect(el.isEmptyRender()).toEqual(true);
+  it('no display if not an entitlement', () => {
+    renderComponent({ entitlement: { isEntitlement: false } });
+    const banner = screen.queryByRole('alert');
+    expect(banner).toBeNull();
   });
-  test('snapshot: no sessions available', () => {
-    render({ entitlement: { isFulfilled: false, hasSessions: false } });
-    expect(el.snapshot).toMatchSnapshot();
+  it('renders when no sessions available', () => {
+    renderComponent({ entitlement: { isFulfilled: false, hasSessions: false } });
+    const banner = screen.getByRole('alert');
+    expect(banner).toBeInTheDocument();
+    expect(banner).toHaveClass('alert-warning');
+    expect(banner.innerHTML).toContain(platformData.supportEmail);
   });
-  test('snapshot: expiration warning', () => {
-    render({ entitlement: { showExpirationWarning: true } });
-    expect(el.snapshot).toMatchSnapshot();
+  it('renders when expiration warning', () => {
+    renderComponent({ entitlement: { showExpirationWarning: true } });
+    const banner = screen.getByRole('alert');
+    expect(banner).toBeInTheDocument();
+    expect(banner).toHaveClass('alert-info');
+    const button = screen.getByRole('button', { name: formatMessage(messages.selectSession) });
+    expect(button).toBeInTheDocument();
   });
-  test('no display if sessions available and not displaying warning', () => {
-    render();
-    expect(el.isEmptyRender()).toEqual(true);
+  it('renders expired banner', () => {
+    renderComponent({ entitlement: { isExpired: true } });
+    const banner = screen.getByRole('alert');
+    expect(banner).toBeInTheDocument();
+    expect(banner.innerHTML).toContain(formatMessage(messages.entitlementExpired));
   });
 });

package/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/ProgramsList.test.jsx

@@ -1,4 +1,4 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
 
 import { ProgramsList } from './ProgramsList';
 
@@ -9,15 +9,23 @@ describe('ProgramsList', () => {
       title: 'Example Program 1',
     },
     {
-      programUrl: 'http://example.com',
+      programUrl: 'http://example2.com',
       title: 'Example Program 2',
     },
   ];
 
   it('renders correctly', () => {
-    const wrapper = shallow(<ProgramsList programs={programs} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(<ProgramsList programs={programs} />);
+    const list = screen.getByRole('list');
+    expect(list).toBeInTheDocument();
+    expect(list.children.length).toEqual(programs.length);
+  });
 
-    expect(wrapper.instance.findByType('li').length).toEqual(programs.length);
+  it('add the links correctly', () => {
+    render(<ProgramsList programs={programs} />);
+    programs.forEach(program => {
+      const link = screen.getByRole('link', { name: program.title });
+      expect(link).toHaveAttribute('href', program.url);
+    });
   });
 });

package/src/containers/CourseCard/components/CourseCardBanners/RelatedProgramsBanner/index.test.jsx

@@ -1,42 +1,49 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
 
-import { reduxHooks } from '../../../../../hooks';
+import { reduxHooks } from '@src/hooks';
 import RelatedProgramsBanner from '.';
 
-jest.mock('./ProgramsList', () => 'ProgramsList');
-
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardRelatedProgramsData: jest.fn(),
   },
 }));
 
 const cardId = 'test-card-id';
+const programData = {
+  list: [
+    {
+      title: 'Program 1',
+      url: 'http://example.com/program1',
+    },
+    {
+      title: 'Program 2',
+      url: 'http://example.com/program2',
+    },
+  ],
+  length: 2,
+};
 
 describe('RelatedProgramsBanner', () => {
-  test('render empty', () => {
-    reduxHooks.useCardRelatedProgramsData.mockReturnValue({
-      length: 0,
-    });
-    const el = shallow(<RelatedProgramsBanner cardId={cardId} />);
-    expect(el.isEmptyRender()).toEqual(true);
+  it('render empty', () => {
+    reduxHooks.useCardRelatedProgramsData.mockReturnValue({});
+    render(<IntlProvider locale="en"><RelatedProgramsBanner cardId={cardId} /></IntlProvider>);
+    const banner = screen.queryByRole('alert');
+    expect(banner).toBeNull();
+  });
+
+  it('render with programs', () => {
+    reduxHooks.useCardRelatedProgramsData.mockReturnValue(programData);
+    render(<IntlProvider locale="en"><RelatedProgramsBanner cardId={cardId} /></IntlProvider>);
+    const list = screen.getByRole('list');
+    expect(list.childElementCount).toBe(programData.list.length);
   });
 
-  test('render with programs', () => {
-    reduxHooks.useCardRelatedProgramsData.mockReturnValue({
-      list: [
-        {
-          title: 'Program 1',
-          url: 'http://example.com/program1',
-        },
-        {
-          title: 'Program 2',
-          url: 'http://example.com/program2',
-        },
-      ],
-      length: 2,
-    });
-    const el = shallow(<RelatedProgramsBanner cardId={cardId} />);
-    expect(el.snapshot).toMatchSnapshot();
+  it('render related programs title', () => {
+    reduxHooks.useCardRelatedProgramsData.mockReturnValue(programData);
+    render(<IntlProvider locale="en"><RelatedProgramsBanner cardId={cardId} /></IntlProvider>);
+    const title = screen.getByText('Related Programs:');
+    expect(title).toBeInTheDocument();
   });
 });

package/src/containers/CourseCard/components/CourseCardBanners/index.test.jsx

@@ -1,16 +1,25 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import { MemoryRouter } from 'react-router-dom';
 
+import { reduxHooks } from '@src/hooks';
 import CourseCardBanners from '.';
 
-jest.mock('./CourseBanner', () => 'CourseBanner');
-jest.mock('./CertificateBanner', () => 'CertificateBanner');
-jest.mock('./CreditBanner', () => 'CreditBanner');
-jest.mock('./EntitlementBanner', () => 'EntitlementBanner');
-jest.mock('./RelatedProgramsBanner', () => 'RelatedProgramsBanner');
+jest.mock('./CourseBanner', () => jest.fn(() => <div>CourseBanner</div>));
+jest.mock('./CertificateBanner', () => jest.fn(() => <div>CertificateBanner</div>));
+jest.mock('./CreditBanner', () => jest.fn(() => <div>CreditBanner</div>));
+jest.mock('./EntitlementBanner', () => jest.fn(() => <div>EntitlementBanner</div>));
+jest.mock('./RelatedProgramsBanner', () => jest.fn(() => <div>RelatedProgramsBanner</div>));
+
+const mockedComponents = [
+  'CourseBanner',
+  'CertificateBanner',
+  'CreditBanner',
+  'EntitlementBanner',
+  'RelatedProgramsBanner',
+];
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
     useCardEnrollmentData: jest.fn(() => ({ isEnrolled: true })),
   },
@@ -20,13 +29,33 @@ describe('CourseCardBanners', () => {
   const props = {
     cardId: 'test-card-id',
   };
-  test('renders default CourseCardBanners', () => {
-    const wrapper = shallow(<CourseCardBanners {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders default CourseCardBanners', () => {
+    reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: true });
+    render(
+      <MemoryRouter>
+        <IntlProvider locale="en">
+          <CourseCardBanners {...props} />
+        </IntlProvider>
+      </MemoryRouter>
+    );
+    mockedComponents.map((componentName) => {
+      const mockedComponent = screen.getByText(componentName);
+      return expect(mockedComponent).toBeInTheDocument();
+    });
   });
-  test('render with isEnrolled false', () => {
+  it('render with isEnrolled false', () => {
     reduxHooks.useCardEnrollmentData.mockReturnValueOnce({ isEnrolled: false });
-    const wrapper = shallow(<CourseCardBanners {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    render(
+      <MemoryRouter>
+        <IntlProvider locale="en">
+          <CourseCardBanners {...props} />
+        </IntlProvider>
+      </MemoryRouter>
+    );
+    const mockedComponentsIfNotEnrolled = mockedComponents.slice(-2);
+    mockedComponentsIfNotEnrolled.map((componentName) => {
+      const mockedComponent = screen.getByText(componentName);
+      return expect(mockedComponent).toBeInTheDocument();
+    });
   });
 });

package/src/containers/CourseCard/components/CourseCardDetails/hooks.test.js

@@ -1,12 +1,11 @@
 import { useIntl } from '@openedx/frontend-base';
 
-import { keyStore } from 'utils';
-import { utilHooks, reduxHooks } from 'hooks';
-
+import { keyStore } from '@src/utils';
+import { utilHooks, reduxHooks } from '@src/hooks';
 import * as hooks from './hooks';
 import messages from './messages';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   utilHooks: {
     useFormatDate: jest.fn(),
   },
@@ -20,6 +19,16 @@ jest.mock('hooks', () => ({
   },
 }));
 
+jest.mock('@openedx/frontend-base', () => {
+  const { formatMessage } = jest.requireActual('@src/testUtils');
+  return {
+    ...jest.requireActual('@openedx/frontend-base'),
+    useIntl: () => ({
+      formatMessage,
+    }),
+  };
+});
+
 const cardId = 'my-test-card-id';
 const courseNumber = 'test-course-number';
 const useAccessMessage = 'test-access-message';
@@ -36,9 +45,8 @@ describe('CourseCardDetails hooks', () => {
   });
 
   describe('useCardDetailsData', () => {
-    const providerData = {
-      name: 'my-provider-name',
-    };
+    const providerName = 'my-provider-name';
+    const providerData = {};
     const entitlementData = {
       isEntitlement: false,
       disableViewCourse: false,
@@ -68,8 +76,10 @@ describe('CourseCardDetails hooks', () => {
       expect(out.accessMessage).toEqual(mockAccessMessage({ cardId }));
     });
     it('forwards provider name if it exists, else formatted unknown provider name', () => {
-      expect(out.providerName).toEqual(providerData.name);
-      runHook({ provider: { name: '' } });
+      runHook({ provider: { name: providerName } });
+      expect(out.providerName).toEqual(providerName);
+
+      runHook({ provider: {} });
       expect(out.providerName).toEqual(formatMessage(messages.unknownProviderName));
     });
     it('forward changeOrLeaveSessionMessage', () => {

package/src/containers/CourseCard/components/CourseCardDetails/index.scss

@@ -1,7 +1,3 @@
-@import "~@edx/brand/paragon/variables";
-@import "~@openedx/paragon/scss/core/core";
-@import "~@edx/brand/paragon/overrides";
-
 a.course-card-title {
-  color: $black;
+  color: var(--pgn-color-black);
 }

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

@@ -1,5 +1,4 @@
-import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 
 import CourseCardDetails from '.';
 
@@ -48,23 +47,36 @@ describe('CourseCard Details component', () => {
     return separatorsCount;
   };
 
-  test('has change session button on entitlement course', () => {
+  it('has change session button on entitlement course', () => {
     const wrapper = createWrapper();
-    expect(wrapper.container).toMatchSnapshot();
+    const sessionButton = screen.getByRole('button', { name: defaultHooks.changeOrLeaveSessionMessage });
+    expect(sessionButton).toBeInTheDocument();
+
+    const accessMessage = screen.getByText((text) => text.includes(defaultHooks.accessMessage));
+    expect(accessMessage).toBeInTheDocument();
     // it has 3 separator, 4 column
     expect(fetchSeparators(wrapper)).toBe(3);
   });
 
-  test('has change session button on entitlement course but no access message', () => {
+  it('has change session button on entitlement course but no access message', () => {
     const wrapper = createWrapper({ accessMessage: null });
-    expect(wrapper.container).toMatchSnapshot();
+    const sessionButton = screen.getByRole('button', { name: defaultHooks.changeOrLeaveSessionMessage });
+    expect(sessionButton).toBeInTheDocument();
+
+    const accessMessage = screen.queryByText((text) => text.includes(defaultHooks.accessMessage));
+    expect(accessMessage).toBeNull();
+
     // it has 2 separator, 3 column
     expect(fetchSeparators(wrapper)).toBe(2);
   });
 
-  test('does not have change session button on regular course', () => {
+  it('does not have change session button on regular course', () => {
     const wrapper = createWrapper({ isEntitlement: false });
-    expect(wrapper.container).toMatchSnapshot();
+    const sessionButton = screen.queryByRole('button', { name: defaultHooks.changeOrLeaveSessionMessage });
+    expect(sessionButton).toBeNull();
+
+    const accessMessage = screen.getByText((text) => text.includes(defaultHooks.accessMessage));
+    expect(accessMessage).toBeInTheDocument();
     // it has 2 separator, 3 column
     expect(fetchSeparators(wrapper)).toBe(2);
   });

package/src/containers/CourseCard/components/CourseCardImage.test.jsx

@@ -1,61 +1,68 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { reduxHooks } from 'hooks';
-import track from 'tracking';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@openedx/frontend-base';
+import { formatMessage } from '@src/testUtils';
+import { reduxHooks } from '@src/hooks';
 import useActionDisabledState from './hooks';
-import CourseCardImage from './CourseCardImage';
-
-const homeUrl = 'home-url';
+import { CourseCardImage } from './CourseCardImage';
+import messages from '../messages';
 
-jest.mock('tracking', () => ({
-  course: {
-    courseImageClicked: jest.fn().mockName('segment.courseImageClicked'),
-  },
-}));
+const homeUrl = 'https://example.com';
+const bannerImgSrc = 'banner-img-src.jpg';
 
-jest.mock('hooks', () => ({
+jest.mock('@src/hooks', () => ({
   reduxHooks: {
-    useCardCourseData: jest.fn(() => ({ bannerImgSrc: 'banner-img-src' })),
+    useCardCourseData: jest.fn(() => ({ bannerImgSrc })),
     useCardCourseRunData: jest.fn(() => ({ homeUrl })),
-    useCardEnrollmentData: jest.fn(() => ({ isVerified: true })),
+    useCardEnrollmentData: jest.fn(),
     useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
       trackCourseEvent: { eventName, cardId, url },
     })),
   },
 }));
-jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));
+
+jest.mock('./hooks', () => jest.fn());
 
 describe('CourseCardImage', () => {
   const props = {
-    cardId: 'cardId',
-    orientation: 'orientation',
+    cardId: 'test-card-id',
+    orientation: 'horizontal',
   };
-  beforeEach(() => {
-    jest.clearAllMocks();
+
+  it('renders course image with correct attributes', () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: true });
+    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
+    render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
+
+    const image = screen.getByRole('img', { name: formatMessage(messages.bannerAlt) });
+    expect(image).toBeInTheDocument();
+    expect(image.src).toContain(bannerImgSrc);
+    expect(image.parentElement).toHaveClass('horizontal');
   });
-  describe('snapshot', () => {
-    test('renders clickable link course Image', () => {
-      const wrapper = shallow(<CourseCardImage {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.instance.type).toBe('a');
-      expect(wrapper.instance.props.onClick).toEqual(
-        reduxHooks.useTrackCourseEvent(
-          track.course.courseImageClicked,
-          props.cardId,
-          homeUrl,
-        ),
-      );
-    });
-    test('renders disabled link', () => {
-      useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
-      const wrapper = shallow(<CourseCardImage {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-      expect(wrapper.instance.type).toBe('div');
-    });
+
+  it('isVerified, should render badge', () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
+    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
+    render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
+
+    const badge = screen.getByText(formatMessage(messages.verifiedBanner));
+    expect(badge).toBeInTheDocument();
+    const badgeImg = screen.getByRole('img', { name: formatMessage(messages.verifiedBannerRibbonAlt) });
+    expect(badgeImg).toBeInTheDocument();
+  });
+
+  it('renders link with correct href if disableCourseTitle is false', () => {
+    useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
+    reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: false });
+    render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
+
+    const link = screen.getByRole('link');
+    expect(link).toHaveAttribute('href', homeUrl);
   });
-  describe('behavior', () => {
+  describe('hooks', () => {
     it('initializes', () => {
-      shallow(<CourseCardImage {...props} />);
+      useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
+      reduxHooks.useCardEnrollmentData.mockReturnValue({ isVerified: true });
+      render(<IntlProvider locale="en"><CourseCardImage {...props} /></IntlProvider>);
       expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
       expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
         props.cardId,

package/src/containers/CourseCard/components/CourseCardMenu/SocialShareMenu.jsx

@@ -1,8 +1,7 @@
-import React from 'react';
+import { useContext } from 'react';
 import PropTypes from 'prop-types';
 import * as ReactShare from 'react-share';
 
-import { StrictDict } from '@edx/react-unit-test-utils';
 import { useIntl } from '@openedx/frontend-base';
 import { Dropdown } from '@openedx/paragon';
 
@@ -12,9 +11,9 @@ import { reduxHooks } from '../../../../hooks';
 
 import messages from './messages';
 
-export const testIds = StrictDict({
+export const testIds = {
   emailSettingsModalToggle: 'emailSettingsModalToggle',
-});
+};
 
 export const SocialShareMenu = ({ cardId, emailSettings }) => {
   const { formatMessage } = useIntl();