fix: search blur state for every single charater input

openedx · Jul 7, 2022 · d55abbe · d55abbe
1 parent a75f365
commit d55abbe
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 23 deletions.
diff --git a/src/components/GradesView/SearchControls.jsx b/src/components/GradesView/SearchControls.jsx
@@ -18,27 +18,33 @@ import messages from './SearchControls.messages';
 export class SearchControls extends React.Component {
   constructor(props) {
     super(props);
-    this.onChange = this.onChange.bind(this);
+
+    this.onBlur = this.onBlur.bind(this);
     this.onClear = this.onClear.bind(this);
+    this.onSubmit = this.onSubmit.bind(this);
   }
 
-  /** Changing the search value stores the key in Gradebook. Currently unused */
-  onChange(searchValue) {
-    this.props.setSearchValue(searchValue);
+  onBlur(e) {
+    this.props.setSearchValue(e.target.value);
   }
 
   onClear() {
     this.props.setSearchValue('');
     this.props.fetchGrades();
   }
 
+  onSubmit(searchValue) {
+    this.props.setSearchValue(searchValue);
+    this.props.fetchGrades();
+  }
+
   render() {
     return (
       <div>
         <SearchField
-          onSubmit={this.props.fetchGrades}
+          onSubmit={this.onSubmit}
           inputLabel={<FormattedMessage {...messages.label} />}
-          onChange={this.onChange}
+          onBlur={this.onBlur}
           onClear={this.onClear}
           value={this.props.searchValue}
         />

diff --git a/src/components/GradesView/SearchControls.test.jsx b/src/components/GradesView/SearchControls.test.jsx
@@ -4,7 +4,11 @@ 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';
+import {
+  mapDispatchToProps,
+  mapStateToProps,
+  SearchControls,
+} from './SearchControls';
 
 jest.mock('@edx/paragon', () => ({
   Icon: 'Icon',
@@ -15,7 +19,7 @@ jest.mock('data/selectors', () => ({
   __esModule: true,
   default: {
     app: {
-      searchValue: jest.fn(state => ({ searchValue: state })),
+      searchValue: jest.fn((state) => ({ searchValue: state })),
     },
   },
 }));
@@ -52,26 +56,45 @@ describe('SearchControls', () => {
     describe('Snapshots', () => {
       test('basic snapshot', () => {
         const wrapper = searchControls();
-        wrapper.instance().onChange = jest.fn().mockName('onChange');
+        wrapper.instance().onBlur = jest.fn().mockName('onBlur');
         wrapper.instance().onClear = jest.fn().mockName('onClear');
+        wrapper.instance().onSubmit = jest.fn().mockName('onSubmit');
         expect(wrapper.instance().render()).toMatchSnapshot();
       });
     });
 
-    describe('onChange', () => {
-      it('saves the changed search value to Gradebook state', () => {
-        const wrapper = searchControls();
-        wrapper.instance().onChange('bob');
-        expect(props.setSearchValue).toHaveBeenCalledWith('bob');
+    describe('Behavior', () => {
+      describe('onBlur', () => {
+        it('saves the search value to Gradebook state but do not fetch grade', () => {
+          const wrapper = searchControls();
+          const event = {
+            target: {
+              value: 'bob',
+            },
+          };
+          wrapper.instance().onBlur(event);
+          expect(props.setSearchValue).toHaveBeenCalledWith('bob');
+          expect(props.fetchGrades).not.toHaveBeenCalled();
+        });
       });
-    });
 
-    describe('onChange', () => {
-      it('sets search value to empty string and calls fetchGrades', () => {
-        const wrapper = searchControls();
-        wrapper.instance().onClear();
-        expect(props.setSearchValue).toHaveBeenCalledWith('');
-        expect(props.fetchGrades).toHaveBeenCalled();
+      describe('onClear', () => {
+        it('sets search value to empty string and calls fetchGrades', () => {
+          const wrapper = searchControls();
+          wrapper.instance().onClear();
+          expect(props.setSearchValue).toHaveBeenCalledWith('');
+          expect(props.fetchGrades).toHaveBeenCalled();
+        });
+      });
+
+      describe('onSubmit', () => {
+        it('sets search value to input and calls fetchGrades', () => {
+          const wrapper = searchControls();
+
+          wrapper.instance().onSubmit('John');
+          expect(props.setSearchValue).toHaveBeenCalledWith('John');
+          expect(props.fetchGrades).toHaveBeenCalled();
+        });
       });
     });
 

diff --git a/src/components/GradesView/__snapshots__/SearchControls.test.jsx.snap b/src/components/GradesView/__snapshots__/SearchControls.test.jsx.snap
@@ -10,9 +10,9 @@ exports[`SearchControls Component Snapshots basic snapshot 1`] = `
         id="gradebook.GradesView.search.label"
       />
     }
-    onChange={[MockFunction onChange]}
+    onBlur={[MockFunction onBlur]}
     onClear={[MockFunction onClear]}
-    onSubmit={[MockFunction fetchGrades]}
+    onSubmit={[MockFunction onSubmit]}
     value="alice"
   />
   <small