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;