diff --git a/src/components/GradesView/ScoreViewInput/__snapshots__/index.test.jsx.snap b/src/components/GradesView/ScoreViewInput/__snapshots__/index.test.jsx.snap
new file mode 100644
index 0000000..d687f4c
--- /dev/null
+++ b/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`] = `
+
+
+ Score View
+ :
+
+
+
+
+
+
+`;
diff --git a/src/components/GradesView/ScoreViewInput/index.jsx b/src/components/GradesView/ScoreViewInput/index.jsx
new file mode 100644
index 0000000..09519c5
--- /dev/null
+++ b/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';
+
+/**
+ *
+ * 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 (
+
+ {formatMessage(messages.scoreView)}:
+
+
+
+
+
+ );
+};
+ScoreViewInput.propTypes = {};
+
+export default ScoreViewInput;
diff --git a/src/components/GradesView/ScoreViewInput/index.test.jsx b/src/components/GradesView/ScoreViewInput/index.test.jsx
new file mode 100644
index 0000000..bb2462f
--- /dev/null
+++ b/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();
+ });
+ 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));
+ });
+ });
+ });
+});
diff --git a/src/components/GradesView/ScoreViewInput/messages.js b/src/components/GradesView/ScoreViewInput/messages.js
new file mode 100644
index 0000000..ed1dca5
--- /dev/null
+++ b/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;