feat: fix tests

Author: wgu-jesse-stewart

app.d.ts

@@ -8,8 +8,3 @@ declare module '*.svg' {
   const content: string;
   export default content;
 }
-
-declare module '*.scss' {
-  const content: Record<string, string>;
-  export default content;
-}

jest.config.js

@@ -14,7 +14,5 @@ module.exports = createConfig('test', {
     '^@src/(.*)$': '<rootDir>/src/$1',
     '\\.svg$': '<rootDir>/src/__mocks__/svg.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/src/__mocks__/file.js',
-    '^codemirror$': '<rootDir>/src/__mocks__/codemirror.js',
-    '^@codemirror/state$': '<rootDir>/src/__mocks__/codemirror.js',
   },
 });

src/__mocks__/codemirror.js

@@ -64,6 +64,7 @@ describe('DisableCertificatesModal', () => {
 
     const buttons = screen.getAllByRole('button');
     const closeButton = buttons.find(btn => btn.textContent === messages.close.defaultMessage);
+    if (!closeButton) throw new Error('Close button not found');
     await user.click(closeButton);
 
     expect(mockOnClose).toHaveBeenCalledTimes(1);

src/certificates/components/DisableCertificatesModal.test.tsx

@@ -0,0 +1,58 @@
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useCourseInfo } from '@src/data/apiHook';
+import GradingActionRow from '@src/grading/components/GradingActionRow';
+import { useGradingConfiguration } from '@src/grading/data/apiHook';
+import messages from '@src/grading/messages';
+import { renderWithIntl } from '@src/testUtils';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    courseId: 'course-v1:edX+DemoX+Demo_Course',
+  }),
+}));
+
+jest.mock('@src/data/apiHook', () => ({
+  useCourseInfo: jest.fn(),
+}));
+
+jest.mock('@src/grading/data/apiHook', () => ({
+  useGradingConfiguration: jest.fn(),
+}));
+
+describe('GradingActionRow', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (useCourseInfo as jest.Mock).mockReturnValue({ data: { gradebookUrl: 'https://example.com/gradebook', studioGradingUrl: 'https://example.com/studio' } });
+    // TODO: Update this mock to use similar structure when API is ready, currently just returning random text to ensure component renders without error
+    (useGradingConfiguration as jest.Mock).mockReturnValue({ data: 'Some random text' });
+  });
+
+  it('renders ActionRow with gradebook and configuration buttons', () => {
+    renderWithIntl(<GradingActionRow />);
+    expect(screen.getByRole('link', { name: messages.viewGradebook.defaultMessage })).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: messages.configurationAlt.defaultMessage })).toBeInTheDocument();
+  });
+
+  it('opens configuration menu when configuration button is clicked', async () => {
+    renderWithIntl(<GradingActionRow />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: messages.configurationAlt.defaultMessage }));
+    expect(screen.getByText('View Grading Configuration')).toBeInTheDocument();
+    expect(screen.getByText('View Course Grading Settings')).toBeInTheDocument();
+  });
+
+  it('opens and closes GradingConfigurationModal when menu item is clicked', async () => {
+    renderWithIntl(<GradingActionRow />);
+    const user = userEvent.setup();
+    await user.click(screen.getByRole('button', { name: messages.configurationAlt.defaultMessage }));
+    const gradingConfigButton = screen.getByText('View Grading Configuration');
+    await user.click(gradingConfigButton);
+    expect(screen.getByRole('dialog', { name: messages.gradingConfiguration.defaultMessage })).toBeInTheDocument();
+
+    // Close modal
+    await user.click(screen.getAllByRole('button', { name: messages.close.defaultMessage })[0]);
+    expect(screen.queryByRole('dialog', { name: messages.gradingConfiguration.defaultMessage })).not.toBeInTheDocument();
+  });
+});

src/components/CodeEditor.test.tsx

@@ -0,0 +1,55 @@
+import { screen } from '@testing-library/react';
+import { renderWithIntl } from '@src/testUtils';
+import { useGradingConfiguration } from '@src/grading/data/apiHook';
+import GradingConfigurationModal from '@src/grading/components/GradingConfigurationModal';
+import messages from '@src/grading/messages';
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    courseId: 'course-v1:edX+DemoX+Demo_Course',
+  }),
+}));
+
+jest.mock('../data/apiHook', () => ({
+  useGradingConfiguration: jest.fn(),
+}));
+
+describe('GradingConfigurationModal', () => {
+  const mockOnClose = jest.fn();
+
+  beforeEach(() => {
+    (useGradingConfiguration as jest.Mock).mockReturnValue({ data: null });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders modal when isOpen is true', () => {
+    renderWithIntl(<GradingConfigurationModal isOpen={true} onClose={mockOnClose} />);
+    expect(screen.getByRole('dialog')).toBeInTheDocument();
+  });
+
+  it('does not render modal when isOpen is false', () => {
+    renderWithIntl(<GradingConfigurationModal isOpen={false} onClose={mockOnClose} />);
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  });
+
+  it('displays grading configuration data when available', () => {
+    (useGradingConfiguration as jest.Mock).mockReturnValue({ data: 'Test grading configuration' });
+    renderWithIntl(<GradingConfigurationModal isOpen={true} onClose={mockOnClose} />);
+    expect(screen.getByText('Test grading configuration')).toBeInTheDocument();
+  });
+
+  it('displays no grading configuration message when data is null', () => {
+    (useGradingConfiguration as jest.Mock).mockReturnValue({ data: null });
+    renderWithIntl(<GradingConfigurationModal isOpen={true} onClose={mockOnClose} />);
+    expect(screen.getByText(messages.noGradingConfiguration.defaultMessage)).toBeInTheDocument();
+  });
+
+  it('calls useGradingConfiguration with courseId from params', () => {
+    renderWithIntl(<GradingConfigurationModal isOpen={true} onClose={mockOnClose} />);
+    expect(useGradingConfiguration).toHaveBeenCalledWith('course-v1:edX+DemoX+Demo_Course');
+  });
+});

src/components/CodeEditor.tsx

@@ -3,7 +3,6 @@ import { Button, ModalDialog } from '@openedx/paragon';
 import { useIntl } from '@openedx/frontend-base';
 import messages from '@src/grading/messages';
 import { useGradingConfiguration } from '@src/grading/data/apiHook';
-import CodeEditor from '@src/components/CodeEditor';
 
 interface GradingConfigurationModalProps {
   isOpen: boolean,
@@ -16,16 +15,14 @@ const GradingConfigurationModal = ({ isOpen, onClose }: GradingConfigurationModa
   const { data = null } = useGradingConfiguration(courseId);
 
   return (
-    <ModalDialog size="lg" title={intl.formatMessage(messages.gradingConfiguration)} isOpen={isOpen} onClose={onClose} isOverflowVisible={false}>
-      <ModalDialog.Header className="p-3 pl-4 border-bottom">
-        <ModalDialog.Title as="h3" className="m-0">
-          {intl.formatMessage(messages.gradingConfiguration)}
-        </ModalDialog.Title>
+    <ModalDialog title={intl.formatMessage(messages.gradingConfiguration)} isOpen={isOpen} onClose={onClose} isOverflowVisible={false}>
+      <ModalDialog.Header>
+        <h3>{intl.formatMessage(messages.gradingConfiguration)}</h3>
       </ModalDialog.Header>
       <ModalDialog.Body>
-        {data ? <CodeEditor data={data} /> : <p>{intl.formatMessage(messages.noGradingConfiguration)}</p>}
+        <p>{data ?? intl.formatMessage(messages.noGradingConfiguration)}</p>
       </ModalDialog.Body>
-      <ModalDialog.Footer className="p-4 border-top">
+      <ModalDialog.Footer>
         <Button onClick={onClose}>{intl.formatMessage(messages.close)}</Button>
       </ModalDialog.Footer>
     </ModalDialog>