test: deprecate react-unit-test-utils 6/14 (#342)

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

* fix: improve accessible queries

* test: fixes test to cover required TextEditor attribute, and checks badge-variant class on StatusBadge

* test: remove unwanted test-id

---------

Co-authored-by: Tony Busa <[email protected]>

Author: vmnavarro94

src/views/SubmissionView/TextResponseEditor/LaTexPreview.test.jsx

@@ -1,19 +1,66 @@
 import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { renderMathJax } from 'utils/index';
 
 import LatexPreview from './LaTexPreview';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('utils/index', () => ({
   renderMathJax: jest.fn(),
 }));
 
 describe('<LatexPreview />', () => {
-  it('renders', () => {
-    const wrapper = shallow(<LatexPreview latexValue="some latext value" />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  const mockRenderMathJax = renderMathJax;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders with latex value', () => {
+    const latexValue = 'some latex value';
+    const { container } = render(<LatexPreview latexValue={latexValue} />);
+
+    const previewDiv = container.querySelector('.mt-2');
+    expect(previewDiv).toBeInTheDocument();
+
+    const contentDiv = previewDiv.querySelector('div');
+    expect(contentDiv).toBeInTheDocument();
+  });
+
+  it('calls renderMathJax on mount', () => {
+    render(<LatexPreview latexValue="test latex" />);
+
+    expect(mockRenderMathJax).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls renderMathJax when latexValue changes', () => {
+    const { rerender } = render(<LatexPreview latexValue="initial value" />);
+
+    expect(mockRenderMathJax).toHaveBeenCalledTimes(1);
+
+    rerender(<LatexPreview latexValue="new value" />);
+
+    expect(mockRenderMathJax).toHaveBeenCalledTimes(2);
+  });
+
+  it('renders with correct HTML content', () => {
+    const latexValue = '<math>x^2</math>';
+    const { container } = render(<LatexPreview latexValue={latexValue} />);
+
+    const previewDiv = container.querySelector('.mt-2');
+    const contentDiv = previewDiv.querySelector('div');
+    expect(contentDiv.innerHTML).toBe(latexValue);
+  });
+
+  it('has correct CSS structure', () => {
+    const { container } = render(<LatexPreview latexValue="test" />);
 
-    React.useEffect.mock.calls[0][0]();
-    expect(renderMathJax).toHaveBeenCalled();
+    const outerDiv = container.querySelector('.mt-2');
+    expect(outerDiv).toBeInTheDocument();
+    expect(outerDiv.children).toHaveLength(1);
   });
 });

src/views/SubmissionView/TextResponseEditor/TextEditor.jsx

@@ -27,6 +27,7 @@ const TextEditor = ({
             {formatMessage(messages.yourResponse)} ({formatMessage(optional ? messages.optional : messages.required)})
           </h3>
         )}
+        required={!optional}
         value={value}
         onChange={onChange}
         placeholder={formatMessage(messages.textResponsePlaceholder)}

src/views/SubmissionView/TextResponseEditor/TextEditor.test.jsx

@@ -1,21 +1,53 @@
-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 TextEditor from './TextEditor';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 describe('<TextEditor />', () => {
-  const props = {
+  const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
+
+  const defaultProps = {
     optional: true,
     disabled: false,
     value: 'value',
-    onChange: jest.fn().mockName('onChange'),
+    onChange: jest.fn(),
+  };
+
+  const defaultPropsOptionalFalseDisabledTrue = {
+    optional: false,
+    disabled: true,
+    value: 'value',
+    onChange: jest.fn(),
   };
 
-  it('render optional', () => {
-    const wrapper = shallow(<TextEditor {...props} />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('has correct CSS classes and accessibility attributes', () => {
+    renderWithIntl(<TextEditor {...defaultProps} />);
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveAttribute('name', 'text-response');
+    expect(textarea).toHaveAttribute(
+      'placeholder',
+      'Enter your response to the prompt above',
+    );
+    expect(textarea).toHaveValue('value');
+    expect(textarea).not.toHaveAttribute('required');
   });
 
-  it('render required', () => {
-    const wrapper = shallow(<TextEditor {...props} optional={false} isInValid />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+  it('has correct CSS classes and accessibility attributes with optional false and disabled true', () => {
+    renderWithIntl(<TextEditor {...defaultPropsOptionalFalseDisabledTrue} />);
+    const textarea = screen.getByRole('textbox');
+    expect(textarea).toBeInTheDocument();
+    expect(textarea).toHaveAttribute('name', 'text-response');
+    expect(textarea).toHaveAttribute(
+      'placeholder',
+      'Enter your response to the prompt above',
+    );
+    expect(textarea).toHaveValue('value');
+    expect(textarea).toHaveAttribute('required');
   });
 });

src/views/SubmissionView/TextResponseEditor/__snapshots__/LaTexPreview.test.jsx.snap

@@ -1,68 +1,126 @@
-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 { useRubricConfig } from 'hooks/app';
 
 import StudioViewRubric from './StudioViewRubric';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+jest.unmock('@edx/frontend-platform/i18n');
+
 jest.mock('hooks/app', () => ({
   useRubricConfig: jest.fn(),
 }));
 jest.mock('./XBlockStudioViewProvider', () => ({
   useXBlockStudioViewContext: () => ({
     rubricIsOpen: true,
-    toggleRubric: jest.fn().mockName('toggleRubric'),
+    toggleRubric: jest.fn(),
   }),
 }));
 
 describe('<StudioViewRubric />', () => {
-  it('render with criteria and options', () => {
-    useRubricConfig.mockReturnValue({
-      criteria: [
+  const renderWithIntl = (component) => render(<IntlProvider locale="en">{component}</IntlProvider>);
+
+  const sampleCriteria = [
+    {
+      name: 'criterion1',
+      description: 'description1',
+      options: [
         {
-          name: 'criterion1',
+          name: 'option1',
+          label: 'label1',
+          points: 1,
           description: 'description1',
-          options: [
-            {
-              name: 'option1',
-              label: 'label1',
-              points: 1,
-              description: 'description1',
-            },
-            {
-              name: 'option2',
-              label: 'label2',
-              points: 2,
-              description: 'description2',
-            },
-          ],
         },
         {
-          name: 'criterion2',
+          name: 'option2',
+          label: 'label2',
+          points: 2,
           description: 'description2',
-          options: [
-            {
-              name: 'option2',
-              label: 'label2',
-              points: 2,
-              description: 'description2',
-            },
-          ],
         },
       ],
+    },
+    {
+      name: 'criterion2',
+      description: 'description2',
+      options: [
+        {
+          name: 'option3',
+          label: 'label3',
+          points: 3,
+          description: 'description3',
+        },
+      ],
+    },
+  ];
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders rubric with criteria and options', () => {
+    useRubricConfig.mockReturnValue({
+      criteria: sampleCriteria,
+    });
+
+    renderWithIntl(<StudioViewRubric />);
+
+    expect(screen.getByText('Rubric')).toBeInTheDocument();
+    expect(screen.getAllByTestId('criteria-test-id')).toHaveLength(2);
+
+    expect(screen.getByText('criterion1')).toBeInTheDocument();
+    expect(screen.getAllByText('description1')).toHaveLength(2);
+    expect(screen.getByText('criterion2')).toBeInTheDocument();
+    expect(screen.getAllByText('description2')).toHaveLength(2);
+  });
+
+  it('renders criterion options with points', () => {
+    useRubricConfig.mockReturnValue({
+      criteria: sampleCriteria,
     });
 
-    const wrapper = shallow(<StudioViewRubric />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioViewRubric />);
 
-    expect(wrapper.instance.findByTestId('criteria-test-id').length).toBe(2);
+    expect(screen.getByText(/label1: 1/)).toBeInTheDocument();
+    expect(screen.getByText(/label2: 2/)).toBeInTheDocument();
+    expect(screen.getByText(/label3: 3/)).toBeInTheDocument();
+    expect(screen.getAllByText(/point/)).toHaveLength(3);
   });
 
-  it('render without criteria', () => {
+  it('renders without criteria when empty', () => {
     useRubricConfig.mockReturnValue({ criteria: [] });
 
-    const wrapper = shallow(<StudioViewRubric />);
-    expect(wrapper.snapshot).toMatchSnapshot();
+    renderWithIntl(<StudioViewRubric />);
+
+    expect(screen.getByText('Rubric')).toBeInTheDocument();
+    expect(screen.queryAllByTestId('criteria-test-id')).toHaveLength(0);
+  });
+
+  it('renders criterion labels correctly', () => {
+    useRubricConfig.mockReturnValue({
+      criteria: sampleCriteria,
+    });
+
+    renderWithIntl(<StudioViewRubric />);
+
+    expect(screen.getAllByText('Criteria name:')).toHaveLength(2);
+    expect(screen.getAllByText('Criteria description:')).toHaveLength(2);
+    expect(screen.getAllByText('Criteria options:')).toHaveLength(2);
+  });
+
+  it('renders multiple criteria with different option counts', () => {
+    useRubricConfig.mockReturnValue({
+      criteria: sampleCriteria,
+    });
+
+    renderWithIntl(<StudioViewRubric />);
+
+    const criteria = screen.getAllByTestId('criteria-test-id');
+    expect(criteria).toHaveLength(2);
 
-    expect(wrapper.instance.findByTestId('criteria-test-id').length).toBe(0);
+    const lists = screen.getAllByRole('list');
+    expect(lists).toHaveLength(2);
   });
 });