fix: onChange behavior

openedx · Mar 14, 2023 · 41fc8e4 · 41fc8e4
1 parent a2b6362
commit 41fc8e4
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 51 deletions.
diff --git a/src/Form/FormAutosuggest.jsx b/src/Form/FormAutosuggest.jsx
@@ -160,13 +160,11 @@ function FormAutosuggest({
     const opt = optValue.find((o) => o.toLowerCase() === normalized);
 
     if (opt) {
-      setValue(opt);
       setState(prevState => ({
         ...prevState,
         displayValue: opt,
       }));
     } else {
-      setValue(null);
       setState(prevState => ({
         ...prevState,
         displayValue: itemValue,

diff --git a/src/Form/tests/FormAutosuggest.test.jsx b/src/Form/tests/FormAutosuggest.test.jsx
@@ -26,90 +26,104 @@ function FormAutosuggestWrapper(props) {
 }
 
 describe('FormAutosuggest', () => {
-  it('renders component without error', () => {
-    mount(<FormAutosuggestWrapper />);
+  afterEach(() => {
+    jest.clearAllMocks();
   });
 
+  const onSelected = jest.fn();
+
   const container = mount(
     <FormAutosuggestWrapper
       name="FormAutosuggest"
       floatingLabel="floatingLabel text"
       helpMessage="Example help message"
       errorMessageText="Example error message"
+      onSelected={onSelected}
     >
       <FormAutosuggestOption>Option 1</FormAutosuggestOption>
       <FormAutosuggestOption>Option 2</FormAutosuggestOption>
       <FormAutosuggestOption>Learn from more than 160 member universities</FormAutosuggestOption>
     </FormAutosuggestWrapper>,
   );
 
-  it('render without loading state', () => {
-    expect(container.exists('.pgn__form-autosuggest__dropdown-loading')).toBe(false);
-    expect(container.props().isLoading).toBeUndefined();
-  });
+  describe('render behavior', () => {
+    it('renders component without error', () => {
+      mount(<FormAutosuggestWrapper />);
+    });
 
-  it('render with loading state', () => {
-    const wrapper = mount(<FormAutosuggestWrapper isLoading />);
+    it('render without loading state', () => {
+      expect(container.exists('.pgn__form-autosuggest__dropdown-loading')).toBe(false);
+      expect(container.props().isLoading).toBeUndefined();
+    });
 
-    expect(wrapper.exists('.pgn__form-autosuggest__dropdown-loading')).toBe(true);
-    expect(wrapper.props().isLoading).toBe(true);
-  });
+    it('render with loading state', () => {
+      const wrapper = mount(<FormAutosuggestWrapper isLoading />);
 
-  it('renders component with options', () => {
-    container.find('input').simulate('click');
-    const optionsList = container.find('.pgn__form-autosuggest__dropdown').find('button');
+      expect(wrapper.exists('.pgn__form-autosuggest__dropdown-loading')).toBe(true);
+      expect(wrapper.props().isLoading).toBe(true);
+    });
 
-    expect(optionsList.length).toEqual(3);
+    it('renders component with options', () => {
+      container.find('input').simulate('click');
+      const optionsList = container.find('.pgn__form-autosuggest__dropdown').find('button');
+
+      expect(optionsList.length).toEqual(3);
+    });
   });
 
-  it('selects option', () => {
-    container.find('input').simulate('click');
-    container.find('.pgn__form-autosuggest__dropdown').find('button')
-      .at(0).simulate('click');
+  describe('controlled behavior', () => {
+    it('selects option', () => {
+      container.find('input').simulate('click');
+      container.find('.pgn__form-autosuggest__dropdown').find('button')
+        .at(0).simulate('click');
 
-    expect(container.find('input').instance().value).toEqual('Option 1');
-  });
+      expect(container.find('input').instance().value).toEqual('Option 1');
+      expect(onSelected).toHaveBeenCalledWith('Option 1');
+      expect(onSelected).toHaveBeenCalledTimes(1);
+    });
 
-  it('options list depends on empty field value', () => {
-    container.find('input').simulate('change', { target: { value: '' } });
+    it('options list depends on empty field value', () => {
+      container.find('input').simulate('change', { target: { value: '' } });
 
-    expect(container.find('input').instance().value).toEqual('');
-  });
+      expect(container.find('input').instance().value).toEqual('');
+    });
 
-  it('options list depends on filled field value', () => {
-    container.find('input').simulate('change', { target: { value: 'option 1' } });
+    it('options list depends on filled field value', () => {
+      container.find('input').simulate('change', { target: { value: 'option 1' } });
 
-    expect(container.find('.pgn__form-autosuggest__dropdown').find('button').length).toEqual(1);
-  });
+      expect(container.find('.pgn__form-autosuggest__dropdown').find('button').length).toEqual(1);
+      expect(onSelected).toHaveBeenCalledTimes(0);
+    });
 
-  it('toggles options list', () => {
-    const dropdownContainer = '.pgn__form-autosuggest__dropdown';
+    it('toggles options list', () => {
+      const dropdownContainer = '.pgn__form-autosuggest__dropdown';
 
-    expect(container.find(dropdownContainer).find('button').length).toEqual(1);
+      expect(container.find(dropdownContainer).find('button').length).toEqual(1);
 
-    container.find('button.pgn__form-autosuggest__icon-button').simulate('click');
-    expect(container.find(dropdownContainer).find('button').length).toEqual(0);
+      container.find('button.pgn__form-autosuggest__icon-button').simulate('click');
+      expect(container.find(dropdownContainer).find('button').length).toEqual(0);
 
-    container.find('button.pgn__form-autosuggest__icon-button').simulate('click');
-    expect(container.find(dropdownContainer).find('button').length).toEqual(3);
-  });
+      container.find('button.pgn__form-autosuggest__icon-button').simulate('click');
+      expect(container.find(dropdownContainer).find('button').length).toEqual(3);
+    });
 
-  it('shows options list depends on field value', () => {
-    container.find('input').simulate('change', { target: { value: '1' } });
+    it('shows options list depends on field value', () => {
+      container.find('input').simulate('change', { target: { value: '1' } });
 
-    expect(container.find('.pgn__form-autosuggest__dropdown').find('button').length).toEqual(2);
-  });
+      expect(container.find('.pgn__form-autosuggest__dropdown').find('button').length).toEqual(2);
+    });
 
-  it('closes options list on click outside', () => {
-    const fireEvent = createDocumentListenersMock();
-    const dropdownContainer = '.pgn__form-autosuggest__dropdown';
+    it('closes options list on click outside', () => {
+      const fireEvent = createDocumentListenersMock();
+      const dropdownContainer = '.pgn__form-autosuggest__dropdown';
 
-    container.find('input').simulate('click');
-    expect(container.find(dropdownContainer).find('button').length).toEqual(2);
+      container.find('input').simulate('click');
+      expect(container.find(dropdownContainer).find('button').length).toEqual(2);
 
-    act(() => { fireEvent.click(document.body); });
-    container.update();
+      act(() => { fireEvent.click(document.body); });
+      container.update();
 
-    expect(container.find(dropdownContainer).find('button').length).toEqual(0);
+      expect(container.find(dropdownContainer).find('button').length).toEqual(0);
+    });
   });
 });