From 4809735b0a655f8a2df9e80488f80973f7859667 Mon Sep 17 00:00:00 2001
From: Maxime Gendron <maxime.gendron07@gmail.com>
Date: Fri, 8 May 2020 14:49:27 -0400
Subject: [PATCH] Add more tests

---
 .../src/components/select/select.test.tsx     | 200 +++++++++++++++++-
 .../components/select/select.test.tsx.snap    |  12 ++
 .../react/src/components/select/select.tsx    |  32 +--
 3 files changed, 228 insertions(+), 16 deletions(-)

diff --git a/packages/react/src/components/select/select.test.tsx b/packages/react/src/components/select/select.test.tsx
index 31c5053821..dda75ae2d5 100644
--- a/packages/react/src/components/select/select.test.tsx
+++ b/packages/react/src/components/select/select.test.tsx
@@ -32,10 +32,208 @@ describe('Select', () => {
         const callback = jest.fn();
         const wrapper = shallow(<Select onChange={callback} options={provinces} />);
 
-        getByTestId(wrapper, 'list').simulate('change', { value: 'ns', label: 'Nova Scotia' });
+        getByTestId(wrapper, 'listbox').simulate('change', { value: 'ns', label: 'Nova Scotia' });
         expect(callback).toHaveBeenCalledWith({ value: 'ns', label: 'Nova Scotia' });
     });
 
+    test('listbox should be closed by default', () => {
+        const wrapper = shallow(<Select options={provinces} />);
+
+        expect(getByTestId(wrapper, 'listbox').props().visible).toBeFalsy();
+    });
+
+    test('listbox should be open when defaultOpen prop is set to true', () => {
+        const wrapper = shallow(<Select options={provinces} defaultOpen />);
+
+        expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+    });
+
+    test('input should have default value', () => {
+        const wrapper = shallow(<Select options={provinces} defaultValue="qc" />);
+
+        expect(getByTestId(wrapper, 'input').props().value).toBe('Quebec');
+    });
+
+    test('listbox should open on click', () => {
+        const wrapper = shallow(<Select options={provinces} />);
+
+        getByTestId(wrapper, 'input-wrapper').simulate('click');
+        expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+    });
+
+    test('listbox should not open on click [searchable]', () => {
+        const wrapper = shallow(<Select options={provinces} searchable/>);
+
+        getByTestId(wrapper, 'input-wrapper').simulate('click');
+        expect(getByTestId(wrapper, 'listbox').props().visible).toBeFalsy();
+    });
+
+    test('listbox should close on click', () => {
+        const wrapper = shallow(<Select options={provinces} defaultOpen />);
+
+        getByTestId(wrapper, 'input-wrapper').simulate('click');
+        expect(getByTestId(wrapper, 'listbox').props().visible).toBeFalsy();
+    });
+
+    test('listbox should open when arrow is clicked', () => {
+        const wrapper = shallow(<Select options={provinces} />);
+
+        getByTestId(wrapper, 'arrow').simulate('click');
+        expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+    });
+
+    test('listbox should close when arrow is clicked', () => {
+        const wrapper = shallow(<Select options={provinces} defaultOpen/>);
+
+        getByTestId(wrapper, 'arrow').simulate('click');
+        expect(getByTestId(wrapper, 'listbox').props().visible).toBeFalsy();
+    });
+
+    describe('input', () => {
+        test('ArrowUp should open listbox', () => {
+            const wrapper = shallow(<Select options={provinces} />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 38 });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+        });
+
+        test('ArrowUp should open listbox [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} searchable />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 38 });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+        });
+
+        test('ArrowDown should open listbox', () => {
+            const wrapper = shallow(<Select options={provinces} />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 40 });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+        });
+
+        test('ArrowDown should open listbox [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} searchable />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 40 });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+        });
+
+        test('Enter should open listbox', () => {
+            const wrapper = shallow(<Select options={provinces} />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 13, preventDefault: jest.fn() });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+        });
+
+        test('ArrowDown should not open listbox [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} searchable />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 13, preventDefault: jest.fn() });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeFalsy();
+        });
+
+        test('Spacebar should open listbox', () => {
+            const wrapper = shallow(<Select options={provinces} />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 32, preventDefault: jest.fn() });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+        });
+
+        test('Spacebar should open listbox [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} searchable />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 32, preventDefault: jest.fn() });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+        });
+
+        test('Escape should close listbox', () => {
+            const wrapper = shallow(<Select options={provinces} defaultOpen />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 27 });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeFalsy();
+        });
+
+        test('Escape should close listbox [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} defaultOpen searchable />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 27 });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeFalsy();
+        });
+
+        test('input value should be cleared when escape is pressed [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} defaultValue="qc" searchable />);
+
+            getByTestId(wrapper, 'input').simulate('keydown', { keyCode: 27 });
+            expect(getByTestId(wrapper, 'input').props().value).toBe('');
+        });
+
+        test('listbox should open when search entry has matching result(s) [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} searchable />);
+
+            getByTestId(wrapper, 'input').simulate('change', { target: { value: 'a' } });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeTruthy();
+        });
+
+        test('listbox should close when search entry has no matching result [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} searchable />);
+
+            getByTestId(wrapper, 'input').simulate('change', { target: { value: 'at' } });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeFalsy();
+        });
+
+        test('should select value that matches search value on blur [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} searchable />);
+
+            getByTestId(wrapper, 'input').simulate('change', { target: { value: 'quebec' } });
+            getByTestId(wrapper, 'input').simulate('blur');
+            expect(getByTestId(wrapper, 'input').props().value).toBe('Quebec');
+        });
+    });
+
+    describe('listbox', () => {
+        test('should close when escape is pressed', () => {
+            const wrapper = shallow(<Select options={provinces} defaultOpen />);
+
+            getByTestId(wrapper, 'listbox').simulate('keydown', { key: 'Escape' });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeFalsy();
+        });
+
+        test('should clear input value when escape is pressed [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} defaultOpen defaultValue="qc" searchable />);
+
+            getByTestId(wrapper, 'listbox').simulate('keydown', { key: 'Escape' });
+            expect(getByTestId(wrapper, 'input').props().value).toBe('');
+        });
+
+        test('should focus last element from array when ArrowUp is pressed', () => {
+            const wrapper = shallow(<Select options={provinces} defaultOpen />);
+
+            getByTestId(wrapper, 'listbox').simulate('keydown', { key: 'ArrowUp' });
+            expect(getByTestId(wrapper, 'listbox').props().focusedValue).toBe('yt');
+        });
+
+        test('should focus the first element starting with the letter N', () => {
+            const wrapper = shallow(<Select options={provinces} defaultOpen />);
+
+            getByTestId(wrapper, 'listbox').simulate('keydown', { keyCode: 78, key: 'n' });
+            expect(getByTestId(wrapper, 'listbox').props().focusedValue).toBe('ns');
+        });
+
+        test('should remove focus when a character is pressed [searchable]', () => {
+            const wrapper = shallow(<Select options={provinces} defaultOpen searchable />);
+
+            getByTestId(wrapper, 'listbox').simulate('keydown', { keyCode: 78, key: 'n' });
+            expect(getByTestId(wrapper, 'listbox').props().autofocus).toBeFalsy();
+        });
+
+        test('should close onChange', () => {
+            const wrapper = shallow(<Select options={provinces} defaultOpen />);
+
+            getByTestId(wrapper, 'listbox').simulate('change', { option: { label: 'Quebec', value: 'qc' } });
+            expect(getByTestId(wrapper, 'listbox').props().visible).toBeFalsy();
+        });
+    });
+
     test('matches the snapshot', () => {
         const tree = renderWithProviders(
             <Select
diff --git a/packages/react/src/components/select/select.test.tsx.snap b/packages/react/src/components/select/select.test.tsx.snap
index 116555fb20..1c98572399 100644
--- a/packages/react/src/components/select/select.test.tsx.snap
+++ b/packages/react/src/components/select/select.test.tsx.snap
@@ -187,6 +187,7 @@ input + .c2 {
     aria-haspopup="listbox"
     aria-owns="listbox_undefined"
     class="c3"
+    data-testid="input-wrapper"
     disabled=""
   >
     <input
@@ -194,6 +195,7 @@ input + .c2 {
       aria-controls="listbox_undefined"
       aria-multiline="false"
       class="c4"
+      data-testid="input"
       disabled=""
       placeholder="Select an option"
       type="text"
@@ -201,6 +203,7 @@ input + .c2 {
     />
     <button
       class="c5"
+      data-testid="arrow"
       disabled=""
       tabindex="-1"
       type="button"
@@ -545,18 +548,21 @@ input + .c2 {
       aria-haspopup="listbox"
       aria-owns="listbox_undefined"
       class="c3"
+      data-testid="input-wrapper"
     >
       <input
         aria-autocomplete="list"
         aria-controls="listbox_undefined"
         aria-multiline="false"
         class="c4"
+        data-testid="input"
         placeholder="Select an option"
         type="text"
         value=""
       />
       <button
         class="c5"
+        data-testid="arrow"
         tabindex="-1"
         type="button"
       >
@@ -989,18 +995,21 @@ input + .c2 {
       aria-haspopup="listbox"
       aria-owns="listbox_undefined"
       class="c3"
+      data-testid="input-wrapper"
     >
       <input
         aria-autocomplete="list"
         aria-controls="listbox_undefined"
         aria-multiline="false"
         class="c4"
+        data-testid="input"
         placeholder="Select an option"
         type="text"
         value=""
       />
       <button
         class="c5"
+        data-testid="arrow"
         tabindex="-1"
         type="button"
       >
@@ -1399,18 +1408,21 @@ exports[`Select mobile select has a different style 1`] = `
     aria-haspopup="listbox"
     aria-owns="listbox_undefined"
     class="c2"
+    data-testid="input-wrapper"
   >
     <input
       aria-autocomplete="list"
       aria-controls="listbox_undefined"
       aria-multiline="false"
       class="c3"
+      data-testid="input"
       placeholder="Select an option"
       type="text"
       value=""
     />
     <button
       class="c4"
+      data-testid="arrow"
       tabindex="-1"
       type="button"
     >
diff --git a/packages/react/src/components/select/select.tsx b/packages/react/src/components/select/select.tsx
index 81225b9422..be27834fee 100644
--- a/packages/react/src/components/select/select.tsx
+++ b/packages/react/src/components/select/select.tsx
@@ -1,4 +1,4 @@
-import React, { ChangeEvent, FocusEvent, KeyboardEvent, ReactElement, useEffect, useMemo, useRef, useState } from 'react';
+import React, { ChangeEvent, KeyboardEvent, ReactElement, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 import uuid from 'uuid/v4';
 
@@ -220,6 +220,7 @@ export function Select({
 
         if (matchingOption) {
             setSelectedOptionValue(matchingOption.value);
+            setInputValue(matchingOption.label);
         }
     }
 
@@ -228,12 +229,8 @@ export function Select({
         matchInputValueToOption();
     }
 
-    function handleBlur(event: FocusEvent<HTMLInputElement>): void {
-        const checkSearchValue = findOption(options, event.target.value);
-        if (checkSearchValue && checkSearchValue.value !== selectedOptionValue) {
-            setSelectedOptionValue(checkSearchValue.value);
-            onChange && onChange(checkSearchValue);
-        }
+    function handleBlur(): void {
+        matchInputValueToOption();
         if (!open) {
             setFocus(false);
         }
@@ -388,15 +385,17 @@ export function Select({
             handleOpen();
         } else if (event.key === 'ArrowUp' && !focusedValue) {
             focusLastElementFromArray(options);
-        } else if (event.key !== 'ArrowUp' && event.key !== 'ArrowDown' && searchable) {
-            setAutofocus(false);
-            setFocusedValue('');
-            inputRef.current && inputRef.current.focus();
         } else if (event.keyCode > 64 && event.keyCode < 91) /* Check if key is a character */ {
-            const suggestOption =
+            if (searchable) {
+                setAutofocus(false);
+                setFocusedValue('');
+                inputRef.current && inputRef.current.focus();
+            } else {
+                const suggestOption =
                 options.find(option => option.label.toLowerCase().startsWith(event.key.toLowerCase()));
-            if (suggestOption) {
-                setFocusedValue(suggestOption.value);
+                if (suggestOption) {
+                    setFocusedValue(suggestOption.value);
+                }
             }
         }
     }
@@ -440,6 +439,7 @@ export function Select({
                     aria-expanded={open}
                     aria-haspopup="listbox"
                     aria-owns={`listbox_${id}`}
+                    data-testid="input-wrapper"
                     containerOutline={containerOutline}
                     isMobile={isMobile}
                     disabled={disabled}
@@ -454,6 +454,7 @@ export function Select({
                         aria-autocomplete={searchable ? 'both' : 'list'}
                         aria-controls={`listbox_${id}`}
                         aria-multiline="false"
+                        data-testid="input"
                         isMobile={isMobile}
                         disabled={disabled}
                         name={name}
@@ -470,6 +471,7 @@ export function Select({
                     />
                     <Arrow
                         type="button"
+                        data-testid="arrow"
                         tabIndex={-1}
                         onClick={disabled ? undefined : handleArrowClick}
                         disabled={disabled}
@@ -481,7 +483,7 @@ export function Select({
                     autofocus={searchable ? autoFocus : open}
                     visible={open}
                     checkIndicator
-                    data-testid="list"
+                    data-testid="listbox"
                     defaultValue={defaultValue}
                     focusedValue={focusedValue}
                     id={id}