Skip to content

Deprecate react-unit-test-utils 6/15 #660

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Jun 23, 2025
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 0 additions & 111 deletions src/containers/CourseCard/__snapshots__/index.test.jsx.snap

This file was deleted.

87 changes: 49 additions & 38 deletions src/containers/CourseCard/components/CourseCardImage.test.jsx
Original file line number Diff line number Diff line change
@@ -1,61 +1,72 @@
import { shallow } from '@edx/react-unit-test-utils';

import { render, screen } from '@testing-library/react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { formatMessage } from 'testUtils';
import { reduxHooks } from 'hooks';
import track from 'tracking';
import useActionDisabledState from './hooks';
import CourseCardImage from './CourseCardImage';
import { CourseCardImage } from './CourseCardImage';
import messages from '../messages';

const homeUrl = 'home-url';
jest.unmock('@edx/frontend-platform/i18n');
jest.unmock('@openedx/paragon');
jest.unmock('react');

jest.mock('tracking', () => ({
course: {
courseImageClicked: jest.fn().mockName('segment.courseImageClicked'),
},
}));
const homeUrl = 'https://example.com';
const bannerImgSrc = 'banner-img-src.jpg';

jest.mock('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,
92 changes: 51 additions & 41 deletions src/containers/CourseCard/components/CourseCardTitle.test.jsx
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { shallow } from '@edx/react-unit-test-utils';

import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { reduxHooks } from 'hooks';
import track from 'tracking';
import useActionDisabledState from './hooks';
import CourseCardTitle from './CourseCardTitle';

const homeUrl = 'home-url';

jest.mock('tracking', () => ({
course: {
courseTitleClicked: jest.fn().mockName('segment.courseTitleClicked'),
@@ -15,53 +13,65 @@ jest.mock('tracking', () => ({

jest.mock('hooks', () => ({
reduxHooks: {
useCardCourseData: jest.fn(() => ({ courseName: 'course-name' })),
useCardCourseRunData: jest.fn(() => ({ homeUrl })),
useTrackCourseEvent: jest.fn((eventName, cardId, url) => ({
trackCourseEvent: { eventName, cardId, url },
})),
useCardCourseData: jest.fn(),
useCardCourseRunData: jest.fn(),
useTrackCourseEvent: jest.fn(),
},
}));

jest.mock('./hooks', () => jest.fn(() => ({ disableCourseTitle: false })));

jest.unmock('@edx/frontend-platform/i18n');
jest.unmock('@openedx/paragon');
jest.unmock('react');

describe('CourseCardTitle', () => {
const props = {
cardId: 'cardId',
cardId: 'test-card-id',
};

const courseName = 'Test Course';
const homeUrl = 'http://test.com';
const handleTitleClick = jest.fn();

beforeEach(() => {
jest.clearAllMocks();
reduxHooks.useCardCourseData.mockReturnValue({ courseName });
reduxHooks.useCardCourseRunData.mockReturnValue({ homeUrl });
reduxHooks.useTrackCourseEvent.mockReturnValue(handleTitleClick);
});

it('renders course name as link when not disabled', async () => {
useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
render(<CourseCardTitle {...props} />);

const user = userEvent.setup();
const link = screen.getByRole('link', { name: courseName });
expect(link).toHaveAttribute('href', homeUrl);

await user.click(link);
expect(handleTitleClick).toHaveBeenCalled();
});
describe('snapshot', () => {
test('renders clickable link course title', () => {
const wrapper = shallow(<CourseCardTitle {...props} />);
expect(wrapper.snapshot).toMatchSnapshot();
const title = wrapper.instance.findByTestId('CourseCardTitle');
expect(title[0].type).toBe('a');
expect(title[0].props.onClick).toEqual(
reduxHooks.useTrackCourseEvent(
track.course.courseTitleClicked,
props.cardId,
homeUrl,
),
);
});
test('renders disabled link', () => {
useActionDisabledState.mockReturnValueOnce({ disableCourseTitle: true });
const wrapper = shallow(<CourseCardTitle {...props} />);
expect(wrapper.snapshot).toMatchSnapshot();
const title = wrapper.instance.findByTestId('CourseCardTitle');
expect(title[0].type).toBe('span');
expect(title[0].props.onClick).toBeUndefined();
});

it('renders course name as span when disabled', () => {
useActionDisabledState.mockReturnValue({ disableCourseTitle: true });
render(<CourseCardTitle {...props} />);

const text = screen.getByText(courseName);
expect(text).toBeInTheDocument();
expect(text.tagName.toLowerCase()).toBe('span');
});
describe('behavior', () => {
it('initializes', () => {
shallow(<CourseCardTitle {...props} />);
expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(
props.cardId,
);
expect(useActionDisabledState).toHaveBeenCalledWith(props.cardId);
});

it('uses correct hooks with cardId', () => {
useActionDisabledState.mockReturnValue({ disableCourseTitle: false });
render(<CourseCardTitle {...props} />);

expect(reduxHooks.useCardCourseData).toHaveBeenCalledWith(props.cardId);
expect(reduxHooks.useCardCourseRunData).toHaveBeenCalledWith(props.cardId);
expect(reduxHooks.useTrackCourseEvent).toHaveBeenCalledWith(
track.course.courseTitleClicked,
props.cardId,
homeUrl,
);
});
});

This file was deleted.

This file was deleted.

49 changes: 37 additions & 12 deletions src/containers/CourseCard/index.test.jsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
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 CourseCard from '.';
import hooks from './hooks';
@@ -8,22 +8,47 @@ jest.mock('./hooks', () => ({
useIsCollapsed: jest.fn(),
}));

jest.mock('./components/CourseCardBanners', () => 'CourseCardBanners');
jest.mock('./components/CourseCardImage', () => 'CourseCardImage');
jest.mock('./components/CourseCardMenu', () => 'CourseCardMenu');
jest.mock('./components/CourseCardActions', () => 'CourseCardActions');
jest.mock('./components/CourseCardDetails', () => 'CourseCardDetails');
jest.mock('./components/CourseCardTitle', () => 'CourseCardTitle');
const namesMockComponents = [
'CourseCardBanners',
'CourseCardImage',
'CourseCardMenu',
'CourseCardActions',
'CourseCardDetails',
'CourseCardTitle',
];

jest.mock('./components/CourseCardBanners', () => jest.fn(() => <div>CourseCardBanners</div>));
jest.mock('./components/CourseCardImage', () => jest.fn(() => <div>CourseCardImage</div>));
jest.mock('./components/CourseCardMenu', () => jest.fn(() => <div>CourseCardMenu</div>));
jest.mock('./components/CourseCardActions', () => jest.fn(() => <div>CourseCardActions</div>));
jest.mock('./components/CourseCardDetails', () => jest.fn(() => <div>CourseCardDetails</div>));
jest.mock('./components/CourseCardTitle', () => jest.fn(() => <div>CourseCardTitle</div>));

jest.unmock('@edx/frontend-platform/i18n');
jest.unmock('@openedx/paragon');
jest.unmock('react');

const cardId = 'test-card-id';

describe('CourseCard component', () => {
test('snapshot: collapsed', () => {
it('collapsed', () => {
hooks.useIsCollapsed.mockReturnValueOnce(true);
expect(shallow(<CourseCard cardId={cardId} />).snapshot).toMatchSnapshot();
render(<IntlProvider locale="en"><CourseCard cardId={cardId} /></IntlProvider>);
const cardImage = screen.getByText('CourseCardImage');
expect(cardImage.parentElement).not.toHaveClass('d-flex');
});
it('not collapsed', () => {
hooks.useIsCollapsed.mockReturnValueOnce(false);
render(<IntlProvider locale="en"><CourseCard cardId={cardId} /></IntlProvider>);
const cardImage = screen.getByText('CourseCardImage');
expect(cardImage.parentElement).toHaveClass('d-flex');
});
test('snapshot: not collapsed', () => {
it('renders courseCard child components', () => {
hooks.useIsCollapsed.mockReturnValueOnce(false);
expect(shallow(<CourseCard cardId={cardId} />).snapshot).toMatchSnapshot();
render(<IntlProvider locale="en"><CourseCard cardId={cardId} /></IntlProvider>);
namesMockComponents.map((courseCardName) => {
const courseCardComponent = screen.getByText(courseCardName);
return expect(courseCardComponent).toBeInTheDocument();
});
});
});
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
import { shallow } from '@edx/react-unit-test-utils';
import { render, screen } from '@testing-library/react';
import { formatMessage } from 'testUtils';
import { IntlProvider } from '@edx/frontend-platform/i18n';

import { FilterKeys } from 'data/constants/app';
import Checkbox from './Checkbox';
import messages from '../messages';

jest.unmock('@edx/frontend-platform/i18n');
jest.unmock('@openedx/paragon');
jest.unmock('react');

describe('Checkbox', () => {
describe('snapshot', () => {
describe('renders correctly', () => {
Object.keys(FilterKeys).forEach((filterKey) => {
it(`renders ${filterKey}`, () => {
const wrapper = shallow(<Checkbox filterKey={filterKey} />);
expect(wrapper.snapshot).toMatchSnapshot();
render(<IntlProvider locale="en"><Checkbox filterKey={filterKey} /></IntlProvider>);
expect(screen.getByText(formatMessage(messages[filterKey]))).toBeInTheDocument();
});
});
});
Original file line number Diff line number Diff line change
@@ -1,29 +1,58 @@
import { shallow } from '@edx/react-unit-test-utils';

import { render, screen, fireEvent } from '@testing-library/react';
import { IntlProvider } from '@edx/frontend-platform/i18n';
import { formatMessage } from 'testUtils';
import { FilterKeys } from 'data/constants/app';
import FilterForm, { filterOrder } from './FilterForm';
import { FilterForm, filterOrder } from './FilterForm';
import messages from '../messages';

jest.unmock('@edx/frontend-platform/i18n');
jest.unmock('@openedx/paragon');
jest.unmock('react');

const mockHandleFilterChange = jest.fn();

jest.mock('./Checkbox', () => 'Checkbox');
const defaultProps = {
filters: [FilterKeys.inProgress],
handleFilterChange: mockHandleFilterChange,
};

const renderComponent = (props = defaultProps) => render(
<IntlProvider messages={{}}>
<FilterForm {...props} />
</IntlProvider>,
);

describe('FilterForm', () => {
const props = {
filters: ['test-filter'],
handleFilterChange: jest.fn().mockName('handleFilterChange'),
};
describe('snapshot', () => {
test('renders', () => {
const wrapper = shallow(<FilterForm {...props} />);
expect(wrapper.snapshot).toMatchSnapshot();
beforeEach(() => {
jest.clearAllMocks();
});

it('renders all filter checkboxes in correct order', () => {
renderComponent();
const checkboxes = screen.getAllByRole('checkbox');
expect(checkboxes).toHaveLength(filterOrder.length);
checkboxes.forEach((checkbox, index) => {
expect(checkbox).toHaveAttribute('value', filterOrder[index]);
});
});

test('filterOrder', () => {
expect(filterOrder).toEqual([
FilterKeys.inProgress,
FilterKeys.notStarted,
FilterKeys.done,
FilterKeys.notEnrolled,
FilterKeys.upgraded,
]);
it('checks boxes based on filters prop', () => {
const filters = [FilterKeys.inProgress, FilterKeys.done];
renderComponent({ ...defaultProps, filters });
filters.forEach(filter => {
expect(screen.getByRole('checkbox', { name: formatMessage(messages[filter]) })).toBeChecked();
});
});

it('calls handleFilterChange when checkbox is clicked', () => {
renderComponent();
const checkbox = screen.getByRole('checkbox', { name: formatMessage(messages.notStarted) });
fireEvent.click(checkbox);
expect(mockHandleFilterChange).toHaveBeenCalled();
});

it('displays course status heading', () => {
renderComponent();
expect(screen.getByText(/course status/i)).toBeInTheDocument();
});
});

This file was deleted.

This file was deleted.