Deprecate react-unit-test-utils 7/15

src/containers/CourseFilterControls/ActiveCourseFilters.test.jsx

@@ -1,17 +1,32 @@
-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 { FilterKeys } from 'data/constants/app';
 import ActiveCourseFilters from './ActiveCourseFilters';
+import messages from './messages';
+
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
+const filters = Object.values(FilterKeys);
 
 describe('ActiveCourseFilters', () => {
   const props = {
-    filters: Object.values(FilterKeys),
+    filters,
     handleRemoveFilter: jest.fn().mockName('handleRemoveFilter'),
   };
-  describe('snapshot', () => {
-    test('renders', () => {
-      const wrapper = shallow(<ActiveCourseFilters {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+  it('renders chips correctly', () => {
+    render(<IntlProvider locale="en"><ActiveCourseFilters {...props} /></IntlProvider>);
+    filters.map((key) => {
+      const chip = screen.getByText(formatMessage(messages[key]));
+      return expect(chip).toBeInTheDocument();
     });
   });
+  it('renders button correctly', () => {
+    render(<IntlProvider locale="en"><ActiveCourseFilters {...props} /></IntlProvider>);
+    const button = screen.getByRole('button', { name: formatMessage(messages.clearAll) });
+    expect(button).toBeInTheDocument();
+  });
 });

src/containers/CourseFilterControls/CourseFilterControls.test.jsx

@@ -1,60 +1,79 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render, screen } from '@testing-library/react';
+import { formatMessage } from 'testUtils';
 import { breakpoints, useWindowSize } from '@openedx/paragon';
-
 import { reduxHooks } from 'hooks';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { FilterKeys, SortKeys } from 'data/constants/app';
 
+import messages from './messages';
 import CourseFilterControls from './CourseFilterControls';
 import useCourseFilterControlsData from './hooks';
 
 jest.mock('hooks', () => ({
   reduxHooks: { useHasCourses: jest.fn() },
 }));
 
-jest.mock('./hooks', () => jest.fn().mockName('useCourseFilterControlsData'));
+jest.mock('./hooks', () => jest.fn());
 
-jest.mock('./components/FilterForm', () => 'FilterForm');
-jest.mock('./components/SortForm', () => 'SortForm');
+jest.unmock('@edx/frontend-platform/i18n');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
+jest.mock('@openedx/paragon', () => ({
+  ...jest.requireActual('@openedx/paragon'),
+  useWindowSize: jest.fn(),
+}));
 
-reduxHooks.useHasCourses.mockReturnValue(true);
+const filters = Object.values(FilterKeys);
+
+const mockControlsData = {
+  isOpen: false,
+  open: jest.fn().mockName('open'),
+  close: jest.fn().mockName('close'),
+  target: 'target-test',
+  setTarget: jest.fn(),
+  handleFilterChange: jest.fn().mockName('handleFilterChange'),
+  handleSortChange: jest.fn().mockName('handleSortChange'),
+};
 
 describe('CourseFilterControls', () => {
   const props = {
-    sortBy: 'test-sort-by',
+    sortBy: SortKeys.enrolled,
     setSortBy: jest.fn().mockName('setSortBy'),
-    filters: ['test-filter'],
+    filters,
   };
 
-  useCourseFilterControlsData.mockReturnValue({
-    isOpen: false,
-    open: jest.fn().mockName('open'),
-    close: jest.fn().mockName('close'),
-    target: 'test-target',
-    setTarget: jest.fn().mockName('setTarget'),
-    handleFilterChange: jest.fn().mockName('handleFilterChange'),
-    handleSortChange: jest.fn().mockName('handleSortChange'),
-  });
-
-  describe('no courses', () => {
-    test('snapshot', () => {
-      reduxHooks.useHasCourses.mockReturnValueOnce(false);
-      useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
-      const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
-    });
-  });
-  describe('mobile', () => {
-    test('snapshot', () => {
+  describe('mobile and open', () => {
+    it('should render sheet', () => {
+      reduxHooks.useHasCourses.mockReturnValue(true);
+      useCourseFilterControlsData.mockReturnValue({ ...mockControlsData, isOpen: true });
       useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth - 1 });
-      const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+      render(<IntlProvider locale="en"><CourseFilterControls {...props} /></IntlProvider>);
+      const sheet = screen.getByRole('presentation', { hidden: true });
+      expect(sheet).toBeInTheDocument();
+      expect(sheet.parentElement).toHaveClass('sheet-container');
     });
   });
   describe('is not mobile', () => {
-    test('snapshot', () => {
+    it('should have button disabled', () => {
+      reduxHooks.useHasCourses.mockReturnValue(true);
+      useCourseFilterControlsData.mockReturnValue({ ...mockControlsData, isOpen: true });
       useWindowSize.mockReturnValueOnce({ width: breakpoints.small.minWidth });
-      const wrapper = shallow(<CourseFilterControls {...props} />);
-      expect(wrapper.snapshot).toMatchSnapshot();
+      render(<IntlProvider locale="en"><CourseFilterControls {...props} /></IntlProvider>);
+      const filterForm = screen.getByText(messages.courseStatus.defaultMessage);
+      const modal = filterForm.closest('div.pgn__modal-popup__tooltip');
+      expect(modal).toBeInTheDocument();
+    });
+  });
+  describe('no courses', () => {
+    it('should have button disabled', () => {
+      reduxHooks.useHasCourses.mockReturnValue(false);
+      useCourseFilterControlsData.mockReturnValue(mockControlsData);
+      useWindowSize.mockReturnValue({ width: breakpoints.small.minWidth });
+      render(<IntlProvider locale="en"><CourseFilterControls {...props} /></IntlProvider>);
+      const button = screen.getByRole('button', { name: formatMessage(messages.refine) });
+      expect(button).toBeInTheDocument();
+      expect(button).toBeDisabled();
     });
   });
 });