test(DataTableCell): Improved code coverage (#1856)

* test(DataTableCell): Improved code coverage

* chore: image-snapshot updates (#1858)

Co-authored-by: lukelooker <[email protected]>

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: lukelooker <[email protected]>

Author: 3 people

packages/components/snapshots/Accordion/Basic-snap.png

@@ -0,0 +1,205 @@
+/*
+
+ 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 React from 'react'
+import { renderWithTheme } from '@looker/components-test-utils'
+import { fireEvent, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { DataTableCell } from './DataTableCell'
+
+describe('DataTableCell', () => {
+  test('Basic content', () => {
+    renderWithTheme(
+      <table>
+        <tbody>
+          <tr>
+            <DataTableCell>Cell content</DataTableCell>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    expect(screen.getByText('Cell content')).toBeInTheDocument()
+  })
+
+  test('indicator', () => {
+    renderWithTheme(
+      <table>
+        <tbody>
+          <tr>
+            <DataTableCell indicator="FauxIcon">Cell content</DataTableCell>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    expect(screen.getByText('FauxIcon')).toBeInTheDocument()
+  })
+
+  test('description & indicator', () => {
+    renderWithTheme(
+      <table>
+        <tbody>
+          <tr>
+            <DataTableCell indicator="FauxIcon" description="descriptive text">
+              Cell content
+            </DataTableCell>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    expect(screen.getByText('descriptive text')).toBeInTheDocument()
+    expect(screen.getByText('FauxIcon')).toBeInTheDocument()
+  })
+
+  test('onKeyUp callback', () => {
+    const onKeyUp = jest.fn()
+
+    renderWithTheme(
+      <table>
+        <tbody>
+          <tr>
+            <DataTableCell onKeyUp={onKeyUp}>Cell content</DataTableCell>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    fireEvent.keyUp(screen.getByText('Cell content'), {
+      charCode: 13,
+      code: 13,
+      key: 'Enter',
+    })
+
+    expect(onKeyUp).toHaveBeenCalledTimes(1)
+  })
+
+  test('keyup triggers :focus-visible blur removes', () => {
+    renderWithTheme(
+      <table>
+        <tbody>
+          <tr>
+            <DataTableCell>Cell content</DataTableCell>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    const cell = screen.getByText('Cell content')
+    const td = cell.closest('td')
+    expect(td).toHaveStyleRule('outline', 'none', {
+      modifier: ':focus',
+    })
+
+    fireEvent.keyUp(cell, {
+      charCode: 13,
+      code: 13,
+      key: 'Enter',
+    })
+
+    expect(td).toHaveStyleRule('outline', '1px solid #6C43E0', {
+      modifier: ':focus',
+    })
+
+    fireEvent.blur(cell)
+
+    expect(td).toHaveStyleRule('outline', 'none', {
+      modifier: ':focus',
+    })
+  })
+
+  test('onClick callback + unset :focus-visible', () => {
+    const onClick = jest.fn()
+
+    renderWithTheme(
+      <table>
+        <tbody>
+          <tr>
+            <DataTableCell onClick={onClick}>Cell content</DataTableCell>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    const cell = screen.getByText('Cell content')
+    const td = cell.closest('td')
+
+    // Apply focus to cell
+    fireEvent.keyUp(cell, { key: 'Enter' })
+    expect(td).toHaveStyleRule('outline', '1px solid #6C43E0', {
+      modifier: ':focus',
+    })
+
+    userEvent.click(cell)
+
+    /**
+     * TODO: Missing coverage
+     * Frustratingly, this doesn't work in test but appears to work properly in real-world
+     *
+     *   expect(td).toHaveStyleRule('outline', 'none', {
+     *   modifier: ':focus',
+     * })
+     */
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  test('tabIndex set properly on tabbable ', () => {
+    renderWithTheme(
+      <table>
+        <tbody>
+          <tr>
+            <DataTableCell>
+              <button>Click here</button>
+            </DataTableCell>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    expect(screen.getByRole('button')).toHaveAttribute('tabIndex', '-1')
+  })
+
+  test('onBlur callback', () => {
+    const onBlur = jest.fn()
+
+    renderWithTheme(
+      <table>
+        <tbody>
+          <tr>
+            <DataTableCell onBlur={onBlur}>Cell content</DataTableCell>
+          </tr>
+        </tbody>
+      </table>
+    )
+
+    const cell = screen.getByText('Cell content')
+    cell.focus()
+
+    userEvent.tab()
+    expect(onBlur).toHaveBeenCalledTimes(1)
+  })
+})

packages/components/snapshots/Accordion/Customized Indicator-snap.png

@@ -31,6 +31,9 @@ import React, {
   useEffect,
   useRef,
   useState,
+  FocusEvent,
+  KeyboardEvent,
+  MouseEvent,
 } from 'react'
 import styled from 'styled-components'
 import { CompatibleHTMLProps } from '@looker/design-tokens'
@@ -51,26 +54,31 @@ export interface DataTableCellProps
 
 const DataTableCellLayout = forwardRef(
   (props: DataTableCellProps, forwardedRef: Ref<HTMLElement>) => {
-    const { children, description, indicator, onBlur, onKeyUp, size } = props
+    const {
+      children,
+      description,
+      indicator,
+      onBlur,
+      onClick,
+      onKeyUp,
+      size,
+    } = props
 
     const [isFocusVisible, setFocusVisible] = useState(false)
 
-    const handleOnKeyUp = (
-      event: React.KeyboardEvent<HTMLTableDataCellElement>
-    ) => {
+    const handleOnKeyUp = (event: KeyboardEvent<HTMLTableDataCellElement>) => {
       setFocusVisible(true)
       onKeyUp && onKeyUp(event)
     }
 
-    const handleOnBlur = (
-      event: React.FocusEvent<HTMLTableDataCellElement>
-    ) => {
+    const handleOnBlur = (event: FocusEvent<HTMLTableDataCellElement>) => {
       setFocusVisible(false)
       onBlur && onBlur(event)
     }
 
-    const onClick = () => {
+    const handleOnClick = (event: MouseEvent<HTMLTableDataCellElement>) => {
       setFocusVisible(false)
+      onClick && onClick(event)
     }
 
     let content =
@@ -120,7 +128,7 @@ const DataTableCellLayout = forwardRef(
       <FocusableCell
         focusVisible={isFocusVisible}
         onBlur={handleOnBlur}
-        onClick={onClick}
+        onClick={handleOnClick}
         onKeyUp={handleOnKeyUp}
         ref={forkedRef}
         {...props}