add unit tests for ReviewModal ReviewActions components

src/containers/ReviewModal/ReviewActions.test.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import actions from 'data/actions';
+import selectors from 'data/selectors';
+
+import { ReviewActions, mapStateToProps, mapDispatchToProps } from './ReviewActions';
+
+jest.mock('@edx/paragon', () => ({
+  ActionRow: () => 'ActionRow',
+  Button: () => 'Button',
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    app: { showRubric: (state) => ({ showRubric: state }) },
+    grading: {
+      selected: {
+        username: (state) => ({ username: state }),
+        gradingStatus: (state) => ({ gradingStatus: state }),
+      },
+    },
+  },
+}));
+jest.mock('components/StatusBadge', () => 'StatusBadge');
+jest.mock('./StartGradingButton', () => 'StartGradingButton');
+jest.mock('./SubmissionNavigation', () => 'SubmissionNavigation');
+
+describe('ReviewActions component', () => {
+  describe('component', () => {
+    const props = {
+      gradingStatus: 'grading-status',
+      username: 'test-username',
+      showRubric: false,
+    };
+    beforeEach(() => {
+      props.toggleShowRubric = jest.fn().mockName('this.props.toggleShowRubric');
+    });
+    test('snapshot: do not show rubric', () => {
+      expect(shallow(<ReviewActions {...props} />)).toMatchSnapshot();
+    });
+    test('snapshot: show rubric', () => {
+      expect(shallow(<ReviewActions {...props} showRubric />)).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { some: 'test-state' };
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('username loads from grading.selected.username', () => {
+      expect(mapped.username).toEqual(selectors.grading.selected.username(testState));
+    });
+    test('gradingStatus loads from grading.selected.gradingStatus', () => {
+      expect(mapped.gradingStatus).toEqual(selectors.grading.selected.gradingStatus(testState));
+    });
+    test('showRubric loads from app.showRubric', () => {
+      expect(mapped.showRubric).toEqual(selectors.app.showRubric(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    it('loads toggleShowRubric from actions.app.toggleShowRubric', () => {
+      expect(mapDispatchToProps.toggleShowRubric).toEqual(actions.app.toggleShowRubric);
+    });
+  });
+});

src/containers/ReviewModal/StartGradingButton.jsx

@@ -7,12 +7,11 @@ import {
 } from '@edx/paragon';
 import { Cancel, Highlight } from '@edx/paragon/icons';
 
-import actions from 'data/actions';
 import selectors from 'data/selectors';
 import thunkActions from 'data/thunkActions';
 import { gradingStatuses as statuses } from 'data/services/lms/constants';
 
-const buttonArgs = {
+export const buttonArgs = {
   [statuses.ungraded]: {
     label: 'Start Grading',
     iconAfter: Highlight,
@@ -58,7 +57,6 @@ export const mapStateToProps = (state) => ({
 });
 
 export const mapDispatchToProps = {
-  toggleShowRubric: actions.app.toggleShowRubric,
   startGrading: thunkActions.grading.startGrading,
   stopGrading: thunkActions.grading.stopGrading,
 };

src/containers/ReviewModal/StartGradingButton.test.jsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+import { gradingStatuses as statuses } from 'data/services/lms/constants';
+
+import {
+  StartGradingButton,
+  mapStateToProps,
+  mapDispatchToProps,
+} from './StartGradingButton';
+
+jest.mock('@edx/paragon', () => ({
+  Button: () => 'Button',
+}));
+jest.mock('@edx/paragon/icons', () => ({
+  Cancel: 'Cancel',
+  Highlight: 'Highlight',
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    grading: {
+      selected: {
+        gradingStatus: (state) => ({ gradingStatus: state }),
+      },
+    },
+  },
+}));
+
+describe('StartGradingButton component', () => {
+  describe('component', () => {
+    const props = {};
+    beforeEach(() => {
+      props.startGrading = jest.fn().mockName('this.props.startGrading');
+      props.stopGrading = jest.fn().mockName('this.props.stopGrading');
+    });
+    const render = (gradingStatus) => shallow(
+      <StartGradingButton {...props} gradingStatus={gradingStatus} />,
+    );
+    test('snapshot: locked (null)', () => {
+      const el = render(statuses.locked);
+      expect(el).toMatchSnapshot();
+      expect(el).toEqual({});
+    });
+    test('snapshot: ungraded (startGrading callback)', () => {
+      expect(render(statuses.ungraded)).toMatchSnapshot();
+    });
+    test('snapshot: graded (startGrading callback', () => {
+      expect(render(statuses.graded)).toMatchSnapshot();
+    });
+    test('snapshot: inProgress (stopGrading callback', () => {
+      expect(render(statuses.inProgress)).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { some: 'test-state' };
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('gradingStatus loads from grading.selected.gradingStatus', () => {
+      expect(mapped.gradingStatus).toEqual(selectors.grading.selected.gradingStatus(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    it('loads startGrading from thunkActions.grading.stargGrading', () => {
+      expect(mapDispatchToProps.startGrading).toEqual(thunkActions.grading.startGrading);
+    });
+    it('loads stopGrading from thunkActions.grading.stopGrading', () => {
+      expect(mapDispatchToProps.stopGrading).toEqual(thunkActions.grading.stopGrading);
+    });
+  });
+});

src/containers/ReviewModal/SubmissionNavigation.jsx

@@ -40,26 +40,28 @@ export const SubmissionNavigation = ({
   </span>
 );
 SubmissionNavigation.defaultProps = {
+  hasPrevSubmission: false,
+  hasNextSubmission: false,
 };
 SubmissionNavigation.propTypes = {
-  hasPrevSubmission: PropTypes.bool.isRequired,
-  hasNextSubmission: PropTypes.bool.isRequired,
-  loadPrev: PropTypes.func.isRequired,
-  loadNext: PropTypes.func.isRequired,
   activeIndex: PropTypes.number.isRequired,
+  hasNextSubmission: PropTypes.bool,
+  hasPrevSubmission: PropTypes.bool,
+  loadNext: PropTypes.func.isRequired,
+  loadPrev: PropTypes.func.isRequired,
   selectionLength: PropTypes.number.isRequired,
 };
 
 export const mapStateToProps = (state) => ({
-  hasPrevSubmission: selectors.grading.prev.doesExist(state),
-  hasNextSubmission: selectors.grading.next.doesExist(state),
   activeIndex: selectors.grading.activeIndex(state),
+  hasNextSubmission: selectors.grading.next.doesExist(state),
+  hasPrevSubmission: selectors.grading.prev.doesExist(state),
   selectionLength: selectors.grading.selectionLength(state),
 });
 
 export const mapDispatchToProps = {
-  loadPrev: thunkActions.grading.loadPrev,
   loadNext: thunkActions.grading.loadNext,
+  loadPrev: thunkActions.grading.loadPrev,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(SubmissionNavigation);

src/containers/ReviewModal/SubmissionNavigation.test.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+import { gradingStatuses as statuses } from 'data/services/lms/constants';
+
+import {
+  SubmissionNavigation,
+  mapStateToProps,
+  mapDispatchToProps,
+} from './SubmissionNavigation';
+
+jest.mock('@edx/paragon', () => ({
+  Icon: () => 'Icon',
+  IconButton: () => 'IconButton',
+}));
+jest.mock('@edx/paragon/icons', () => ({
+  ChevronLeft: 'ChevronLeft',
+  ChevronRight: 'ChevronRight',
+}));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    grading: {
+      prev: {
+        doesExist: (state) => ({ prevDoesExist: state }),
+      },
+      next: {
+        doesExist: (state) => ({ nextDoesExist: state }),
+      },
+      activeIndex: (state) => ({ activeIndex: state }),
+      selectionLength: (state) => ({ selectionlength: state }),
+    },
+  },
+}));
+
+describe('SubmissionNavigation component', () => {
+  describe('component', () => {
+    const props = {
+      activeIndex: 4,
+      selectionLength: 5,
+    };
+    beforeEach(() => {
+      props.loadNext = jest.fn().mockName('this.props.loadNext');
+      props.loadPrev = jest.fn().mockName('this.props.loadPrev');
+    });
+    test('snapshot: no prev submission (disabled)', () => {
+      expect(shallow(
+        <SubmissionNavigation {...props} activeIndex={0} hasNextSubmission />,
+      )).toMatchSnapshot();
+    });
+    test('snapshot: no next submission (disabled)', () => {
+      expect(shallow(
+        <SubmissionNavigation {...props} hasPrevSubmission />,
+      )).toMatchSnapshot();
+    });
+  });
+  describe('mapStateToProps', () => {
+    let mapped;
+    const testState = { some: 'test-state' };
+    beforeEach(() => {
+      mapped = mapStateToProps(testState);
+    });
+    test('activeIndex loads from grading.activeIndex', () => {
+      expect(mapped.activeIndex).toEqual(selectors.grading.activeIndex(testState));
+    });
+    test('hasNextSubmission loads from grading.next.doesExist', () => {
+      expect(mapped.hasNextSubmission).toEqual(selectors.grading.next.doesExist(testState));
+    });
+    test('hasPrevSubmission loads from grading.prev.doesExist', () => {
+      expect(mapped.hasPrevSubmission).toEqual(selectors.grading.prev.doesExist(testState));
+    });
+    test('selectionLength loads from grading.selectionLength', () => {
+      expect(mapped.selectionLength).toEqual(selectors.grading.selectionLength(testState));
+    });
+  });
+  describe('mapDispatchToProps', () => {
+    it('loads loadNext from thunkActions.grading.loadNext', () => {
+      expect(mapDispatchToProps.loadNext).toEqual(thunkActions.grading.loadNext);
+    });
+    it('loads loadPrev from thunkActions.grading.loadPrev', () => {
+      expect(mapDispatchToProps.loadPrev).toEqual(thunkActions.grading.loadPrev);
+    });
+  });
+});

src/containers/ReviewModal/__snapshots__/ReviewActions.test.jsx.snap

@@ -0,0 +1,63 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReviewActions component component snapshot: do not show rubric 1`] = `
+<div>
+  <ActionRow
+    className="review-actions"
+  >
+    <span
+      className="review-actions-username"
+    >
+      test-username
+      <StatusBadge
+        className="review-actions-status"
+        status="grading-status"
+      />
+    </span>
+    <div
+      className="review-actions-group"
+    >
+      <Button
+        onClick={[MockFunction this.props.toggleShowRubric]}
+        variant="outline-primary"
+      >
+        Show
+         Rubric
+      </Button>
+      <StartGradingButton />
+      <SubmissionNavigation />
+    </div>
+  </ActionRow>
+</div>
+`;
+
+exports[`ReviewActions component component snapshot: show rubric 1`] = `
+<div>
+  <ActionRow
+    className="review-actions"
+  >
+    <span
+      className="review-actions-username"
+    >
+      test-username
+      <StatusBadge
+        className="review-actions-status"
+        status="grading-status"
+      />
+    </span>
+    <div
+      className="review-actions-group"
+    >
+      <Button
+        onClick={[MockFunction this.props.toggleShowRubric]}
+        variant="outline-primary"
+      >
+        Hide
+         Rubric
+      </Button>
+      <StartGradingButton />
+      <SubmissionNavigation />
+    </div>
+  </ActionRow>
+</div>
+`;

src/containers/ReviewModal/__snapshots__/StartGradingButton.test.jsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StartGradingButton component component snapshot: graded (startGrading callback 1`] = `
+<Button
+  iconAfter="Highlight"
+  onClick={[MockFunction this.props.startGrading]}
+  variant="primary"
+>
+  Override grade
+</Button>
+`;
+
+exports[`StartGradingButton component component snapshot: inProgress (stopGrading callback 1`] = `
+<Button
+  iconAfter="Cancel"
+  onClick={[MockFunction this.props.stopGrading]}
+  variant="primary"
+>
+  Stop grading this response
+</Button>
+`;
+
+exports[`StartGradingButton component component snapshot: locked (null) 1`] = `""`;
+
+exports[`StartGradingButton component component snapshot: ungraded (startGrading callback) 1`] = `
+<Button
+  iconAfter="Highlight"
+  onClick={[MockFunction this.props.startGrading]}
+  variant="primary"
+>
+  Start Grading
+</Button>
+`;

src/containers/ReviewModal/__snapshots__/SubmissionNavigation.test.jsx.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SubmissionNavigation component component snapshot: no next submission (disabled) 1`] = `
+<span
+  className="submission-navigation"
+>
+  <IconButton
+    alt="Load previous submission"
+    disabled={false}
+    iconAs={[Function]}
+    onClick={[MockFunction this.props.loadPrev]}
+    size="inline"
+    src="ChevronLeft"
+  />
+  <span>
+    5
+     of 
+    5
+  </span>
+  <IconButton
+    alt="Load next submission"
+    disabled={true}
+    iconAs={[Function]}
+    onClick={[MockFunction this.props.loadNext]}
+    size="inline"
+    src="ChevronRight"
+  />
+</span>
+`;
+
+exports[`SubmissionNavigation component component snapshot: no prev submission (disabled) 1`] = `
+<span
+  className="submission-navigation"
+>
+  <IconButton
+    alt="Load previous submission"
+    disabled={true}
+    iconAs={[Function]}
+    onClick={[MockFunction this.props.loadPrev]}
+    size="inline"
+    src="ChevronLeft"
+  />
+  <span>
+    1
+     of 
+    5
+  </span>
+  <IconButton
+    alt="Load next submission"
+    disabled={false}
+    iconAs={[Function]}
+    onClick={[MockFunction this.props.loadNext]}
+    size="inline"
+    src="ChevronRight"
+  />
+</span>
+`;