-
- {'<< '}
-
-
-
-
-
{this.props.courseId}
- { this.props.showBulkManagement && (
-
-
- )}
-
- {this.props.areGradesFrozen
- && (
-
-
- )}
- {(this.props.canUserViewGradebook === false) && (
-
-
+export const GradebookHeader = () => {
+ const { formatMessage } = useIntl();
+ const {
+ areGradesFrozen,
+ canUserViewGradebook,
+ courseId,
+ handleToggleViewClick,
+ showBulkManagement,
+ toggleViewMessage,
+ } = useGradebookHeaderData();
+ const dashboardUrl = instructorDashboardUrl();
+ return (
+
+
+ {'<< '}
+ {formatMessage(messages.backToDashboard)}
+
+
{formatMessage(messages.gradebook)}
+
+
{courseId}
+ {showBulkManagement && (
+
+ {formatMessage(toggleViewMessage)}
+
)}
- );
- }
-}
-
-GradebookHeader.defaultProps = {
- // redux
- courseId: '',
- areGradesFrozen: false,
- canUserViewGradebook: false,
- showBulkManagement: false,
-};
-
-GradebookHeader.propTypes = {
- // redux
- activeView: PropTypes.string.isRequired,
- courseId: PropTypes.string,
- areGradesFrozen: PropTypes.bool,
- canUserViewGradebook: PropTypes.bool,
- setView: PropTypes.func.isRequired,
- showBulkManagement: PropTypes.bool,
-};
-
-export const mapStateToProps = (state) => ({
- activeView: selectors.app.activeView(state),
- courseId: selectors.app.courseId(state),
- areGradesFrozen: selectors.assignmentTypes.areGradesFrozen(state),
- canUserViewGradebook: selectors.roles.canUserViewGradebook(state),
- showBulkManagement: selectors.root.showBulkManagement(state),
-});
-
-export const mapDispatchToProps = {
- setView: actions.app.setView,
+ {areGradesFrozen && (
+
+ {formatMessage(messages.frozenWarning)}
+
+ )}
+ {(canUserViewGradebook === false) && (
+
+ {formatMessage(messages.unauthorizedWarning)}
+
+ )}
+
+ );
};
-export default connect(mapStateToProps, mapDispatchToProps)(GradebookHeader);
+export default GradebookHeader;
diff --git a/src/components/GradebookHeader/index.test.jsx b/src/components/GradebookHeader/index.test.jsx
new file mode 100644
index 00000000..369bdbb4
--- /dev/null
+++ b/src/components/GradebookHeader/index.test.jsx
@@ -0,0 +1,77 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { Button } from '@edx/paragon';
+
+import { formatMessage } from 'testUtils';
+import { instructorDashboardUrl } from 'data/services/lms/urls';
+
+import useGradebookHeaderData from './hooks';
+import GradebookHeader from '.';
+
+jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
+jest.mock('data/services/lms/urls', () => ({
+ instructorDashboardUrl: jest.fn(),
+}));
+
+instructorDashboardUrl.mockReturnValue('test-dashboard-url');
+
+const hookProps = {
+ areGradesFrozen: false,
+ canUserViewGradebook: true,
+ courseId: 'test-course-id',
+ handleToggleViewClick: jest.fn().mockName('hooks.handleToggleViewClick'),
+ showBulkManagement: false,
+ toggleViewMessage: { defaultMessage: 'toggle-view-message' },
+};
+useGradebookHeaderData.mockReturnValue(hookProps);
+
+let el;
+describe('GradebookHeader component', () => {
+ beforeAll(() => {
+ el = shallow(
);
+ });
+ describe('behavior', () => {
+ it('initializes hooks', () => {
+ expect(useGradebookHeaderData).toHaveBeenCalledWith();
+ expect(useIntl).toHaveBeenCalledWith();
+ });
+ });
+ describe('render', () => {
+ describe('default view', () => {
+ test('shapshot', () => {
+ expect(el).toMatchSnapshot();
+ });
+ });
+ describe('show bulk management', () => {
+ beforeEach(() => {
+ useGradebookHeaderData.mockReturnValueOnce({ ...hookProps, showBulkManagement: true });
+ el = shallow(
);
+ });
+ test('snapshot: show toggle view message button with handleToggleViewClick method', () => {
+ expect(el).toMatchSnapshot();
+ const { onClick, children } = el.find(Button).props();
+ expect(onClick).toEqual(hookProps.handleToggleViewClick);
+ expect(children).toEqual(formatMessage(hookProps.toggleViewMessage));
+ });
+ });
+ describe('frozen grades', () => {
+ beforeEach(() => {
+ useGradebookHeaderData.mockReturnValueOnce({ ...hookProps, areGradesFrozen: true });
+ el = shallow(
);
+ });
+ test('snapshot: show frozen warning', () => {
+ expect(el).toMatchSnapshot();
+ });
+ });
+ describe('user cannot view gradebook', () => {
+ beforeEach(() => {
+ useGradebookHeaderData.mockReturnValueOnce({ ...hookProps, canUserViewGradebook: false });
+ el = shallow(
);
+ });
+ test('snapshot: show unauthorized warning', () => {
+ expect(el).toMatchSnapshot();
+ });
+ });
+ });
+});
diff --git a/src/components/GradebookHeader/test.jsx b/src/components/GradebookHeader/test.jsx
deleted file mode 100644
index 49cebe41..00000000
--- a/src/components/GradebookHeader/test.jsx
+++ /dev/null
@@ -1,152 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { Button } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import { views } from 'data/constants/app';
-import messages from './messages';
-import { GradebookHeader, mapDispatchToProps, mapStateToProps } from '.';
-
-jest.mock('@edx/paragon', () => ({
- Button: () => 'Button',
-}));
-jest.mock('@edx/frontend-platform/i18n', () => ({
- defineMessages: m => m,
- FormattedMessage: () => 'FormattedMessage',
-}));
-jest.mock('data/actions', () => ({
- __esModule: true,
- default: {
- app: { setView: jest.fn() },
- },
-}));
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- app: {
- activeView: jest.fn(state => ({ aciveView: state })),
- courseId: jest.fn(state => ({ courseId: state })),
- },
- assignmentTypes: { areGradesFrozen: jest.fn(state => ({ areGradesFrozen: state })) },
- roles: { canUserViewGradebook: jest.fn(state => ({ canUserViewGradebook: state })) },
- root: { showBulkManagement: jest.fn(state => ({ showBulkManagement: state })) },
- },
-}));
-
-const courseId = 'fakeID';
-describe('GradebookHeader component', () => {
- const props = {
- activeView: views.grades,
- areGradesFrozen: false,
- canUserViewGradebook: false,
- courseId,
- showBulkManagement: false,
- };
- beforeEach(() => {
- props.setView = jest.fn();
- });
- describe('snapshots', () => {
- let el;
- beforeEach(() => {
- el = shallow(
);
- el.instance().handleToggleViewClick = jest.fn().mockName('this.handleToggleViewClick');
- });
- describe('default values (grades frozen, cannot view).', () => {
- test('unauthorized warning, but no grades frozen warning', () => {
- expect(el.instance().render()).toMatchSnapshot();
- });
- });
- describe('grades frozen, cannot view', () => {
- test('unauthorized warning, and grades frozen warning.', () => {
- el.setProps({ areGradesFrozen: true });
- expect(el.instance().render()).toMatchSnapshot();
- });
- });
- describe('grades frozen, can view.', () => {
- test('grades frozen warning but no unauthorized warning', () => {
- el.setProps({ areGradesFrozen: true, canUserViewGradebook: true });
- expect(el.instance().render()).toMatchSnapshot();
- });
- });
- describe('show bulk management, active view is grades view', () => {
- test('toggle view button to activity log', () => {
- el.setProps({ showBulkManagement: true });
- expect(el.find(Button).getElement()).toEqual((
-
-
- ));
- expect(el.instance().render()).toMatchSnapshot();
- });
- });
- describe('show bulk management, active view is bulkManagementHistory view', () => {
- test('toggle view button to grades', () => {
- el.setProps({ showBulkManagement: true, activeView: views.bulkManagementHistory });
- expect(el.find(Button).getElement()).toEqual((
-
-
- ));
- expect(el.instance().render()).toMatchSnapshot();
- });
- });
- });
- describe('behavior', () => {
- let el;
- beforeEach(() => {
- el = shallow(
);
- });
- describe('handleToggleViewClick', () => {
- test('calls setView with activity view if activeView is grades', () => {
- el.instance().handleToggleViewClick();
- expect(props.setView).toHaveBeenCalledWith(views.bulkManagementHistory);
- });
- test('calls setView with grades view if activeView is bulkManagementHistory', () => {
- el.setProps({ activeView: views.bulkManagementHistory });
- el.instance().handleToggleViewClick();
- expect(props.setView).toHaveBeenCalledWith(views.grades);
- });
- });
- });
- describe('mapStateToProps', () => {
- let mapped;
- const testState = { a: 'test', example: 'state' };
- beforeEach(() => {
- mapped = mapStateToProps(testState);
- });
- test('activeView from app.activeView', () => {
- expect(mapped.activeView).toEqual(selectors.app.activeView(testState));
- });
- test('courseId from app.courseId', () => {
- expect(mapped.courseId).toEqual(selectors.app.courseId(testState));
- });
- test('areGradesFrozen from assignmentTypes selector', () => {
- expect(
- mapped.areGradesFrozen,
- ).toEqual(selectors.assignmentTypes.areGradesFrozen(testState));
- });
- test('canUserViewGradebook from roles selector', () => {
- expect(
- mapped.canUserViewGradebook,
- ).toEqual(selectors.roles.canUserViewGradebook(testState));
- });
- test('showBulkManagement from root showBulkManagement selector', () => {
- expect(mapped.showBulkManagement).toEqual(selectors.root.showBulkManagement(testState));
- });
- });
-
- describe('mapDispatchToProps', () => {
- test('setView from actions.app.setView', () => {
- expect(mapDispatchToProps.setView).toEqual(actions.app.setView);
- });
- });
-});
diff --git a/src/components/GradesView/BulkManagementControls.jsx b/src/components/GradesView/BulkManagementControls.jsx
deleted file mode 100644
index d7fcbc94..00000000
--- a/src/components/GradesView/BulkManagementControls.jsx
+++ /dev/null
@@ -1,71 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { views } from 'data/constants/app';
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-
-import NetworkButton from 'components/NetworkButton';
-import ImportGradesButton from './ImportGradesButton';
-
-import messages from './BulkManagementControls.messages';
-
-/**
- *
- * Provides download buttons for Bulk Management and Intervention reports, only if
- * showBulkManagement is set in redus.
- */
-export class BulkManagementControls extends React.Component {
- constructor(props) {
- super(props);
- this.handleClickExportGrades = this.handleClickExportGrades.bind(this);
- this.handleViewActivityLog = this.handleViewActivityLog.bind(this);
- }
-
- handleClickExportGrades() {
- this.props.downloadBulkGradesReport();
- window.location.assign(this.props.gradeExportUrl);
- }
-
- handleViewActivityLog() {
- this.props.setView(views.bulkManagementHistory);
- }
-
- render() {
- return this.props.showBulkManagement && (
-
-
- );
- }
-}
-
-BulkManagementControls.defaultProps = {
- showBulkManagement: false,
-};
-
-BulkManagementControls.propTypes = {
- // redux
- downloadBulkGradesReport: PropTypes.func.isRequired,
- gradeExportUrl: PropTypes.string.isRequired,
- showBulkManagement: PropTypes.bool,
- setView: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
- gradeExportUrl: selectors.root.gradeExportUrl(state),
- showBulkManagement: selectors.root.showBulkManagement(state),
-});
-
-export const mapDispatchToProps = {
- downloadBulkGradesReport: actions.grades.downloadReport.bulkGrades,
- setView: actions.app.setView,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(BulkManagementControls);
diff --git a/src/components/GradesView/BulkManagementControls.test.jsx b/src/components/GradesView/BulkManagementControls.test.jsx
deleted file mode 100644
index f9fa5e24..00000000
--- a/src/components/GradesView/BulkManagementControls.test.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import { views } from 'data/constants/app';
-
-import {
- BulkManagementControls,
- mapStateToProps,
- mapDispatchToProps,
-} from './BulkManagementControls';
-
-jest.mock('./ImportGradesButton', () => 'ImportGradesButton');
-jest.mock('components/NetworkButton', () => 'NetworkButton');
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- root: {
- gradeExportUrl: (state) => ({ gradeExportUrl: state }),
- interventionExportUrl: (state) => ({ interventionExportUrl: state }),
- showBulkManagement: (state) => ({ showBulkManagement: state }),
- },
- },
-}));
-jest.mock('data/actions', () => ({
- __esModule: true,
- default: {
- app: { setView: jest.fn() },
- grades: {
- downloadReport: {
- bulkGrades: jest.fn(),
- intervention: jest.fn(),
- },
- },
- },
-}));
-
-describe('BulkManagementControls', () => {
- describe('component', () => {
- let el;
- let props = {
- gradeExportUrl: 'gradesGoHere',
- interventionExportUrl: 'interventionsGoHere',
- };
- beforeEach(() => {
- props = {
- ...props,
- downloadBulkGradesReport: jest.fn(),
- downloadInterventionReport: jest.fn(),
- setView: jest.fn(),
- };
- });
- test('snapshot - empty if showBulkManagement is not truthy', () => {
- expect(shallow(
)).toEqual({});
- });
- describe('behavior', () => {
- const oldWindowLocation = window.location;
-
- beforeAll(() => {
- delete window.location;
- window.location = Object.defineProperties(
- {},
- {
- ...Object.getOwnPropertyDescriptors(oldWindowLocation),
- assign: {
- configurable: true,
- value: jest.fn(),
- },
- },
- );
- });
- beforeEach(() => {
- window.location.assign.mockReset();
- el = shallow(
);
- });
- afterAll(() => {
- // restore `window.location` to the `jsdom` `Location` object
- window.location = oldWindowLocation;
- });
- describe('handleViewActivityLog', () => {
- it('calls props.setView(views.bulkManagementHistory)', () => {
- el.instance().handleViewActivityLog();
- expect(props.setView).toHaveBeenCalledWith(views.bulkManagementHistory);
- });
- });
- describe('handleClickExportGrades', () => {
- const assertions = [
- 'calls props.downloadBulkGradesReport',
- 'sets location to props.gradeExportUrl',
- ];
- it(assertions.join(' and '), () => {
- el.instance().handleClickExportGrades();
- expect(props.downloadBulkGradesReport).toHaveBeenCalled();
- expect(window.location.assign).toHaveBeenCalledWith(props.gradeExportUrl);
- });
- });
- });
- });
-
- describe('mapStateToProps', () => {
- let mapped;
- const testState = { do: 'not', test: 'me' };
- beforeEach(() => {
- mapped = mapStateToProps(testState);
- });
- test('gradeExportUrl from root.gradeExportUrl', () => {
- expect(mapped.gradeExportUrl).toEqual(selectors.root.gradeExportUrl(testState));
- });
- test('showBulkManagement from root.showBulkManagement', () => {
- expect(mapped.showBulkManagement).toEqual(selectors.root.showBulkManagement(testState));
- });
- });
- describe('mapDispatchToProps', () => {
- test('downloadBulkGradesReport from actions.grades.downloadReport.bulkGrades', () => {
- expect(
- mapDispatchToProps.downloadBulkGradesReport,
- ).toEqual(actions.grades.downloadReport.bulkGrades);
- });
- test('setView from actions.app.setView', () => {
- expect(mapDispatchToProps.setView).toEqual(actions.app.setView);
- });
- });
-});
diff --git a/src/components/GradesView/BulkManagementControls/__snapshots__/index.test.jsx.snap b/src/components/GradesView/BulkManagementControls/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..a97d82f8
--- /dev/null
+++ b/src/components/GradesView/BulkManagementControls/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BulkManagementControls render snapshot - show - network and import buttons 1`] = `
+
+
+`;
diff --git a/src/components/GradesView/BulkManagementControls/hooks.js b/src/components/GradesView/BulkManagementControls/hooks.js
new file mode 100644
index 00000000..bf970224
--- /dev/null
+++ b/src/components/GradesView/BulkManagementControls/hooks.js
@@ -0,0 +1,18 @@
+import { actions, selectors } from 'data/redux/hooks';
+
+export const useBulkManagementControlsData = () => {
+ const gradeExportUrl = selectors.root.useGradeExportUrl();
+ const showBulkManagement = selectors.root.useShowBulkManagement();
+ const downloadBulkGradesReport = actions.grades.useDownloadBulkGradesReport();
+
+ const handleClickExportGrades = () => {
+ downloadBulkGradesReport();
+ window.location.assign(gradeExportUrl);
+ };
+
+ return {
+ show: showBulkManagement,
+ handleClickExportGrades,
+ };
+};
+export default useBulkManagementControlsData;
diff --git a/src/components/GradesView/BulkManagementControls/hooks.test.js b/src/components/GradesView/BulkManagementControls/hooks.test.js
new file mode 100644
index 00000000..62bca614
--- /dev/null
+++ b/src/components/GradesView/BulkManagementControls/hooks.test.js
@@ -0,0 +1,72 @@
+import { actions, selectors } from 'data/redux/hooks';
+
+import useBulkManagementControlsData from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+ actions: {
+ grades: {
+ useDownloadBulkGradesReport: jest.fn(),
+ },
+ },
+ selectors: {
+ root: {
+ useGradeExportUrl: jest.fn(),
+ useShowBulkManagement: jest.fn(),
+ },
+ },
+}));
+
+const downloadBulkGrades = jest.fn();
+actions.grades.useDownloadBulkGradesReport.mockReturnValue(downloadBulkGrades);
+const gradeExportUrl = 'test-grade-export-url';
+selectors.root.useGradeExportUrl.mockReturnValue(gradeExportUrl);
+selectors.root.useShowBulkManagement.mockReturnValue(true);
+
+let hook;
+describe('useBulkManagementControlsData', () => {
+ const oldWindowLocation = window.location;
+ beforeAll(() => {
+ delete window.location;
+ window.location = Object.defineProperties(
+ {},
+ {
+ ...Object.getOwnPropertyDescriptors(oldWindowLocation),
+ assign: { configurable: true, value: jest.fn() },
+ },
+ );
+ });
+ beforeEach(() => {
+ window.location.assign.mockReset();
+ hook = useBulkManagementControlsData();
+ });
+ afterAll(() => {
+ // restore `window.location` to the `jsdom` `Location` object
+ window.location = oldWindowLocation;
+ });
+ describe('initialization', () => {
+ it('initializes redux hooks', () => {
+ expect(selectors.root.useGradeExportUrl).toHaveBeenCalledWith();
+ expect(selectors.root.useShowBulkManagement).toHaveBeenCalledWith();
+ expect(actions.grades.useDownloadBulkGradesReport).toHaveBeenCalledWith();
+ });
+ });
+ describe('output', () => {
+ it('forwards show from showBulkManagement', () => {
+ expect(hook.show).toEqual(true);
+ selectors.root.useShowBulkManagement.mockReturnValue(false);
+ hook = useBulkManagementControlsData();
+ expect(hook.show).toEqual(false);
+ });
+ describe('handleClickExportGrades', () => {
+ beforeEach(() => {
+ hook.handleClickExportGrades();
+ });
+ it('downloads bulk grades report', () => {
+ expect(downloadBulkGrades).toHaveBeenCalledWith();
+ });
+ it('sets window location to grade export url', () => {
+ expect(window.location.assign).toHaveBeenCalledWith(gradeExportUrl);
+ });
+ });
+ });
+});
diff --git a/src/components/GradesView/BulkManagementControls/index.jsx b/src/components/GradesView/BulkManagementControls/index.jsx
new file mode 100644
index 00000000..8c8d800d
--- /dev/null
+++ b/src/components/GradesView/BulkManagementControls/index.jsx
@@ -0,0 +1,33 @@
+/* eslint-disable react/sort-comp, react/button-has-type */
+import React from 'react';
+
+import NetworkButton from 'components/NetworkButton';
+import ImportGradesButton from '../ImportGradesButton';
+
+import useBulkManagementControlsData from './hooks';
+import messages from './messages';
+
+/**
+ *
+ * Provides download buttons for Bulk Management and Intervention reports, only if
+ * showBulkManagement is set in redus.
+ */
+export const BulkManagementControls = () => {
+ const {
+ show,
+ handleClickExportGrades,
+ } = useBulkManagementControlsData();
+
+ if (!show) { return null; }
+ return (
+
+
+ );
+};
+
+export default BulkManagementControls;
diff --git a/src/components/GradesView/BulkManagementControls/index.test.jsx b/src/components/GradesView/BulkManagementControls/index.test.jsx
new file mode 100644
index 00000000..e5e3ca65
--- /dev/null
+++ b/src/components/GradesView/BulkManagementControls/index.test.jsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import useBulkManagementControlsData from './hooks';
+import BulkManagementControls from '.';
+
+jest.mock('../ImportGradesButton', () => 'ImportGradesButton');
+jest.mock('components/NetworkButton', () => 'NetworkButton');
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+ show: true,
+ handleClickExportGrades: jest.fn(),
+};
+useBulkManagementControlsData.mockReturnValue(hookProps);
+
+describe('BulkManagementControls', () => {
+ describe('behavior', () => {
+ shallow(
);
+ expect(useBulkManagementControlsData).toHaveBeenCalledWith();
+ });
+ describe('render', () => {
+ test('snapshot - show - network and import buttons', () => {
+ expect(shallow(
)).toMatchSnapshot();
+ });
+ test('snapshot - empty if show is not truthy', () => {
+ useBulkManagementControlsData.mockReturnValueOnce({ ...hookProps, show: false });
+ expect(shallow(
).isEmptyRender()).toEqual(true);
+ });
+ });
+});
diff --git a/src/components/GradesView/BulkManagementControls.messages.js b/src/components/GradesView/BulkManagementControls/messages.js
similarity index 100%
rename from src/components/GradesView/BulkManagementControls.messages.js
rename to src/components/GradesView/BulkManagementControls/messages.js
diff --git a/src/components/GradesView/EditModal/ModalHeaders.jsx b/src/components/GradesView/EditModal/ModalHeaders.jsx
index df52d985..d9f4ca29 100644
--- a/src/components/GradesView/EditModal/ModalHeaders.jsx
+++ b/src/components/GradesView/EditModal/ModalHeaders.jsx
@@ -1,68 +1,53 @@
import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
-import selectors from 'data/selectors';
+import { StrictDict } from 'utils';
+import { selectors } from 'data/redux/hooks';
import messages from './messages';
import HistoryHeader from './HistoryHeader';
+export const HistoryKeys = StrictDict({
+ assignment: 'assignment',
+ student: 'student',
+ originalGrade: 'original-grade',
+ currentGrade: 'current-grade',
+});
+
/**
*
* Provides a list of HistoryHeaders for the student name, assignment,
* original grade, and current override grade.
*/
-export const ModalHeaders = ({
- modalState,
- originalGrade,
- currentGrade,
-}) => (
-
-
-);
-ModalHeaders.defaultProps = {
- currentGrade: null,
- originalGrade: null,
-};
-ModalHeaders.propTypes = {
- // redux
- currentGrade: PropTypes.number,
- originalGrade: PropTypes.number,
- modalState: PropTypes.shape({
- assignmentName: PropTypes.string.isRequired,
- updateUserName: PropTypes.string,
- }).isRequired,
+export const ModalHeaders = () => {
+ const { assignmentName, updateUserName } = selectors.app.useModalData();
+ const { currentGrade, originalGrade } = selectors.grades.useGradeData();
+ const { formatMessage } = useIntl();
+ return (
+
+
+ );
};
-export const mapStateToProps = (state) => ({
- modalState: {
- assignmentName: selectors.app.modalState.assignmentName(state),
- updateUserName: selectors.app.modalState.updateUserName(state),
- },
- currentGrade: selectors.grades.gradeOverrideCurrentEarnedGradedOverride(state),
- originalGrade: selectors.grades.gradeOriginalEarnedGraded(state),
-});
-
-export default connect(mapStateToProps)(ModalHeaders);
+export default ModalHeaders;
diff --git a/src/components/GradesView/EditModal/ModalHeaders.test.jsx b/src/components/GradesView/EditModal/ModalHeaders.test.jsx
index 57c23612..382eb6a8 100644
--- a/src/components/GradesView/EditModal/ModalHeaders.test.jsx
+++ b/src/components/GradesView/EditModal/ModalHeaders.test.jsx
@@ -1,93 +1,84 @@
import React from 'react';
import { shallow } from 'enzyme';
-import selectors from 'data/selectors';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { selectors } from 'data/redux/hooks';
-import {
- ModalHeaders,
- mapStateToProps,
-} from './ModalHeaders';
+import { formatMessage } from 'testUtils';
+
+import HistoryHeader from './HistoryHeader';
+import ModalHeaders, { HistoryKeys } from './ModalHeaders';
+import messages from './messages';
jest.mock('./HistoryHeader', () => 'HistoryHeader');
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- app: {
- editUpdateData: jest.fn(state => ({ editUpdateData: state })),
- modalState: {
- assignmentName: jest.fn(state => ({ assignmentName: state })),
- updateUserName: jest.fn(state => ({ updateUserName: state })),
- },
- },
- grades: {
- gradeOverrideCurrentEarnedGradedOverride: jest.fn(state => ({ currentGrade: state })),
- gradeOriginalEarnedGraded: jest.fn(state => ({ originalGrade: state })),
- },
+jest.mock('data/redux/hooks', () => ({
+ selectors: {
+ app: { useModalData: jest.fn() },
+ grades: { useGradeData: jest.fn() },
},
}));
-describe('ModalHeaders', () => {
- let el;
- const props = {
- currentGrade: 2,
- originalGrade: 20,
- modalState: {
- assignmentName: 'Qwerty',
- updateUserName: 'Uiop',
- },
- };
- describe('Component', () => {
- describe('snapshots', () => {
- beforeEach(() => {
- });
- describe('gradeOverrideHistoryError is and empty and open is true', () => {
- test('modal open and StatusAlert showing', () => {
- el = shallow(
);
- expect(el).toMatchSnapshot();
- });
- });
- describe('gradeOverrideHistoryError is empty and open is false', () => {
- test('modal closed and StatusAlert closed', () => {
- el = shallow(
-
,
- );
- expect(el).toMatchSnapshot();
- });
- });
+const modalData = {
+ assignmentName: 'test-assignment-name',
+ updateUserName: 'test-user-name',
+};
+selectors.app.useModalData.mockReturnValue(modalData);
+const gradeData = {
+ currentGrade: 'test-current-grade',
+ originalGrade: 'test-original-grade',
+};
+selectors.grades.useGradeData.mockReturnValue(gradeData);
+
+let el;
+describe('ModalHeaders', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ el = shallow(
);
+ });
+ describe('behavior', () => {
+ it('initializes intl', () => {
+ expect(useIntl).toHaveBeenCalled();
+ });
+ it('initializes redux hooks', () => {
+ expect(selectors.app.useModalData).toHaveBeenCalled();
+ expect(selectors.grades.useGradeData).toHaveBeenCalled();
});
});
-
- describe('mapStateToProps', () => {
- const testState = { he: 'lives in a', pineapple: 'under the sea' };
- let mapped;
- beforeEach(() => {
- mapped = mapStateToProps(testState);
+ describe('render', () => {
+ test('snapshot', () => {
+ expect(el).toMatchSnapshot();
});
- describe('modalState', () => {
- test('assignmentName from app.modalState.assignmentName', () => {
- expect(
- mapped.modalState.assignmentName,
- ).toEqual(selectors.app.modalState.assignmentName(testState));
+ test('assignment header', () => {
+ const headerProps = el.find(HistoryHeader).at(0).props();
+ expect(headerProps).toMatchObject({
+ id: HistoryKeys.assignment,
+ label: formatMessage(messages.assignmentHeader),
+ value: modalData.assignmentName,
});
- test('updateUserName from app.modalState.updateUserName', () => {
- expect(
- mapped.modalState.updateUserName,
- ).toEqual(selectors.app.modalState.updateUserName(testState));
+ });
+ test('student header', () => {
+ const headerProps = el.find(HistoryHeader).at(1).props();
+ expect(headerProps).toMatchObject({
+ id: HistoryKeys.student,
+ label: formatMessage(messages.studentHeader),
+ value: modalData.updateUserName,
});
});
- describe('originalGrade', () => {
- test('from grades.gradeOverrideCurrentEarnedGradedOverride', () => {
- expect(mapped.currentGrade).toEqual(
- selectors.grades.gradeOverrideCurrentEarnedGradedOverride(testState),
- );
+ test('originalGrade header', () => {
+ const headerProps = el.find(HistoryHeader).at(2).props();
+ expect(headerProps).toMatchObject({
+ id: HistoryKeys.originalGrade,
+ label: formatMessage(messages.originalGradeHeader),
+ value: gradeData.originalGrade,
});
});
- describe('originalGrade', () => {
- test('from grades.gradeOriginalEarnedGrades', () => {
- expect(mapped.originalGrade).toEqual(
- selectors.grades.gradeOriginalEarnedGraded(testState),
- );
+ test('currentGrade header', () => {
+ const headerProps = el.find(HistoryHeader).at(3).props();
+ expect(headerProps).toMatchObject({
+ id: HistoryKeys.currentGrade,
+ label: formatMessage(messages.currentGradeHeader),
+ value: gradeData.currentGrade,
});
});
});
diff --git a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx
deleted file mode 100644
index 9f3a5db5..00000000
--- a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-/* eslint-disable react/sort-comp, react/button-has-type */
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { Form } from '@edx/paragon';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-import { getLocalizedSlash } from 'i18n/utils';
-
-/**
- *
- * Input control for adjusting the grade of a unit
- * displays an "/ ${possibleGrade} if there is one in the data model.
- */
-export class AdjustedGradeInput extends React.Component {
- constructor(props) {
- super(props);
- this.onChange = this.onChange.bind(this);
- }
-
- onChange = ({ target }) => {
- this.props.setModalState({ adjustedGradeValue: target.value });
- };
-
- render() {
- return (
-
-
- );
- }
-}
-AdjustedGradeInput.defaultProps = {
- possibleGrade: null,
-};
-AdjustedGradeInput.propTypes = {
- value: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- ]).isRequired,
- possibleGrade: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.number,
- ]),
- setModalState: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
- possibleGrade: selectors.root.editModalPossibleGrade(state),
- value: selectors.app.modalState.adjustedGradeValue(state),
-});
-
-export const mapDispatchToProps = {
- setModalState: actions.app.setModalState,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(AdjustedGradeInput);
diff --git a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.test.jsx b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.test.jsx
deleted file mode 100644
index 895fc00e..00000000
--- a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput.test.jsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-
-import {
- AdjustedGradeInput,
- mapStateToProps,
- mapDispatchToProps,
-} from './AdjustedGradeInput';
-
-jest.mock('@edx/paragon', () => ({
- Form: { Control: () => 'Form.Control' },
-}));
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- root: {
- editModalPossibleGrade: jest.fn(state => ({ updateUserName: state })),
- },
- app: {
- modalState: { adjustedGradeValue: jest.fn(state => ({ adjustedGradeValue: state })) },
- },
- },
-}));
-jest.mock('data/actions', () => ({
- __esModule: true,
- default: {
- app: { setModalState: jest.fn() },
- },
-}));
-describe('AdjustedGradeInput', () => {
- let el;
- let props = {
- value: 1,
- possibleGrade: 5,
- };
- beforeEach(() => {
- props = {
- ...props,
- setModalState: jest.fn(),
- };
- });
- describe('Component', () => {
- beforeEach(() => {
- el = shallow(
);
- });
- describe('snapshots', () => {
- test('displays input control and "out of possible grade" label', () => {
- el.instance().onChange = jest.fn().mockName('this.onChange');
- expect(el.instance().render()).toMatchSnapshot();
- });
- });
- describe('behavior', () => {
- describe('onChange', () => {
- it('calls props.setModalState event target value', () => {
- const value = 42;
- el.instance().onChange({ target: { value } });
- expect(props.setModalState).toHaveBeenCalledWith({
- adjustedGradeValue: value,
- });
- });
- });
- });
- });
-
- describe('mapStateToProps', () => {
- const testState = { like: 'no one', ever: 'was' };
- let mapped;
- beforeEach(() => {
- mapped = mapStateToProps(testState);
- });
- describe('modalState', () => {
- test('possibleGrade from root.editModalPossibleGrade', () => {
- expect(
- mapped.possibleGrade,
- ).toEqual(selectors.root.editModalPossibleGrade(testState));
- });
- test('updateUserName from app.modalState.updateUserName', () => {
- expect(
- mapped.value,
- ).toEqual(selectors.app.modalState.adjustedGradeValue(testState));
- });
- });
- });
- describe('mapDispatchToProps', () => {
- test('setModalState from actions.app.setModalState', () => {
- expect(mapDispatchToProps.setModalState).toEqual(actions.app.setModalState);
- });
- });
-});
diff --git a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/__snapshots__/index.test.jsx.snap b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..b12be4b3
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdjustedGradeInput component render snapshot 1`] = `
+
+
+`;
diff --git a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/hooks.js b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/hooks.js
new file mode 100644
index 00000000..da315857
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/hooks.js
@@ -0,0 +1,21 @@
+import { actions, selectors } from 'data/redux/hooks';
+import { getLocalizedSlash } from 'i18n/utils';
+
+const useAdjustedGradeInputData = () => {
+ const possibleGrade = selectors.root.useEditModalPossibleGrade();
+ const value = selectors.app.useModalData().adjustedGradeValue;
+ const setModalState = actions.app.useSetModalState();
+ const hintText = possibleGrade && ` ${getLocalizedSlash()} ${possibleGrade}`;
+
+ const onChange = ({ target }) => {
+ setModalState({ adjustedGradeValue: target.value });
+ };
+
+ return {
+ value,
+ onChange,
+ hintText,
+ };
+};
+
+export default useAdjustedGradeInputData;
diff --git a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/hooks.test.jsx b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/hooks.test.jsx
new file mode 100644
index 00000000..e266dc3d
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/hooks.test.jsx
@@ -0,0 +1,67 @@
+import { getLocalizedSlash } from 'i18n/utils';
+import { actions, selectors } from 'data/redux/hooks';
+import useAdjustedGradeInputData from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+ selectors: {
+ root: {
+ useEditModalPossibleGrade: jest.fn(),
+ },
+ app: {
+ useModalData: jest.fn(),
+ },
+ },
+ actions: {
+ app: {
+ useSetModalState: jest.fn(),
+ },
+ },
+}));
+jest.mock('i18n/utils', () => ({ getLocalizedSlash: jest.fn() }));
+
+const localizedSlash = 'localized-slash';
+getLocalizedSlash.mockReturnValue(localizedSlash);
+
+const possibleGrade = 105;
+selectors.root.useEditModalPossibleGrade.mockReturnValue(possibleGrade);
+const modalData = { adjustedGradeValue: 70 };
+const setModalState = jest.fn();
+selectors.app.useModalData.mockReturnValue(modalData);
+actions.app.useSetModalState.mockReturnValue(setModalState);
+
+let out;
+describe('useAdjustedGradeInputData hook', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ out = useAdjustedGradeInputData();
+ });
+ describe('behavior', () => {
+ it('initializes redux hooks', () => {
+ expect(selectors.root.useEditModalPossibleGrade).toHaveBeenCalled();
+ expect(selectors.app.useModalData).toHaveBeenCalled();
+ expect(actions.app.useSetModalState).toHaveBeenCalled();
+ });
+ });
+ describe('output', () => {
+ it('forwards adjusted grade value as value from modal data', () => {
+ expect(out.value).toEqual(modalData.adjustedGradeValue);
+ });
+ describe('hintText', () => {
+ it('passes an undefined value if possibleGrade is not available', () => {
+ selectors.root.useEditModalPossibleGrade.mockReturnValueOnce(undefined);
+ out = useAdjustedGradeInputData();
+ expect(out.hintText).toEqual(undefined);
+ });
+ it('passes localized slash and possible grade if available', () => {
+ expect(out.hintText).toEqual(` ${localizedSlash} ${possibleGrade}`);
+ });
+ });
+ describe('onChange', () => {
+ it('sets modal state with event target value', () => {
+ const testValue = 'test-value';
+ out.onChange({ target: { value: testValue } });
+ expect(setModalState).toHaveBeenCalledWith({ adjustedGradeValue: testValue });
+ });
+ });
+ });
+});
diff --git a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.jsx b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.jsx
new file mode 100644
index 00000000..d070b9b5
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { Form } from '@edx/paragon';
+
+import useAdjustedGradeInputData from './hooks';
+
+/**
+ *
+ * Input control for adjusting the grade of a unit
+ * displays an "/ ${possibleGrade} if there is one in the data model.
+ */
+export const AdjustedGradeInput = () => {
+ const {
+ value,
+ onChange,
+ hintText,
+ } = useAdjustedGradeInputData();
+ return (
+
+
+ );
+};
+
+AdjustedGradeInput.propTypes = {};
+
+export default AdjustedGradeInput;
diff --git a/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.test.jsx b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.test.jsx
new file mode 100644
index 00000000..895dc6ff
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/AdjustedGradeInput/index.test.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Form } from '@edx/paragon';
+
+import useAdjustedGradeInputData from './hooks';
+import AdjustedGradeInput from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+ hintText: 'some-hint-text',
+ onChange: jest.fn().mockName('hook.onChange'),
+ value: 'test-value',
+};
+useAdjustedGradeInputData.mockReturnValue(hookProps);
+
+let el;
+describe('AdjustedGradeInput component', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ el = shallow(
);
+ });
+ describe('behavior', () => {
+ it('initializes hook data', () => {
+ expect(useAdjustedGradeInputData).toHaveBeenCalled();
+ });
+ });
+ describe('render', () => {
+ test('snapshot', () => {
+ expect(el).toMatchSnapshot();
+ const control = el.find(Form.Control);
+ expect(control.props().value).toEqual(hookProps.value);
+ expect(control.props().onChange).toEqual(hookProps.onChange);
+ expect(el.contains(hookProps.hintText)).toEqual(true);
+ });
+ });
+});
diff --git a/src/components/GradesView/EditModal/OverrideTable/ReasonInput.jsx b/src/components/GradesView/EditModal/OverrideTable/ReasonInput.jsx
deleted file mode 100644
index a9e1c189..00000000
--- a/src/components/GradesView/EditModal/OverrideTable/ReasonInput.jsx
+++ /dev/null
@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { Form } from '@edx/paragon';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-
-/**
- *
- * Input control for the "reason for change" field in the Edit modal.
- */
-export class ReasonInput extends React.Component {
- constructor(props) {
- super(props);
- this.ref = React.createRef();
- this.onChange = this.onChange.bind(this);
- }
-
- componentDidMount() {
- this.ref.current.focus();
- }
-
- onChange = (event) => {
- this.props.setModalState({ reasonForChange: event.target.value });
- };
-
- render() {
- return (
-
- );
- }
-}
-ReasonInput.propTypes = {
- // redux
- setModalState: PropTypes.func.isRequired,
- value: PropTypes.string.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
- value: selectors.app.modalState.reasonForChange(state),
-});
-
-export const mapDispatchToProps = {
- setModalState: actions.app.setModalState,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(ReasonInput);
diff --git a/src/components/GradesView/EditModal/OverrideTable/ReasonInput.test.jsx b/src/components/GradesView/EditModal/OverrideTable/ReasonInput.test.jsx
deleted file mode 100644
index 5f9c311d..00000000
--- a/src/components/GradesView/EditModal/OverrideTable/ReasonInput.test.jsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-
-import {
- ReasonInput,
- mapStateToProps,
- mapDispatchToProps,
-} from './ReasonInput';
-
-jest.mock('@edx/paragon', () => ({
- Form: { Control: () => 'Form.Control' },
-}));
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- app: {
- modalState: { reasonForChange: jest.fn(state => ({ reasonForChange: state })) },
- },
- },
-}));
-jest.mock('data/actions', () => ({
- __esModule: true,
- default: {
- app: { setModalState: jest.fn() },
- },
-}));
-describe('ReasonInput', () => {
- let el;
- let props = {
- value: 'did not answer the question',
- };
- beforeEach(() => {
- props = {
- ...props,
- setModalState: jest.fn(),
- };
- });
- describe('Component', () => {
- beforeEach(() => {
- el = shallow(
, { disableLifecycleMethods: true });
- });
- describe('snapshots', () => {
- test('displays reason for change input control', () => {
- el.instance().onChange = jest.fn().mockName('this.onChange');
- expect(el.instance().render()).toMatchSnapshot();
- });
- });
- describe('behavior', () => {
- describe('onChange', () => {
- it('calls props.setModalState event target value', () => {
- const value = 42;
- el.instance().onChange({ target: { value } });
- expect(props.setModalState).toHaveBeenCalledWith({
- reasonForChange: value,
- });
- });
- });
- describe('componentDidMount', () => {
- it('focuses the input ref', () => {
- const focus = jest.fn();
- expect(el.instance().ref).toEqual({ current: null });
- el.instance().ref.current = { focus };
- el.instance().componentDidMount();
- expect(el.instance().ref.current.focus).toHaveBeenCalledWith();
- });
- });
- });
- });
-
- describe('mapStateToProps', () => {
- const testState = { to: { catchThem: 'my real test', trainThem: 'my cause!' } };
- let mapped;
- beforeEach(() => {
- mapped = mapStateToProps(testState);
- });
- describe('modalState', () => {
- test('value from app.modalState.reasonForChange', () => {
- expect(mapped.value).toEqual(selectors.app.modalState.reasonForChange(testState));
- });
- });
- });
- describe('mapDispatchToProps', () => {
- test('setModalState from actions.app.setModalState', () => {
- expect(mapDispatchToProps.setModalState).toEqual(actions.app.setModalState);
- });
- });
-});
diff --git a/src/components/GradesView/EditModal/OverrideTable/ReasonInput/__snapshots__/index.test.jsx.snap b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..153368fb
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ReasonInput component render snapshot 1`] = `
+
+`;
diff --git a/src/components/GradesView/EditModal/OverrideTable/ReasonInput/hooks.js b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/hooks.js
new file mode 100644
index 00000000..be0071ba
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/hooks.js
@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { actions, selectors } from 'data/redux/hooks';
+
+const useReasonInputData = () => {
+ const ref = React.useRef();
+ const { reasonForChange } = selectors.app.useModalData();
+ const setModalState = actions.app.useSetModalState();
+
+ React.useEffect(() => {
+ ref.current.focus();
+ }, [ref]);
+
+ const onChange = (event) => {
+ setModalState({ reasonForChange: event.target.value });
+ };
+
+ return {
+ value: reasonForChange,
+ onChange,
+ ref,
+ };
+};
+
+export default useReasonInputData;
diff --git a/src/components/GradesView/EditModal/OverrideTable/ReasonInput/hooks.test.jsx b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/hooks.test.jsx
new file mode 100644
index 00000000..6b5acec8
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/hooks.test.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+
+import { actions, selectors } from 'data/redux/hooks';
+import useReasonInputData from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+ selectors: {
+ app: {
+ useModalData: jest.fn(),
+ },
+ },
+ actions: {
+ app: {
+ useSetModalState: jest.fn(),
+ },
+ },
+}));
+
+const modalData = { reasonForChange: 'test-reason-for-change' };
+const setModalState = jest.fn();
+selectors.app.useModalData.mockReturnValue(modalData);
+actions.app.useSetModalState.mockReturnValue(setModalState);
+
+const ref = { current: { focus: jest.fn() }, useRef: true };
+React.useRef.mockReturnValue(ref);
+
+let out;
+describe('useReasonInputData hook', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ out = useReasonInputData();
+ });
+ describe('behavior', () => {
+ it('initializes ref', () => {
+ expect(React.useRef).toHaveBeenCalled();
+ });
+ it('initializes redux hooks', () => {
+ expect(selectors.app.useModalData).toHaveBeenCalled();
+ expect(actions.app.useSetModalState).toHaveBeenCalled();
+ });
+ it('focuses ref on load', () => {
+ const [[cb, prereqs]] = React.useEffect.mock.calls;
+ expect(prereqs).toEqual([ref]);
+ cb();
+ expect(ref.current.focus).toHaveBeenCalled();
+ });
+ });
+ describe('output', () => {
+ it('forwards reasonForChange as value from modal data', () => {
+ expect(out.value).toEqual(modalData.reasonForChange);
+ });
+ it('forwards ref', () => {
+ expect(out.ref).toEqual(ref);
+ });
+ describe('onChange', () => {
+ it('sets modal state with event target value', () => {
+ const testValue = 'test-value';
+ out.onChange({ target: { value: testValue } });
+ expect(setModalState).toHaveBeenCalledWith({ reasonForChange: testValue });
+ });
+ });
+ });
+});
diff --git a/src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.jsx b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.jsx
new file mode 100644
index 00000000..b76bd213
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.jsx
@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Form } from '@edx/paragon';
+
+import useReasonInputData from './hooks';
+
+export const controlTestId = 'reason-input-control';
+
+/**
+ *
+ * Input control for the "reason for change" field in the Edit modal.
+ */
+export const ReasonInput = () => {
+ const { ref, value, onChange } = useReasonInputData();
+ return (
+
+ );
+};
+
+ReasonInput.propTypes = {};
+
+export default ReasonInput;
diff --git a/src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx
new file mode 100644
index 00000000..8cf81342
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/index.test.jsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Form } from '@edx/paragon';
+
+import useReasonInputData from './hooks';
+import ReasonInput from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+ ref: 'reason-input-ref',
+ onChange: jest.fn().mockName('hook.onChange'),
+ value: 'test-value',
+};
+useReasonInputData.mockReturnValue(hookProps);
+
+let el;
+describe('ReasonInput component', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ el = shallow(
);
+ });
+ describe('behavior', () => {
+ it('initializes hook data', () => {
+ expect(useReasonInputData).toHaveBeenCalled();
+ });
+ });
+ describe('render', () => {
+ test('snapshot', () => {
+ expect(el).toMatchSnapshot();
+ const control = el.find(Form.Control);
+ expect(control.props().value).toEqual(hookProps.value);
+ expect(control.props().onChange).toEqual(hookProps.onChange);
+ });
+ });
+});
diff --git a/src/components/GradesView/EditModal/OverrideTable/ReasonInput/ref.test.jsx b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/ref.test.jsx
new file mode 100644
index 00000000..e93bd753
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/ReasonInput/ref.test.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import useReasonInputData from './hooks';
+import ReasonInput, { controlTestId } from '.';
+
+jest.unmock('react');
+jest.unmock('@edx/paragon');
+jest.mock('./hooks', () => ({ __esModule: true, default: jest.fn() }));
+
+const focus = jest.fn();
+const props = {
+ value: 'test-value',
+ onChange: jest.fn(),
+ ref: { current: { focus }, useRef: jest.fn() },
+};
+useReasonInputData.mockReturnValue(props);
+
+let el;
+describe('ReasonInput ref', () => {
+ it('loads ref from hook', () => {
+ el = render(
);
+ const control = el.getByTestId(controlTestId);
+ expect(control).toEqual(props.ref.current);
+ });
+});
diff --git a/src/components/GradesView/EditModal/OverrideTable/__snapshots__/AdjustedGradeInput.test.jsx.snap b/src/components/GradesView/EditModal/OverrideTable/__snapshots__/AdjustedGradeInput.test.jsx.snap
deleted file mode 100644
index 93a00243..00000000
--- a/src/components/GradesView/EditModal/OverrideTable/__snapshots__/AdjustedGradeInput.test.jsx.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AdjustedGradeInput Component snapshots displays input control and "out of possible grade" label 1`] = `
-
-
-`;
diff --git a/src/components/GradesView/EditModal/OverrideTable/__snapshots__/ReasonInput.test.jsx.snap b/src/components/GradesView/EditModal/OverrideTable/__snapshots__/ReasonInput.test.jsx.snap
deleted file mode 100644
index 5931cf92..00000000
--- a/src/components/GradesView/EditModal/OverrideTable/__snapshots__/ReasonInput.test.jsx.snap
+++ /dev/null
@@ -1,10 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ReasonInput Component snapshots displays reason for change input control 1`] = `
-
-`;
diff --git a/src/components/GradesView/EditModal/OverrideTable/__snapshots__/index.test.jsx.snap b/src/components/GradesView/EditModal/OverrideTable/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..9fb2a581
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`OverrideTable component render snapshot 1`] = `
+
,
+ "date": Object {
+ "formatted": 2000-01-01T00:00:00.000Z,
+ },
+ "reason":
,
+ },
+ ]
+ }
+ itemCount={2}
+/>
+`;
diff --git a/src/components/GradesView/EditModal/OverrideTable/__snapshots__/test.jsx.snap b/src/components/GradesView/EditModal/OverrideTable/__snapshots__/test.jsx.snap
deleted file mode 100644
index 1f1169b8..00000000
--- a/src/components/GradesView/EditModal/OverrideTable/__snapshots__/test.jsx.snap
+++ /dev/null
@@ -1,64 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`OverrideTable Component snapshots basic snapshot shows a row for each entry and one editable row 1`] = `
-,
- "accessor": "date",
- },
- Object {
- "Header": ,
- "accessor": "grader",
- },
- Object {
- "Header": ,
- "accessor": "reason",
- },
- Object {
- "Header": ,
- "accessor": "adjustedGrade",
- },
- ]
- }
- data={
- Array [
- Object {
- "adjustedGrade": 0,
- "date": "yesterday",
- "grader": "me",
- "reason": "you ate my sandwich",
- },
- Object {
- "adjustedGrade": 20,
- "date": "today",
- "grader": "me",
- "reason": "you brought me a new sandwich",
- },
- Object {
- "adjustedGrade":
,
- "date": "todaaaaaay",
- "reason":
,
- },
- ]
- }
- itemCount={2}
-/>
-`;
diff --git a/src/components/GradesView/EditModal/OverrideTable/hooks.js b/src/components/GradesView/EditModal/OverrideTable/hooks.js
new file mode 100644
index 00000000..d4dfc14c
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/hooks.js
@@ -0,0 +1,26 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { gradeOverrideHistoryColumns as columns } from 'data/constants/app';
+import { selectors } from 'data/redux/hooks';
+
+import messages from './messages';
+
+const useOverrideTableData = () => {
+ const { formatMessage } = useIntl();
+
+ const hide = selectors.grades.useHasOverrideErrors();
+ const gradeOverrides = selectors.grades.useGradeData().gradeOverrideHistoryResults;
+ const tableProps = {};
+ if (!hide) {
+ tableProps.columns = [
+ { Header: formatMessage(messages.dateHeader), accessor: columns.date },
+ { Header: formatMessage(messages.graderHeader), accessor: columns.grader },
+ { Header: formatMessage(messages.reasonHeader), accessor: columns.reason },
+ { Header: formatMessage(messages.adjustedGradeHeader), accessor: columns.adjustedGrade },
+ ];
+ tableProps.data = gradeOverrides;
+ }
+ return { hide, ...tableProps };
+};
+
+export default useOverrideTableData;
diff --git a/src/components/GradesView/EditModal/OverrideTable/hooks.test.js b/src/components/GradesView/EditModal/OverrideTable/hooks.test.js
new file mode 100644
index 00000000..8e684f00
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/hooks.test.js
@@ -0,0 +1,78 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { formatMessage } from 'testUtils';
+
+import { gradeOverrideHistoryColumns as columns } from 'data/constants/app';
+import { selectors } from 'data/redux/hooks';
+
+import useOverrideTableData from './hooks';
+import messages from './messages';
+
+jest.mock('data/redux/hooks', () => ({
+ selectors: {
+ grades: {
+ useHasOverrideErrors: jest.fn(),
+ useGradeData: jest.fn(),
+ },
+ },
+}));
+
+selectors.grades.useHasOverrideErrors.mockReturnValue(false);
+const gradeOverrides = ['some', 'override', 'data'];
+const gradeData = { gradeOverrideHistoryResults: gradeOverrides };
+selectors.grades.useGradeData.mockReturnValue(gradeData);
+
+let out;
+describe('useOverrideTableData', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ out = useOverrideTableData();
+ });
+ describe('behavior', () => {
+ it('initializes intl hook', () => {
+ expect(useIntl).toHaveBeenCalled();
+ });
+ it('initializes redux hooks', () => {
+ expect(selectors.grades.useHasOverrideErrors).toHaveBeenCalled();
+ expect(selectors.grades.useGradeData).toHaveBeenCalled();
+ });
+ });
+ describe('output', () => {
+ describe('no errors', () => {
+ test('hide is false', () => {
+ expect(out.hide).toEqual(false);
+ });
+ describe('columns', () => {
+ test('date column', () => {
+ const { Header, accessor } = out.columns[0];
+ expect(Header).toEqual(formatMessage(messages.dateHeader));
+ expect(accessor).toEqual(columns.date);
+ });
+ test('grader column', () => {
+ const { Header, accessor } = out.columns[1];
+ expect(Header).toEqual(formatMessage(messages.graderHeader));
+ expect(accessor).toEqual(columns.grader);
+ });
+ test('reason column', () => {
+ const { Header, accessor } = out.columns[2];
+ expect(Header).toEqual(formatMessage(messages.reasonHeader));
+ expect(accessor).toEqual(columns.reason);
+ });
+ test('adjustedGrade column', () => {
+ const { Header, accessor } = out.columns[3];
+ expect(Header).toEqual(formatMessage(messages.adjustedGradeHeader));
+ expect(accessor).toEqual(columns.adjustedGrade);
+ });
+ });
+ test('data passed from grade data', () => {
+ expect(out.data).toEqual(gradeOverrides);
+ });
+ });
+ describe('with errors', () => {
+ it('returns hide true and no other fields', () => {
+ selectors.grades.useHasOverrideErrors.mockReturnValue(true);
+ out = useOverrideTableData();
+ expect(out).toEqual({ hide: true });
+ });
+ });
+ });
+});
diff --git a/src/components/GradesView/EditModal/OverrideTable/index.jsx b/src/components/GradesView/EditModal/OverrideTable/index.jsx
index bd5e765a..bab0054a 100644
--- a/src/components/GradesView/EditModal/OverrideTable/index.jsx
+++ b/src/components/GradesView/EditModal/OverrideTable/index.jsx
@@ -1,73 +1,40 @@
/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
import { DataTable } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import { gradeOverrideHistoryColumns as columns } from 'data/constants/app';
-import selectors from 'data/selectors';
+import { formatDateForDisplay } from 'utils';
-import messages from './messages';
import ReasonInput from './ReasonInput';
import AdjustedGradeInput from './AdjustedGradeInput';
+import useOverrideTableData from './hooks';
/**
*
* Table containing previous grade override entries, and an "edit" row
* with todays date, an AdjustedGradeInput and a ReasonInput
*/
-export const OverrideTable = ({
- hide,
- gradeOverrides,
- todaysDate,
-}) => {
- if (hide) {
- return null;
- }
+
+export const OverrideTable = () => {
+ const { hide, columns, data } = useOverrideTableData();
+
+ if (hide) { return null; }
+
return (
, accessor: columns.date },
- { Header:
, accessor: columns.grader },
- { Header:
, accessor: columns.reason },
- {
- Header:
,
- accessor: columns.adjustedGrade,
- },
- ]}
+ columns={columns}
data={[
- ...gradeOverrides,
+ ...data,
{
adjustedGrade:
,
- date: todaysDate,
+ date: formatDateForDisplay(new Date()),
reason:
,
},
]}
- itemCount={gradeOverrides.length}
+ itemCount={data.length}
/>
);
};
-OverrideTable.defaultProps = {
- gradeOverrides: [],
-};
-OverrideTable.propTypes = {
- // redux
- gradeOverrides: PropTypes.arrayOf(PropTypes.shape({
- date: PropTypes.string,
- grader: PropTypes.string,
- reason: PropTypes.string,
- adjustedGrade: PropTypes.number,
- })),
- hide: PropTypes.bool.isRequired,
- todaysDate: PropTypes.string.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
- hide: selectors.grades.hasOverrideErrors(state),
- gradeOverrides: selectors.grades.gradeOverrides(state),
- todaysDate: selectors.app.modalState.todaysDate(state),
-});
+OverrideTable.propTypes = {};
-export default connect(mapStateToProps)(OverrideTable);
+export default OverrideTable;
diff --git a/src/components/GradesView/EditModal/OverrideTable/index.test.jsx b/src/components/GradesView/EditModal/OverrideTable/index.test.jsx
new file mode 100644
index 00000000..79210fb7
--- /dev/null
+++ b/src/components/GradesView/EditModal/OverrideTable/index.test.jsx
@@ -0,0 +1,65 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { DataTable } from '@edx/paragon';
+
+import { formatDateForDisplay } from 'utils';
+
+import AdjustedGradeInput from './AdjustedGradeInput';
+import ReasonInput from './ReasonInput';
+import useOverrideTableData from './hooks';
+import OverrideTable from '.';
+
+jest.mock('utils', () => ({
+ formatDateForDisplay: (date) => ({ formatted: date }),
+}));
+jest.mock('./hooks', () => jest.fn());
+jest.mock('./AdjustedGradeInput', () => 'AdjustedGradeInput');
+jest.mock('./ReasonInput', () => 'ReasonInput');
+
+const hookProps = {
+ hide: false,
+ data: [
+ { test: 'data' },
+ { andOther: 'test-data' },
+ ],
+ columns: 'test-columns',
+};
+useOverrideTableData.mockReturnValue(hookProps);
+
+let el;
+describe('OverrideTable component', () => {
+ beforeEach(() => {
+ jest
+ .clearAllMocks()
+ .useFakeTimers('modern')
+ .setSystemTime(new Date('2000-01-01').getTime());
+ el = shallow(
);
+ });
+ describe('behavior', () => {
+ it('initializes hook data', () => {
+ expect(useOverrideTableData).toHaveBeenCalled();
+ });
+ });
+ describe('render', () => {
+ test('null render if hide', () => {
+ useOverrideTableData.mockReturnValueOnce({ ...hookProps, hide: true });
+ el = shallow(
);
+ expect(el.isEmptyRender()).toEqual(true);
+ });
+ test('snapshot', () => {
+ expect(el).toMatchSnapshot();
+ const table = el.find(DataTable);
+ expect(table.props().columns).toEqual(hookProps.columns);
+ const data = [...table.props().data];
+ const inputRow = data.pop();
+ const formattedDate = formatDateForDisplay(new Date());
+ expect(data).toEqual(hookProps.data);
+ expect(inputRow).toMatchObject({
+ adjustedGrade:
,
+ date: formattedDate,
+ reason:
,
+ });
+ });
+ });
+});
diff --git a/src/components/GradesView/EditModal/OverrideTable/test.jsx b/src/components/GradesView/EditModal/OverrideTable/test.jsx
deleted file mode 100644
index 96149b47..00000000
--- a/src/components/GradesView/EditModal/OverrideTable/test.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import selectors from 'data/selectors';
-
-import {
- OverrideTable,
- mapStateToProps,
-} from '.';
-
-jest.mock('@edx/paragon', () => ({ DataTable: () => 'DataTable' }));
-jest.mock('./ReasonInput', () => 'ReasonInput');
-jest.mock('./AdjustedGradeInput', () => 'AdjustedGradeInput');
-
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- app: {
- modalState: {
- todaysDate: jest.fn(state => ({ todaysDate: state })),
- },
- },
- grades: {
- hasOverrideErrors: jest.fn(state => ({ hasOverrideErrors: state })),
- gradeOverrides: jest.fn(state => ({ gradeOverrides: state })),
- },
- },
-}));
-
-describe('OverrideTable', () => {
- const props = {
- gradeOverrides: [
- {
- date: 'yesterday',
- grader: 'me',
- reason: 'you ate my sandwich',
- adjustedGrade: 0,
- },
- {
- date: 'today',
- grader: 'me',
- reason: 'you brought me a new sandwich',
- adjustedGrade: 20,
- },
- ],
- hide: false,
- todaysDate: 'todaaaaaay',
- };
-
- describe('Component', () => {
- describe('snapshots', () => {
- it('returns null if hide is true', () => {
- expect(shallow(
)).toEqual({});
- });
- describe('basic snapshot', () => {
- test('shows a row for each entry and one editable row', () => {
- expect(shallow(
)).toMatchSnapshot();
- });
- });
- });
- });
-
- describe('mapStateToProps', () => {
- const testState = { I: 'wanna', be: 'the', very: 'best' };
- let mapped;
- beforeEach(() => {
- mapped = mapStateToProps(testState);
- });
- describe('modalState', () => {
- test('hide from grades.hasOverrideErrors', () => {
- expect(mapped.hide).toEqual(selectors.grades.hasOverrideErrors(testState));
- });
- test('gradeOverrides from grades.gradeOverrides', () => {
- expect(mapped.gradeOverrides).toEqual(selectors.grades.gradeOverrides(testState));
- });
- test('todaysData from app.modalState.todaysDate', () => {
- expect(mapped.todaysDate).toEqual(selectors.app.modalState.todaysDate(testState));
- });
- });
- });
-});
diff --git a/src/components/GradesView/EditModal/__snapshots__/ModalHeaders.test.jsx.snap b/src/components/GradesView/EditModal/__snapshots__/ModalHeaders.test.jsx.snap
index 0cce19b4..22efe800 100644
--- a/src/components/GradesView/EditModal/__snapshots__/ModalHeaders.test.jsx.snap
+++ b/src/components/GradesView/EditModal/__snapshots__/ModalHeaders.test.jsx.snap
@@ -1,99 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`ModalHeaders Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
+exports[`ModalHeaders render snapshot 1`] = `
-`;
-
-exports[`ModalHeaders Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
-
-
`;
diff --git a/src/components/GradesView/EditModal/__snapshots__/index.test.jsx.snap b/src/components/GradesView/EditModal/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..46a0c513
--- /dev/null
+++ b/src/components/GradesView/EditModal/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,91 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EditModal component render with error snapshot 1`] = `
+
+
+
+
+
+ test-error
+
+
+
+ Showing most recent actions (max 5). To see more, please contact support
+
+
+ Note: Once you save, your changes will be visible to students.
+
+
+
+
+
+ Cancel
+
+
+ Save Grades
+
+
+
+
+`;
+
+exports[`EditModal component render without error snapshot 1`] = `
+
+
+
+
+
+
+
+ Showing most recent actions (max 5). To see more, please contact support
+
+
+ Note: Once you save, your changes will be visible to students.
+
+
+
+
+
+ Cancel
+
+
+ Save Grades
+
+
+
+
+`;
diff --git a/src/components/GradesView/EditModal/__snapshots__/test.jsx.snap b/src/components/GradesView/EditModal/__snapshots__/test.jsx.snap
deleted file mode 100644
index 3bcdeb7f..00000000
--- a/src/components/GradesView/EditModal/__snapshots__/test.jsx.snap
+++ /dev/null
@@ -1,125 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EditModal Component snapshots gradeOverrideHistoryError is and empty and open is true modal open and StatusAlert showing 1`] = `
-
-
-
-
-
- Weve been trying to contact you regarding...
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
-
-exports[`EditModal Component snapshots gradeOverrideHistoryError is empty and open is false modal closed and StatusAlert closed 1`] = `
-
-
-
-
-
-
-
-
-
-
-
-
-
-`;
diff --git a/src/components/GradesView/EditModal/hooks.js b/src/components/GradesView/EditModal/hooks.js
new file mode 100644
index 00000000..a5811b74
--- /dev/null
+++ b/src/components/GradesView/EditModal/hooks.js
@@ -0,0 +1,29 @@
+import { selectors, actions, thunkActions } from 'data/redux/hooks';
+
+export const useEditModalData = () => {
+ const error = selectors.grades.useGradeData().gradeOverrideHistoryError;
+ const isOpen = selectors.app.useModalData().open;
+ const closeModal = actions.app.useCloseModal();
+ const doneViewingAssignment = actions.grades.useDoneViewingAssignment();
+ const updateGrades = thunkActions.grades.useUpdateGrades();
+
+ const onClose = () => {
+ doneViewingAssignment();
+ closeModal();
+ };
+
+ const handleAdjustedGradeClick = () => {
+ updateGrades();
+ doneViewingAssignment();
+ closeModal();
+ };
+
+ return {
+ onClose,
+ error,
+ handleAdjustedGradeClick,
+ isOpen,
+ };
+};
+
+export default useEditModalData;
diff --git a/src/components/GradesView/EditModal/hooks.test.js b/src/components/GradesView/EditModal/hooks.test.js
new file mode 100644
index 00000000..7951a16f
--- /dev/null
+++ b/src/components/GradesView/EditModal/hooks.test.js
@@ -0,0 +1,68 @@
+import { selectors, actions, thunkActions } from 'data/redux/hooks';
+
+import useEditModalData from './hooks';
+
+jest.mock('data/redux/hooks', () => ({
+ actions: {
+ app: { useCloseModal: jest.fn() },
+ grades: { useDoneViewingAssignment: jest.fn() },
+ },
+ selectors: {
+ app: { useModalData: jest.fn() },
+ grades: { useGradeData: jest.fn() },
+ },
+ thunkActions: {
+ grades: { useUpdateGrades: jest.fn() },
+ },
+}));
+
+const closeModal = jest.fn();
+const doneViewingAssignment = jest.fn();
+const updateGrades = jest.fn();
+actions.app.useCloseModal.mockReturnValue(closeModal);
+actions.grades.useDoneViewingAssignment.mockReturnValue(doneViewingAssignment);
+thunkActions.grades.useUpdateGrades.mockReturnValue(updateGrades);
+
+const gradeData = { gradeOverridHistoryError: 'test-error' };
+const modalData = { open: true };
+selectors.app.useModalData.mockReturnValue(modalData);
+selectors.grades.useGradeData.mockReturnValue(gradeData);
+
+let out;
+describe('useEditModalData', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ out = useEditModalData();
+ });
+ describe('behavior', () => {
+ it('initializes redux hooks', () => {
+ expect(selectors.grades.useGradeData).toHaveBeenCalled();
+ expect(selectors.app.useModalData).toHaveBeenCalled();
+ expect(actions.app.useCloseModal).toHaveBeenCalled();
+ expect(actions.grades.useDoneViewingAssignment).toHaveBeenCalled();
+ expect(thunkActions.grades.useUpdateGrades).toHaveBeenCalled();
+ });
+ });
+ describe('output', () => {
+ it('forwards error from gradeData.gradeOverrideHistoryError', () => {
+ expect(out.error).toEqual(gradeData.gradeOverrideHistoryError);
+ });
+ it('forwards isOpen from modalData.open', () => {
+ expect(out.isOpen).toEqual(modalData.open);
+ });
+ describe('handleAdjustedGradeClick', () => {
+ it('updates grades, calls doneViewingAssignment and closeModal', () => {
+ out.handleAdjustedGradeClick();
+ expect(updateGrades).toHaveBeenCalled();
+ expect(doneViewingAssignment).toHaveBeenCalled();
+ expect(closeModal).toHaveBeenCalled();
+ });
+ });
+ test('onClose calls doneViewingAssignment and closeModal', () => {
+ out.onClose();
+ expect(doneViewingAssignment).toHaveBeenCalled();
+ expect(closeModal).toHaveBeenCalled();
+ expect(updateGrades).not.toHaveBeenCalled();
+ });
+ });
+});
diff --git a/src/components/GradesView/EditModal/index.jsx b/src/components/GradesView/EditModal/index.jsx
index d093be89..519b044c 100644
--- a/src/components/GradesView/EditModal/index.jsx
+++ b/src/components/GradesView/EditModal/index.jsx
@@ -1,7 +1,4 @@
-/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
import {
Button,
@@ -9,15 +6,12 @@ import {
ModalDialog,
ActionRow,
} from '@edx/paragon';
-import { FormattedMessage, injectIntl, intlShape } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-import thunkActions from 'data/thunkActions';
-
-import messages from './messages';
import OverrideTable from './OverrideTable';
import ModalHeaders from './ModalHeaders';
+import useEditModalData from './hooks';
+import messages from './messages';
/**
*
@@ -28,87 +22,48 @@ import ModalHeaders from './ModalHeaders';
* adjusting the grade.
* (also provides a close button that clears the modal state)
*/
-export class EditModal extends React.Component {
- constructor(props) {
- super(props);
- this.closeAssignmentModal = this.closeAssignmentModal.bind(this);
- this.handleAdjustedGradeClick = this.handleAdjustedGradeClick.bind(this);
- }
-
- closeAssignmentModal() {
- this.props.doneViewingAssignment();
- this.props.closeModal();
- }
-
- handleAdjustedGradeClick() {
- this.props.updateGrades();
- this.closeAssignmentModal();
- }
-
- render() {
- return (
-
-
-
-
-
- {this.props.gradeOverrideHistoryError}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
- }
-}
-
-EditModal.defaultProps = {
- gradeOverrideHistoryError: '',
-};
-
-EditModal.propTypes = {
- // redux
- gradeOverrideHistoryError: PropTypes.string,
- open: PropTypes.bool.isRequired,
- closeModal: PropTypes.func.isRequired,
- doneViewingAssignment: PropTypes.func.isRequired,
- updateGrades: PropTypes.func.isRequired,
- // injected
- intl: intlShape.isRequired,
-};
+export const EditModal = () => {
+ const { formatMessage } = useIntl();
+ const {
+ onClose,
+ error,
+ handleAdjustedGradeClick,
+ isOpen,
+ } = useEditModalData();
-export const mapStateToProps = (state) => ({
- gradeOverrideHistoryError: selectors.grades.gradeOverrideHistoryError(state),
- open: selectors.app.modalState.open(state),
-});
+ return (
+
+
+
+
+
+ {error}
+
+
+
{formatMessage(messages.visibility)}
+
{formatMessage(messages.saveVisibility)}
+
-export const mapDispatchToProps = {
- closeModal: actions.app.closeModal,
- doneViewingAssignment: actions.grades.doneViewingAssignment,
- updateGrades: thunkActions.grades.updateGrades,
+
+
+
+ {formatMessage(messages.closeText)}
+
+
+ {formatMessage(messages.saveGrade)}
+
+
+
+
+ );
};
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(EditModal));
+export default EditModal;
diff --git a/src/components/GradesView/EditModal/index.test.jsx b/src/components/GradesView/EditModal/index.test.jsx
new file mode 100644
index 00000000..8a69126f
--- /dev/null
+++ b/src/components/GradesView/EditModal/index.test.jsx
@@ -0,0 +1,132 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import {
+ ActionRow,
+ ModalDialog,
+} from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { formatMessage } from 'testUtils';
+
+import ModalHeaders from './ModalHeaders';
+import OverrideTable from './OverrideTable';
+import useEditModalData from './hooks';
+import EditModal from '.';
+import messages from './messages';
+
+jest.mock('./hooks', () => jest.fn());
+jest.mock('./ModalHeaders', () => 'ModalHeaders');
+jest.mock('./OverrideTable', () => 'OverrideTable');
+
+const hookProps = {
+ onClose: jest.fn().mockName('hooks.onClose'),
+ error: 'test-error',
+ handleAdjustedGradeClick: jest.fn().mockName('hooks.handleAdjustedGradeClick'),
+ isOpen: 'test-is-open',
+};
+useEditModalData.mockReturnValue(hookProps);
+
+let el;
+describe('EditModal component', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ el = shallow(
);
+ });
+ describe('behavior', () => {
+ it('initializes intl hook', () => {
+ expect(useIntl).toHaveBeenCalled();
+ });
+ it('initializes component hooks', () => {
+ expect(useEditModalData).toHaveBeenCalled();
+ });
+ });
+ describe('render', () => {
+ test('modal props', () => {
+ const modalProps = el.find(ModalDialog).props();
+ expect(modalProps.title).toEqual(formatMessage(messages.title));
+ expect(modalProps.isOpen).toEqual(hookProps.isOpen);
+ expect(modalProps.onClose).toEqual(hookProps.onClose);
+ });
+ const loadBody = () => {
+ const body = el.find(ModalDialog).children().at(0);
+ const children = body.find('div').children();
+ return { body, children };
+ };
+ const testBody = () => {
+ test('type', () => {
+ const { body } = loadBody();
+ expect(body.type()).toEqual('ModalDialog.Body');
+ });
+ test('headers row', () => {
+ const { children } = loadBody();
+ expect(children.at(0)).toMatchObject(shallow(
));
+ });
+ test('table row', () => {
+ const { children } = loadBody();
+ expect(children.at(2)).toMatchObject(shallow(
));
+ });
+ test('messages', () => {
+ const { children } = loadBody();
+ expect(
+ children.at(3).contains(formatMessage(messages.visibility)),
+ ).toEqual(true);
+ expect(
+ children.at(4).contains(formatMessage(messages.saveVisibility)),
+ ).toEqual(true);
+ });
+ };
+ const testFooter = () => {
+ let footer;
+ beforeEach(() => {
+ footer = el.find(ModalDialog).children().at(1);
+ });
+ test('type', () => {
+ expect(footer.type()).toEqual('ModalDialog.Footer');
+ });
+ test('contains action row', () => {
+ expect(footer.children().at(0).type()).toEqual('ActionRow');
+ });
+ test('close button', () => {
+ const button = footer.find(ActionRow).children().at(0);
+ expect(button.contains(formatMessage(messages.closeText))).toEqual(true);
+ expect(button.type()).toEqual('ModalDialog.CloseButton');
+ });
+ test('adjusted grade button', () => {
+ const button = footer.find(ActionRow).children().at(1);
+ expect(button.contains(formatMessage(messages.saveGrade))).toEqual(true);
+ expect(button.type()).toEqual('Button');
+ expect(button.props().onClick).toEqual(hookProps.handleAdjustedGradeClick);
+ });
+ };
+ describe('without error', () => {
+ beforeEach(() => {
+ useEditModalData.mockReturnValueOnce({ ...hookProps, error: undefined });
+ el = shallow(
);
+ });
+ test('snapshot', () => {
+ expect(el).toMatchSnapshot();
+ });
+ testBody();
+ testFooter();
+ test('alert row', () => {
+ const alert = loadBody().children.at(1);
+ expect(alert.type()).toEqual('Alert');
+ expect(alert.props().show).toEqual(false);
+ });
+ });
+ describe('with error', () => {
+ test('snapshot', () => {
+ expect(el).toMatchSnapshot();
+ });
+ testBody();
+ test('alert row', () => {
+ const alert = loadBody().children.at(1);
+ expect(alert.type()).toEqual('Alert');
+ expect(alert.props().show).toEqual(true);
+ expect(alert.contains(hookProps.error)).toEqual(true);
+ });
+ testFooter();
+ });
+ });
+});
diff --git a/src/components/GradesView/EditModal/test.jsx b/src/components/GradesView/EditModal/test.jsx
deleted file mode 100644
index c0f6cbf6..00000000
--- a/src/components/GradesView/EditModal/test.jsx
+++ /dev/null
@@ -1,130 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import thunkActions from 'data/thunkActions';
-
-import {
- EditModal,
- mapDispatchToProps,
- mapStateToProps,
-}
- from '.';
-
-jest.mock('./OverrideTable', () => 'OverrideTable');
-jest.mock('./ModalHeaders', () => 'ModalHeaders');
-jest.mock('data/actions', () => ({
- __esModule: true,
- default: {
- app: { closeModal: jest.fn() },
- grades: { doneViewingAssignment: jest.fn() },
- },
-}));
-jest.mock('data/thunkActions', () => ({
- __esModule: true,
- default: {
- grades: { updateGrades: jest.fn() },
- },
-}));
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- app: {
- modalState: {
- open: jest.fn(state => ({ isModalOpen: state })),
- },
- },
- grades: {
- gradeOverrideHistoryError: jest.fn(state => ({ overrideHistoryError: state })),
- },
- },
-}));
-describe('EditModal', () => {
- let props;
- beforeEach(() => {
- props = {
- gradeOverrideHistoryError: 'Weve been trying to contact you regarding...',
- open: true,
- closeModal: jest.fn(),
- doneViewingAssignment: jest.fn(),
- updateGrades: jest.fn(),
-
- intl: { formatMessage: (msg) => msg.defaultMessage },
- };
- });
-
- describe('Component', () => {
- describe('behavior', () => {
- let el;
- beforeEach(() => {
- el = shallow(
);
- });
- describe('closeAssignmentModal', () => {
- it('calls props.doneViewingAssignment and props.closeModal', () => {
- el.instance().closeAssignmentModal();
- expect(props.doneViewingAssignment).toHaveBeenCalledWith();
- expect(props.closeModal).toHaveBeenCalledWith();
- });
- });
- describe('handleAdjustedGradeClick', () => {
- it('calls props.updateGardes and this.closeAssignmentModal', () => {
- el.instance().closeAssignmentModal = jest.fn();
- el.instance().handleAdjustedGradeClick();
- expect(props.updateGrades).toHaveBeenCalledWith();
- expect(el.instance().closeAssignmentModal).toHaveBeenCalledWith();
- });
- });
- });
- describe('snapshots', () => {
- let el;
- beforeEach(() => {
- el = shallow(
);
- el.instance().closeAssignmentModal = jest.fn().mockName('this.closeAssignmentModal');
- el.instance().handleAdjustedGradeClick = jest.fn().mockName(
- 'this.handleAdjustedGradeClick',
- );
- });
- describe('gradeOverrideHistoryError is and empty and open is true', () => {
- test('modal open and StatusAlert showing', () => {
- expect(el.instance().render()).toMatchSnapshot();
- });
- });
- describe('gradeOverrideHistoryError is empty and open is false', () => {
- test('modal closed and StatusAlert closed', () => {
- el.setProps({ open: false, gradeOverrideHistoryError: '' });
- expect(el.instance().render()).toMatchSnapshot();
- });
- });
- });
- });
-
- describe('mapStateToProps', () => {
- const testState = { martha: 'why did you say that name?!' };
- let mapped;
- beforeEach(() => {
- mapped = mapStateToProps(testState);
- });
- test('gradeOverrideHistoryError from grades.gradeOverrideHistoryError', () => {
- expect(
- mapped.gradeOverrideHistoryError,
- ).toEqual(selectors.grades.gradeOverrideHistoryError(testState));
- });
- test('open from app.modalState.open', () => {
- expect(mapped.open).toEqual(selectors.app.modalState.open(testState));
- });
- });
- describe('mapDispatchToProps', () => {
- test('closeModal from actions.app.closeModal', () => {
- expect(mapDispatchToProps.closeModal).toEqual(actions.app.closeModal);
- });
- test('doneViewingAssignemtn from actions.grades.doneViewingAssignment', () => {
- expect(
- mapDispatchToProps.doneViewingAssignment,
- ).toEqual(actions.grades.doneViewingAssignment);
- });
- test('updateGrades from thunkActions.grades.updateGrades', () => {
- expect(mapDispatchToProps.updateGrades).toEqual(thunkActions.grades.updateGrades);
- });
- });
-});
diff --git a/src/components/GradesView/FilterBadges/FilterBadge.jsx b/src/components/GradesView/FilterBadges/FilterBadge.jsx
index d6f5dbe7..48e6862b 100644
--- a/src/components/GradesView/FilterBadges/FilterBadge.jsx
+++ b/src/components/GradesView/FilterBadges/FilterBadge.jsx
@@ -1,11 +1,10 @@
import React from 'react';
-import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { Button } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
-import selectors from 'data/selectors';
+import { selectors } from 'data/redux/hooks';
/**
* FilterBadge
@@ -16,56 +15,43 @@ import selectors from 'data/selectors';
* @param {string} filterName - api filter name (for redux connector)
*/
export const FilterBadge = ({
- config: {
+ filterName,
+ handleClose,
+}) => {
+ const { formatMessage } = useIntl();
+ const {
displayName,
isDefault,
hideValue,
value,
connectedFilters,
- },
- handleClose,
-}) => !isDefault && (
-
-
-
-
-
- {!hideValue ? `: ${value}` : ''}
+ } = selectors.root.useFilterBadgeConfig(filterName);
+ if (isDefault) {
+ return null;
+ }
+ return (
+
+
+ {formatMessage(displayName)}
+
+ {!hideValue ? `: ${value}` : ''}
+
+
+ ×
+
-
- ×
-
-
-
-);
+
+ );
+};
FilterBadge.propTypes = {
handleClose: PropTypes.func.isRequired,
- // eslint-disable-next-line
filterName: PropTypes.string.isRequired,
- // redux
- config: PropTypes.shape({
- connectedFilters: PropTypes.arrayOf(PropTypes.string),
- displayName: PropTypes.shape({
- defaultMessage: PropTypes.string,
- }).isRequired,
- isDefault: PropTypes.bool.isRequired,
- hideValue: PropTypes.bool,
- value: PropTypes.oneOfType([
- PropTypes.string,
- PropTypes.bool,
- ]),
- }).isRequired,
};
-export const mapStateToProps = (state, ownProps) => ({
- config: selectors.root.filterBadgeConfig(state, ownProps.filterName),
-});
-
-export default connect(mapStateToProps)(FilterBadge);
+export default FilterBadge;
diff --git a/src/components/GradesView/FilterBadges/FilterBadge.test.jsx b/src/components/GradesView/FilterBadges/FilterBadge.test.jsx
index 935cf931..30ac3801 100644
--- a/src/components/GradesView/FilterBadges/FilterBadge.test.jsx
+++ b/src/components/GradesView/FilterBadges/FilterBadge.test.jsx
@@ -1,107 +1,95 @@
import React from 'react';
import { shallow } from 'enzyme';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { formatMessage } from 'testUtils';
import { Button } from '@edx/paragon';
-import selectors from 'data/selectors';
-import { FilterBadge, mapStateToProps } from './FilterBadge';
+import { selectors } from 'data/redux/hooks';
+import FilterBadge from './FilterBadge';
jest.mock('@edx/paragon', () => ({
Button: () => 'Button',
}));
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
+jest.mock('data/redux/hooks', () => ({
+ selectors: {
root: {
- filterBadgeConfig: jest.fn(state => ({ filterBadgeConfig: state })),
+ useFilterBadgeConfig: jest.fn(),
},
},
}));
+const handleClose = jest.fn(filters => ({ handleClose: filters }));
+const filterName = 'test-filter-name';
+
+const hookProps = {
+ displayName: {
+ defaultMessage: 'a common name',
+ },
+ isDefault: false,
+ hideValue: false,
+ value: 'a common value',
+ connectedFilters: ['some', 'filters'],
+};
+selectors.root.useFilterBadgeConfig.mockReturnValue(hookProps);
+
+let el;
describe('FilterBadge', () => {
- describe('component', () => {
- const config = {
- displayName: {
- defaultMessage: 'a common name',
- },
- isDefault: false,
- hideValue: false,
- value: 'a common value',
- connectedFilters: ['some', 'filters'],
+ beforeEach(() => {
+ el = shallow(
);
+ });
+ describe('behavior', () => {
+ it('initializes intl hook', () => {
+ expect(useIntl).toHaveBeenCalled();
+ });
+ it('initializes redux hooks', () => {
+ expect(selectors.root.useFilterBadgeConfig).toHaveBeenCalledWith(filterName);
+ });
+ });
+ describe('render', () => {
+ const testDisplayName = () => {
+ test('formatted display name appears on badge', () => {
+ expect(el.contains(formatMessage(hookProps.displayName))).toEqual(true);
+ });
+ };
+ const testCloseButton = () => {
+ test('close button forwards close method', () => {
+ expect(el.find(Button).props().onClick).toEqual(handleClose(hookProps.connectedFilters));
+ });
};
- const filterName = 'api.filter.name';
- let handleClose;
- let el;
- let props;
- beforeEach(() => {
- handleClose = (filters) => ({ handleClose: filters });
- props = { filterName, handleClose, config };
+ test('empty render if isDefault', () => {
+ selectors.root.useFilterBadgeConfig.mockReturnValueOnce({
+ ...hookProps,
+ isDefault: true,
+ });
+ el = shallow(
);
+ expect(el.isEmptyRender()).toEqual(true);
});
- describe('with default value', () => {
+ describe('hide Value', () => {
beforeEach(() => {
- el = shallow(
-
,
- );
+ selectors.root.useFilterBadgeConfig.mockReturnValueOnce({
+ ...hookProps,
+ hideValue: true,
+ });
+ el = shallow(
);
});
- test('snapshot - empty', () => {
+ testDisplayName();
+ testCloseButton();
+ test('snapshot', () => {
expect(el).toMatchSnapshot();
});
- it('does not display', () => {
- expect(el).toEqual({});
+ test('value is note present in the badge', () => {
+ expect(el.contains(hookProps.value)).toEqual(false);
});
});
- describe('with non-default value (active)', () => {
- describe('if hideValue is true', () => {
- beforeEach(() => {
- el = shallow(
-
,
- );
- });
- test('snapshot - shows displayName but not value in span', () => {
- expect(el).toMatchSnapshot();
- });
- it('shows displayName but not value in span', () => {
- expect(el.find('span.badge').childAt(0).getElement()).toEqual(
-
- ,
- );
- });
- it('calls a handleClose event for connected filters on button click', () => {
- expect(el.find(Button).props().onClick).toEqual(handleClose(config.connectedFilters));
- });
+ describe('do not hide value', () => {
+ testDisplayName();
+ testCloseButton();
+ test('snapshot', () => {
+ expect(el).toMatchSnapshot();
});
- describe('if hideValue is false (default)', () => {
- beforeEach(() => {
- el = shallow(
);
- });
- test('snapshot', () => {
- expect(el).toMatchSnapshot();
- });
- it('shows displayName and value in span', () => {
- expect(el.find('span.badge').childAt(0).getElement()).toEqual(
-
- ,
- );
- expect(el.find('span.badge').childAt(1).getElement()).toEqual(
-
- {`: ${config.value}`}
- ,
- );
- });
- it('calls a handleClose event for connected filters on button click', () => {
- expect(el.find(Button).props().onClick).toEqual(handleClose(config.connectedFilters));
- });
+ test('value is note present in the badge', () => {
+ expect(el.text().includes(hookProps.value)).toEqual(true);
});
});
});
- describe('mapStateToProps', () => {
- const testState = { some: 'kind', of: 'alien' };
- const filterName = 'Lilu Dallas Multipass';
- test('config loads config from root.filterBadgeConfig with ownProps.filterName', () => {
- const { config } = mapStateToProps(testState, { filterName });
- expect(config).toEqual(selectors.root.filterBadgeConfig(testState, filterName));
- });
- });
});
diff --git a/src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap b/src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap
index 1eb81474..4de3fc52 100644
--- a/src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap
+++ b/src/components/GradesView/FilterBadges/__snapshots__/FilterBadge.test.jsx.snap
@@ -1,16 +1,12 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`FilterBadge component with default value snapshot - empty 1`] = `""`;
-
-exports[`FilterBadge component with non-default value (active) if hideValue is false (default) snapshot 1`] = `
+exports[`FilterBadge render do not hide value snapshot 1`] = `
-
: a common value
@@ -38,15 +34,13 @@ exports[`FilterBadge component with non-default value (active) if hideValue is f
`;
-exports[`FilterBadge component with non-default value (active) if hideValue is true snapshot - shows displayName but not value in span 1`] = `
+exports[`FilterBadge render hide Value snapshot 1`] = `
-
(
-
-
-);
-
-FilterMenuToggle.propTypes = {
- // From Redux
- toggleFilterDrawer: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = () => ({});
-
-export const mapDispatchToProps = {
- toggleFilterDrawer: thunkActions.app.filterMenu.toggle,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(FilterMenuToggle);
diff --git a/src/components/GradesView/FilterMenuToggle.test.jsx b/src/components/GradesView/FilterMenuToggle.test.jsx
deleted file mode 100644
index 4d02fca6..00000000
--- a/src/components/GradesView/FilterMenuToggle.test.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import thunkActions from 'data/thunkActions';
-
-import { FilterMenuToggle, mapDispatchToProps, mapStateToProps } from './FilterMenuToggle';
-
-jest.mock('@edx/paragon', () => ({
- Button: () => 'Button',
- Icon: () => 'Icon',
-}));
-jest.mock('data/thunkActions', () => ({
- __esModule: true,
- default: {
- app: {
- filterMenu: { toggle: jest.fn() },
- },
- },
-}));
-
-describe('FilterMenuToggle component', () => {
- describe('snapshots', () => {
- test('basic snapshot', () => {
- const toggleFilterDrawer = jest.fn().mockName('this.props.toggleFilterDrawer');
- expect(shallow((
-
+
+`;
diff --git a/src/components/GradesView/FilterMenuToggle/index.jsx b/src/components/GradesView/FilterMenuToggle/index.jsx
new file mode 100644
index 00000000..72f60fdb
--- /dev/null
+++ b/src/components/GradesView/FilterMenuToggle/index.jsx
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { Button, Icon } from '@edx/paragon';
+import { useIntl } from '@edx/frontend-platform/i18n';
+import { FilterAlt } from '@edx/paragon/icons';
+
+import { thunkActions } from 'data/redux/hooks';
+
+import messages from './messages';
+
+/**
+ * Controls for filtering the GradebookTable. Contains the "Edit Filters" button for opening the filter drawer
+ * as well as the search box for searching by username/email.
+ */
+export const FilterMenuToggle = () => {
+ const toggleFilterMenu = thunkActions.app.filterMenu.useToggleMenu();
+ const { formatMessage } = useIntl();
+ return (
+
+
+ );
+};
+
+FilterMenuToggle.propTypes = {};
+
+export default FilterMenuToggle;
diff --git a/src/components/GradesView/FilterMenuToggle/index.test.jsx b/src/components/GradesView/FilterMenuToggle/index.test.jsx
new file mode 100644
index 00000000..ac544957
--- /dev/null
+++ b/src/components/GradesView/FilterMenuToggle/index.test.jsx
@@ -0,0 +1,47 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { formatMessage } from 'testUtils';
+import { thunkActions } from 'data/redux/hooks';
+
+import FilterMenuToggle from '.';
+import messages from './messages';
+
+jest.mock('data/redux/hooks', () => ({
+ thunkActions: {
+ app: {
+ filterMenu: {
+ useToggleMenu: jest.fn(),
+ },
+ },
+ },
+}));
+
+const toggleFilterMenu = jest.fn().mockName('hooks.toggleFilterMenu');
+thunkActions.app.filterMenu.useToggleMenu.mockReturnValue(toggleFilterMenu);
+
+let el;
+describe('FilterMenuToggle component', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ el = shallow({val} );
- return (
- {text}
+);
+BoldText.propTypes = {
+ text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};
+
+/**
+ *
- {this.label}
-
- );
- }
-}
-
+export const GradeButton = ({ entry, subsection }) => {
+ const {
+ areGradesFrozen,
+ label,
+ onClick,
+ } = module.useGradeButtonData({ entry, subsection });
+ return areGradesFrozen
+ ? label
+ : (
+
+ {label}
+
+ );
+};
GradeButton.propTypes = {
subsection: PropTypes.shape({
attempted: PropTypes.bool,
@@ -62,19 +65,6 @@ GradeButton.propTypes = {
user_id: PropTypes.number,
username: PropTypes.string,
}).isRequired,
- // redux
- areGradesFrozen: PropTypes.bool.isRequired,
- format: PropTypes.string.isRequired,
- setModalState: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
- areGradesFrozen: selectors.assignmentTypes.areGradesFrozen(state),
- format: selectors.grades.gradeFormat(state),
-});
-
-export const mapDispatchToProps = {
- setModalState: thunkActions.app.setModalStateFromTable,
};
-export default connect(mapStateToProps, mapDispatchToProps)(GradeButton);
+export default GradeButton;
diff --git a/src/components/GradesView/GradebookTable/GradeButton.test.jsx b/src/components/GradesView/GradebookTable/GradeButton.test.jsx
index 36588ff2..6574f073 100644
--- a/src/components/GradesView/GradebookTable/GradeButton.test.jsx
+++ b/src/components/GradesView/GradebookTable/GradeButton.test.jsx
@@ -1,118 +1,121 @@
import React from 'react';
import { shallow } from 'enzyme';
-import { Button } from '@edx/paragon';
-import selectors from 'data/selectors';
-import thunkActions from 'data/thunkActions';
+import { selectors, thunkActions } from 'data/redux/hooks';
+import transforms from 'data/redux/transforms';
+import { keyStore } from 'utils';
-import {
- GradeButton,
- mapStateToProps,
- mapDispatchToProps,
-} from './GradeButton';
+import * as module from './GradeButton';
-jest.mock('@edx/paragon', () => ({
- Button: () => 'Button',
-}));
+const { useGradeButtonData, default: GradeButton } = module;
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- assignmentTypes: {
- areGradesFrozen: jest.fn(state => ({ areGradesFrozen: state })),
- },
+jest.mock('data/redux/hooks', () => ({
+ selectors: {
+ assignmentTypes: { useAreGradesFrozen: jest.fn() },
grades: {
- subsectionGrade: {
- percent: jest.fn(subsection => ({ percent: subsection })),
- },
- gradeFormat: jest.fn(state => ({ gradeFormat: state })),
+ useGradeData: jest.fn(),
},
},
+ thunkActions: {
+ app: { useSetModalStateFromTable: jest.fn() },
+ },
}));
-
-jest.mock('data/thunkActions', () => ({
- app: {
- setModalStateFromTable: jest.fn(),
+jest.mock('data/redux/transforms', () => ({
+ grades: {
+ subsectionGrade: jest.fn(),
},
}));
+const props = {
+ subsection: {
+ attempted: false,
+ percent: 23,
+ score_possible: 32,
+ subsection_name: 'the things we do',
+ module_id: 'in potions',
+ },
+ entry: {
+ user_id: 2,
+ username: 'Jessie',
+ },
+};
+const gradeFormat = 'percent';
+const setModalState = jest.fn();
+const subsectionGrade = 'test-subsection-grade';
+selectors.assignmentTypes.useAreGradesFrozen.mockReturnValue(false);
+selectors.grades.useGradeData.mockReturnValue({ gradeFormat });
+thunkActions.app.useSetModalStateFromTable.mockReturnValue(setModalState);
+transforms.grades.subsectionGrade.mockReturnValue(subsectionGrade);
+
+let el;
+let out;
describe('GradeButton', () => {
- let el;
- let props = {
- subsection: {
- attempted: false,
- percent: 23,
- score_possible: 32,
- subsection_name: 'the things we do',
- module_id: 'in potions',
- },
- entry: {
- user_id: 2,
- username: 'Jessie',
- },
- areGradesFrozen: false,
- format: 'percent',
- };
beforeEach(() => {
- props = { ...props, setModalState: jest.fn() };
+ jest.clearAllMocks();
});
- describe('component', () => {
- describe('snapshots', () => {
- test('grades are frozen', () => {
- el = shallow(
-
-
+const UsernameLabelReplacement = () => {
+ const { formatMessage } = useIntl();
+ return (
-
-
-
- { mastersOnlyFieldAsterisk }
+
+ {formatMessage(messages.usernameHeading)}
+
+
+ {formatMessage(messages.studentKeyLabel)}
+ { mastersOnlyFieldAsterisk }
+
-
* Column header for fields that are only available for masters students
*/
-const MastersOnlyLabelReplacement = (message) => (
-
-
-);
+const MastersOnlyLabelReplacement = (message) => {
+ const { formatMessage } = useIntl();
+ return (
+
+ {formatMessage(message)}
+ { mastersOnlyFieldAsterisk }
+
+ );
+};
export default StrictDict({
TotalGradeLabelReplacement,
diff --git a/src/components/GradesView/GradebookTable/__snapshots__/GradeButton.test.jsx.snap b/src/components/GradesView/GradebookTable/__snapshots__/GradeButton.test.jsx.snap
index 13fa8f89..378fbaef 100644
--- a/src/components/GradesView/GradebookTable/__snapshots__/GradeButton.test.jsx.snap
+++ b/src/components/GradesView/GradebookTable/__snapshots__/GradeButton.test.jsx.snap
@@ -1,13 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`GradeButton component snapshots grades are frozen 1`] = `"why you gotta label people?"`;
+exports[`GradeButton component frozen grades snapshot 1`] = `"test-label"`;
-exports[`GradeButton component snapshots grades are not frozen 1`] = `
+exports[`GradeButton component not frozen grades snapshot 1`] = `
- why you gotta label people?
+ test-label
`;
diff --git a/src/components/GradesView/GradebookTable/__snapshots__/LabelReplacements.test.jsx.snap b/src/components/GradesView/GradebookTable/__snapshots__/LabelReplacements.test.jsx.snap
index ed189e28..528c7716 100644
--- a/src/components/GradesView/GradebookTable/__snapshots__/LabelReplacements.test.jsx.snap
+++ b/src/components/GradesView/GradebookTable/__snapshots__/LabelReplacements.test.jsx.snap
@@ -2,11 +2,7 @@
exports[`LabelReplacements MastersOnlyLabelReplacement snapshot 1`] = `
-
+ defaultMessAge
@@ -19,11 +15,7 @@ exports[`LabelReplacements TotalGradeLabelReplacement displays overlay tooltip 1
-
`;
@@ -35,11 +27,7 @@ exports[`LabelReplacements TotalGradeLabelReplacement snapshot 1`] = `
-
}
placement="left"
@@ -51,23 +39,13 @@ exports[`LabelReplacements TotalGradeLabelReplacement snapshot 1`] = `
}
>
-
+ Total Grade (%)
-
-
+ Student Key
@@ -109,11 +79,7 @@ exports[`snapshot left to right overlay placement 1`] = `
-
}
placement="right"
@@ -125,23 +91,13 @@ exports[`snapshot left to right overlay placement 1`] = `
}
>
-
+ Total Grade (%)
-
}
placement="left"
@@ -173,23 +125,13 @@ exports[`snapshot right to left overlay placement 1`] = `
}
>
-
+ Total Grade (%)
+
+
+
+`;
diff --git a/src/components/GradesView/GradebookTable/__snapshots__/test.jsx.snap b/src/components/GradesView/GradebookTable/__snapshots__/test.jsx.snap
deleted file mode 100644
index 228b171a..00000000
--- a/src/components/GradesView/GradebookTable/__snapshots__/test.jsx.snap
+++ /dev/null
@@ -1,63 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GradebookTable component snapshot - fields1 and 2 between email and totalGrade, mocked rows 1`] = `
-
-
-`;
diff --git a/src/components/GradesView/GradebookTable/hooks.jsx b/src/components/GradesView/GradebookTable/hooks.jsx
new file mode 100644
index 00000000..99f6ef5d
--- /dev/null
+++ b/src/components/GradesView/GradebookTable/hooks.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { selectors } from 'data/redux/hooks';
+import transforms from 'data/redux/transforms';
+import { Headings } from 'data/constants/grades';
+import { getLocalizedPercentSign } from 'i18n/utils';
+
+import messages from './messages';
+import Fields from './Fields';
+import LabelReplacements from './LabelReplacements';
+import GradeButton from './GradeButton';
+
+const { roundGrade } = transforms.grades;
+
+export const useGradebookTableData = () => {
+ const { formatMessage } = useIntl();
+ const grades = selectors.grades.useAllGrades();
+ const headings = selectors.root.useGetHeadings();
+
+ const mapHeaders = (heading) => {
+ let label;
+ if (heading === Headings.totalGrade) {
+ label =
-
-
-
- );
- }
-}
-
-GradebookTable.defaultProps = {
- grades: [],
-};
-
-GradebookTable.propTypes = {
- // redux
- grades: PropTypes.arrayOf(PropTypes.shape({
- percent: PropTypes.number,
- section_breakdown: PropTypes.arrayOf(PropTypes.shape({
- attempted: PropTypes.bool,
- category: PropTypes.string,
- label: PropTypes.string,
- module_id: PropTypes.string,
- percent: PropTypes.number,
- scoreEarned: PropTypes.number,
- scorePossible: PropTypes.number,
- subsection_name: PropTypes.string,
- })),
- user_id: PropTypes.number,
- user_name: PropTypes.string,
- })),
- headings: PropTypes.arrayOf(PropTypes.string).isRequired,
- // injected
- intl: intlShape.isRequired,
+export const GradebookTable = () => {
+ const {
+ columns,
+ data,
+ grades,
+ nullMethod,
+ emptyContent,
+ } = useGradebookTableData();
+
+ return (
+
+
+
+
+ );
};
-export const mapStateToProps = (state) => ({
- grades: selectors.grades.allGrades(state),
- headings: selectors.root.getHeadings(state),
-});
+GradebookTable.propTypes = {};
-export default injectIntl(connect(mapStateToProps)(GradebookTable));
+export default GradebookTable;
diff --git a/src/components/GradesView/GradebookTable/index.test.jsx b/src/components/GradesView/GradebookTable/index.test.jsx
new file mode 100644
index 00000000..ac97eaaf
--- /dev/null
+++ b/src/components/GradesView/GradebookTable/index.test.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { DataTable } from '@edx/paragon';
+
+import useGradebookTableData from './hooks';
+import GradebookTable from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+ columns: ['some', 'columns'],
+ data: ['some', 'data'],
+ grades: ['a', 'few', 'grades'],
+ nullMethod: jest.fn().mockName('hooks.nullMethod'),
+ emptyContent: 'empty-table-content',
+};
+useGradebookTableData.mockReturnValue(hookProps);
+
+let el;
+describe('GradebookTable', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ el = shallow(
- {this.props.intl.formatMessage(messages.description)}
-
- );
- }
-}
-
-ImportSuccessToast.propTypes = {
- // injected
- intl: intlShape.isRequired,
- // redux
- show: PropTypes.bool.isRequired,
- setAppView: PropTypes.func.isRequired,
- setShow: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
- show: selectors.app.showImportSuccessToast(state),
-});
-
-export const mapDispatchToProps = {
- setAppView: actions.app.setView,
- setShow: actions.app.setShowImportSuccessToast,
-};
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ImportSuccessToast));
diff --git a/src/components/GradesView/ImportSuccessToast.test.jsx b/src/components/GradesView/ImportSuccessToast.test.jsx
deleted file mode 100644
index be134925..00000000
--- a/src/components/GradesView/ImportSuccessToast.test.jsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-import { views } from 'data/constants/app';
-
-import {
- ImportSuccessToast,
- mapStateToProps,
- mapDispatchToProps,
-} from './ImportSuccessToast';
-import messages from './ImportSuccessToast.messages';
-
-jest.mock('@edx/paragon', () => ({
- Toast: () => 'Toast',
-}));
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- app: {
- showImportSuccessToast: (state) => ({ showImportSuccessToast: state }),
- },
- },
-}));
-jest.mock('data/actions', () => ({
- __esModule: true,
- default: {
- app: {
- setView: jest.fn(),
- setShow: jest.fn(),
- },
- },
-}));
-
-describe('ImportSuccessToast component', () => {
- describe('snapshots', () => {
- let el;
- let props = {
- show: true,
- };
- beforeEach(() => {
- props = {
- ...props,
- intl: { formatMessage: (msg) => msg.defaultMessage },
- setAppView: jest.fn(),
- setShow: jest.fn(),
- };
- el = shallow(
+ test-description
+
+`;
diff --git a/src/components/GradesView/ImportSuccessToast/hooks.js b/src/components/GradesView/ImportSuccessToast/hooks.js
new file mode 100644
index 00000000..75db5507
--- /dev/null
+++ b/src/components/GradesView/ImportSuccessToast/hooks.js
@@ -0,0 +1,39 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { actions, selectors } from 'data/redux/hooks';
+import { views } from 'data/constants/app';
+import messages from './messages';
+
+/**
+ *
+ {description}
+
+ );
+};
+
+ImportSuccessToast.propTypes = {};
+
+export default ImportSuccessToast;
diff --git a/src/components/GradesView/ImportSuccessToast/index.test.jsx b/src/components/GradesView/ImportSuccessToast/index.test.jsx
new file mode 100644
index 00000000..d9c7c55a
--- /dev/null
+++ b/src/components/GradesView/ImportSuccessToast/index.test.jsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import useImportSuccessToastData from './hooks';
+import ImportSuccessToast from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+ action: 'test-action',
+ onClose: jest.fn().mockName('hooks.onClose'),
+ show: 'test-show',
+ description: 'test-description',
+};
+useImportSuccessToastData.mockReturnValue(hookProps);
+
+let el;
+describe('ImportSuccessToast component', () => {
+ beforeAll(() => {
+ el = shallow(
+
+ Interventions Report
+
+
+
+ Need to find students who may be falling behind? Download the interventions report to obtain engagement metrics such as section attempts and visits.
+
+
+
+
+
+ {formatMessage(messages.title)}
+
+
+
+ {formatMessage(messages.description)}
+
+
+
+
-
-
-
-
-
-`;
-
-exports[`PageButtons component snapshots nextPage disabled if not provided 1`] = `
-
-
-
-
-
-
-`;
-
-exports[`PageButtons component snapshots prevPage disabled if not provided 1`] = `
-
-
-
-
-
-
-`;
diff --git a/src/components/GradesView/PageButtons/__snapshots__/index.test.jsx.snap b/src/components/GradesView/PageButtons/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..8fb8ffa2
--- /dev/null
+++ b/src/components/GradesView/PageButtons/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`PageButtons component render snapshot 1`] = `
+
+
+ prev-text
+
+
+ next-text
+
+
+`;
diff --git a/src/components/GradesView/PageButtons/hooks.js b/src/components/GradesView/PageButtons/hooks.js
new file mode 100644
index 00000000..f1023422
--- /dev/null
+++ b/src/components/GradesView/PageButtons/hooks.js
@@ -0,0 +1,34 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { selectors, thunkActions } from 'data/redux/hooks';
+import messages from './messages';
+
+export const usePageButtonsData = () => {
+ const { formatMessage } = useIntl();
+
+ const { nextPage, prevPage } = selectors.grades.useGradeData();
+ const getPrevNextGrades = thunkActions.grades.useFetchPrevNextGrades();
+
+ const getPrevGrades = () => {
+ getPrevNextGrades(prevPage);
+ };
+
+ const getNextGrades = () => {
+ getPrevNextGrades(nextPage);
+ };
+
+ return {
+ prev: {
+ disabled: !prevPage,
+ onClick: getPrevGrades,
+ text: formatMessage(messages.prevPage),
+ },
+ next: {
+ disabled: !nextPage,
+ onClick: getNextGrades,
+ text: formatMessage(messages.nextPage),
+ },
+ };
+};
+
+export default usePageButtonsData;
diff --git a/src/components/GradesView/PageButtons/hooks.test.js b/src/components/GradesView/PageButtons/hooks.test.js
new file mode 100644
index 00000000..8d96bec7
--- /dev/null
+++ b/src/components/GradesView/PageButtons/hooks.test.js
@@ -0,0 +1,77 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { formatMessage } from 'testUtils';
+import { selectors, thunkActions } from 'data/redux/hooks';
+
+import usePageButtonsData from './hooks';
+import messages from './messages';
+
+jest.mock('data/redux/hooks', () => ({
+ selectors: {
+ grades: { useGradeData: jest.fn() },
+ },
+ thunkActions: {
+ grades: { useFetchPrevNextGrades: jest.fn() },
+ },
+}));
+
+const gradeData = { nextPage: 'test-next-page', prevPage: 'test-prev-page' };
+selectors.grades.useGradeData.mockReturnValue(gradeData);
+
+const fetchGrades = jest.fn();
+thunkActions.grades.useFetchPrevNextGrades.mockReturnValue(fetchGrades);
+
+let out;
+describe('usePageButtonsData', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ out = usePageButtonsData();
+ });
+ describe('behavior', () => {
+ it('initializes intl hook', () => {
+ expect(useIntl).toHaveBeenCalled();
+ });
+ it('initializes redux hooks', () => {
+ expect(selectors.grades.useGradeData).toHaveBeenCalled();
+ expect(thunkActions.grades.useFetchPrevNextGrades).toHaveBeenCalled();
+ });
+ });
+ describe('output', () => {
+ describe('prev button entry', () => {
+ it('is disabled iff prevPage is not provided', () => {
+ expect(out.prev.disabled).toEqual(false);
+ selectors.grades.useGradeData.mockReturnValueOnce({
+ ...gradeData,
+ prevPage: undefined,
+ });
+ out = usePageButtonsData();
+ expect(out.prev.disabled).toEqual(true);
+ });
+ it('calls fetch with prevPage on click', () => {
+ out.prev.onClick();
+ expect(fetchGrades).toHaveBeenCalledWith(gradeData.prevPage);
+ });
+ test('text display', () => {
+ expect(out.prev.text).toEqual(formatMessage(messages.prevPage));
+ });
+ });
+ describe('next button entry', () => {
+ it('is disabled iff nextPage is not provided', () => {
+ expect(out.next.disabled).toEqual(false);
+ selectors.grades.useGradeData.mockReturnValueOnce({
+ ...gradeData,
+ nextPage: undefined,
+ });
+ out = usePageButtonsData();
+ expect(out.next.disabled).toEqual(true);
+ });
+ it('calls fetch with prevPage on click', () => {
+ out.next.onClick();
+ expect(fetchGrades).toHaveBeenCalledWith(gradeData.nextPage);
+ });
+ test('text display', () => {
+ expect(out.next.text).toEqual(formatMessage(messages.nextPage));
+ });
+ });
+ });
+});
diff --git a/src/components/GradesView/PageButtons/index.jsx b/src/components/GradesView/PageButtons/index.jsx
index 0c2fb1b8..bb377f47 100644
--- a/src/components/GradesView/PageButtons/index.jsx
+++ b/src/components/GradesView/PageButtons/index.jsx
@@ -1,75 +1,37 @@
import React from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
import { Button } from '@edx/paragon';
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-import selectors from 'data/selectors';
-import thunkActions from 'data/thunkActions';
-import messages from './messages';
-
-export class PageButtons extends React.Component {
- constructor(props) {
- super(props);
- this.getPrevGrades = this.getPrevGrades.bind(this);
- this.getNextGrades = this.getNextGrades.bind(this);
- }
-
- getPrevGrades() {
- this.props.getPrevNextGrades(this.props.prevPage);
- }
-
- getNextGrades() {
- this.props.getPrevNextGrades(this.props.nextPage);
- }
-
- render() {
- return (
- {
+ const { prev, next } = usePageButtonsData();
+
+ return (
+
+
-
-
-
-
-
- );
- }
-}
-
-PageButtons.defaultProps = {
- nextPage: '',
- prevPage: '',
-};
-
-PageButtons.propTypes = {
- // redux
- getPrevNextGrades: PropTypes.func.isRequired,
- nextPage: PropTypes.string,
- prevPage: PropTypes.string,
+ {prev.text}
+
+
+ {next.text}
+
+
-
- {intl.formatMessage(messages.percent)}
- {intl.formatMessage(messages.absolute)}
-
-
-);
-ScoreViewInput.defaultProps = {
- format: 'percent',
-};
-ScoreViewInput.propTypes = {
- // injected
- intl: intlShape.isRequired,
- // redux
- format: PropTypes.string,
- toggleFormat: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
- format: selectors.grades.gradeFormat(state),
-});
-
-export const mapDispatchToProps = {
- toggleFormat: actions.grades.toggleGradeFormat,
-};
-
-export default injectIntl(connect(mapStateToProps, mapDispatchToProps)(ScoreViewInput));
diff --git a/src/components/GradesView/ScoreViewInput.test.jsx b/src/components/GradesView/ScoreViewInput.test.jsx
deleted file mode 100644
index 1c734189..00000000
--- a/src/components/GradesView/ScoreViewInput.test.jsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-
-import {
- ScoreViewInput,
- mapDispatchToProps,
- mapStateToProps,
-} from './ScoreViewInput';
-
-jest.mock('@edx/paragon', () => ({
- FormControl: () => 'FormControl',
- FormGroup: () => 'FormGroup',
- FormLabel: () => 'FormLabel',
-}));
-
-jest.mock('data/actions', () => ({
- __esModule: true,
- default: {
- grades: { toggleGradeFormat: jest.fn() },
- },
-}));
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- grades: { gradeFormat: (state) => ({ gradeFormat: state }) },
- },
-}));
-
-describe('ScoreViewInput', () => {
- describe('component', () => {
- const props = { format: 'percent' };
- let el;
- beforeEach(() => {
- props.toggleFormat = jest.fn();
- props.intl = { formatMessage: (msg) => msg.defaultMessage };
- el = shallow(
+
+ Score View
+ :
+
+
+
+ Percent
+
+
+ Absolute
+
+
+
+`;
diff --git a/src/components/GradesView/ScoreViewInput/index.jsx b/src/components/GradesView/ScoreViewInput/index.jsx
new file mode 100644
index 00000000..09519c55
--- /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';
+
+/**
+ *
+ {formatMessage(messages.scoreView)}:
+
+ {formatMessage(messages.percent)}
+ {formatMessage(messages.absolute)}
+
+
+ );
+};
+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 00000000..bb2462f3
--- /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(
-
-
-
- );
- }
-}
-
-SearchControls.propTypes = {
- // From Redux
- fetchGrades: PropTypes.func.isRequired,
- searchValue: PropTypes.string.isRequired,
- setSearchValue: PropTypes.func.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
- searchValue: selectors.app.searchValue(state),
-});
-
-export const mapDispatchToProps = {
- fetchGrades: thunkActions.grades.fetchGrades,
- setSearchValue: actions.app.setSearchValue,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(SearchControls);
diff --git a/src/components/GradesView/SearchControls.test.jsx b/src/components/GradesView/SearchControls.test.jsx
deleted file mode 100644
index b181d915..00000000
--- a/src/components/GradesView/SearchControls.test.jsx
+++ /dev/null
@@ -1,119 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import selectors from 'data/selectors';
-import actions from 'data/actions';
-import thunkActions from 'data/thunkActions';
-import {
- mapDispatchToProps,
- mapStateToProps,
- SearchControls,
-} from './SearchControls';
-
-jest.mock('@edx/paragon', () => ({
- Icon: 'Icon',
- Button: 'Button',
- SearchField: 'SearchField',
-}));
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- app: {
- searchValue: jest.fn((state) => ({ searchValue: state })),
- },
- },
-}));
-jest.mock('data/thunkActions', () => ({
- __esModule: true,
- default: {
- grades: {
- fetchGrades: jest.fn().mockName('thunkActions.grades.fetchGrades'),
- },
- app: {
- filterMenu: { toggle: jest.fn().mockName('thunkActions.app.filterMenu') },
- },
- },
-}));
-
-describe('SearchControls', () => {
- let props;
-
- beforeEach(() => {
- jest.resetAllMocks();
- props = {
- searchValue: 'alice',
- setSearchValue: jest.fn(),
- fetchGrades: jest.fn().mockName('fetchGrades'),
- };
- });
-
- const searchControls = (overriddenProps) => {
- props = { ...props, ...overriddenProps };
- return shallow(
+
+ test-hint-text
+
+
+`;
diff --git a/src/components/GradesView/SearchControls/hooks.js b/src/components/GradesView/SearchControls/hooks.js
new file mode 100644
index 00000000..8ce49734
--- /dev/null
+++ b/src/components/GradesView/SearchControls/hooks.js
@@ -0,0 +1,41 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { actions, selectors, thunkActions } from 'data/redux/hooks';
+
+import messages from './messages';
+
+/**
+ * Controls for filtering the GradebookTable. Contains the "Edit Filters" button for opening the filter drawer
+ * as well as the search box for searching by username/email.
+ */
+export const useSearchControlsData = () => {
+ const { formatMessage } = useIntl();
+ const searchValue = selectors.app.useSearchValue();
+ const fetchGrades = thunkActions.grades.useFetchGrades();
+ const setSearchValue = actions.app.useSetSearchValue();
+
+ const onBlur = (e) => {
+ setSearchValue(e.target.value);
+ };
+
+ const onClear = () => {
+ setSearchValue('');
+ fetchGrades();
+ };
+
+ const onSubmit = (newValue) => {
+ setSearchValue(newValue);
+ fetchGrades();
+ };
+
+ return {
+ onSubmit,
+ onBlur,
+ onClear,
+ searchValue,
+ inputLabel: formatMessage(messages.label),
+ hintText: formatMessage(messages.hint),
+ };
+};
+
+export default useSearchControlsData;
diff --git a/src/components/GradesView/SearchControls/hooks.test.js b/src/components/GradesView/SearchControls/hooks.test.js
new file mode 100644
index 00000000..db0c291e
--- /dev/null
+++ b/src/components/GradesView/SearchControls/hooks.test.js
@@ -0,0 +1,71 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { formatMessage } from 'testUtils';
+import { actions, selectors, thunkActions } from 'data/redux/hooks';
+
+import useSearchControlsData from './hooks';
+import messages from './messages';
+
+jest.mock('data/redux/hooks', () => ({
+ actions: {
+ app: { useSetSearchValue: jest.fn() },
+ },
+ selectors: {
+ app: { useSearchValue: jest.fn() },
+ },
+ thunkActions: {
+ grades: { useFetchGrades: jest.fn() },
+ },
+}));
+
+const searchValue = 'test-search-value';
+selectors.app.useSearchValue.mockReturnValue(searchValue);
+const setSearchValue = jest.fn();
+actions.app.useSetSearchValue.mockReturnValue(setSearchValue);
+const fetchGrades = jest.fn();
+thunkActions.grades.useFetchGrades.mockReturnValue(fetchGrades);
+
+const testValue = 'test-value';
+let out;
+describe('useSearchControlsData', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ out = useSearchControlsData();
+ });
+ describe('behavior', () => {
+ it('initializes intl hook', () => {
+ expect(useIntl).toHaveBeenCalled();
+ });
+ it('initializes redux hooks', () => {
+ expect(actions.app.useSetSearchValue).toHaveBeenCalled();
+ expect(selectors.app.useSearchValue).toHaveBeenCalled();
+ expect(thunkActions.grades.useFetchGrades).toHaveBeenCalled();
+ });
+ });
+ describe('output', () => {
+ test('onSubmit sets search value and fetches grades', () => {
+ out.onSubmit(testValue);
+ expect(setSearchValue).toHaveBeenCalledWith(testValue);
+ expect(fetchGrades).toHaveBeenCalled();
+ });
+ test('onBlur sets search value to event target', () => {
+ out.onBlur({ target: { value: testValue } });
+ expect(setSearchValue).toHaveBeenCalledWith(testValue);
+ expect(fetchGrades).not.toHaveBeenCalled();
+ });
+ test('onClear clears search value and fetches grades', () => {
+ out.onClear();
+ expect(setSearchValue).toHaveBeenCalledWith('');
+ expect(fetchGrades).toHaveBeenCalled();
+ });
+ it('forwards searchValue from redux', () => {
+ expect(out.searchValue).toEqual(searchValue);
+ });
+ test('input label message', () => {
+ expect(out.inputLabel).toEqual(formatMessage(messages.label));
+ });
+ test('hint text message', () => {
+ expect(out.hintText).toEqual(formatMessage(messages.hint));
+ });
+ });
+});
diff --git a/src/components/GradesView/SearchControls/index.jsx b/src/components/GradesView/SearchControls/index.jsx
new file mode 100644
index 00000000..17f418b7
--- /dev/null
+++ b/src/components/GradesView/SearchControls/index.jsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+import { SearchField } from '@edx/paragon';
+import useSearchControlsData from './hooks';
+
+/**
+ * Controls for filtering the GradebookTable. Contains the "Edit Filters" button for opening the filter drawer
+ * as well as the search box for searching by username/email.
+ */
+export const SearchControls = () => {
+ const {
+ onSubmit,
+ onBlur,
+ onClear,
+ searchValue,
+ inputLabel,
+ hintText,
+ } = useSearchControlsData();
+
+ return (
+
+
+ {hintText}
+
+
+ );
+};
+
+SearchControls.propTypes = {};
+
+export default SearchControls;
diff --git a/src/components/GradesView/SearchControls/index.test.jsx b/src/components/GradesView/SearchControls/index.test.jsx
new file mode 100644
index 00000000..ae9a1020
--- /dev/null
+++ b/src/components/GradesView/SearchControls/index.test.jsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { SearchField } from '@edx/paragon';
+
+import useSearchControlsData from './hooks';
+import SearchControls from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+ onSubmit: jest.fn().mockName('hooks.onSubmit'),
+ onBlur: jest.fn().mockName('hooks.onBlur'),
+ onClear: jest.fn().mockName('hooks.onClear'),
+ searchValue: 'test-search-value',
+ inputLabel: 'test-input-label',
+ hintText: 'test-hint-text',
+};
+useSearchControlsData.mockReturnValue(hookProps);
+
+let el;
+describe('SearchControls component', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ el = shallow(
-
-);
-SpinnerIcon.defaultProps = {
- show: false,
+export const SpinnerIcon = () => {
+ const show = selectors.root.useShouldShowSpinner();
+ return show && (
+
+
+ );
};
-SpinnerIcon.propTypes = {
- show: PropTypes.bool,
-};
-
-export const mapStateToProps = (state) => ({
- show: selectors.root.shouldShowSpinner(state),
-});
+SpinnerIcon.propTypes = {};
-export default connect(mapStateToProps)(SpinnerIcon);
+export default SpinnerIcon;
diff --git a/src/components/GradesView/SpinnerIcon.test.jsx b/src/components/GradesView/SpinnerIcon.test.jsx
index 0ffd0886..031cf1ba 100644
--- a/src/components/GradesView/SpinnerIcon.test.jsx
+++ b/src/components/GradesView/SpinnerIcon.test.jsx
@@ -1,32 +1,35 @@
import React from 'react';
import { shallow } from 'enzyme';
-import selectors from 'data/selectors';
-import { SpinnerIcon, mapStateToProps } from './SpinnerIcon';
+import { selectors } from 'data/redux/hooks';
+import SpinnerIcon from './SpinnerIcon';
-jest.mock('@edx/paragon', () => ({
- Icon: () => 'Icon',
-}));
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- root: { shouldShowSpinner: state => ({ shouldShowSpinner: state }) },
+jest.mock('data/redux/hooks', () => ({
+ selectors: {
+ root: { useShouldShowSpinner: jest.fn() },
},
}));
+selectors.root.useShouldShowSpinner.mockReturnValue(true);
+let el;
describe('SpinnerIcon', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ el = shallow(
-
-
- {this.courseGradeFilterAlertDialogText}
-
-
- );
- }
-}
-
-StatusAlerts.defaultProps = {
-};
-
-StatusAlerts.propTypes = {
- // redux
- handleCloseSuccessBanner: PropTypes.func.isRequired,
- limitValidity: PropTypes.shape({
- isMaxValid: PropTypes.bool,
- isMinValid: PropTypes.bool,
- }).isRequired,
- showSuccessBanner: PropTypes.bool.isRequired,
-};
-
-export const mapStateToProps = (state) => ({
- limitValidity: selectors.app.courseGradeFilterValidity(state),
- showSuccessBanner: selectors.grades.showSuccess(state),
-});
-
-export const mapDispatchToProps = {
- handleCloseSuccessBanner: actions.grades.banner.close,
-};
-
-export default connect(mapStateToProps, mapDispatchToProps)(StatusAlerts);
diff --git a/src/components/GradesView/StatusAlerts.test.jsx b/src/components/GradesView/StatusAlerts.test.jsx
deleted file mode 100644
index ba2d7997..00000000
--- a/src/components/GradesView/StatusAlerts.test.jsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React from 'react';
-import { shallow } from 'enzyme';
-
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-
-import actions from 'data/actions';
-import selectors from 'data/selectors';
-import messages from './StatusAlerts.messages';
-import {
- StatusAlerts,
- mapDispatchToProps,
- mapStateToProps,
-} from './StatusAlerts';
-
-jest.mock('@edx/paragon', () => ({
- Alert: 'Alert',
-}));
-jest.mock('data/selectors', () => ({
- __esModule: true,
- default: {
- app: {
- courseGradeFilterValidity: (state) => ({ courseGradeFilterValidity: state }),
- },
- grades: {
- showSuccess: (state) => ({ showSuccess: state }),
- },
- },
-}));
-
-describe('StatusAlerts', () => {
- let props = {
- showSuccessBanner: true,
- limitValidity: {
- isMaxValid: true,
- isMinValid: true,
- },
- };
-
- beforeEach(() => {
- props = {
- ...props,
- handleCloseSuccessBanner: jest.fn().mockName('handleCloseSuccessBanner'),
- };
- });
-
- describe('snapshots', () => {
- let el;
- it('basic snapshot', () => {
- el = shallow(
+
+ hooks.success-banner-text
+
+
+ hooks.grade-filter-text
+
+
+`;
diff --git a/src/components/GradesView/StatusAlerts/hooks.js b/src/components/GradesView/StatusAlerts/hooks.js
new file mode 100644
index 00000000..efcd8a56
--- /dev/null
+++ b/src/components/GradesView/StatusAlerts/hooks.js
@@ -0,0 +1,32 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { actions, selectors } from 'data/redux/hooks';
+import messages from './messages';
+
+export const useStatusAlertsData = () => {
+ const { formatMessage } = useIntl();
+
+ const limitValidity = selectors.app.useCourseGradeFilterValidity();
+ const showSuccessBanner = selectors.grades.useShowSuccess();
+ const handleCloseSuccessBanner = actions.grades.useCloseBanner();
+
+ const isCourseGradeFilterAlertOpen = !limitValidity.isMinValid || !limitValidity.isMaxValid;
+
+ const validityMessages = {
+ min: limitValidity.isMinValid ? '' : formatMessage(messages.minGradeInvalid),
+ max: limitValidity.isMaxValid ? '' : formatMessage(messages.maxGradeInvalid),
+ };
+
+ return {
+ successBanner: {
+ onClose: handleCloseSuccessBanner,
+ show: showSuccessBanner,
+ text: formatMessage(messages.editSuccessAlert),
+ },
+ gradeFilter: {
+ show: isCourseGradeFilterAlertOpen,
+ text: `${validityMessages.min}${validityMessages.max}`,
+ },
+ };
+};
+export default useStatusAlertsData;
diff --git a/src/components/GradesView/StatusAlerts/hooks.test.js b/src/components/GradesView/StatusAlerts/hooks.test.js
new file mode 100644
index 00000000..4b0e11f6
--- /dev/null
+++ b/src/components/GradesView/StatusAlerts/hooks.test.js
@@ -0,0 +1,110 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { formatMessage } from 'testUtils';
+import { actions, selectors } from 'data/redux/hooks';
+
+import useStatusAlertsData from './hooks';
+import messages from './messages';
+
+jest.mock('data/redux/hooks', () => ({
+ actions: {
+ grades: { useCloseBanner: jest.fn() },
+ },
+ selectors: {
+ app: { useCourseGradeFilterValidity: jest.fn() },
+ grades: { useShowSuccess: jest.fn() },
+ },
+}));
+
+const validity = {
+ isMinValid: true,
+ isMaxValid: true,
+};
+selectors.app.useCourseGradeFilterValidity.mockReturnValue(validity);
+const showSuccess = 'test-show-success';
+selectors.grades.useShowSuccess.mockReturnValue(showSuccess);
+const closeBanner = jest.fn().mockName('hooks.closeBanner');
+actions.grades.useCloseBanner.mockReturnValue(closeBanner);
+
+let out;
+describe('useStatusAlertsData', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ out = useStatusAlertsData();
+ });
+ describe('behavior', () => {
+ it('initializes intl hook', () => {
+ expect(useIntl).toHaveBeenCalled();
+ });
+ it('initializes redux hooks', () => {
+ expect(actions.grades.useCloseBanner).toHaveBeenCalled();
+ expect(selectors.app.useCourseGradeFilterValidity).toHaveBeenCalled();
+ expect(selectors.grades.useShowSuccess).toHaveBeenCalled();
+ });
+ });
+ describe('output', () => {
+ describe('successBanner', () => {
+ test('onClose and show from redux', () => {
+ expect(out.successBanner.onClose).toEqual(closeBanner);
+ expect(out.successBanner.show).toEqual(showSuccess);
+ });
+ test('message', () => {
+ expect(out.successBanner.text).toEqual(formatMessage(messages.editSuccessAlert));
+ });
+ });
+ describe('gradeFilter', () => {
+ describe('both filters are valid', () => {
+ test('do not show', () => {
+ expect(out.gradeFilter.show).toEqual(false);
+ });
+ });
+ describe('min filter is invalid', () => {
+ beforeEach(() => {
+ selectors.app.useCourseGradeFilterValidity.mockReturnValue({
+ isMinValid: false,
+ isMaxValid: true,
+ });
+ out = useStatusAlertsData();
+ });
+ test('show grade filter banner', () => {
+ expect(out.gradeFilter.show).toEqual(true);
+ });
+ test('filter message', () => {
+ expect(out.gradeFilter.text).toEqual(formatMessage(messages.minGradeInvalid));
+ });
+ });
+ describe('max filter is invalid', () => {
+ beforeEach(() => {
+ selectors.app.useCourseGradeFilterValidity.mockReturnValue({
+ isMinValid: true,
+ isMaxValid: false,
+ });
+ out = useStatusAlertsData();
+ });
+ test('show grade filter banner', () => {
+ expect(out.gradeFilter.show).toEqual(true);
+ });
+ test('filter message', () => {
+ expect(out.gradeFilter.text).toEqual(formatMessage(messages.maxGradeInvalid));
+ });
+ });
+ describe('both filters are invalid', () => {
+ beforeEach(() => {
+ selectors.app.useCourseGradeFilterValidity.mockReturnValue({
+ isMinValid: false,
+ isMaxValid: false,
+ });
+ out = useStatusAlertsData();
+ });
+ test('show grade filter banner', () => {
+ expect(out.gradeFilter.show).toEqual(true);
+ });
+ test('filter message', () => {
+ expect(out.gradeFilter.text).toEqual(
+ `${formatMessage(messages.minGradeInvalid)}${formatMessage(messages.maxGradeInvalid)}`,
+ );
+ });
+ });
+ });
+ });
+});
diff --git a/src/components/GradesView/StatusAlerts/index.jsx b/src/components/GradesView/StatusAlerts/index.jsx
new file mode 100644
index 00000000..f7883ff9
--- /dev/null
+++ b/src/components/GradesView/StatusAlerts/index.jsx
@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Alert } from '@edx/paragon';
+
+import useStatusAlertsData from './hooks';
+
+export const StatusAlerts = () => {
+ const {
+ successBanner,
+ gradeFilter,
+ } = useStatusAlertsData();
+
+ return (
+ <>
+
+ {successBanner.text}
+
+
+ {gradeFilter.text}
+
+
+ );
+};
+
+StatusAlerts.propTypes = {};
+
+export default StatusAlerts;
diff --git a/src/components/GradesView/StatusAlerts/index.test.jsx b/src/components/GradesView/StatusAlerts/index.test.jsx
new file mode 100644
index 00000000..408044d5
--- /dev/null
+++ b/src/components/GradesView/StatusAlerts/index.test.jsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+
+import { Alert } from '@edx/paragon';
+
+import useStatusAlertsData from './hooks';
+import StatusAlerts from '.';
+
+jest.mock('./hooks', () => jest.fn());
+
+const hookProps = {
+ successBanner: {
+ onClose: jest.fn().mockName('hooks.successBanner.onClose'),
+ show: 'hooks.show-success-banner',
+ text: 'hooks.success-banner-text',
+ },
+ gradeFilter: {
+ show: 'hooks.show-grade-filter',
+ text: 'hooks.grade-filter-text',
+ },
+};
+useStatusAlertsData.mockReturnValue(hookProps);
+
+let el;
+describe('StatusAlerts component', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ el = shallow({val} );
- return (
-
-
-`;
diff --git a/src/components/GradesView/__snapshots__/FilteredUsersLabel.test.jsx.snap b/src/components/GradesView/__snapshots__/FilteredUsersLabel.test.jsx.snap
deleted file mode 100644
index 2086de89..00000000
--- a/src/components/GradesView/__snapshots__/FilteredUsersLabel.test.jsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`FilteredUsersLabel component snapshot - displays label with number of filtered users out of total 1`] = `
-
- 23
- ,
- "totalUsers":
- 140
- ,
- }
- }
-/>
-`;
diff --git a/src/components/GradesView/__snapshots__/ImportSuccessToast.test.jsx.snap b/src/components/GradesView/__snapshots__/ImportSuccessToast.test.jsx.snap
deleted file mode 100644
index b42d9940..00000000
--- a/src/components/GradesView/__snapshots__/ImportSuccessToast.test.jsx.snap
+++ /dev/null
@@ -1,16 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ImportSuccessToast component snapshots snapshot 1`] = `
-
- Import Successful! Grades will be updated momentarily.
-
-`;
diff --git a/src/components/GradesView/__snapshots__/InterventionsReport.test.jsx.snap b/src/components/GradesView/__snapshots__/InterventionsReport.test.jsx.snap
deleted file mode 100644
index 44210b18..00000000
--- a/src/components/GradesView/__snapshots__/InterventionsReport.test.jsx.snap
+++ /dev/null
@@ -1,38 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InterventionsReport component snapshots snapshot 1`] = `
-
-`;
diff --git a/src/components/GradesView/__snapshots__/ScoreViewInput.test.jsx.snap b/src/components/GradesView/__snapshots__/ScoreViewInput.test.jsx.snap
deleted file mode 100644
index 44b805ac..00000000
--- a/src/components/GradesView/__snapshots__/ScoreViewInput.test.jsx.snap
+++ /dev/null
@@ -1,32 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`ScoreViewInput component snapshot - select box with percent and absolute options and onClick from props.toggleFormat 1`] = `
-
-
-
-
-
- Percent
-
-
- Absolute
-
-
-
-`;
diff --git a/src/components/GradesView/__snapshots__/SearchControls.test.jsx.snap b/src/components/GradesView/__snapshots__/SearchControls.test.jsx.snap
deleted file mode 100644
index 43e3bb74..00000000
--- a/src/components/GradesView/__snapshots__/SearchControls.test.jsx.snap
+++ /dev/null
@@ -1,28 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SearchControls Component Snapshots basic snapshot 1`] = `
-
-
-
-
-`;
diff --git a/src/components/GradesView/__snapshots__/SpinnerIcon.test.jsx.snap b/src/components/GradesView/__snapshots__/SpinnerIcon.test.jsx.snap
index 6a99def2..c530fb32 100644
--- a/src/components/GradesView/__snapshots__/SpinnerIcon.test.jsx.snap
+++ b/src/components/GradesView/__snapshots__/SpinnerIcon.test.jsx.snap
@@ -9,5 +9,3 @@ exports[`SpinnerIcon component snapshot - displays spinner overlay with spinner
/>
`;
-
-exports[`SpinnerIcon component snapshot - does not render if show: false 1`] = `""`;
diff --git a/src/components/GradesView/__snapshots__/StatusAlerts.test.jsx.snap b/src/components/GradesView/__snapshots__/StatusAlerts.test.jsx.snap
deleted file mode 100644
index 7edc860a..00000000
--- a/src/components/GradesView/__snapshots__/StatusAlerts.test.jsx.snap
+++ /dev/null
@@ -1,24 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`StatusAlerts snapshots basic snapshot 1`] = `
-
-
-
-
- the quiCk brown does somEthing or other
-
-
-`;
diff --git a/src/components/GradesView/__snapshots__/UsersLabel.test.jsx.snap b/src/components/GradesView/__snapshots__/UsersLabel.test.jsx.snap
deleted file mode 100644
index 92631592..00000000
--- a/src/components/GradesView/__snapshots__/UsersLabel.test.jsx.snap
+++ /dev/null
@@ -1,23 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`UsersLabel component snapshot - displays label with number of filtered users out of total 1`] = `
-
- 23
- ,
- "totalUsers":
- 140
- ,
- }
- }
-/>
-`;
diff --git a/src/components/GradesView/__snapshots__/index.test.jsx.snap b/src/components/GradesView/__snapshots__/index.test.jsx.snap
new file mode 100644
index 00000000..cc927fae
--- /dev/null
+++ b/src/components/GradesView/__snapshots__/index.test.jsx.snap
@@ -0,0 +1,41 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`GradesView component render snapshot 1`] = `
+
+
+ filter-step-heading
+
+
+
+
+ gradebook-step-heading
+
+
+
+
+ *
+ test-masters-hint
+
+
+`;
diff --git a/src/components/GradesView/__snapshots__/test.jsx.snap b/src/components/GradesView/__snapshots__/test.jsx.snap
deleted file mode 100644
index d208f4bd..00000000
--- a/src/components/GradesView/__snapshots__/test.jsx.snap
+++ /dev/null
@@ -1,53 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`GradesView Component snapshots basic snapshot 1`] = `
-
-
-
-
-
-
-
-
-
-
- *
-
-
-`;
diff --git a/src/components/GradesView/hooks.js b/src/components/GradesView/hooks.js
new file mode 100644
index 00000000..b8f65048
--- /dev/null
+++ b/src/components/GradesView/hooks.js
@@ -0,0 +1,30 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { actions, thunkActions } from 'data/redux/hooks';
+import messages from './messages';
+
+export const useGradesViewData = ({ updateQueryParams }) => {
+ const { formatMessage } = useIntl();
+ const fetchGrades = thunkActions.grades.useFetchGrades();
+ const resetFilters = actions.filters.useResetFilters();
+
+ const handleFilterBadgeClose = (filterNames) => () => {
+ resetFilters(filterNames);
+ updateQueryParams(filterNames.reduce(
+ (obj, filterName) => ({ ...obj, [filterName]: false }),
+ {},
+ ));
+ fetchGrades();
+ };
+
+ return {
+ stepHeadings: {
+ filter: formatMessage(messages.filterStepHeading),
+ gradebook: formatMessage(messages.gradebookStepHeading),
+ },
+ handleFilterBadgeClose,
+ mastersHint: formatMessage(messages.mastersHint),
+ };
+};
+
+export default useGradesViewData;
diff --git a/src/components/GradesView/hooks.test.js b/src/components/GradesView/hooks.test.js
new file mode 100644
index 00000000..7e444e0b
--- /dev/null
+++ b/src/components/GradesView/hooks.test.js
@@ -0,0 +1,62 @@
+import { useIntl } from '@edx/frontend-platform/i18n';
+
+import { formatMessage } from 'testUtils';
+import { actions, thunkActions } from 'data/redux/hooks';
+
+import useGradesViewData from './hooks';
+import messages from './messages';
+
+jest.mock('data/redux/hooks', () => ({
+ actions: {
+ filters: { useResetFilters: jest.fn() },
+ },
+ thunkActions: {
+ grades: { useFetchGrades: jest.fn() },
+ },
+}));
+
+const fetchGrades = jest.fn();
+thunkActions.grades.useFetchGrades.mockReturnValue(fetchGrades);
+const resetFilters = jest.fn();
+actions.filters.useResetFilters.mockReturnValue(resetFilters);
+
+const updateQueryParams = jest.fn();
+
+let out;
+describe('useGradesViewData', () => {
+ beforeEach(() => {
+ jest.clearAllMocks();
+ out = useGradesViewData({ updateQueryParams });
+ });
+ describe('behavior', () => {
+ it('initializes intl hook', () => {
+ expect(useIntl).toHaveBeenCalled();
+ });
+ it('initializes redux hooks', () => {
+ expect(thunkActions.grades.useFetchGrades).toHaveBeenCalled();
+ expect(actions.filters.useResetFilters).toHaveBeenCalled();
+ });
+ });
+ describe('output', () => {
+ test('stepHeadings', () => {
+ expect(out.stepHeadings.filter).toEqual(formatMessage(messages.filterStepHeading));
+ expect(out.stepHeadings.gradebook).toEqual(formatMessage(messages.gradebookStepHeading));
+ });
+ test('mastersHint', () => {
+ expect(out.mastersHint).toEqual(formatMessage(messages.mastersHint));
+ });
+ describe('handleFilterBadgeClose', () => {
+ it('resets filters locally and in query params, and fetches grades', () => {
+ const filters = ['some', 'filter', 'names'];
+ out.handleFilterBadgeClose(filters)();
+ expect(resetFilters).toHaveBeenCalledWith(filters);
+ expect(updateQueryParams).toHaveBeenCalledWith({
+ some: false,
+ filter: false,
+ names: false,
+ });
+ expect(fetchGrades).toHaveBeenCalled();
+ });
+ });
+ });
+});
diff --git a/src/components/GradesView/index.jsx b/src/components/GradesView/index.jsx
index 47373b13..5c4ddee7 100644
--- a/src/components/GradesView/index.jsx
+++ b/src/components/GradesView/index.jsx
@@ -1,12 +1,6 @@
/* eslint-disable react/sort-comp, react/button-has-type, import/no-named-as-default */
import React from 'react';
import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-
-import { FormattedMessage } from '@edx/frontend-platform/i18n';
-
-import actions from 'data/actions';
-import thunkActions from 'data/thunkActions';
import BulkManagementControls from './BulkManagementControls';
import EditModal from './EditModal';
@@ -21,79 +15,55 @@ import ScoreViewInput from './ScoreViewInput';
import SearchControls from './SearchControls';
import SpinnerIcon from './SpinnerIcon';
import StatusAlerts from './StatusAlerts';
-import messages from './messages';
-export class GradesView extends React.Component {
- constructor(props) {
- super(props);
- this.handleFilterBadgeClose = this.handleFilterBadgeClose.bind(this);
- }
+import useGradesViewData from './hooks';
- handleFilterBadgeClose(filterNames) {
- return () => {
- this.props.resetFilters(filterNames);
- this.props.updateQueryParams(filterNames.reduce(
- (obj, filterName) => ({ ...obj, [filterName]: false }),
- {},
- ));
- this.props.fetchGrades();
- };
- }
+export const GradesView = ({ updateQueryParams }) => {
+ const {
+ stepHeadings,
+ handleFilterBadgeClose,
+ mastersHint,
+ } = useGradesViewData({ updateQueryParams });
- render() {
- return (
- <>
-
-
+
+ {stepHeadings.filter}
+
-
-
+
+
- {stepHeadings.gradebook}
-
-
+
+
- *
- * {mastersHint}
+