test(Dialog): cleanup, added Dialog test

primer · Apr 3, 2023 · 7e4ae8f · 7e4ae8f
1 parent b4d02db
commit 7e4ae8f
Show file tree

Hide file tree

Showing 4 changed files with 72 additions and 53 deletions.
diff --git a/src/Autocomplete/AutocompleteInput.tsx b/src/Autocomplete/AutocompleteInput.tsx
@@ -87,7 +87,6 @@ const AutocompleteInput = React.forwardRef(
         }
 
         if (event.key === 'Escape' && inputRef.current?.value) {
-          console.log('autocomplete esc')
           setInputValue('')
           inputRef.current.value = ''
         }

diff --git a/src/__tests__/Autocomplete.test.tsx b/src/__tests__/Autocomplete.test.tsx
@@ -4,58 +4,13 @@ import React from 'react'
 import Autocomplete, {AutocompleteInputProps} from '../Autocomplete'
 import {AutocompleteMenuInternalProps} from '../Autocomplete/AutocompleteMenu'
 import BaseStyles from '../BaseStyles'
-import theme from '../theme'
-import {ThemeProvider} from '../ThemeProvider'
+
 import {ItemProps} from '../deprecated/ActionList'
+
 import {SSRProvider} from '../utils/ssr'
 import {render} from '../utils/testing'
 import {MandateProps} from '../utils/types'
-
-const mockItems = [
-  {text: 'zero', id: 0},
-  {text: 'one', id: 1},
-  {text: 'two', id: 2},
-  {text: 'three', id: 3},
-  {text: 'four', id: 4},
-  {text: 'five', id: 5},
-  {text: 'six', id: 6},
-  {text: 'seven', id: 7},
-  {text: 'twenty', id: 20},
-  {text: 'twentyone', id: 21},
-]
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AutocompleteItemProps<T = Record<string, any>> = MandateProps<ItemProps, 'id'> & {metadata?: T}
-
-const AUTOCOMPLETE_LABEL = 'Autocomplete field'
-const LabelledAutocomplete = <T extends AutocompleteItemProps>({
-  inputProps = {},
-  menuProps,
-}: {
-  inputProps?: AutocompleteInputProps
-  menuProps: AutocompleteMenuInternalProps<T>
-}) => {
-  const {['aria-labelledby']: ariaLabelledBy = 'autocompleteLabel', ...menuPropsRest} = menuProps
-  const {id = 'autocompleteInput', ...inputPropsRest} = inputProps
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          {/* eslint-disable-next-line jsx-a11y/label-has-for */}
-          <label htmlFor={id} id={ariaLabelledBy}>
-            Autocomplete field
-          </label>
-          <Autocomplete id="autocompleteId">
-            <Autocomplete.Input id={id} {...inputPropsRest} />
-            <Autocomplete.Overlay>
-              <Autocomplete.Menu aria-labelledby={ariaLabelledBy} {...menuPropsRest} />
-            </Autocomplete.Overlay>
-          </Autocomplete>
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
+import {LabelledAutocomplete, mockItems, AUTOCOMPLETE_LABEL} from './helpers/LabelledAutocomplete'
 
 describe('Autocomplete', () => {
   describe('Autocomplete.Input', () => {

diff --git a/src/__tests__/Dialog.test.tsx b/src/__tests__/Dialog.test.tsx
@@ -1,10 +1,12 @@
 import React, {useState, useRef} from 'react'
 import {Dialog, Box, Text, Autocomplete} from '..'
 import {Button} from '../deprecated'
-import {render as HTMLRender, fireEvent} from '@testing-library/react'
+import {render as HTMLRender, fireEvent, prettyDOM} from '@testing-library/react'
 import {axe, toHaveNoViolations} from 'jest-axe'
 import {behavesAsComponent, checkExports} from '../utils/testing'
 import userEvent from '@testing-library/user-event'
+import {AUTOCOMPLETE_LABEL, LabelledAutocomplete, mockItems} from './helpers/LabelledAutocomplete'
+
 expect.extend(toHaveNoViolations)
 
 const comp = (
@@ -36,6 +38,7 @@ const Component = () => {
           <Box p={3}>
             <Text fontFamily="sans-serif">Some content</Text>
           </Box>
+          <LabelledAutocomplete menuProps={{items: mockItems, selectedItemIds: []}} />
         </div>
       </Dialog>
     </div>
@@ -50,7 +53,6 @@ const ClosedDialog = () => {
         <Box p={3}>
           <Text fontFamily="sans-serif">Some content</Text>
         </Box>
-        <Autocomplete />
       </div>
     </Dialog>
   )
@@ -107,12 +109,19 @@ describe('Dialog', () => {
   })
 
   it('Toggles when you press escape key', async () => {
-    const {getByTestId, queryByTestId, container} = HTMLRender(<Component />)
+    const {getByTestId, queryByTestId, container, getByLabelText} = HTMLRender(<Component />)
     const user = userEvent.setup()
+    const inputNode = getByLabelText(AUTOCOMPLETE_LABEL)
 
     expect(getByTestId('inner')).toBeTruthy()
-    await user.keyboard('{escape}')
+    expect(inputNode.getAttribute('aria-expanded')).not.toBe('true')
+    fireEvent.click(inputNode)
 
+    expect(inputNode.getAttribute('aria-expanded')).toBe('true')
+    expect(inputNode).toHaveFocus()
+    fireEvent.keyDown(container, {key: 'Escape', code: 'Escape'})
+    expect(queryByTestId('inner')).not.toBeNull()
+    await user.keyboard('{escape}')
     expect(queryByTestId('inner')).toBeNull()
   })
 

diff --git a/src/__tests__/helpers/LabelledAutocomplete.tsx b/src/__tests__/helpers/LabelledAutocomplete.tsx
@@ -0,0 +1,56 @@
+import React from 'react'
+import {SSRProvider} from '@react-aria/ssr'
+import {ThemeProvider} from '../../ThemeProvider'
+import Autocomplete, {AutocompleteInputProps} from '../../Autocomplete'
+import {AutocompleteMenuInternalProps} from '../../Autocomplete/AutocompleteMenu'
+import BaseStyles from '../../BaseStyles'
+import {ItemProps} from '../../deprecated/ActionList'
+
+import {MandateProps} from '../../utils/types'
+import theme from '../../theme'
+
+export const mockItems = [
+  {text: 'zero', id: 0},
+  {text: 'one', id: 1},
+  {text: 'two', id: 2},
+  {text: 'three', id: 3},
+  {text: 'four', id: 4},
+  {text: 'five', id: 5},
+  {text: 'six', id: 6},
+  {text: 'seven', id: 7},
+  {text: 'twenty', id: 20},
+  {text: 'twentyone', id: 21},
+]
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AutocompleteItemProps<T = Record<string, any>> = MandateProps<ItemProps, 'id'> & {metadata?: T}
+
+export const AUTOCOMPLETE_LABEL = 'Autocomplete field'
+export const LabelledAutocomplete = <T extends AutocompleteItemProps>({
+  inputProps = {},
+  menuProps,
+}: {
+  inputProps?: AutocompleteInputProps
+  menuProps: AutocompleteMenuInternalProps<T>
+}) => {
+  const {['aria-labelledby']: ariaLabelledBy = 'autocompleteLabel', ...menuPropsRest} = menuProps
+  const {id = 'autocompleteInput', ...inputPropsRest} = inputProps
+  return (
+    <ThemeProvider theme={theme}>
+      <SSRProvider>
+        <BaseStyles>
+          {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+          <label htmlFor={id} id={ariaLabelledBy}>
+            Autocomplete field
+          </label>
+          <Autocomplete id="autocompleteId">
+            <Autocomplete.Input id={id} {...inputPropsRest} />
+            <Autocomplete.Overlay>
+              <Autocomplete.Menu aria-labelledby={ariaLabelledBy} {...menuPropsRest} />
+            </Autocomplete.Overlay>
+          </Autocomplete>
+        </BaseStyles>
+      </SSRProvider>
+    </ThemeProvider>
+  )
+}