From 7e4ae8f660ede8f78ddcf29f548b5cde0298e384 Mon Sep 17 00:00:00 2001 From: "Amanda G. Brown" Date: Mon, 3 Apr 2023 11:27:31 -0400 Subject: [PATCH] test(Dialog): cleanup, added Dialog test --- src/Autocomplete/AutocompleteInput.tsx | 1 - src/__tests__/Autocomplete.test.tsx | 51 +---------------- src/__tests__/Dialog.test.tsx | 17 ++++-- .../helpers/LabelledAutocomplete.tsx | 56 +++++++++++++++++++ 4 files changed, 72 insertions(+), 53 deletions(-) create mode 100644 src/__tests__/helpers/LabelledAutocomplete.tsx diff --git a/src/Autocomplete/AutocompleteInput.tsx b/src/Autocomplete/AutocompleteInput.tsx index 0e13986f18d..31748391c95 100644 --- 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 index 6b079518029..d93990550e1 100644 --- 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> = MandateProps & {metadata?: T} - -const AUTOCOMPLETE_LABEL = 'Autocomplete field' -const LabelledAutocomplete = ({ - inputProps = {}, - menuProps, -}: { - inputProps?: AutocompleteInputProps - menuProps: AutocompleteMenuInternalProps -}) => { - const {['aria-labelledby']: ariaLabelledBy = 'autocompleteLabel', ...menuPropsRest} = menuProps - const {id = 'autocompleteInput', ...inputPropsRest} = inputProps - return ( - - - - {/* eslint-disable-next-line jsx-a11y/label-has-for */} - - - - - - - - - - - ) -} +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 index bc1a364a022..92bb3c2f104 100644 --- 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 = () => { Some content + @@ -50,7 +53,6 @@ const ClosedDialog = () => { Some content - ) @@ -107,12 +109,19 @@ describe('Dialog', () => { }) it('Toggles when you press escape key', async () => { - const {getByTestId, queryByTestId, container} = HTMLRender() + const {getByTestId, queryByTestId, container, getByLabelText} = HTMLRender() 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 new file mode 100644 index 00000000000..bf7e2788b89 --- /dev/null +++ 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> = MandateProps & {metadata?: T} + +export const AUTOCOMPLETE_LABEL = 'Autocomplete field' +export const LabelledAutocomplete = ({ + inputProps = {}, + menuProps, +}: { + inputProps?: AutocompleteInputProps + menuProps: AutocompleteMenuInternalProps +}) => { + const {['aria-labelledby']: ariaLabelledBy = 'autocompleteLabel', ...menuPropsRest} = menuProps + const {id = 'autocompleteInput', ...inputPropsRest} = inputProps + return ( + + + + {/* eslint-disable-next-line jsx-a11y/label-has-for */} + + + + + + + + + + + ) +}