test: deprecate react-unit-test-utils part-9

src/App.test.jsx

@@ -1,63 +1,99 @@
-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 { selectors } from 'data/redux';
+import { App, mapStateToProps } from './App';
 
-import { App } from './App';
+jest.unmock('react');
+jest.unmock('@openedx/paragon');
+jest.unmock('@edx/frontend-platform/i18n');
 
-jest.mock('data/redux', () => ({
-  app: {
-    selectors: {
-      courseMetadata: (state) => ({ courseMetadata: state }),
-      isEnabled: (state) => ({ isEnabled: state }),
-    },
-  },
+// we want to scope these tests to the App component, so we mock some child components to reduce complexity
+jest.mock('@edx/frontend-component-header', () => ({
+  LearningHeader: () => <div data-testid="header">Learning Header</div>,
 }));
 
-jest.mock('@edx/frontend-component-header', () => ({
-  LearningHeader: 'Header',
+jest.mock('@edx/frontend-component-footer', () => ({
+  FooterSlot: () => <div data-testid="footer">Footer</div>,
 }));
-jest.mock('@edx/frontend-component-footer', () => ({ FooterSlot: 'FooterSlot' }));
 
-jest.mock('containers/DemoWarning', () => 'DemoWarning');
-jest.mock('containers/ListView', () => 'ListView');
-jest.mock('components/Head', () => 'Head');
+jest.mock('containers/ListView', () => function ListView() {
+  return <div data-testid="list-view">List View</div>;
+});
+
+jest.mock('containers/DemoWarning', () => function DemoWarning() {
+  return <div role="alert" data-testid="demo-warning">Demo Warning</div>;
+});
 
-let el;
+jest.mock('data/redux', () => ({
+  selectors: {
+    app: {
+      courseMetadata: jest.fn((state) => state.courseMetadata || {
+        org: 'test-org',
+        number: 'test-101',
+        title: 'Test Course',
+      }),
+      isEnabled: jest.fn((state) => (state.isEnabled !== undefined ? state.isEnabled : true)),
+    },
+  },
+}));
+
+const renderWithIntl = (component) => render(
+  <IntlProvider locale="en" messages={{}}>
+    {component}
+  </IntlProvider>,
+);
 
-describe('App router component', () => {
-  const props = {
+describe('App component', () => {
+  const defaultProps = {
     courseMetadata: {
-      org: 'course-org',
-      number: 'course-number',
-      title: 'course-title',
+      org: 'test-org',
+      number: 'test-101',
+      title: 'Test Course',
     },
     isEnabled: true,
   };
-  test('snapshot: enabled', () => {
-    expect(shallow(<App {...props} />).snapshot).toMatchSnapshot();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
   });
-  test('snapshot: disabled (show demo warning)', () => {
-    expect(shallow(<App {...props} isEnabled={false} />).snapshot).toMatchSnapshot();
+
+  it('renders header with course metadata', () => {
+    renderWithIntl(<App {...defaultProps} />);
+
+    const header = screen.getByTestId('header');
+    expect(header).toBeInTheDocument();
   });
-  describe('component', () => {
-    beforeEach(() => {
-      el = shallow(<App {...props} />);
-    });
-    describe('Router', () => {
-      test('Routing - ListView is only route', () => {
-        expect(el.instance.findByTestId('main')[0].children).toHaveLength(1);
-        expect(el.instance.findByTestId('main')[0].children[0].type).toBe('ListView');
-      });
-    });
 
-    test('Header to use courseMetadata props', () => {
-      const {
-        courseTitle,
-        courseNumber,
-        courseOrg,
-      } = el.instance.findByTestId('header')[0].props;
-      expect(courseTitle).toEqual(props.courseMetadata.title);
-      expect(courseNumber).toEqual(props.courseMetadata.number);
-      expect(courseOrg).toEqual(props.courseMetadata.org);
+  it('renders main content', () => {
+    renderWithIntl(<App {...defaultProps} />);
+
+    const main = screen.getByTestId('main');
+    expect(main).toBeInTheDocument();
+  });
+
+  it('does not render demo warning when enabled', () => {
+    renderWithIntl(<App {...defaultProps} />);
+
+    const demoWarning = screen.queryByRole('alert');
+    expect(demoWarning).not.toBeInTheDocument();
+  });
+
+  it('renders demo warning when disabled', () => {
+    renderWithIntl(<App {...defaultProps} isEnabled={false} />);
+
+    const demoWarning = screen.getByRole('alert');
+    expect(demoWarning).toBeInTheDocument();
+  });
+
+  describe('mapStateToProps', () => {
+    it('maps state properties correctly', () => {
+      const testState = { arbitraryState: 'some data' };
+      const mapped = mapStateToProps(testState);
+
+      expect(selectors.app.courseMetadata).toHaveBeenCalledWith(testState);
+      expect(selectors.app.isEnabled).toHaveBeenCalledWith(testState);
+      expect(mapped.courseMetadata).toEqual(selectors.app.courseMetadata(testState));
+      expect(mapped.isEnabled).toEqual(selectors.app.isEnabled(testState));
     });
   });
 });

src/containers/ReviewModal/ReviewErrors/FetchErrors.test.jsx

@@ -1,4 +1,6 @@
 import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { selectors, thunkActions } from 'data/redux';
 import { RequestKeys } from 'data/constants/requests';
@@ -9,6 +11,10 @@ import {
   mapDispatchToProps,
 } from './FetchErrors';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('data/redux', () => ({
   selectors: {
     requests: {
@@ -22,39 +28,51 @@ jest.mock('data/redux', () => ({
   },
 }));
 
-jest.mock('./ReviewError', () => 'ReviewError');
-
 const requestKey = RequestKeys.fetchSubmission;
 
+const renderWithIntl = (component) => render(
+  <IntlProvider locale="en" messages={{}}>
+    {component}
+  </IntlProvider>,
+);
+
 describe('FetchErrors component', () => {
   const props = {
     isFailed: false,
+    reload: jest.fn(),
   };
-  describe('component', () => {
-    beforeEach(() => {
-      props.reload = jest.fn();
-    });
-    describe('snapshots', () => {
-      test('snapshot: no failure', () => {
-        expect(<FetchErrors {...props} />).toMatchSnapshot();
-      });
-      test('snapshot: with failure', () => {
-        expect(<FetchErrors {...props} isFailed={false} />).toMatchSnapshot();
-      });
-    });
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('does not render when isFailed is false', () => {
+    const { container } = renderWithIntl(<FetchErrors {...props} />);
+    expect(container.firstChild).toBeNull();
   });
+
+  it('renders error message when isFailed is true', () => {
+    renderWithIntl(<FetchErrors {...props} isFailed />);
+    expect(screen.getByText('Error loading submissions')).toBeInTheDocument();
+    expect(screen.getByText('An error occurred while loading this submission. Try reloading this submission.')).toBeInTheDocument();
+  });
+
+  it('renders reload button when error occurs', () => {
+    renderWithIntl(<FetchErrors {...props} isFailed />);
+    expect(screen.getByText('Reload submission')).toBeInTheDocument();
+  });
+
   describe('mapStateToProps', () => {
-    let mapped;
     const testState = { some: 'test-state' };
-    beforeEach(() => {
-      mapped = mapStateToProps(testState);
-    });
-    test('isFailed loads from requests.isFailed(fetchSubmission)', () => {
+
+    it('maps isFailed from requests selector', () => {
+      const mapped = mapStateToProps(testState);
       expect(mapped.isFailed).toEqual(selectors.requests.isFailed(testState, { requestKey }));
     });
   });
+
   describe('mapDispatchToProps', () => {
-    it('loads reload from thunkActions.grading.loadSubmission', () => {
+    it('maps reload from thunkActions.grading.loadSubmission', () => {
       expect(mapDispatchToProps.reload).toEqual(thunkActions.grading.loadSubmission);
     });
   });