Skip to content

Commit

Permalink
migrate rest of components tests
Browse files Browse the repository at this point in the history
  • Loading branch information
jerader committed Feb 28, 2024
1 parent a0396ed commit 38a17a1
Show file tree
Hide file tree
Showing 8 changed files with 27 additions and 100 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react'
import { describe, beforeEach, afterEach, vi, expect } from 'vitest'
import { describe, beforeEach, afterEach, vi, expect, it } from 'vitest'
import { fireEvent, screen } from '@testing-library/react'
import '@testing-library/jest-dom/vitest'
import { ALIGN_CENTER, JUSTIFY_CENTER } from '../../../styles'
Expand Down Expand Up @@ -41,39 +41,13 @@ describe('CheckboxField', () => {
// INNER_STYLE_NO_VALUE
expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey60)}`)
expect(checkBoxIcon).toHaveStyle(`display: flex`)
expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`)
expect(checkBoxIcon).toHaveStyle(
`justify-content: ${String(JUSTIFY_CENTER)}`
)
expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
expect(checkBoxIcon).toHaveStyleRule('cursor', 'pointer', {
modifier: ':hover',
})
expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey60)}`, {
modifier: ':hover',
})
expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey60)}`, {
modifier: ':active',
})
expect(checkBoxIcon).toHaveStyleRule(
'box-shadow',
`0 0 0 3px ${String(COLORS.blue50)}`,
{ modifier: ':focus' }
)
expect(checkBoxIcon).toHaveStyleRule('color', `${String(COLORS.grey60)}`, {
modifier: ':disabled',
})

// TODO: kj 09/15/2022 This part will be update later OUTER_STYLE
// const checkBoxLabel = getByTestId('CheckboxField_label')
// expect(checkBoxLabel).toHaveStyle('font-size: 0.75rem')
// expect(checkBoxLabel).toHaveStyle('font-weight: 400')
// expect(checkBoxLabel).toHaveStyle(`color: ${COLORS.black90}`)
// expect(checkBoxLabel).toHaveStyle('display: flex')
// expect(checkBoxLabel).toHaveStyle(`align-items: ${ALIGN_CENTER}`)
// expect(checkBoxLabel).toHaveStyle('line-height: 1')

// INPUT_STYLE
expect(checkBoxInput).toHaveStyle(`position: absolute`)
Expand All @@ -98,10 +72,6 @@ describe('CheckboxField', () => {
expect(checkBoxFieldBox).toHaveStyle(
`padding: ${SPACING.spacing8} ${SPACING.spacing8}`
)
expect(checkBoxFieldBox).toHaveStyleRule('padding', '0', {
modifier: ':empty',
})
expect(checkBoxFieldBox).toHaveAttribute('tabindex', '0')
})

it('render icon with correct style - value true', () => {
Expand All @@ -110,7 +80,7 @@ describe('CheckboxField', () => {
const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.blue50)}`)
expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.blue60)}`)
expect(checkBoxIcon).toHaveStyle(`display: flex`)
expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`)
expect(checkBoxIcon).toHaveStyle(
Expand All @@ -119,13 +89,13 @@ describe('CheckboxField', () => {
expect(checkBoxIcon).toHaveStyle(`align-items: ${String(ALIGN_CENTER)}`)
})

it('renders label with correct style - value undefine', () => {
it('renders label with correct style - value undefined', () => {
props.value = undefined
render(props)
const checkBoxIcon = screen.getByTestId('CheckboxField_icon')
expect(checkBoxIcon).toHaveStyle(`width: 1.25rem`)
expect(checkBoxIcon).toHaveStyle(`min-width: 1.25rem`)
expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey60)}`)
expect(checkBoxIcon).toHaveStyle(`display: flex`)
expect(checkBoxIcon).toHaveStyle(`border-radius: 1px`)
expect(checkBoxIcon).toHaveStyle(
Expand Down
18 changes: 2 additions & 16 deletions components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -47,32 +47,18 @@ describe('PrimaryButton', () => {
expect(button).toHaveStyle(`color: ${COLORS.grey50}`)
})

it('applies the correct states to the button - focus', () => {
render(props)
const button = screen.getByText('primary button')
fireEvent.focus(button)
expect(button).toHaveStyle(`background-color: ${COLORS.blue55}`)
})

it('applies the correct states to the button - hover', () => {
render(props)
const button = screen.getByText('primary button')
fireEvent.mouseOver(button)
expect(button).toHaveStyle(`background-color: ${COLORS.blue55}`)
})

it('applies the correct states to the button - default', () => {
render(props)
const button = screen.getByText('primary button')
fireEvent.mouseLeave(button)
expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
})

it('renders primary button with text and different background color', () => {
props.backgroundColor = COLORS.red50
render(props)
const button = screen.getByText('primary button')
expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
expect(button).toHaveStyle(`color: ${COLORS.white}`)
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,6 @@ describe('SecondaryButton', () => {
props.color = COLORS.red50
render(props)
const button = screen.getByText('secondary button')
expect(button).toHaveStyle(`color: ${COLORS.red50}`)
expect(button).toHaveStyle(`color: ${COLORS.blue55}`)
})
})
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,7 @@ import * as React from 'react'
import { describe, it, vi, beforeEach } from 'vitest'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom/vitest'
import { when } from 'vitest-when'
import { fixture12Trough } from '@opentrons/shared-data'
import { componentPropsMatcher } from '../../../testing/utils'
import {
StaticLabwareComponent as StaticLabware,
WellLabelsComponent as WellLabels,
Expand All @@ -19,9 +17,7 @@ const troughFixture12 = fixture12Trough as LabwareDefinition2

describe('LabwareRender', () => {
beforeEach(() => {
when(StaticLabware)
.calledWith(componentPropsMatcher({ definition: troughFixture12 }))
.thenReturn(<div>mock static labware</div>)
vi.mocked(StaticLabware).mockReturnValue(<div>mock static labware</div>)
})

it('should render a static labware component', () => {
Expand All @@ -35,14 +31,7 @@ describe('LabwareRender', () => {
})
it('should render stroked wells', () => {
const props = { definition: troughFixture12, wellStroke: { A1: 'blue' } }
when(StrokedWells)
.calledWith(
componentPropsMatcher({
definition: troughFixture12,
strokeByWell: { A1: 'blue' },
})
)
.thenReturn(<div>mock stroked wells</div>)
vi.mocked(StrokedWells).mockReturnValue(<div>mock stroked wells</div>)
render(
<svg>
<LabwareRender {...props} />
Expand All @@ -55,14 +44,7 @@ describe('LabwareRender', () => {
definition: troughFixture12,
wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
}
when(WellLabels)
.calledWith(
componentPropsMatcher({
definition: troughFixture12,
wellLabelOption: WELL_LABEL_OPTIONS.SHOW_LABEL_INSIDE,
})
)
.thenReturn(<div>mock well labels</div>)
vi.mocked(WellLabels).mockReturnValue(<div>mock well labels</div>)
render(
<svg>
<LabwareRender {...props} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach } from 'vitest'
import { when } from 'vitest-when'
import { screen } from '@testing-library/react'
import { fixtureTiprack300ul as _fixtureTiprack300ul } from '@opentrons/shared-data'
import { anyProps, renderWithProviders } from '../../../testing/utils'
import { renderWithProviders } from '../../../testing/utils'
import { RobotCoordsForeignDiv } from '../../Deck/RobotCoordsForeignDiv'
import { PipetteRender } from '../PipetteRender'
import { EmanatingNozzle } from '../EmanatingNozzle'
Expand Down Expand Up @@ -46,9 +46,8 @@ describe('PipetteRender', () => {
</div>
))

when(EmanatingNozzle)
.calledWith(anyProps())
.thenReturn(<div>mock emanating nozzle</div>)
vi.mocked(EmanatingNozzle)
.mockReturnValue(<div>mock emanating nozzle</div>)
})

it('should render a rectangle with the correct dimensions', () => {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import * as React from 'react'

import { describe, it, beforeEach, expect } from 'vitest'
import { renderWithProviders } from '../../../testing/utils'
import { screen } from '@testing-library/react'
import { BORDERS, SPACING } from '../../../ui-style-constants'
import { COLORS } from '../../../helix-design-system'

Expand All @@ -20,8 +21,8 @@ describe('LocationIcon', () => {
})

it('should render the proper styles', () => {
const [{ getByTestId }] = render(props)
const locationIcon = getByTestId('LocationIcon_A1')
render(props)
const locationIcon = screen.getByTestId('LocationIcon_A1')
expect(locationIcon).toHaveStyle(`padding: ${SPACING.spacing4} 0.375rem`)
expect(locationIcon).toHaveStyle('height: 2rem')
expect(locationIcon).toHaveStyle('width: max-content')
Expand All @@ -32,15 +33,15 @@ describe('LocationIcon', () => {
})

it('should render slot name', () => {
const [{ getByText }] = render(props)
getByText('A1')
render(props)
screen.getByText('A1')
})

it('should render an icon', () => {
props = {
iconName: 'ot-temperature-v2',
}
const [{ getByLabelText }] = render(props)
getByLabelText(props.iconName as string)
render(props)
screen.getByLabelText(props.iconName as string)
})
})
14 changes: 1 addition & 13 deletions components/src/testing/utils/matchers.ts
Original file line number Diff line number Diff line change
@@ -1,27 +1,15 @@
import { when } from 'jest-when'
import { when } from 'vitest-when'
import type { Matcher } from '@testing-library/react'

// these are needed because under the hood react calls components with two arguments (props and some second argument nobody seems to know)
// https://github.com/timkindberg/jest-when/issues/66
// use componentPropsMatcher if you want to verify ALL props being passed into a component
export const componentPropsMatcher = (matcher: unknown): any =>
// @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
when.allArgs((args, equals) => equals(args[0], matcher))

// use partialComponentPropsMatcher to only verify the props you pass into partialComponentPropsMatcher
export const partialComponentPropsMatcher = (argsToMatch: unknown): any =>
// @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
when.allArgs((args, equals) =>
equals(args[0], expect.objectContaining(argsToMatch))
)

// use argAtIndex to only verify arguments at a specific index
export const argAtIndex = (index: number, matcher: unknown): any =>
// @ts-expect-error(sa, 2021-08-03): when.allArgs not part of type definition yet for jest-when
when.allArgs((args, equals) => equals(args[index], matcher))

export const anyProps = (): any => partialComponentPropsMatcher({})

// Match things like <p>Some <strong>nested</strong> text</p>
// Use with either string match: getByText(nestedTextMatcher("Some nested text"))
// or regexp: getByText(nestedTextMatcher(/Some nested text/))
Expand Down
7 changes: 4 additions & 3 deletions components/src/testing/utils/renderWithProviders.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import * as React from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'
import { I18nextProvider } from 'react-i18next'
import { Provider } from 'react-redux'
import { vi } from 'vitest'
import { render, RenderResult } from '@testing-library/react'
import { createStore } from 'redux'

Expand All @@ -23,11 +24,11 @@ export function renderWithProviders<State>(
const { initialState = {}, i18nInstance = null } = options || {}

const store: Store<State> = createStore(
jest.fn(),
vi.fn(),
initialState as PreloadedState<State>
)
store.dispatch = jest.fn()
store.getState = jest.fn(() => initialState) as () => State
store.dispatch = vi.fn()
store.getState = vi.fn(() => initialState) as () => State

const queryClient = new QueryClient()

Expand Down

0 comments on commit 38a17a1

Please sign in to comment.