refactor: ScoreViewInput component modernization

src/components/GradesView/ScoreViewInput/__snapshots__/index.test.jsx.snap

@@ -0,0 +1,28 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ScoreViewInput component render snapshot 1`] = `
+<Form.Group
+  controlId="ScoreView"
+>
+  <Form.Label>
+    Score View
+    :
+  </Form.Label>
+  <Form.Control
+    as="select"
+    onChange={[MockFunction hooks.toggleGradeFormat]}
+    value="test-grade-format"
+  >
+    <option
+      value="percent"
+    >
+      Percent
+    </option>
+    <option
+      value="absolute"
+    >
+      Absolute
+    </option>
+  </Form.Control>
+</Form.Group>
+`;

src/components/GradesView/ScoreViewInput/index.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Form } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { actions, selectors } from 'data/redux/hooks';
+import messages from './messages';
+
+/**
+ * <ScoreViewInput />
+ * redux-connected select control for grade format (percent vs absolute)
+ */
+export const ScoreViewInput = () => {
+  const { formatMessage } = useIntl();
+  const { gradeFormat } = selectors.grades.useGradeData();
+  const toggleFormat = actions.grades.useToggleGradeFormat();
+  return (
+    <Form.Group controlId="ScoreView">
+      <Form.Label>{formatMessage(messages.scoreView)}:</Form.Label>
+      <Form.Control
+        as="select"
+        value={gradeFormat}
+        onChange={toggleFormat}
+      >
+        <option value="percent">{formatMessage(messages.percent)}</option>
+        <option value="absolute">{formatMessage(messages.absolute)}</option>
+      </Form.Control>
+    </Form.Group>
+  );
+};
+ScoreViewInput.propTypes = {};
+
+export default ScoreViewInput;

src/components/GradesView/ScoreViewInput/index.test.jsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { GradeFormats } from 'data/constants/grades';
+
+import { formatMessage } from 'testUtils';
+import { actions, selectors } from 'data/redux/hooks';
+import ScoreViewInput from '.';
+import messages from './messages';
+
+jest.mock('data/redux/hooks', () => ({
+  actions: {
+    grades: { useToggleGradeFormat: jest.fn() },
+  },
+  selectors: {
+    grades: { useGradeData: jest.fn() },
+  },
+}));
+
+const toggleGradeFormat = jest.fn().mockName('hooks.toggleGradeFormat');
+actions.grades.useToggleGradeFormat.mockReturnValue(toggleGradeFormat);
+const gradeFormat = 'test-grade-format';
+selectors.grades.useGradeData.mockReturnValue({ gradeFormat });
+
+let el;
+describe('ScoreViewInput component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    el = shallow(<ScoreViewInput />);
+  });
+  describe('behavior', () => {
+    it('initializes intl hook', () => {
+      expect(useIntl).toHaveBeenCalled();
+    });
+    it('initializes redux hooks', () => {
+      expect(actions.grades.useToggleGradeFormat).toHaveBeenCalled();
+      expect(selectors.grades.useGradeData).toHaveBeenCalled();
+    });
+  });
+  describe('render', () => {
+    test('snapshot', () => {
+      expect(el).toMatchSnapshot();
+    });
+    test('label', () => {
+      const label = el.children().at(0);
+      expect(label.text()).toEqual(`${formatMessage(messages.scoreView)}:`);
+    });
+    describe('form control', () => {
+      let control;
+      beforeEach(() => {
+        control = el.children().at(1);
+      });
+      test('value and onChange from redux hooks', () => {
+        expect(control.props().value).toEqual(gradeFormat);
+        expect(control.props().onChange).toEqual(toggleGradeFormat);
+      });
+      test('absolute and percent options', () => {
+        const children = control.children();
+        expect(children.at(0).props().value).toEqual(GradeFormats.percent);
+        expect(children.at(0).text()).toEqual(formatMessage(messages.percent));
+        expect(children.at(1).props().value).toEqual(GradeFormats.absolute);
+        expect(children.at(1).text()).toEqual(formatMessage(messages.absolute));
+      });
+    });
+  });
+});

src/components/GradesView/ScoreViewInput/messages.js

@@ -0,0 +1,21 @@
+import { defineMessages } from '@edx/frontend-platform/i18n';
+
+const messages = defineMessages({
+  scoreView: {
+    id: 'gradebook.GradesView.scoreViewLabel',
+    defaultMessage: 'Score View',
+    description: 'The label for the dropdown list that allows a user to select the Score format',
+  },
+  absolute: {
+    id: 'gradebook.GradesView.absoluteOption',
+    defaultMessage: 'Absolute',
+    description: 'A label within the Score Format dropdown list for the Absolute Grade Score option',
+  },
+  percent: {
+    id: 'gradebook.GradesView.percentOption',
+    defaultMessage: 'Percent',
+    description: 'A label within the Score Format dropdown list for the Percent Grade Score option',
+  },
+});
+
+export default messages;