Merge pull request #10 from muselesscreator/tests_v3

add unit tests for ReviewModal ReviewActions components

src/App.scss

@@ -74,4 +74,7 @@ $input-focus-box-shadow: $input-box-shadow; // hack to get upgrade to paragon 4.
       right: 1rem !important;
     }
   }
+  .confirm-modal .pgn__modal-body {
+    overflow: hidden;
+  }
 }

src/components/ConfirmModal.jsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { AlertModal, ActionRow, Button } from '@edx/paragon';
+
+export const ConfirmModal = ({
+  title,
+  isOpen,
+  onCancel,
+  cancelText,
+  onConfirm,
+  confirmText,
+  content,
+}) => (
+  <AlertModal
+    className="confirm-modal"
+    title={title}
+    isOpen={isOpen}
+    footerNode={(
+      <ActionRow>
+        <Button
+          variant="tertiary"
+          onClick={onCancel}
+        >
+          {cancelText}
+        </Button>
+        <Button variant="primary" onClick={onConfirm}>{confirmText}</Button>
+      </ActionRow>
+    )}
+  >
+    <p>{content}</p>
+  </AlertModal>
+);
+ConfirmModal.defaultProps = {
+  isOpen: false,
+};
+ConfirmModal.propTypes = {
+  isOpen: PropTypes.bool,
+  title: PropTypes.string.isRequired,
+  cancelText: PropTypes.string.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  confirmText: PropTypes.string.isRequired,
+  content: PropTypes.string.isRequired,
+};
+
+export default ConfirmModal;

src/components/ConfirmModal.test.jsx

@@ -0,0 +1,27 @@
+import { shallow } from 'enzyme';
+
+import { ConfirmModal } from './ConfirmModal';
+
+jest.mock('@edx/paragon', () => ({
+  ActionRow: () => 'ActionRow',
+  AlertModal: () => 'AlertModal',
+  Button: () => 'Button',
+}));
+
+describe('ConfirmModal', () => {
+  const props = {
+    isOpen: false,
+    title: 'test-title',
+    cancelText: 'test-cancel-text',
+    confirmText: 'test-confirm-text',
+    content: 'test-content',
+    onCancel: jest.fn().mockName('this.props.onCancel'),
+    onConfirm: jest.fn().mockName('this.props.onConfirm'),
+  };
+  test('snapshot: closed', () => {
+    expect(shallow(<ConfirmModal {...props} />)).toMatchSnapshot();
+  });
+  test('snapshot: open', () => {
+    expect(shallow(<ConfirmModal {...props} isOpen />)).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,57 @@
+// 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}
+  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}
+  title="test-title"
+>
+  <p>
+    test-content
+  </p>
+</AlertModal>
+`;

src/containers/ReviewActions/__snapshots__/index.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/ReviewActions/components/OverrideGradeConfirmModal.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ConfirmModal from 'components/ConfirmModal';
+
+export const OverrideGradeConfirmModal = ({
+  isOpen,
+  onCancel,
+  onConfirm,
+}) => (
+  <ConfirmModal
+    title="Are you sure you want to override this grade?"
+    content="This cannot be undone.  The learner may have already received their grade"
+    cancelText="Go back"
+    confirmText="Continue grade override"
+    onCancel={onCancel}
+    onConfirm={onConfirm}
+    isOpen={isOpen}
+  />
+);
+OverrideGradeConfirmModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+};
+
+export default OverrideGradeConfirmModal;

src/containers/ReviewActions/components/OverrideGradeConfirmModal.test.jsx

@@ -0,0 +1,19 @@
+import { shallow } from 'enzyme';
+
+import { OverrideGradeConfirmModal } from './OverrideGradeConfirmModal';
+
+jest.mock('components/ConfirmModal', () => 'ConfirmModal');
+
+describe('OverrideGradeConfirmModal', () => {
+  const props = {
+    isOpen: false,
+    onCancel: jest.fn().mockName('this.props.onCancel'),
+    onConfirm: jest.fn().mockName('this.props.onConfirm'),
+  };
+  test('snapshot: closed', () => {
+    expect(shallow(<OverrideGradeConfirmModal {...props} />)).toMatchSnapshot();
+  });
+  test('snapshot: open', () => {
+    expect(shallow(<OverrideGradeConfirmModal {...props} isOpen />)).toMatchSnapshot();
+  });
+});

src/containers/ReviewActions/components/StartGradingButton.jsx

@@ -0,0 +1,130 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
+
+import {
+  Button,
+} from '@edx/paragon';
+import { Cancel, Highlight } from '@edx/paragon/icons';
+
+import selectors from 'data/selectors';
+import thunkActions from 'data/thunkActions';
+import { gradingStatuses as statuses } from 'data/services/lms/constants';
+
+import StopGradingConfirmModal from './StopGradingConfirmModal';
+import OverrideGradeConfirmModal from './OverrideGradeConfirmModal';
+
+export const buttonArgs = {
+  [statuses.ungraded]: {
+    label: 'Start Grading',
+    iconAfter: Highlight,
+  },
+  [statuses.graded]: {
+    label: 'Override grade',
+    iconAfter: Highlight,
+  },
+  [statuses.inProgress]: {
+    label: 'Stop grading this response',
+    iconAfter: Cancel,
+  },
+};
+
+export class StartGradingButton extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      showConfirmStopGrading: false,
+      showConfirmOverrideGrade: false,
+    };
+
+    this.showConfirmStopGrading = this.showConfirmStopGrading.bind(this);
+    this.hideConfirmStopGrading = this.hideConfirmStopGrading.bind(this);
+    this.showConfirmOverrideGrade = this.showConfirmOverrideGrade.bind(this);
+    this.hideConfirmOverrideGrade = this.hideConfirmOverrideGrade.bind(this);
+    this.confirmStopGrading = this.confirmStopGrading.bind(this);
+    this.confirmOverrideGrade = this.confirmOverrideGrade.bind(this);
+    this.handleClick = this.handleClick.bind(this);
+  }
+
+  showConfirmStopGrading() {
+    this.setState({ showConfirmStopGrading: true });
+  }
+
+  hideConfirmStopGrading() {
+    this.setState({ showConfirmStopGrading: false });
+  }
+
+  showConfirmOverrideGrade() {
+    this.setState({ showConfirmOverrideGrade: true });
+  }
+
+  hideConfirmOverrideGrade() {
+    this.setState({ showConfirmOverrideGrade: false });
+  }
+
+  confirmStopGrading() {
+    this.hideConfirmStopGrading();
+    this.props.stopGrading();
+  }
+
+  confirmOverrideGrade() {
+    this.hideConfirmOverrideGrade();
+    this.props.startGrading();
+  }
+
+  handleClick() {
+    if (this.props.gradingStatus === statuses.inProgress) {
+      this.showConfirmStopGrading();
+    } else if (this.props.gradingStatus === statuses.graded) {
+      this.showConfirmOverrideGrade();
+    } else {
+      this.props.startGrading();
+    }
+  }
+
+  render() {
+    const { gradingStatus } = this.props;
+    if (gradingStatus === statuses.locked) {
+      return null;
+    }
+    const args = buttonArgs[gradingStatus];
+    return (
+      <>
+        <Button
+          variant="primary"
+          iconAfter={args.iconAfter}
+          onClick={this.handleClick}
+        >
+          {args.label}
+        </Button>
+        <OverrideGradeConfirmModal
+          isOpen={this.state.showConfirmOverrideGrade}
+          onCancel={this.hideConfirmOverrideGrade}
+          onConfirm={this.confirmOverrideGrade}
+        />
+        <StopGradingConfirmModal
+          isOpen={this.state.showConfirmStopGrading}
+          onCancel={this.hideConfirmStopGrading}
+          onConfirm={this.confirmStopGrading}
+        />
+      </>
+    );
+  }
+}
+
+StartGradingButton.propTypes = {
+  gradingStatus: PropTypes.string.isRequired,
+  startGrading: PropTypes.func.isRequired,
+  stopGrading: PropTypes.func.isRequired,
+};
+
+export const mapStateToProps = (state) => ({
+  gradingStatus: selectors.grading.selected.gradingStatus(state),
+});
+
+export const mapDispatchToProps = {
+  startGrading: thunkActions.grading.startGrading,
+  stopGrading: thunkActions.grading.stopGrading,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(StartGradingButton);

src/containers/ReviewActions/components/StartGradingButton.test.jsx

@@ -0,0 +1,81 @@
+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 }),
+      },
+    },
+  },
+}));
+
+let el;
+
+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)', () => {
+      el = render(statuses.locked);
+      expect(el).toMatchSnapshot();
+      expect(el).toEqual({});
+    });
+    test('snapshot: ungraded (startGrading callback)', () => {
+      expect(render(statuses.ungraded)).toMatchSnapshot();
+    });
+    test('snapshot: graded, confirmOverride (startGrading callback)', () => {
+      el = render(statuses.graded);
+      el.setState({ showConfirmOverrideGrade: true });
+      expect(el.instance().render()).toMatchSnapshot();
+    });
+    test('snapshot: inProgress, confirmStop (stopGrading callback)', () => {
+      el = render(statuses.inProgress);
+      el.setState({ showConfirmStopGrading: true });
+      expect(el.instance().render()).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/ReviewActions/components/StopGradingConfirmModal.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import ConfirmModal from 'components/ConfirmModal';
+
+export const StopGradingConfirmModal = ({
+  isOpen,
+  onCancel,
+  onConfirm,
+}) => (
+  <ConfirmModal
+    title="Are you sure you want to stop grading this response?"
+    content="Your progress will be lost."
+    cancelText="Go back"
+    confirmText="Cancel Grading"
+    onCancel={onCancel}
+    onConfirm={onConfirm}
+    isOpen={isOpen}
+  />
+);
+StopGradingConfirmModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onCancel: PropTypes.func.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+};
+
+export default StopGradingConfirmModal;

src/containers/ReviewActions/components/StopGradingConfirmModal.test.jsx

@@ -0,0 +1,19 @@
+import { shallow } from 'enzyme';
+
+import { StopGradingConfirmModal } from './StopGradingConfirmModal';
+
+jest.mock('components/ConfirmModal', () => 'ConfirmModal');
+
+describe('StopGradingConfirmModal', () => {
+  const props = {
+    isOpen: false,
+    onCancel: jest.fn().mockName('this.props.onCancel'),
+    onConfirm: jest.fn().mockName('this.props.onConfirm'),
+  };
+  test('snapshot: closed', () => {
+    expect(shallow(<StopGradingConfirmModal {...props} />)).toMatchSnapshot();
+  });
+  test('snapshot: open', () => {
+    expect(shallow(<StopGradingConfirmModal {...props} isOpen />)).toMatchSnapshot();
+  });
+});

src/containers/ReviewActions/components/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/ReviewActions/components/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/ReviewActions/components/__snapshots__/OverrideGradeConfirmModal.test.jsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OverrideGradeConfirmModal snapshot: closed 1`] = `
+<ConfirmModal
+  cancelText="Go back"
+  confirmText="Continue grade override"
+  content="This cannot be undone.  The learner may have already received their grade"
+  isOpen={false}
+  onCancel={[MockFunction this.props.onCancel]}
+  onConfirm={[MockFunction this.props.onConfirm]}
+  title="Are you sure you want to override this grade?"
+/>
+`;
+
+exports[`OverrideGradeConfirmModal snapshot: open 1`] = `
+<ConfirmModal
+  cancelText="Go back"
+  confirmText="Continue grade override"
+  content="This cannot be undone.  The learner may have already received their grade"
+  isOpen={true}
+  onCancel={[MockFunction this.props.onCancel]}
+  onConfirm={[MockFunction this.props.onConfirm]}
+  title="Are you sure you want to override this grade?"
+/>
+`;

src/containers/ReviewActions/components/__snapshots__/StartGradingButton.test.jsx.snap

@@ -0,0 +1,69 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StartGradingButton component component snapshot: graded, confirmOverride (startGrading callback) 1`] = `
+<React.Fragment>
+  <Button
+    iconAfter="Highlight"
+    onClick={[Function]}
+    variant="primary"
+  >
+    Override grade
+  </Button>
+  <OverrideGradeConfirmModal
+    isOpen={true}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+  <StopGradingConfirmModal
+    isOpen={false}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+</React.Fragment>
+`;
+
+exports[`StartGradingButton component component snapshot: inProgress, confirmStop (stopGrading callback) 1`] = `
+<React.Fragment>
+  <Button
+    iconAfter="Cancel"
+    onClick={[Function]}
+    variant="primary"
+  >
+    Stop grading this response
+  </Button>
+  <OverrideGradeConfirmModal
+    isOpen={false}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+  <StopGradingConfirmModal
+    isOpen={true}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+</React.Fragment>
+`;
+
+exports[`StartGradingButton component component snapshot: locked (null) 1`] = `""`;
+
+exports[`StartGradingButton component component snapshot: ungraded (startGrading callback) 1`] = `
+<Fragment>
+  <Button
+    iconAfter="Highlight"
+    onClick={[Function]}
+    variant="primary"
+  >
+    Start Grading
+  </Button>
+  <OverrideGradeConfirmModal
+    isOpen={false}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+  <StopGradingConfirmModal
+    isOpen={false}
+    onCancel={[Function]}
+    onConfirm={[Function]}
+  />
+</Fragment>
+`;

src/containers/ReviewActions/components/__snapshots__/StopGradingConfirmModal.test.jsx.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StopGradingConfirmModal snapshot: closed 1`] = `
+<ConfirmModal
+  cancelText="Go back"
+  confirmText="Cancel Grading"
+  content="Your progress will be lost."
+  isOpen={false}
+  onCancel={[MockFunction this.props.onCancel]}
+  onConfirm={[MockFunction this.props.onConfirm]}
+  title="Are you sure you want to stop grading this response?"
+/>
+`;
+
+exports[`StopGradingConfirmModal snapshot: open 1`] = `
+<ConfirmModal
+  cancelText="Go back"
+  confirmText="Cancel Grading"
+  content="Your progress will be lost."
+  isOpen={true}
+  onCancel={[MockFunction this.props.onCancel]}
+  onConfirm={[MockFunction this.props.onConfirm]}
+  title="Are you sure you want to stop grading this response?"
+/>
+`;

src/containers/ReviewActions/components/__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>
+`;

src/containers/ReviewActions/index.jsx

@@ -11,9 +11,8 @@ import actions from 'data/actions';
 import selectors from 'data/selectors';
 
 import StatusBadge from 'components/StatusBadge';
-import StartGradingButton from './StartGradingButton';
-import SubmissionNavigation from './SubmissionNavigation';
-import './ReviewModal.scss';
+import StartGradingButton from './components/StartGradingButton';
+import SubmissionNavigation from './components/SubmissionNavigation';
 
 export const ReviewActions = ({
   gradingStatus,

src/containers/ReviewActions/index.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 '.';
+
+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('./components/StartGradingButton', () => 'StartGradingButton');
+jest.mock('./components/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

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import {
-  Button,
-} 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 = {
-  [statuses.ungraded]: {
-    label: 'Start Grading',
-    iconAfter: Highlight,
-  },
-  [statuses.graded]: {
-    label: 'Override grade',
-    iconAfter: Highlight,
-  },
-  [statuses.inProgress]: {
-    label: 'Stop grading this response',
-    iconAfter: Cancel,
-  },
-};
-
-export const StartGradingButton = ({
-  gradingStatus,
-  startGrading,
-  stopGrading,
-}) => {
-  if (gradingStatus === statuses.locked) {
-    return null;
-  }
-  const args = buttonArgs[gradingStatus];
-  const onClick = ((gradingStatus === statuses.inProgress) ? stopGrading : startGrading);
-  return (
-    <Button
-      variant="primary"
-      iconAfter={args.iconAfter}
-      onClick={onClick}
-    >
-      {args.label}
-    </Button>
-  );
-};
-StartGradingButton.propTypes = {
-  gradingStatus: PropTypes.string.isRequired,
-  startGrading: PropTypes.func.isRequired,
-  stopGrading: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
-  gradingStatus: selectors.grading.selected.gradingStatus(state),
-});
-
-export const mapDispatchToProps = {
-  toggleShowRubric: actions.app.toggleShowRubric,
-  startGrading: thunkActions.grading.startGrading,
-  stopGrading: thunkActions.grading.stopGrading,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(StartGradingButton);

src/containers/ReviewModal/index.jsx

@@ -14,7 +14,7 @@ import actions from 'data/actions';
 import ResponseDisplay from 'components/ResponseDisplay';
 import Rubric from 'containers/Rubric';
 
-import ReviewActions from './ReviewActions';
+import ReviewActions from 'containers/ReviewActions';
 
 import './ReviewModal.scss';