Fix grade format button (#197)

* re-organize components based on function

* clean up GradebookFilters test

* fix grade format button

* v1.4.39

* uuuugh, actually fix button

src/components/GradesTab/ScoreViewInput.jsx

@@ -5,17 +5,18 @@ import { connect } from 'react-redux';
 import { FormControl, FormGroup, FormLabel } from '@edx/paragon';
 
 import actions from 'data/actions';
+import selectors from 'data/selectors';
 
 /**
  * <ScoreViewInput />
  * redux-connected select control for grade format (percent vs absolute)
  */
-export const ScoreViewInput = ({ toggleFormat }) => (
+export const ScoreViewInput = ({ format, toggleFormat }) => (
   <FormGroup controlId="ScoreView">
     <FormLabel>Score View:</FormLabel>
     <FormControl
       as="select"
-      value="percent"
+      value={format}
       onChange={toggleFormat}
     >
       <option value="percent">Percent</option>
@@ -24,9 +25,14 @@ export const ScoreViewInput = ({ toggleFormat }) => (
   </FormGroup>
 );
 ScoreViewInput.propTypes = {
+  format: PropTypes.string.isRequired,
   toggleFormat: PropTypes.func.isRequired,
 };
 
+export const mapStateToProps = (state) => ({
+  format: selectors.grades.gradeFormat(state),
+});
+
 export const mapDispatchToProps = {
   toggleFormat: actions.grades.toggleGradeFormat,
 };

src/components/GradesTab/ScoreViewInput.test.jsx

@@ -2,8 +2,13 @@ import React from 'react';
 import { shallow } from 'enzyme';
 
 import actions from 'data/actions';
+import selectors from 'data/selectors';
 
-import { ScoreViewInput, mapDispatchToProps } from './ScoreViewInput';
+import {
+  ScoreViewInput,
+  mapDispatchToProps,
+  mapStateToProps,
+} from './ScoreViewInput';
 
 jest.mock('@edx/paragon', () => ({
   FormControl: () => 'FormControl',
@@ -17,13 +22,19 @@ jest.mock('data/actions', () => ({
     grades: { toggleGradeFormat: jest.fn() },
   },
 }));
+jest.mock('data/selectors', () => ({
+  __esModule: true,
+  default: {
+    grades: { gradeFormat: (state) => ({ gradeFormat: state }) },
+  },
+}));
 
 describe('ScoreViewInput', () => {
   describe('component', () => {
-    let props;
+    const props = { format: 'percent' };
     let el;
     beforeEach(() => {
-      props = { toggleFormat: jest.fn() };
+      props.toggleFormat = jest.fn();
       el = shallow(<ScoreViewInput {...props} />);
     });
     const assertions = [
@@ -34,6 +45,12 @@ describe('ScoreViewInput', () => {
       expect(el).toMatchSnapshot();
     });
   });
+  describe('mapStateToProps', () => {
+    test('format from grades.gradeFormat', () => {
+      const testState = { some: 'state' };
+      expect(mapStateToProps(testState).format).toEqual(selectors.grades.gradeFormat(testState));
+    });
+  });
   describe('mapDispatchToProps', () => {
     test('toggleFormat from actions.grades.toggleGradeFormat', () => {
       expect(mapDispatchToProps.toggleFormat).toEqual(actions.grades.toggleGradeFormat);