Andal.LND/frontend-app-learner-dashboard
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Diana Villalvazo
2025-06-24 11:50:11 -05:00
committed by GitHub
parent 6ae8180f99
commit cae7b1bba0
10 changed files with 193 additions and 658 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
src/containers/LearnerDashboardHeader/ConfirmEmailBanner/__snapshots__/index.test.jsx.snap
View File

@@ -1,72 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`ConfirmEmailBanner snapshot Show on unverified 1`] = `
<Fragment>
<PageBanner
dismissible={true}
onDismiss={[MockFunction closePageBanner]}
show={[MockFunction showPageBanner]}
>
<format-message-function
message={
{
"defaultMessage": "Remember to confirm your email so that you can keep learning! {confirmNowButton}.",
"description": "Text for reminding user to confirm email",
"id": "leanerDashboard.confirmEmailTextReminderBanner",
}
}
values={
{
"confirmNowButton": <Button
className="confirm-email-now-button"
onClick={[MockFunction openConfirmModalButtonClick]}
size="inline"
variant="link"
>
Confirm Now
</Button>,
}
}
/>
</PageBanner>
<MarketingModal
footerNode={
<Button
className="mx-auto my-3"
onClick={[MockFunction userConfirmEmailButtonClick]}
variant="danger"
>
I've confirmed my email
</Button>
}
hasCloseButton={false}
heroNode={
<ModalDialog.Hero
className="bg-gray-300"
>
<Image
alt="confirm email background"
className="m-auto"
src="icon/mock/path"
/>
</ModalDialog.Hero>
}
isOpen={[MockFunction showConfirmModal]}
onClose={[MockFunction closeConfirmModal]}
title=""
>
<h2
className="text-center p-3 h1"
>
Confirm your email
</h2>
<p
className="text-center"
>
We've sent you an email to verify your account. Please check your inbox and click on the big red button to confirm and keep learning.
</p>
</MarketingModal>
</Fragment>
`;
exports[`ConfirmEmailBanner snapshot do not show on already verified 1`] = `null`;

53
src/containers/LearnerDashboardHeader/ConfirmEmailBanner/index.test.jsx
View File

@@ -1,14 +1,19 @@
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 hooks from './hooks';
import ConfirmEmailBanner from '.';
import messages from './messages';
jest.mock('./hooks', () => ({
__esModule: true,
default: jest.fn(),
}));
jest.unmock('@openedx/paragon');
jest.unmock('@edx/frontend-platform/i18n');
jest.unmock('react');
const hookProps = {
isNeeded: true,
showPageBanner: jest.fn().mockName('showPageBanner'),
@@ -20,16 +25,44 @@ const hookProps = {
};
describe('ConfirmEmailBanner', () => {
describe('snapshot', () => {
test('do not show on already verified', () => {
describe('render', () => {
it('do not show on already verified', () => {
hooks.mockReturnValueOnce({ ...hookProps, isNeeded: false });
const el = shallow(<ConfirmEmailBanner />);
expect(el.snapshot).toMatchSnapshot();
render(<IntlProvider locale="en"><ConfirmEmailBanner /></IntlProvider>);
const banner = screen.queryByRole('alert');
expect(banner).toBeNull();
});
test('Show on unverified', () => {
hooks.mockReturnValueOnce({ ...hookProps });
const el = shallow(<ConfirmEmailBanner />);
expect(el.snapshot).toMatchSnapshot();
describe('On unverified', () => {
beforeEach(() => {
hooks.mockReturnValueOnce({ ...hookProps });
render(<IntlProvider locale="en"><ConfirmEmailBanner /></IntlProvider>);
});
it('show banner', () => {
const banner = screen.getByRole('alert');
expect(banner).toContainHTML('Remember to confirm');
});
it('show confirm now button', () => {
const confirmButton = screen.getByRole('button', { name: messages.confirmNowButton.defaultMessage });
expect(confirmButton).toBeInTheDocument();
});
it('show modal', () => {
const modal = screen.getByRole('dialog');
expect(modal).toBeInTheDocument();
});
it('show modal header and body', () => {
const modalHeader = screen.getByText(messages.confirmEmailModalHeader.defaultMessage);
expect(modalHeader).toBeInTheDocument();
const modalBody = screen.getByText(messages.confirmEmailModalBody.defaultMessage);
expect(modalBody).toBeInTheDocument();
});
it('show confirm image', () => {
const confirmButton = screen.getByRole('img', { name: messages.confirmEmailImageAlt.defaultMessage });
expect(confirmButton).toBeInTheDocument();
});
it('show confirm email button', () => {
const confirmButton = screen.getByRole('button', { name: messages.verifiedConfirmEmailButton.defaultMessage });
expect(confirmButton).toBeInTheDocument();
});
});
});
});

61
src/containers/LearnerDashboardHeader/__snapshots__/index.test.jsx.snap
View File

@@ -1,61 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`LearnerDashboardHeader render 1`] = `
<Fragment>
<ConfirmEmailBanner />
<Header
mainMenuItems={
[
{
"content": "Courses",
"href": "/",
"isActive": true,
"type": "item",
},
{
"content": "Discover New",
"href": "http://localhost:18000/course-search-url",
"onClick": [Function],
"type": "item",
},
]
}
secondaryMenuItems={[]}
userMenuItems={
[
{
"heading": "",
"items": [
{
"content": "Profile",
"href": "http://account-profile-url.test/u/undefined",
"type": "item",
},
{
"content": "Account",
"href": "http://account-settings-url.test",
"type": "item",
},
{
"content": "Order History",
"href": "test-url",
"type": "item",
},
],
},
{
"heading": "",
"items": [
{
"content": "Sign Out",
"href": "http://localhost:18000/logout",
"type": "item",
},
],
},
]
}
/>
<MasqueradeBar />
</Fragment>
`;

68
src/containers/LearnerDashboardHeader/index.test.jsx
View File

@@ -1,15 +1,17 @@
import { mergeConfig } from '@edx/frontend-platform';
import { shallow } from '@edx/react-unit-test-utils';
import Header from '@edx/frontend-component-header';
import { render, screen } from '@testing-library/react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import urls from 'data/services/lms/urls';
import LearnerDashboardHeader from '.';
import { findCoursesNavClicked } from './hooks';
const courseSearchUrl = '/course-search-url';
jest.mock('hooks', () => ({
reduxHooks: {
usePlatformSettingsData: jest.fn(() => ({
courseSearchUrl: '/course-search-url',
courseSearchUrl,
})),
},
}));
@@ -17,36 +19,54 @@ jest.mock('./hooks', () => ({
...jest.requireActual('./hooks'),
findCoursesNavClicked: jest.fn(),
}));
jest.mock('containers/MasqueradeBar', () => 'MasqueradeBar');
jest.mock('./ConfirmEmailBanner', () => 'ConfirmEmailBanner');
jest.mock('@edx/frontend-component-header', () => 'Header');
jest.unmock('@openedx/paragon');
jest.unmock('@edx/frontend-platform/i18n');
jest.unmock('react');
const mockedHeaderProps = jest.fn();
jest.mock('containers/MasqueradeBar', () => jest.fn(() => <div>MasqueradeBar</div>));
jest.mock('./ConfirmEmailBanner', () => jest.fn(() => <div>ConfirmEmailBanner</div>));
jest.mock('@edx/frontend-component-header', () => jest.fn((props) => {
mockedHeaderProps(props);
return <div>Header</div>;
}));
describe('LearnerDashboardHeader', () => {
test('render', () => {
beforeEach(() => jest.clearAllMocks());
it('renders and discover url is correct', () => {
mergeConfig({ ORDER_HISTORY_URL: 'test-url' });
const wrapper = shallow(<LearnerDashboardHeader />);
expect(wrapper.snapshot).toMatchSnapshot();
expect(wrapper.instance.findByType('ConfirmEmailBanner')).toHaveLength(1);
expect(wrapper.instance.findByType('MasqueradeBar')).toHaveLength(1);
expect(wrapper.instance.findByType(Header)).toHaveLength(1);
wrapper.instance.findByType(Header)[0].props.mainMenuItems[1].onClick();
expect(findCoursesNavClicked).toHaveBeenCalledWith(urls.baseAppUrl('/course-search-url'));
expect(wrapper.instance.findByType(Header)[0].props.secondaryMenuItems.length).toBe(0);
render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
expect(screen.getByText('ConfirmEmailBanner')).toBeInTheDocument();
expect(screen.getByText('MasqueradeBar')).toBeInTheDocument();
expect(screen.getByText('Header')).toBeInTheDocument();
const props = mockedHeaderProps.mock.calls[0][0];
const { mainMenuItems } = props;
const discoverUrl = mainMenuItems[1].href;
mainMenuItems[1].onClick();
expect(discoverUrl).toBe(urls.baseAppUrl(courseSearchUrl));
expect(findCoursesNavClicked).toHaveBeenCalledWith(urls.baseAppUrl(courseSearchUrl));
});
test('should display Help link if SUPPORT_URL is set', () => {
it('should display Help link if SUPPORT_URL is set', () => {
mergeConfig({ SUPPORT_URL: 'http://localhost:18000/support' });
const wrapper = shallow(<LearnerDashboardHeader />);
expect(wrapper.instance.findByType(Header)[0].props.secondaryMenuItems.length).toBe(1);
render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
const props = mockedHeaderProps.mock.calls[0][0];
const { secondaryMenuItems } = props;
expect(secondaryMenuItems.length).toBe(1);
});
test('should display Programs link if it is enabled by configuration', () => {
it('should display Programs link if it is enabled by configuration', () => {
mergeConfig({ ENABLE_PROGRAMS: true });
const wrapper = shallow(<LearnerDashboardHeader />);
expect(wrapper.instance.findByType(Header)[0].props.mainMenuItems.length).toBe(3);
render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
const props = mockedHeaderProps.mock.calls[0][0];
const { mainMenuItems } = props;
expect(mainMenuItems.length).toBe(3);
});
test('should not display Discover New tab if it is disabled by configuration', () => {
it('should not display Discover New tab if it is disabled by configuration', () => {
mergeConfig({ NON_BROWSABLE_COURSES: true });
const wrapper = shallow(<LearnerDashboardHeader />);
expect(wrapper.instance.findByType(Header)[0].props.mainMenuItems.length).toBe(2);
render(<IntlProvider locale="en"><LearnerDashboardHeader /></IntlProvider>);
const props = mockedHeaderProps.mock.calls[0][0];
const { mainMenuItems } = props;
expect(mainMenuItems.length).toBe(2);
});
});

220
src/containers/MasqueradeBar/__snapshots__/index.test.jsx.snap
View File

@@ -1,220 +0,0 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`MasqueradeBar snapshot can masquerade 1`] = `
<div
className="w-100 shadow-sm px-2"
>
<Form
className="masquerade-bar w-100"
>
<Fragment>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={false}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value=""
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={true}
labels={
{
"default": "Submit",
}
}
state="default"
type="submit"
variant="brand"
/>
</Fragment>
</Form>
</div>
`;
exports[`MasqueradeBar snapshot can masquerade with input 1`] = `
<div
className="w-100 shadow-sm px-2"
>
<Form
className="masquerade-bar w-100"
>
<Fragment>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={false}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value="test"
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={false}
labels={
{
"default": "Submit",
}
}
state="default"
type="submit"
variant="brand"
/>
</Fragment>
</Form>
</div>
`;
exports[`MasqueradeBar snapshot cannot masquerade 1`] = `null`;
exports[`MasqueradeBar snapshot is masquerading failed with error 1`] = `
<div
className="w-100 shadow-sm px-2"
>
<Form
className="masquerade-bar w-100"
>
<Fragment>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={true}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value=""
/>
<FormControlFeedback
hasIcon={false}
type="invalid"
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={true}
labels={
{
"default": "Submit",
}
}
state="default"
type="submit"
variant="brand"
/>
</Fragment>
</Form>
</div>
`;
exports[`MasqueradeBar snapshot is masquerading pending 1`] = `
<div
className="w-100 shadow-sm px-2"
>
<Form
className="masquerade-bar w-100"
>
<Fragment>
<FormLabel
className="masquerade-form-label"
id="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
View as:
</FormLabel>
<FormGroup
className="masquerade-form-input"
isInvalid={false}
>
<FormControl
aria-labelledby="masquerade-form-label"
floatingLabel="Username or email"
onChange={[MockFunction handleMasqueradeInputChange]}
value=""
/>
</FormGroup>
<StatefulButton
className="mr-3"
disabled={true}
labels={
{
"default": "Submit",
}
}
state="pending"
type="submit"
variant="brand"
/>
</Fragment>
</Form>
</div>
`;
exports[`MasqueradeBar snapshot is masquerading with input 1`] = `
<div
className="w-100 shadow-sm px-2"
>
<Form
className="masquerade-bar w-100"
>
<Fragment>
<FormLabel
className="masquerade-form-label"
inline={true}
>
<Icon
src={[MockFunction icons.PersonSearch]}
/>
Viewing as:
</FormLabel>
<Chip
className="masquerade-chip"
iconAfter={[MockFunction icons.Close]}
onClick={[MockFunction handleClearMasquerade]}
>
test
</Chip>
</Fragment>
</Form>
</div>
`;

60
src/containers/MasqueradeBar/index.test.jsx
View File

@@ -1,14 +1,18 @@
import React from 'react';
import { shallow } from '@edx/react-unit-test-utils';
import { render, screen } from '@testing-library/react';
import { formatMessage } from 'testUtils';
import MasqueradeBar from '.';
import hooks from './hooks';
import messages from './messages';
jest.mock('./hooks', () => ({
useMasqueradeBarData: jest.fn(),
}));
jest.unmock('@openedx/paragon');
jest.unmock('@edx/frontend-platform/i18n');
jest.unmock('react');
describe('MasqueradeBar', () => {
const masqueradeMockData = {
canMasquerade: true,
@@ -23,47 +27,67 @@ describe('MasqueradeBar', () => {
formatMessage,
};
describe('snapshot', () => {
test('can masquerade', () => {
describe('render', () => {
it('can masquerade', () => {
hooks.useMasqueradeBarData.mockReturnValueOnce(masqueradeMockData);
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
render(<MasqueradeBar />);
const labelStudentName = screen.getByText(messages.StudentNameInput.defaultMessage);
expect(labelStudentName).toBeInTheDocument();
const submitButton = screen.getByRole('button', { name: messages.SubmitButton.defaultMessage });
expect(submitButton).toBeInTheDocument();
});
test('can masquerade with input', () => {
it('can masquerade with input', () => {
const masqueradeInput = 'test';
hooks.useMasqueradeBarData.mockReturnValueOnce({
...masqueradeMockData,
masqueradeInput: 'test',
masqueradeInput,
});
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
render(<MasqueradeBar />);
const valueMasqueradeInput = screen.getByRole('textbox', { value: masqueradeInput });
expect(valueMasqueradeInput).toBeInTheDocument();
});
test('cannot masquerade', () => {
it('cannot masquerade', () => {
hooks.useMasqueradeBarData.mockReturnValueOnce({
...masqueradeMockData,
canMasquerade: false,
});
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
render(<MasqueradeBar />);
const labelStudentName = screen.queryByText(messages.StudentNameInput.defaultMessage);
expect(labelStudentName).toBeNull();
});
test('is masquerading with input', () => {
it('is masquerading with input', () => {
const masqueradeInput = 'test';
hooks.useMasqueradeBarData.mockReturnValueOnce({
...masqueradeMockData,
isMasquerading: true,
masqueradeInput: 'test',
masqueradeInput,
});
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
render(<MasqueradeBar />);
const chipMasqueradeInput = screen.getByText(masqueradeInput);
expect(chipMasqueradeInput).toBeInTheDocument();
expect(chipMasqueradeInput.parentElement).toHaveClass('masquerade-chip');
});
test('is masquerading failed with error', () => {
it('is masquerading failed with error', () => {
const masqueradeErrorMessage = 'test-error';
const masqueradeInput = 'test';
hooks.useMasqueradeBarData.mockReturnValueOnce({
...masqueradeMockData,
isMasqueradingFailed: true,
masqueradeErrorMessage: 'test-error',
masqueradeErrorMessage,
});
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
render(<MasqueradeBar />);
const valueMasqueradeInput = screen.getByRole('textbox', { value: masqueradeInput });
expect(valueMasqueradeInput).toHaveClass('is-invalid');
});
test('is masquerading pending', () => {
it('is masquerading pending', () => {
hooks.useMasqueradeBarData.mockReturnValueOnce({
...masqueradeMockData,
isMasqueradingPending: true,
});
expect(shallow(<MasqueradeBar />).snapshot).toMatchSnapshot();
render(<MasqueradeBar />);
const pendingButton = screen.getByRole('button', { name: messages.SubmitButton.defaultMessage });
expect(pendingButton).toBeInTheDocument();
expect(pendingButton).toHaveAttribute('aria-disabled', 'true');
});
});
});

169
src/containers/RelatedProgramsModal/__snapshots__/index.test.jsx.snap
View File

@@ -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>
`;

46
src/containers/RelatedProgramsModal/components/ProgramCard.test.jsx
View File

@@ -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();
});
});
});

60
src/containers/RelatedProgramsModal/components/__snapshots__/ProgramCard.test.jsx.snap
View File

@@ -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>
`;

42
src/containers/RelatedProgramsModal/index.test.jsx
View File

@@ -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);
});
});
});