test: Small collection of miscellaneous test coverage fix-ups (#2083)

Author: Luke Bowerman

packages/components-test-utils/src/snapshot.tsx

@@ -26,14 +26,8 @@
 
 import 'jest-styled-components'
 import { ReactElement } from 'react'
-import { createWithTheme, shallowWithTheme } from './create_with_theme'
+import { createWithTheme } from './create_with_theme'
 
 export const assertSnapshot = <T extends {}>(element: ReactElement<T>) => {
   expect(createWithTheme(element).toJSON()).toMatchSnapshot()
 }
-
-export const assertSnapshotShallow = <T extends {}>(
-  element: ReactElement<T>
-) => {
-  expect(shallowWithTheme(element)).toMatchSnapshot()
-}

packages/components/src/Dialog/Dialog.test.tsx

@@ -47,6 +47,13 @@ describe('Dialog', () => {
     expect(screen.queryByText('Dialog content')).not.toBeInTheDocument()
   })
 
+  test('Placement functions', () => {
+    renderWithTheme(
+      <Dialog isOpen placement="top" content={<SimpleContent />} />
+    )
+    expect(screen.queryByText('Dialog content')).toBeInTheDocument()
+  })
+
   test('defaultOpen', async () => {
     renderWithTheme(<Dialog defaultOpen content={<DialogMediumContent />} />)
     expect(screen.queryByText(/We the People/)).toBeInTheDocument()
@@ -274,5 +281,25 @@ describe('Dialog', () => {
         '24.5rem'
       )
     })
+
+    test('Dialog without content throws console warning', () => {
+      const globalConsole = global.console
+      const errorMock = jest.fn()
+
+      global.console = ({
+        error: errorMock,
+      } as unknown) as Console
+
+      renderWithTheme(<Dialog />)
+      expect(errorMock.mock.calls).toMatchInlineSnapshot(`
+        Array [
+          Array [
+            "Dialog cannot be used without specifying content",
+          ],
+        ]
+      `)
+
+      global.console = globalConsole
+    })
   })
 })

packages/components/src/Form/Fields/Field.test.tsx

@@ -0,0 +1,41 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2021 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 { screen } from '@testing-library/react'
+import { Field } from './Field'
+
+describe('Field', () => {
+  test('Hidden labels', () => {
+    renderWithTheme(
+      <Field id="test" hideLabel label="hello!">
+        <input id="test" type="text" />
+      </Field>
+    )
+    screen.getByText('hello!')
+  })
+})

packages/components/src/Form/Inputs/InputText/InputText.test.tsx

@@ -72,6 +72,11 @@ describe('InputText', () => {
     expect(screen.getByRole('textbox')).toHaveAttribute('readonly')
   })
 
+  test('should accept type', () => {
+    renderWithTheme(<InputText type="tel" />)
+    expect(screen.getByRole('textbox')).toHaveAttribute('type', 'tel')
+  })
+
   test('should accept required', () => {
     renderWithTheme(<InputText required />)
     expect(screen.getByRole('textbox')).toBeRequired()
@@ -116,6 +121,15 @@ describe('InputText', () => {
       expect(getByText('after')).toBeVisible()
     })
 
+    test('Simple string', () => {
+      const { getByText } = renderWithTheme(
+        <InputText before="before" after="after" />
+      )
+
+      expect(getByText('before')).toBeVisible()
+      expect(getByText('after')).toBeVisible()
+    })
+
     test('icons', () => {
       const { getByTitle } = renderWithTheme(
         <InputText

packages/components/src/Form/Inputs/InputTime/InputTime.tsx

@@ -55,13 +55,13 @@ import {
   SimpleLayoutProps,
 } from '../../../Layout/utils/simple'
 import { getAutoFocusProps } from '../InputProps'
+import { ValidationType } from '../../ValidationMessage'
 import {
   formatTimeString,
   TimeFormats,
   parseBase10Int,
   isValidTime,
-} from '../utils'
-import { ValidationType } from '../../ValidationMessage'
+} from './utils'
 
 export interface InputTimeProps extends Omit<SimpleLayoutProps, 'size'> {
   'aria-describedby'?: string

…ages/components/src/Form/Inputs/utils.ts …nents/src/Form/Inputs/InputTime/utils.tspackages/components/src/Form/Inputs/utils.ts renamed to packages/components/src/Form/Inputs/InputTime/utils.ts packages/components/src/Form/Inputs/utils.ts renamed to packages/components/src/Form/Inputs/InputTime/utils.ts

@@ -30,18 +30,6 @@ import map from 'lodash/map'
 
 export type TimeFormats = '12h' | '24h'
 
-// if format is `12h`, repeat hours 1-12 twice
-export const cycleHourDisplay = (format: TimeFormats, hour: number) => {
-  if (format === '12h') {
-    if (hour === 0) {
-      return 12 // 12:00 am
-    } else if (hour > 12) {
-      return hour - 12 // 1:00 pm - 11:00 pm
-    }
-  }
-  return hour
-}
-
 // returns "01", "02", "03" instead of integers 1, 2, 3
 export const formatTimeString = (number: number) => {
   return padStart(toString(number), 2, '0')

packages/components/src/Form/Inputs/InputTimeSelect/InputTimeSelect.tsx

@@ -64,7 +64,7 @@ import {
   parseBase10Int,
   isValidTime,
   TimeFormats,
-} from '../utils'
+} from '../InputTime/utils'
 
 /*
  * We've limited allowed intervals to a few approved options rather than