chore: Fix tests

dowjones · Feb 16, 2021 · 4152456 · 4152456
1 parent a3f1c6a
commit 4152456
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 30 deletions.
diff --git a/__snapshots__/src/index.test.js.md b/__snapshots__/src/index.test.js.md
@@ -18,6 +18,7 @@ Generated by [AVA](https://ava.li).
         <Memo(Trigger)
           clientId="rdts"
           onTrigger={Function onTrigger {}}
+          showDropdown={true}
           tabIndex={0}
           texts={{}}
         >
@@ -26,10 +27,9 @@ Generated by [AVA](https://ava.li).
             onTagRemove={Function onTagRemove {}}
             texts={{}}
           >
-            <Memo(Input)
+            <Memo(ForwardRef)
               clientId="rdts"
               inlineSearchInput={false}
-              inputRef={Function inputRef {}}
               onBlur={Function onInputBlur {}}
               onFocus={Function onInputFocus {}}
               onInputChange={Function onInputChange {}}
@@ -38,6 +38,19 @@ Generated by [AVA](https://ava.li).
             />
           </Tags>
         </Memo(Trigger)>
+        <div
+          className="dropdown-content"
+        >
+          <Tree
+            clientId="rdts"
+            data={Map {}}
+            onAction={Function onAction {}}
+            onCheckboxChange={Function onCheckboxChange {}}
+            onNodeToggle={Function onNodeToggle {}}
+            searchModeOn={false}
+            texts={{}}
+          />
+        </div>
       </div>
     </div>
 
@@ -55,6 +68,7 @@ Generated by [AVA](https://ava.li).
         <Memo(Trigger)
           clientId="rdts"
           onTrigger={Function onTrigger {}}
+          showDropdown={true}
           tabIndex={0}
           texts={{}}
         >
@@ -64,6 +78,28 @@ Generated by [AVA](https://ava.li).
             texts={{}}
           />
         </Memo(Trigger)>
+        <div
+          className="dropdown-content"
+        >
+          <Memo(ForwardRef)
+            clientId="rdts"
+            inlineSearchInput={true}
+            onBlur={Function onInputBlur {}}
+            onFocus={Function onInputFocus {}}
+            onInputChange={Function onInputChange {}}
+            onKeyDown={Function onKeyboardKeyDown {}}
+            texts={{}}
+          />
+          <Tree
+            clientId="rdts"
+            data={Map {}}
+            onAction={Function onAction {}}
+            onCheckboxChange={Function onCheckboxChange {}}
+            onNodeToggle={Function onNodeToggle {}}
+            searchModeOn={false}
+            texts={{}}
+          />
+        </div>
       </div>
     </div>
 
@@ -82,6 +118,7 @@ Generated by [AVA](https://ava.li).
           clientId="rdts"
           disabled={true}
           onTrigger={Function onTrigger {}}
+          showDropdown={false}
           tabIndex={0}
           texts={{}}
         >
@@ -91,11 +128,10 @@ Generated by [AVA](https://ava.li).
             onTagRemove={Function onTagRemove {}}
             texts={{}}
           >
-            <Memo(Input)
+            <Memo(ForwardRef)
               clientId="rdts"
               disabled={true}
               inlineSearchInput={false}
-              inputRef={Function inputRef {}}
               onBlur={Function onInputBlur {}}
               onFocus={Function onInputFocus {}}
               onInputChange={Function onInputChange {}}
@@ -231,10 +267,9 @@ Generated by [AVA](https://ava.li).
                   <li
                     className="tag-item"
                   >
-                    <Memo(Input)
+                    <ForwardRef
                       clientId="rdts"
                       inlineSearchInput={false}
-                      inputRef={Function inputRef {}}
                       mode="radioSelect"
                       onBlur={Function onInputBlur {}}
                       onFocus={Function onInputFocus {}}
@@ -252,7 +287,7 @@ Generated by [AVA](https://ava.li).
                         placeholder="Choose..."
                         type="text"
                       />
-                    </Memo(Input)>
+                    </ForwardRef>
                   </li>
                 </ul>
               </Tags>
@@ -383,10 +418,9 @@ Generated by [AVA](https://ava.li).
                   <li
                     className="tag-item"
                   >
-                    <Memo(Input)
+                    <ForwardRef
                       clientId="rdts"
                       inlineSearchInput={false}
-                      inputRef={Function inputRef {}}
                       onBlur={Function onInputBlur {}}
                       onFocus={Function onInputFocus {}}
                       onInputChange={Function onInputChange {}}
@@ -403,7 +437,7 @@ Generated by [AVA](https://ava.li).
                         placeholder="Choose..."
                         type="text"
                       />
-                    </Memo(Input)>
+                    </ForwardRef>
                   </li>
                 </ul>
               </Tags>
@@ -427,6 +461,7 @@ Generated by [AVA](https://ava.li).
         <Memo(Trigger)
           clientId="rdts"
           onTrigger={Function onTrigger {}}
+          showDropdown={true}
           tabIndex={0}
           texts={{}}
         >
@@ -435,10 +470,9 @@ Generated by [AVA](https://ava.li).
             onTagRemove={Function onTagRemove {}}
             texts={{}}
           >
-            <Memo(Input)
+            <Memo(ForwardRef)
               clientId="rdts"
               inlineSearchInput={false}
-              inputRef={Function inputRef {}}
               onBlur={Function onInputBlur {}}
               onFocus={Function onInputFocus {}}
               onInputChange={Function onInputChange {}}
@@ -447,5 +481,18 @@ Generated by [AVA](https://ava.li).
             />
           </Tags>
         </Memo(Trigger)>
+        <div
+          className="dropdown-content"
+        >
+          <Tree
+            clientId="rdts"
+            data={Map {}}
+            onAction={Function onAction {}}
+            onCheckboxChange={Function onCheckboxChange {}}
+            onNodeToggle={Function onNodeToggle {}}
+            searchModeOn={false}
+            texts={{}}
+          />
+        </div>
       </div>
     </div>
diff --git a/__snapshots__/src/index.test.js.snap b/__snapshots__/src/index.test.js.snap
diff --git a/__snapshots__/src/tags/index.test.js.md b/__snapshots__/src/tags/index.test.js.md
@@ -32,7 +32,7 @@ Generated by [AVA](https://ava.li).
       <li
         className="tag-item"
       >
-        <Memo(Input) />
+        <Memo(ForwardRef) />
       </li>
     </ul>
 
@@ -46,7 +46,7 @@ Generated by [AVA](https://ava.li).
       <li
         className="tag-item"
       >
-        <Memo(Input) />
+        <Memo(ForwardRef) />
       </li>
     </ul>
 
@@ -89,7 +89,7 @@ Generated by [AVA](https://ava.li).
       <li
         className="tag-item"
       >
-        <Memo(Input) />
+        <Memo(ForwardRef) />
       </li>
     </ul>
 
@@ -121,6 +121,6 @@ Generated by [AVA](https://ava.li).
       <li
         className="tag-item"
       >
-        <Memo(Input) />
+        <Memo(ForwardRef) />
       </li>
     </ul>
diff --git a/__snapshots__/src/tags/index.test.js.snap b/__snapshots__/src/tags/index.test.js.snap
diff --git a/__snapshots__/src/trigger/index.test.js.md b/__snapshots__/src/trigger/index.test.js.md
@@ -16,4 +16,5 @@ Generated by [AVA](https://ava.li).
       onClick={Function handleTrigger {}}
       onKeyDown={Function handleTrigger {}}
       role="button"
+      tabIndex={0}
     />
diff --git a/__snapshots__/src/trigger/index.test.js.snap b/__snapshots__/src/trigger/index.test.js.snap
diff --git a/src/index.js b/src/index.js
@@ -43,7 +43,11 @@ const DropdownTreeSelect = ({
   keepOpenOnSelect,
   clearSearchOnChange,
 }) => {
-  const [state, setState] = useState({ searchModeOn: false })
+  const [state, setState] = useState({
+    searchModeOn: false,
+    showDropdown: /initial|always/.test(showDropdownProp),
+    tree: new Map(),
+  })
   const clientId = useMemo(() => idProp || clientIdGenerator.get(), [idProp])
   const treeManager = useRef()
   const searchInputRef = useRef()
@@ -304,14 +308,9 @@ const DropdownTreeSelect = ({
 
   const commonProps = { disabled, readOnly, activeDescendant, texts, mode, clientId }
 
-  // AVA snapshot crashes if an anonymous function is used
-  const inputRef = useCallback(function inputRef(el) {
-    searchInputRef.current = el
-  }, [])
-
   const searchInput = (
     <Input
-      inputRef={inputRef}
+      ref={searchInputRef}
       onInputChange={onInputChange}
       onFocus={onInputFocus}
       onBlur={onInputBlur}

diff --git a/src/input/index.js b/src/input/index.js
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { memo } from 'react'
+import React, { memo, forwardRef } from 'react'
 
 import { getAriaLabel } from '../a11y'
 import { debounce } from '../utils'
@@ -14,9 +14,8 @@ function handleChange(onInputChange) {
   }
 }
 
-const Input = props => {
+const Input = forwardRef((props, ref) => {
   const {
-    inputRef,
     texts = {},
     onFocus,
     onBlur,
@@ -31,7 +30,7 @@ const Input = props => {
     <input
       type="text"
       disabled={disabled}
-      ref={inputRef}
+      ref={ref}
       className="search"
       placeholder={inlineSearchInput ? texts.inlineSearchPlaceholder || 'Search...' : texts.placeholder || 'Choose...'}
       onKeyDown={onKeyDown}
@@ -44,7 +43,7 @@ const Input = props => {
       {...getAriaLabel(texts.label)}
     />
   )
-}
+})
 
 Input.propTypes = {
   texts: PropTypes.shape({
@@ -57,7 +56,7 @@ Input.propTypes = {
   onBlur: PropTypes.func,
   onTagRemove: PropTypes.func,
   onKeyDown: PropTypes.func,
-  inputRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.elementType })]),
+  inputRef: PropTypes.shape({ current: PropTypes.elementType }),
   disabled: PropTypes.bool,
   readOnly: PropTypes.bool,
   activeDescendant: PropTypes.string,

diff --git a/src/trigger/index.test.js b/src/trigger/index.test.js
@@ -6,6 +6,6 @@ import toJson from 'enzyme-to-json'
 import Trigger from './index'
 
 test('Trigger component', t => {
-  const input = toJson(shallow(<Trigger clientId="rtds" />))
+  const input = toJson(shallow(<Trigger clientId="rtds" tabIndex={0} />))
   t.snapshot(input)
 })