feat: removed ora staff notification settings banner (#421)

Co-authored-by: Ayesha Waris <ayesha.waris@192.168.10.31>

src/components/ConfirmModal.test.jsx

@@ -1,7 +1,9 @@
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render } from '@testing-library/react';
 import { ConfirmModal } from './ConfirmModal';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('ConfirmModal', () => {
   const props = {
     isOpen: false,
@@ -12,10 +14,12 @@ describe('ConfirmModal', () => {
     onCancel: jest.fn().mockName('this.props.onCancel'),
     onConfirm: jest.fn().mockName('this.props.onConfirm'),
   };
-  test('snapshot: closed', () => {
-    expect(shallow(<ConfirmModal {...props} />).snapshot).toMatchSnapshot();
+  it('should not render content when modal is closed', () => {
+    const { queryByText } = render(<ConfirmModal {...props} />);
+    expect(queryByText(props.content)).toBeNull();
   });
-  test('snapshot: open', () => {
-    expect(shallow(<ConfirmModal {...props} isOpen />).snapshot).toMatchSnapshot();
+  it('should display content when modal is open', () => {
+    const { getByText } = render(<ConfirmModal {...props} isOpen />);
+    expect(getByText(props.content)).toBeInTheDocument();
   });
 });

src/components/DemoAlert/__snapshots__/index.test.jsx.snap

@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`DemoAlert component snapshot 1`] = `
-<AlertModal
-  footerNode={
-    <ActionRow>
-      <Button
-        onClick={[MockFunction props.onClose]}
-        variant="primary"
-      >
-        Confirm
-      </Button>
-    </ActionRow>
-  }
-  isOpen={true}
-  onClose={[MockFunction props.onClose]}
-  title="Demo submit prevented"
->
-  <p>
-    Grade submission is disabled in the Demo mode of the new ORA Staff Grader.
-  </p>
-</AlertModal>
-`;

src/components/DemoAlert/index.test.jsx

@@ -1,16 +1,34 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render, fireEvent } from '@testing-library/react';
 
 import { formatMessage } from 'testUtils';
+import messages from './messages';
 import { DemoAlert } from '.';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 describe('DemoAlert component', () => {
-  test('snapshot', () => {
-    const props = {
-      intl: { formatMessage },
-      isOpen: true,
-      onClose: jest.fn().mockName('props.onClose'),
-    };
-    expect(shallow(<DemoAlert {...props} />).snapshot).toMatchSnapshot();
+  const props = {
+    intl: { formatMessage },
+    isOpen: true,
+    onClose: jest.fn().mockName('props.onClose'),
+  };
+
+  it('does not render when isOpen is false', () => {
+    const { queryByText } = render(<DemoAlert {...props} isOpen={false} />);
+    expect(queryByText(formatMessage(messages.title))).toBeNull();
+  });
+
+  it('renders with correct title and message when isOpen is true', () => {
+    const { getByText } = render(<DemoAlert {...props} />);
+    expect(getByText(formatMessage(messages.title))).toBeInTheDocument();
+    expect(getByText(formatMessage(messages.warningMessage))).toBeInTheDocument();
+  });
+
+  it('calls onClose when confirmation button is clicked', () => {
+    const { getByText } = render(<DemoAlert {...props} />);
+    const confirmButton = getByText(formatMessage(messages.confirm));
+    fireEvent.click(confirmButton);
+    expect(props.onClose).toHaveBeenCalled();
   });
 });

src/components/FilePopoverContent/__snapshots__/index.test.jsx.snap

@@ -1,89 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilePopoverContent component snapshot default 1`] = `
-<Fragment>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Name"
-        description="Popover title for file name"
-        id="ora-grading.FilePopoverContent.filePopoverNameTitle"
-      />
-    </strong>
-    <br />
-    some file name
-  </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Description"
-        description="Popover title for file description"
-        id="ora-grading.FilePopoverCellContent.filePopoverDescriptionTitle"
-      />
-    </strong>
-    <br />
-    long descriptive text...
-  </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Size"
-        description="Popover title for file size"
-        id="ora-grading.FilePopoverCellContent.fileSizeTitle"
-      />
-    </strong>
-    <br />
-    filesize(6000)
-  </div>
-</Fragment>
-`;
-
-exports[`FilePopoverContent component snapshot invalid size 1`] = `
-<Fragment>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Name"
-        description="Popover title for file name"
-        id="ora-grading.FilePopoverContent.filePopoverNameTitle"
-      />
-    </strong>
-    <br />
-    some file name
-  </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Description"
-        description="Popover title for file description"
-        id="ora-grading.FilePopoverCellContent.filePopoverDescriptionTitle"
-      />
-    </strong>
-    <br />
-    long descriptive text...
-  </div>
-  <div
-    className="help-popover-option"
-  >
-    <strong>
-      <FormattedMessage
-        defaultMessage="File Size"
-        description="Popover title for file size"
-        id="ora-grading.FilePopoverCellContent.fileSizeTitle"
-      />
-    </strong>
-    <br />
-    Unknown
-  </div>
-</Fragment>
-`;

src/components/FilePopoverContent/index.test.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
+import { render } from '@testing-library/react';
 
 import filesize from 'filesize';
 import FilePopoverContent from '.';
 
 jest.mock('filesize', () => (size) => `filesize(${size})`);
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
 
 describe('FilePopoverContent', () => {
   describe('component', () => {
@@ -14,24 +15,26 @@ describe('FilePopoverContent', () => {
       downloadURL: 'this-url-is.working',
       size: 6000,
     };
-    let el;
-    beforeEach(() => {
-      el = shallow(<FilePopoverContent {...props} />);
-    });
-    describe('snapshot', () => {
-      test('default', () => expect(el.snapshot).toMatchSnapshot());
-      test('invalid size', () => {
-        el = shallow(<FilePopoverContent {...props} size={null} />);
-        expect(el.snapshot).toMatchSnapshot();
-      });
-    });
 
     describe('behavior', () => {
-      test('content', () => {
-        const childElements = el.instance.children;
-        expect(childElements[0].children[2].el).toContain(props.name);
-        expect(childElements[1].children[2].el).toContain(props.description);
-        expect(childElements[2].children[2].el).toContain(filesize(props.size));
+      it('renders file name correctly', () => {
+        const { getByText } = render(<FilePopoverContent {...props} />);
+        expect(getByText(props.name)).toBeInTheDocument();
+      });
+
+      it('renders file description correctly', () => {
+        const { getByText } = render(<FilePopoverContent {...props} />);
+        expect(getByText(props.description)).toBeInTheDocument();
+      });
+
+      it('renders file size correctly', () => {
+        const { getByText } = render(<FilePopoverContent {...props} />);
+        expect(getByText(filesize(props.size))).toBeInTheDocument();
+      });
+
+      it('renders "Unknown" when size is null', () => {
+        const { getByText } = render(<FilePopoverContent {...props} size={null} />);
+        expect(getByText('Unknown')).toBeInTheDocument();
       });
     });
   });

src/components/FilePreview/FileCard.test.jsx

@@ -1,14 +1,10 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
-import { Collapsible } from '@openedx/paragon';
-
-import FilePopoverContent from 'components/FilePopoverContent';
-import FileInfo from './FileInfo';
+import { render, screen } from '@testing-library/react';
 import FileCard from './FileCard';
 
 jest.mock('components/FilePopoverContent', () => 'FilePopoverContent');
 jest.mock('./FileInfo', () => 'FileInfo');
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
 
 describe('File Preview Card component', () => {
   const props = {
@@ -19,24 +15,27 @@ describe('File Preview Card component', () => {
     },
   };
   const children = (<h1>some children</h1>);
-  let el;
-  beforeEach(() => {
-    el = shallow(<FileCard {...props}>{children}</FileCard>);
-  });
-  test('snapshot', () => {
-    expect(el.snapshot).toMatchSnapshot();
-  });
+
   describe('Component', () => {
-    test('collapsible title is name header', () => {
-      const { title } = el.instance.findByType(Collapsible)[0].props;
-      expect(title).toEqual(<h3 className="file-card-title">{props.file.name}</h3>);
+    it('renders with the file name in the title', () => {
+      render(<FileCard {...props}>{children}</FileCard>);
+      expect(screen.getByText(props.file.name)).toBeInTheDocument();
+      expect(screen.getByText(props.file.name)).toHaveClass('file-card-title');
     });
-    test('forwards children into preview-panel', () => {
-      const previewPanelChildren = el.instance.findByTestId('preview-panel')[0].children;
-      expect(previewPanelChildren[0].matches(
-        <FileInfo><FilePopoverContent file={props.file} /></FileInfo>,
-      ));
-      expect(previewPanelChildren[1].matches(shallow(children))).toEqual(true);
+
+    it('renders the preview panel with file info', () => {
+      render(<FileCard {...props}>{children}</FileCard>);
+      const previewPanel = screen.getByTestId('preview-panel');
+      expect(previewPanel).toBeInTheDocument();
+      expect(document.querySelector('FileInfo')).toBeInTheDocument();
+      expect(document.querySelector('FilePopoverContent')).toBeInTheDocument();
+    });
+
+    it('renders children in the preview panel', () => {
+      render(<FileCard {...props}>{children}</FileCard>);
+      const previewPanel = screen.getByTestId('preview-panel');
+      expect(previewPanel).toBeInTheDocument();
+      expect(screen.getByText('some children')).toBeInTheDocument();
     });
   });
 });

src/components/FilePreview/__snapshots__/FileCard.test.jsx.snap

@@ -1,36 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`File Preview Card component snapshot 1`] = `
-<Card
-  className="file-card"
-  key="test-file-name.pdf"
->
-  <Collapsible
-    className="file-collapsible"
-    defaultOpen={true}
-    title={
-      <h3
-        className="file-card-title"
-      >
-        test-file-name.pdf
-      </h3>
-    }
-  >
-    <div
-      className="preview-panel"
-      data-testid="preview-panel"
-    >
-      <FileInfo>
-        <FilePopoverContent
-          description="test-file description"
-          downloadUrl="destination/test-file-name.pdf"
-          name="test-file-name.pdf"
-        />
-      </FileInfo>
-      <h1>
-        some children
-      </h1>
-    </div>
-  </Collapsible>
-</Card>
-`;

src/components/StatusBadge.test.jsx

@@ -1,34 +1,37 @@
-import React from 'react';
-import { shallow } from '@edx/react-unit-test-utils';
-
+import { render } from '@testing-library/react';
 import { gradingStatuses } from 'data/services/lms/constants';
 import { StatusBadge } from './StatusBadge';
 
+jest.unmock('@openedx/paragon');
+jest.unmock('react');
+
 const className = 'test-className';
 describe('StatusBadge component', () => {
-  const render = (status) => shallow(<StatusBadge className={className} status={status} />);
   describe('behavior', () => {
     it('does not render if status does not have configured variant', () => {
-      const el = render('arbitrary');
-      expect(el.snapshot).toMatchSnapshot();
-      expect(el.isEmptyRender()).toEqual(true);
+      const { container } = render(<StatusBadge className={className} status="arbitrary" />);
+      expect(container.firstChild).toBeNull();
     });
-    describe('status snapshots: loads badge with configured variant and message.', () => {
-      test('`ungraded` shows primary button variant and message', () => {
-        const el = render(gradingStatuses.ungraded);
-        expect(el.snapshot).toMatchSnapshot();
+    describe('status rendering: loads badge with configured variant and message', () => {
+      it('`ungraded` shows primary button variant and message', () => {
+        const { getByText } = render(<StatusBadge className={className} status={gradingStatuses.ungraded} />);
+        const badge = getByText('FormattedMessage');
+        expect(badge).toHaveClass('badge-primary');
       });
-      test('`locked` shows light button variant and message', () => {
-        const el = render(gradingStatuses.locked);
-        expect(el.snapshot).toMatchSnapshot();
+      it('`locked` shows light button variant and message', () => {
+        const { getByText } = render(<StatusBadge className={className} status={gradingStatuses.locked} />);
+        const badge = getByText('FormattedMessage');
+        expect(badge).toHaveClass('badge-light');
       });
-      test('`graded` shows success button variant and message', () => {
-        const el = render(gradingStatuses.graded);
-        expect(el.snapshot).toMatchSnapshot();
+      it('`graded` shows success button variant and message', () => {
+        const { getByText } = render(<StatusBadge className={className} status={gradingStatuses.graded} />);
+        const badge = getByText('FormattedMessage');
+        expect(badge).toHaveClass('badge-success');
       });
-      test('`inProgress` shows warning button variant and message', () => {
-        const el = render(gradingStatuses.inProgress);
-        expect(el.snapshot).toMatchSnapshot();
+      it('`inProgress` shows warning button variant and message', () => {
+        const { getByText } = render(<StatusBadge className={className} status={gradingStatuses.inProgress} />);
+        const badge = getByText('FormattedMessage');
+        expect(badge).toHaveClass('badge-warning');
       });
     });
   });

src/components/__snapshots__/ConfirmModal.test.jsx.snap

@@ -1,59 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ConfirmModal snapshot: closed 1`] = `
-<AlertModal
-  className="confirm-modal"
-  footerNode={
-    <ActionRow>
-      <Button
-        onClick={[MockFunction this.props.onCancel]}
-        variant="tertiary"
-      >
-        test-cancel-text
-      </Button>
-      <Button
-        onClick={[MockFunction this.props.onConfirm]}
-        variant="primary"
-      >
-        test-confirm-text
-      </Button>
-    </ActionRow>
-  }
-  isOpen={false}
-  onClose={[MockFunction hooks.nullMethod]}
-  title="test-title"
->
-  <p>
-    test-content
-  </p>
-</AlertModal>
-`;
-
-exports[`ConfirmModal snapshot: open 1`] = `
-<AlertModal
-  className="confirm-modal"
-  footerNode={
-    <ActionRow>
-      <Button
-        onClick={[MockFunction this.props.onCancel]}
-        variant="tertiary"
-      >
-        test-cancel-text
-      </Button>
-      <Button
-        onClick={[MockFunction this.props.onConfirm]}
-        variant="primary"
-      >
-        test-confirm-text
-      </Button>
-    </ActionRow>
-  }
-  isOpen={true}
-  onClose={[MockFunction hooks.nullMethod]}
-  title="test-title"
->
-  <p>
-    test-content
-  </p>
-</AlertModal>
-`;

src/components/__snapshots__/StatusBadge.test.jsx.snap

@@ -1,55 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StatusBadge component behavior does not render if status does not have configured variant 1`] = `null`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`graded\` shows success button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="success"
->
-  <FormattedMessage
-    defaultMessage="Grading Completed"
-    description="Grading status label for graded submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.graded"
-  />
-</Badge>
-`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`inProgress\` shows warning button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="warning"
->
-  <FormattedMessage
-    defaultMessage="You are currently grading this response"
-    description="Grading status label for in-progress submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.inProgress"
-  />
-</Badge>
-`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`locked\` shows light button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="light"
->
-  <FormattedMessage
-    defaultMessage="Currently being graded by someone else"
-    description="Grading status label for locked submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.locked"
-  />
-</Badge>
-`;
-
-exports[`StatusBadge component behavior status snapshots: loads badge with configured variant and message. \`ungraded\` shows primary button variant and message 1`] = `
-<Badge
-  className="test-className"
-  variant="primary"
->
-  <FormattedMessage
-    defaultMessage="Ungraded"
-    description="Grading status label for ungraded submission"
-    id="ora-grading.lms-api.gradingStatusDisplay.ungraded"
-  />
-</Badge>
-`;