test: deprecate react-unit-test-utils 5/14 (#341)

* test: deprecate react-unit-test-utils 5/14

* test: addressed feedback

Author: vmnavarro94

src/views/XBlockStudioView/components/StudioViewPrompt.test.jsx

@@ -1,36 +1,48 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { usePrompts } from 'hooks/app';
 
 import StudioViewPrompt from './StudioViewPrompt';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/app', () => ({
   usePrompts: jest.fn(),
 }));
 jest.mock('./XBlockStudioViewProvider', () => ({
   useXBlockStudioViewContext: () => ({
     promptIsOpen: true,
-    togglePrompt: jest.fn().mockName('togglePrompt'),
+    togglePrompt: jest.fn(),
   }),
 }));
-jest.mock('components/Prompt', () => 'Prompt');
+jest.mock('components/Prompt', () => {
+  // eslint-disable-next-line react/prop-types
+  const Prompt = ({ prompt }) => <div data-testid="prompt">{prompt}</div>;
+  return Prompt;
+});
 
 describe('<StudioViewPrompt />', () => {
-  it('render with prompt', () => {
+  const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
+
+  it('renders prompts when prompts array has items', () => {
     usePrompts.mockReturnValue(['prompt1', 'prompt2']);
 
-    const wrapper = shallow(<StudioViewPrompt />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioViewPrompt />);
 
-    expect(wrapper.instance.findByType('Prompt')).toHaveLength(2);
+    expect(screen.getAllByTestId('prompt')).toHaveLength(2);
+    expect(screen.getByText('prompt1')).toBeInTheDocument();
+    expect(screen.getByText('prompt2')).toBeInTheDocument();
   });
 
-  it('render without prompt', () => {
+  it('renders no prompts when prompts array is empty', () => {
     usePrompts.mockReturnValue([]);
 
-    const wrapper = shallow(<StudioViewPrompt />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioViewPrompt />);
 
-    expect(wrapper.instance.findByType('Prompt')).toHaveLength(0);
+    expect(screen.queryByTestId('prompt')).not.toBeInTheDocument();
   });
 });

src/views/XBlockStudioView/components/StudioViewSettings/FileUploadConfig.test.jsx

@@ -1,34 +1,80 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { useFileUploadConfig } from 'hooks/app';
 
 import FileUploadConfig from './FileUploadConfig';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/app', () => ({
   useFileUploadConfig: jest.fn(),
 }));
-jest.mock('./RequiredConfig', () => 'RequiredConfig');
+jest.mock('./RequiredConfig', () => {
+  // eslint-disable-next-line react/prop-types
+  const RequiredConfig = ({ required }) => (
+    <span data-testid="required-config">
+      {required ? 'Required' : 'Optional'}
+    </span>
+  );
+  return RequiredConfig;
+});
 
 describe('<FileUploadConfig />', () => {
-  it('should render', () => {
+  const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
+
+  it('renders file upload configuration when enabled', () => {
     useFileUploadConfig.mockReturnValue({
       enabled: true,
       fileUploadLimit: 10,
       required: true,
     });
 
-    const wrapper = shallow(<FileUploadConfig />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<FileUploadConfig />);
+
+    expect(screen.getByText('File uploads:')).toBeInTheDocument();
+    expect(screen.getByText('File upload limit:')).toBeInTheDocument();
+    // Check for the upload limit number in the context of the upload limit label
+    expect(
+      screen.getByText('File upload limit:').closest('p'),
+    ).toHaveTextContent('10');
+    expect(screen.getByTestId('required-config')).toBeInTheDocument();
   });
 
-  it('should not render', () => {
+  it('does not render when file upload is disabled', () => {
     useFileUploadConfig.mockReturnValue({
       enabled: false,
     });
 
-    const wrapper = shallow(<FileUploadConfig />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    const { container } = renderWithIntl(<FileUploadConfig />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('handles null config gracefully', () => {
+    useFileUploadConfig.mockReturnValue(null);
+
+    const { container } = renderWithIntl(<FileUploadConfig />);
+
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders with different file upload limit', () => {
+    useFileUploadConfig.mockReturnValue({
+      enabled: true,
+      fileUploadLimit: 5,
+      required: false,
+    });
+
+    renderWithIntl(<FileUploadConfig />);
 
-    expect(wrapper.isEmptyRender()).toBe(true);
+    // Check for the upload limit number in the context of the upload limit label
+    expect(
+      screen.getByText('File upload limit:').closest('p'),
+    ).toHaveTextContent('5');
+    expect(screen.getByTestId('required-config')).toHaveTextContent('Optional');
   });
 });

src/views/XBlockStudioView/components/StudioViewSettings/__snapshots__/FileUploadConfig.test.jsx.snap

@@ -1,44 +1,72 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
 
 import { useORAConfigData } from 'hooks/app';
 import { stepNames } from 'constants/index';
 
 import StudioViewSteps from './StudioViewSteps';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/app', () => ({
   useORAConfigData: jest.fn(),
 }));
 jest.mock('./XBlockStudioViewProvider', () => ({
   useXBlockStudioViewContext: () => ({
     assessmentStepsIsOpen: true,
-    toggleAssessmentSteps: jest.fn().mockName('toggleAssessmentSteps'),
+    toggleAssessmentSteps: jest.fn(),
   }),
 }));
 
 describe('<StudioViewSteps />', () => {
-  it('render without steps', () => {
+  const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
+
+  it('renders without steps when order is empty', () => {
     useORAConfigData.mockReturnValue({
       assessmentSteps: {
         order: [],
       },
     });
 
-    const wrapper = shallow(<StudioViewSteps />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioViewSteps />);
 
-    expect(wrapper.instance.findByType('p')).toHaveLength(0);
+    expect(screen.getByText('Assessment steps')).toBeInTheDocument();
+    expect(screen.queryByText(/Step \d+:/)).not.toBeInTheDocument();
   });
 
-  it('render with steps', () => {
+  it('renders with steps when order has items', () => {
     useORAConfigData.mockReturnValue({
       assessmentSteps: {
         order: [stepNames.self, stepNames.peer],
       },
     });
 
-    const wrapper = shallow(<StudioViewSteps />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioViewSteps />);
+
+    expect(screen.getByText('Assessment steps')).toBeInTheDocument();
+    expect(screen.getByText('Step 1:')).toBeInTheDocument();
+    expect(screen.getByText('Step 2:')).toBeInTheDocument();
+    expect(screen.getByText('Self assessment')).toBeInTheDocument();
+    expect(screen.getByText('Peer assessment')).toBeInTheDocument();
+  });
+
+  it('renders correct number of step paragraphs', () => {
+    useORAConfigData.mockReturnValue({
+      assessmentSteps: {
+        order: [stepNames.self, stepNames.peer, stepNames.staff],
+      },
+    });
+
+    renderWithIntl(<StudioViewSteps />);
 
-    expect(wrapper.instance.findByType('p')).toHaveLength(2);
+    expect(screen.getByText('Step 1:')).toBeInTheDocument();
+    expect(screen.getByText('Step 2:')).toBeInTheDocument();
+    expect(screen.getByText('Step 3:')).toBeInTheDocument();
+    expect(screen.getByText('Self assessment')).toBeInTheDocument();
+    expect(screen.getByText('Peer assessment')).toBeInTheDocument();
+    expect(screen.getByText('Staff assessment')).toBeInTheDocument();
   });
 });

src/views/XBlockStudioView/components/StudioViewSteps.test.jsx

@@ -1,12 +1,17 @@
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { IntlProvider } from '@edx/frontend-platform/i18n';
+import userEvent from '@testing-library/user-event';
 
 import { useORAConfigData } from 'hooks/app';
-
 import { useXBlockStudioViewContext } from './XBlockStudioViewProvider';
-import messages from './messages';
 
 import StudioViewTitle from './StudioViewTitle';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/app', () => ({
   useORAConfigData: jest.fn(),
 }));
@@ -15,30 +20,59 @@ jest.mock('./XBlockStudioViewProvider', () => ({
 }));
 
 describe('<StudioViewTitle />', () => {
-  const mockIsAllClosed = jest.fn().mockName('isAllClosed');
-  useXBlockStudioViewContext.mockReturnValue({
-    isAllClosed: mockIsAllClosed,
-    toggleAll: jest.fn().mockName('toggleAll'),
-  });
-  useORAConfigData.mockReturnValue({
-    title: 'Test Title',
+  const mockIsAllClosed = jest.fn();
+  const mockToggleAll = jest.fn();
+
+  const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
+
+  beforeEach(() => {
+    useXBlockStudioViewContext.mockReturnValue({
+      isAllClosed: mockIsAllClosed,
+      toggleAll: mockToggleAll,
+    });
+    useORAConfigData.mockReturnValue({
+      title: 'Test Title',
+    });
   });
 
-  it('render title and button', () => {
+  it('renders title and expand button when all is closed', () => {
     mockIsAllClosed.mockReturnValue(true);
 
-    const wrapper = shallow(<StudioViewTitle />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioViewTitle />);
 
-    expect(wrapper.instance.findByType('Button')[0].children[0].el).toBe(messages.expandAllButton.defaultMessage);
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+      'Test Title',
+    );
+    expect(screen.getByRole('button')).toHaveTextContent('Expand all');
   });
 
-  it('render when all is not closed', () => {
+  it('renders title and collapse button when all is not closed', () => {
     mockIsAllClosed.mockReturnValue(false);
 
-    const wrapper = shallow(<StudioViewTitle />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioViewTitle />);
+
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+      'Test Title',
+    );
+    expect(screen.getByRole('button')).toHaveTextContent('Collapse all');
+  });
+
+  it('calls toggleAll when button is clicked', async () => {
+    const user = userEvent.setup();
+    mockIsAllClosed.mockReturnValue(true);
+
+    renderWithIntl(<StudioViewTitle />);
+
+    const button = screen.getByRole('button');
+    await user.click(button);
+
+    expect(mockToggleAll).toHaveBeenCalledTimes(1);
+  });
+
+  it('has correct CSS class on container', () => {
+    mockIsAllClosed.mockReturnValue(true);
+    const { container } = renderWithIntl(<StudioViewTitle />);
 
-    expect(wrapper.instance.findByType('Button')[0].children[0].el).toBe(messages.collapseAllButton.defaultMessage);
+    expect(container.querySelector('.block-title')).toBeInTheDocument();
   });
 });