Add test helpers for Combobox component (#987)

Author: patricksmithlooker

CHANGELOG.md

@@ -15,6 +15,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `ActionListItem` accepts `actionsButtonLabel` prop to help with testing
 - `ComboboxList` and `ComboboxOption` now both support a custom `indicator`
   - `Select` and `SelectMulti` also support `indicator` at both the component and option level
+- Test helper functions for `Combobox` component using react-testing-library
 
 ### Changed
 

packages/components/src/Form/Inputs/Combobox/helpers.test.tsx

@@ -0,0 +1,105 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import {
+  closeCombobox,
+  getAllComboboxOptionText,
+  getComboboxOptions,
+  getComboboxOptionText,
+  openCombobox,
+  renderWithTheme,
+} from '@looker/components-test-utils'
+import { screen } from '@testing-library/react'
+import React from 'react'
+import { Combobox, ComboboxInput, ComboboxList, ComboboxOption } from './'
+
+describe('Combobox helpers', () => {
+  const renderCombobox = () =>
+    renderWithTheme(
+      <Combobox onChange={jest.fn()}>
+        <ComboboxInput placeholder="Type here" />
+        <ComboboxList>
+          <ComboboxOption label="Foo" value="101" onClick={jest.fn()} />
+          <ComboboxOption label="Bar" value="102" />
+        </ComboboxList>
+      </Combobox>
+    )
+
+  test('openCombobox opens the combobox using the provided placeholder text', () => {
+    renderCombobox()
+    openCombobox('Type here')
+
+    expect(screen.getByText('Foo')).toBeVisible()
+
+    closeCombobox()
+  })
+
+  test('closeCombobox closes any open comboboxes', () => {
+    renderCombobox()
+    openCombobox('Type here')
+
+    expect(screen.getByText('Foo')).toBeVisible()
+
+    closeCombobox()
+
+    expect(screen.queryByText('Foo')).toBeNull()
+  })
+
+  test('getComboboxOptions returns the expected number of options for an open Combobox', () => {
+    renderCombobox()
+    openCombobox('Type here')
+
+    expect(getComboboxOptions()).toHaveLength(2)
+
+    closeCombobox()
+  })
+
+  test('getComboboxOptionText returns the expected text content of the provided option element', () => {
+    renderCombobox()
+    openCombobox('Type here')
+
+    const options = getComboboxOptions()
+    expect(getComboboxOptionText(options[0])).toEqual('Foo')
+    expect(getComboboxOptionText(options[1])).toEqual('Bar')
+
+    closeCombobox()
+  })
+
+  test('getAllComboboxOptionText returns the expected text content of the provided option element', () => {
+    renderCombobox()
+    openCombobox('Type here')
+
+    const optionTexts = getAllComboboxOptionText()
+    expect(optionTexts).toMatchInlineSnapshot(`
+      Array [
+        "Foo",
+        "Bar",
+      ]
+    `)
+
+    closeCombobox()
+  })
+})

packages/test-utils/src/helpers/react-testing-library/comboboxHelpers.ts

@@ -0,0 +1,40 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+import { fireEvent, getNodeText, screen } from '@testing-library/react'
+
+export const openCombobox = (placeholderText: string) =>
+  fireEvent.mouseDown(screen.getByPlaceholderText(placeholderText))
+
+export const closeCombobox = () => fireEvent.click(document)
+
+export const getComboboxOptions = () => screen.getAllByRole('option')
+
+export const getComboboxOptionText = (el: HTMLElement) =>
+  getNodeText(el.children[1] as HTMLElement)
+
+export const getAllComboboxOptionText = () =>
+  getComboboxOptions().map(getComboboxOptionText)

packages/test-utils/src/helpers/react-testing-library/index.ts

@@ -0,0 +1,33 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2020 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+
+export {
+  closeCombobox,
+  getAllComboboxOptionText,
+  getComboboxOptions,
+  getComboboxOptionText,
+  openCombobox,
+} from './comboboxHelpers'

packages/test-utils/src/index.ts

@@ -27,3 +27,4 @@
 export { ReactWrapper } from 'enzyme'
 export * from './create_with_theme'
 export * from './snapshot'
+export * from './helpers/react-testing-library'