useComboBoxState.test.js

/*
 * Copyright 2020 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

import {actHook as act, renderHook} from '@react-spectrum/test-utils-internal';
import {Item} from '../../src/collections/Item';
import React from 'react';
import {useComboBoxState} from '../../src/combobox/useComboBoxState';
import {useFilter} from 'react-aria/useFilter';

describe('useComboBoxState tests', function () {
  describe('open state', function () {
    let onOpenChange;
    let defaultProps;
    beforeEach(() => {
      onOpenChange = jest.fn();
      let collator = {compare: jest.fn().mockReturnValue(true)};
      defaultProps = {isFocused: true, items: [{id: 1, name: 'one'}], children: (props) => <Item>{props.name}</Item>, onOpenChange, collator};
    });
    it('should be closed by default', function () {
      let initialProps = defaultProps;
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
      expect(result.current.isOpen).toBe(false);

      act(() => {
        result.current.open();
      });
      expect(result.current.isOpen).toBe(true);
      expect(onOpenChange).toHaveBeenCalledWith(true, undefined);

      act(() => result.current.close());
      expect(result.current.isOpen).toBe(false);
      expect(onOpenChange).toHaveBeenCalledWith(false, undefined);
    });

    it('onOpenChange should return the reason that open was called', function () {
      let initialProps = defaultProps;
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});

      act(() => {
        result.current.open(undefined, 'focus');
      });
      expect(result.current.isOpen).toBe(true);
      expect(onOpenChange).toHaveBeenCalledWith(true, 'focus');

      act(() => result.current.close());
      expect(result.current.isOpen).toBe(false);
      expect(onOpenChange).toHaveBeenCalledWith(false, undefined);

      act(() => {
        result.current.open(undefined, 'input');
      });
      expect(result.current.isOpen).toBe(true);
      expect(onOpenChange).toHaveBeenCalledWith(true, 'input');

      act(() => result.current.close());

      act(() => {
        result.current.open(undefined, 'manual');
      });
      expect(result.current.isOpen).toBe(true);
      expect(onOpenChange).toHaveBeenCalledWith(true, 'manual');
    });

    it('onOpenChange should return the reason that toggle was called when opening', function () {
      let initialProps = defaultProps;
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});

      act(() => {
        result.current.toggle(undefined, 'focus');
      });
      expect(result.current.isOpen).toBe(true);
      expect(onOpenChange).toHaveBeenCalledWith(true, 'focus');

      act(() => result.current.toggle(undefined, 'focus'));
      expect(result.current.isOpen).toBe(false);
      expect(onOpenChange).toHaveBeenCalledWith(false, undefined);

      act(() => {
        result.current.toggle(undefined, 'input');
      });
      expect(result.current.isOpen).toBe(true);
      expect(onOpenChange).toHaveBeenCalledWith(true, 'input');

      act(() => result.current.close());

      act(() => {
        result.current.toggle(undefined, 'manual');
      });
      expect(result.current.isOpen).toBe(true);
      expect(onOpenChange).toHaveBeenCalledWith(true, 'manual');
    });
  });

  describe('values', function () {
    let onInputChange;
    let defaultProps;
    beforeEach(() => {
      onInputChange = jest.fn();
      let collator = {compare: jest.fn().mockReturnValue(true)};
      defaultProps = {items: [{id: 1, name: 'one'}], children: (props) => <Item>{props.name}</Item>, onInputChange, collator};
    });

    it('can have a default value', function () {
      let initialProps = {...defaultProps, defaultInputValue: 'hello'};
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
      expect(result.current.inputValue).toBe('hello');
    });

    it('fires an event when the value is changed and updates if uncontrolled', function () {
      let initialProps = {...defaultProps, defaultInputValue: 'hello'};
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
      expect(result.current.inputValue).toBe('hello');
      expect(onInputChange).not.toHaveBeenCalled();
      act(() => result.current.setInputValue('hellow'));
      expect(result.current.inputValue).toBe('hellow');
      expect(onInputChange).toHaveBeenCalledWith('hellow');
    });

    it('does not change selection on close', () => {
      let initialProps = defaultProps;
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});

      act(() => {
        result.current.open();
      });
      act(() => {
        result.current.selectionManager.setFocusedKey(1);
      });
      act(() => {
        result.current.close();
      });
      expect(result.current.selectedKey).not.toBe(1);
    });

    it('starts blank if no (default) value', function () {
      let initialProps = {...defaultProps};
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
      expect(result.current.inputValue).toBe('');
      expect(onInputChange).not.toHaveBeenCalled();
      act(() => result.current.setInputValue('h'));
      expect(result.current.inputValue).toBe('h');
      expect(onInputChange).toHaveBeenCalledWith('h');
    });

    it('can be controlled', function () {
      let initialProps = {...defaultProps, inputValue: 'hello'};
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
      expect(result.current.inputValue).toBe('hello');
      expect(onInputChange).not.toHaveBeenCalled();
      act(() => result.current.setInputValue('hellow'));
      expect(result.current.inputValue).toBe('hello');
      expect(onInputChange).toHaveBeenCalledWith('hellow');
    });
  });

  describe('collection', function () {
    let onSelectionChange;
    let defaultProps;
    beforeEach(() => {
      onSelectionChange = jest.fn();
      let collator = {compare: jest.fn().mockReturnValue(true)};
      defaultProps = {items: [{id: '0', name: 'one'}, {id: '1', name: 'onomatopoeia'}], children: (props) => <Item {...props}>{props.name}</Item>, onSelectionChange, collator};
    });

    it('support selectedKey', function () {
      let initialProps = {...defaultProps, selectedKey: '0'};
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
      expect(result.current.selectionManager.selectionMode).toBe('single');
      expect(result.current.selectionManager.selectedKeys).toContain('0');
      expect(result.current.selectionManager.selectedKeys).not.toContain('1');

      act(() => result.current.selectionManager.replaceSelection('1'));
      expect(result.current.selectionManager.selectedKeys).toContain('0');
      expect(result.current.selectionManager.selectedKeys).not.toContain('1');
      expect(onSelectionChange).toHaveBeenCalledWith('1');
    });

    it('support defaultSelectedKey', function () {
      let initialProps = {...defaultProps, defaultSelectedKey: '0'};
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
      expect(result.current.selectionManager.selectionMode).toBe('single');
      expect(result.current.selectionManager.selectedKeys).toContain('0');
      expect(result.current.selectionManager.selectedKeys).not.toContain('1');

      act(() => result.current.selectionManager.replaceSelection('1'));
      expect(result.current.selectionManager.selectedKeys).toContain('1');
      expect(result.current.selectionManager.selectedKeys).not.toContain('0');
      expect(onSelectionChange).toHaveBeenCalledWith('1');
    });

    it('supports default no selection', function () {
      let initialProps = {...defaultProps};
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
      expect(result.current.selectionManager.selectionMode).toBe('single');
      expect(result.current.selectionManager.selectedKeys.size).toBe(0);

      act(() => result.current.selectionManager.replaceSelection('1'));
      expect(result.current.selectionManager.selectedKeys).toContain('1');
      expect(result.current.selectionManager.selectedKeys).not.toContain('0');
      expect(onSelectionChange).toHaveBeenCalledWith('1');
    });

    it('does not fire onSelectionChange on blur when fully controlled values are already synced', function () {
      let initialProps = {...defaultProps, selectedKey: '1', inputValue: 'onomatopoeia'};
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});

      act(() => {result.current.setFocused(false);});
      expect(onSelectionChange).not.toHaveBeenCalled();
    });

    it('fires onSelectionChange on blur when fully controlled inputValue is out of sync', function () {
      let initialProps = {...defaultProps, selectedKey: '1', inputValue: 'onom'};
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});

      act(() => {result.current.setFocused(false);});
      expect(onSelectionChange).toHaveBeenCalledTimes(1);
      expect(onSelectionChange).toHaveBeenCalledWith('1');
    });

    it('won\'t update the returned collection if the combobox is closed (uncontrolled items)', function () {
      let filter = renderHook((props) => useFilter(props), {sensitivity: 'base'});
      let initialProps = {...defaultProps, items: null, defaultItems: [{id: '0', name: 'one'}, {id: '1', name: 'onomatopoeia'}], defaultInputValue: '', defaultFilter: filter.result.current.contains};
      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});
      expect(result.current.collection.size).toEqual(2);
      expect(result.current.inputValue).toBe('');

      act(() => {result.current.open();});
      act(() => result.current.setInputValue('onom'));
      expect(result.current.inputValue).toBe('onom');
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');

      // The input value updates, but the returned collection still only contains onomatopoeia
      act(() => {result.current.setFocused(false);});
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.inputValue).toBe('');
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');

      // Subsequent calls that would close the menu don't update the tracked lastCollection
      act(() => {result.current.commit();});
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.inputValue).toBe('');
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');

      act(() => {result.current.close();});
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.inputValue).toBe('');
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');

      act(() => {result.current.revert();});
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.inputValue).toBe('');
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');

      act(() => {result.current.open();});
      expect(result.current.collection.size).toEqual(2);
    });

    it('won\'t update the returned collection if the combobox is closed (controlled items)', function () {
      let initialProps = {...defaultProps};
      let {result, rerender} = renderHook((props) => useComboBoxState(props), {initialProps});
      expect(result.current.collection.size).toEqual(2);

      act(() => {result.current.open();});
      rerender({...initialProps, items: [{id: '1', name: 'onomatopoeia'}]});
      // Returned collection reflects the items provided by the user since the combobox is open
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');

      act(() => {result.current.setFocused(false);});
      // Returned collection reflects the old items provided by the user when the combobox is closed
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');
      rerender(initialProps);
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');

      // Subsequent calls that would close the menu don't update the tracked lastCollection
      act(() => {result.current.commit();});
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.inputValue).toBe('');
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');

      act(() => {result.current.close();});
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.inputValue).toBe('');
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');

      act(() => {result.current.revert();});
      expect(result.current.collection.size).toEqual(1);
      expect(result.current.inputValue).toBe('');
      expect(result.current.collection.getItem('1').rendered).toBe('onomatopoeia');

      // When the combobox is opened again, the returned collection of items updates to reflect the items provided by the user
      act(() => {result.current.open();});
      expect(result.current.collection.size).toEqual(2);
    });
  });

  describe('controlled items (async loading)', function () {
    it('should re-open the menu when controlled items go from empty to non-empty', function () {
      let onOpenChange = jest.fn();
      let initialProps = {
        items: [{id: 1, name: 'Luke Skywalker'}],
        children: (props) => <Item>{props.name}</Item>,
        onOpenChange
      };

      let {result, rerender} = renderHook((props) => useComboBoxState(props), {initialProps});

      // Focus and open the menu by setting input value
      act(() => {result.current.setFocused(true);});
      act(() => {result.current.open(null, 'input');});
      expect(result.current.isOpen).toBe(true);

      // Simulate async load returning empty results (e.g. user typed "luka")
      rerender({...initialProps, items: []});
      // Menu closes on empty collection
      expect(result.current.isOpen).toBe(false);

      // Simulate async load returning results again (e.g. user backspaced to "luk")
      rerender({...initialProps, items: [{id: 1, name: 'Luke Skywalker'}]});
      // Menu should re-open because items were controlled and the close was due to empty collection
      expect(result.current.isOpen).toBe(true);
      expect(result.current.collection.size).toEqual(1);
      expect(onOpenChange).toHaveBeenLastCalledWith(true, 'input');
    });

    it('should not re-open after user dismisses with Escape (revert)', function () {
      let onOpenChange = jest.fn();
      let initialProps = {
        items: [{id: 1, name: 'Luke Skywalker'}],
        children: (props) => <Item>{props.name}</Item>,
        onOpenChange
      };

      let {result, rerender} = renderHook((props) => useComboBoxState(props), {initialProps});

      // Focus and open
      act(() => {result.current.setFocused(true);});
      act(() => {result.current.open(null, 'input');});
      expect(result.current.isOpen).toBe(true);

      // Async returns empty, menu auto-closes
      rerender({...initialProps, items: []});
      expect(result.current.isOpen).toBe(false);

      // User presses Escape (revert) while menu is closed
      act(() => {result.current.revert();});

      // Async returns items — menu should NOT re-open because user explicitly dismissed
      rerender({...initialProps, items: [{id: 1, name: 'Luke Skywalker'}]});
      expect(result.current.isOpen).toBe(false);
    });

    it('should still close the menu when uncontrolled items are empty', function () {
      let onOpenChange = jest.fn();
      let contains = (a, b) => a.toLowerCase().includes(b.toLowerCase());
      let initialProps = {
        defaultItems: [{id: 1, name: 'Luke Skywalker'}],
        children: (props) => <Item>{props.name}</Item>,
        onOpenChange,
        defaultFilter: contains
      };

      let {result} = renderHook((props) => useComboBoxState(props), {initialProps});

      // Focus and open
      act(() => {result.current.setFocused(true);});
      act(() => {result.current.open(null, 'input');});
      expect(result.current.isOpen).toBe(true);

      // Type something that filters to zero results
      act(() => {result.current.setInputValue('zzz');});
      // Menu should close because items are uncontrolled and filtered to empty
      expect(result.current.isOpen).toBe(false);
    });
  });
});