Skip to content

Commit 2066225

Browse files
shlokaminshlokamin
authored
test(protocol-designer, labware-library): update cypress (#14971)
closes AUTH-219 and AUTH-220
1 parent c3d6678 commit 2066225

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

57 files changed

+3331
-3570
lines changed

‎app/src/atoms/Link/__tests__/ExternalLink.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ describe('ExternalLink', () => {
2929
const link = screen.getByText('Test Link')
3030
expect(link).toHaveAttribute('href', 'https://opentrons.com')
3131
expect(link).toHaveAttribute('target', '_blank')
32-
expect(link).toHaveStyle(`color: ${COLORS.blue55}`)
32+
expect(link).toHaveStyle(`color: ${COLORS.blue50}`)
3333
})
3434

3535
it('renders open-in-new icon', () => {

‎app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx

Lines changed: 1 addition & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -28,47 +28,7 @@ describe('OverflowBtn', () => {
2828
})
2929

3030
expect(getByRole('button')).toHaveStyle(
31-
`background-color: ${COLORS.grey35}`
32-
)
33-
})
34-
35-
it('renders an active state', () => {
36-
const { getByRole } = render({
37-
onClick: vi.fn(),
38-
})
39-
40-
expect(getByRole('button')).toHaveStyle(
41-
`background-color: ${String(COLORS.grey35)}`
42-
)
43-
})
44-
45-
it.skip('renders a focus state', () => {
46-
const { getByRole } = render({
47-
onClick: vi.fn(),
48-
})
49-
50-
// @ts-expect-error Refactor to test modifier states.
51-
expect(getByRole('button')).toHaveStyleRule(
52-
'box-shadow',
53-
`0 0 0 3px ${String(COLORS.yellow50)}`,
54-
{
55-
modifier: ':focus-visible',
56-
}
57-
)
58-
})
59-
60-
it.skip('renders a disabled state', () => {
61-
const { getByRole } = render({
62-
onClick: vi.fn(),
63-
})
64-
65-
// @ts-expect-error Refactor to test modifier states.
66-
expect(getByRole('button')).toHaveStyleRule(
67-
'fill',
68-
`${String(COLORS.grey40)}`,
69-
{
70-
modifier: ':disabled circle',
71-
}
31+
`background-color: ${COLORS.transparent}`
7232
)
7333
})
7434
})

‎app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react'
22
import { describe, it, expect, vi, beforeEach } from 'vitest'
33
import '@testing-library/jest-dom/vitest'
4-
import { fireEvent, screen } from '@testing-library/react'
4+
import { screen } from '@testing-library/react'
55
import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '@opentrons/components'
66

77
import { i18n } from '../../../i18n'
@@ -30,7 +30,7 @@ describe('FloatingActionButton', () => {
3030
expect(button).toHaveStyle(
3131
`padding: ${SPACING.spacing12} ${SPACING.spacing24}`
3232
)
33-
expect(button).toHaveStyle(`background-color: ${COLORS.purple55}`)
33+
expect(button).toHaveStyle(`background-color: ${COLORS.purple50}`)
3434
expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSize28}`)
3535
expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
3636
expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight36}`)
@@ -47,14 +47,5 @@ describe('FloatingActionButton', () => {
4747
render(props)
4848
const button = screen.getByRole('button')
4949
expect(button).toBeDisabled()
50-
expect(button).toHaveStyle(`background-color: ${COLORS.grey35}`)
51-
expect(button).toHaveStyle(`color: ${COLORS.grey50}`)
52-
})
53-
54-
it('applies the correct states to the unselected floating action button - active', () => {
55-
render(props)
56-
const button = screen.getByRole('button')
57-
fireEvent.mouseLeave(button)
58-
expect(button).toHaveStyle(`background-color : ${COLORS.purple55}`)
5950
})
6051
})

‎app/src/atoms/buttons/__tests__/LargeButton.test.tsx

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,9 +24,6 @@ describe('LargeButton', () => {
2424
render(props)
2525
fireEvent.click(screen.getByText('large button'))
2626
expect(props.onClick).toHaveBeenCalled()
27-
expect(screen.getByRole('button')).toHaveStyle(
28-
`background-color: ${COLORS.blue60}`
29-
)
3027
})
3128
it('renders the alert button', () => {
3229
props = {
@@ -35,7 +32,7 @@ describe('LargeButton', () => {
3532
}
3633
render(props)
3734
expect(screen.getByRole('button')).toHaveStyle(
38-
`background-color: ${COLORS.red40}`
35+
`background-color: ${COLORS.red35}`
3936
)
4037
})
4138
it('renders the secondary button', () => {
@@ -45,7 +42,7 @@ describe('LargeButton', () => {
4542
}
4643
render(props)
4744
expect(screen.getByRole('button')).toHaveStyle(
48-
`background-color: ${COLORS.blue40}`
45+
`background-color: ${COLORS.blue35}`
4946
)
5047
})
5148
it('renders the button as disabled', () => {

‎app/src/atoms/buttons/__tests__/MediumButton.test.tsx

Lines changed: 11 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,31 +24,36 @@ describe('MediumButton', () => {
2424
render(props)
2525
fireEvent.click(screen.getByText('Medium button'))
2626
expect(props.onClick).toHaveBeenCalled()
27-
expect(screen.getByRole('button')).toHaveStyle('background-color: #045dd0')
2827
})
2928
it('renders the alert button', () => {
3029
props = {
3130
...props,
3231
buttonType: 'alert',
3332
}
3433
render(props)
35-
expect(screen.getByRole('button')).toHaveStyle('background-color: #b91f20')
34+
expect(screen.getByRole('button')).toHaveStyle(
35+
`background-color: ${COLORS.red50}`
36+
)
3637
})
3738
it('renders the secondary button', () => {
3839
props = {
3940
...props,
4041
buttonType: 'secondary',
4142
}
4243
render(props)
43-
expect(screen.getByRole('button')).toHaveStyle('background-color: #94afd4')
44+
expect(screen.getByRole('button')).toHaveStyle(
45+
`background-color: ${COLORS.blue35}`
46+
)
4447
})
4548
it('renders the secondary alert button', () => {
4649
props = {
4750
...props,
4851
buttonType: 'alertSecondary',
4952
}
5053
render(props)
51-
expect(screen.getByRole('button')).toHaveStyle('background-color: #ccabac')
54+
expect(screen.getByRole('button')).toHaveStyle(
55+
`background-color: ${COLORS.red35}`
56+
)
5257
})
5358
it('renders the tertiary high button', () => {
5459
props = {
@@ -57,7 +62,7 @@ describe('MediumButton', () => {
5762
}
5863
render(props)
5964
expect(screen.getByRole('button')).toHaveStyle(
60-
`background-color: ${COLORS.grey35}`
65+
`background-color: ${COLORS.white}`
6166
)
6267
})
6368
it('renders the tertiary low light button', () => {
@@ -67,7 +72,7 @@ describe('MediumButton', () => {
6772
}
6873
render(props)
6974
expect(screen.getByRole('button')).toHaveStyle(
70-
`background-color: ${COLORS.grey35}`
75+
`background-color: ${COLORS.white}`
7176
)
7277
})
7378
it('renders the button as disabled', () => {

‎app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,19 @@
11
import * as React from 'react'
22
import '@testing-library/jest-dom/vitest'
3-
import { describe, it, expect, beforeEach } from 'vitest'
4-
import { screen, fireEvent } from '@testing-library/react'
3+
import { describe, it, expect, beforeEach, vi } from 'vitest'
4+
import { screen } from '@testing-library/react'
55
import { COLORS, SPACING, TYPOGRAPHY, BORDERS } from '@opentrons/components'
66
import { renderWithProviders } from '../../../__testing-utils__'
77

88
import { QuaternaryButton } from '..'
99

10+
vi.mock('styled-components', async () => {
11+
const actual = await vi.importActual(
12+
'styled-components/dist/styled-components.browser.esm.js'
13+
)
14+
return actual
15+
})
16+
1017
const render = (props: React.ComponentProps<typeof QuaternaryButton>) => {
1118
return renderWithProviders(<QuaternaryButton {...props} />)[0]
1219
}
@@ -25,7 +32,7 @@ describe('QuaternaryButton', () => {
2532
const button = screen.getByText('secondary tertiary button')
2633
expect(button).toHaveStyle(`background-color: ${COLORS.white}`)
2734
expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
28-
expect(button).toHaveStyle('box-shadow: 0 0 0')
35+
expect(button).toHaveStyle('box-shadow: none')
2936
expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
3037
expect(button).toHaveStyle(
3138
`padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
@@ -47,14 +54,6 @@ describe('QuaternaryButton', () => {
4754
expect(button).toHaveStyle('opacity: 50%')
4855
})
4956

50-
it('applies the correct states to the button - hover', () => {
51-
render(props)
52-
const button = screen.getByText('secondary tertiary button')
53-
fireEvent.mouseOver(button)
54-
expect(button).toHaveStyle('opacity: 70%')
55-
expect(button).toHaveStyle('box-shadow: 0 0 0')
56-
})
57-
5857
it('renders secondary tertiary button with text and different background color', () => {
5958
props.color = COLORS.red50
6059
render(props)

‎app/src/atoms/buttons/__tests__/RadioButton.test.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ describe('RadioButton', () => {
2727
}
2828
render(props)
2929
const label = screen.getByRole('label')
30-
expect(label).toHaveStyle(`background-color: ${COLORS.blue40}`)
30+
expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
3131
expect(label).toHaveStyle(`padding: ${SPACING.spacing24}`)
3232
})
3333
it('renders the large selected button', () => {
@@ -38,7 +38,7 @@ describe('RadioButton', () => {
3838
}
3939
render(props)
4040
const label = screen.getByRole('label')
41-
expect(label).toHaveStyle(`background-color: ${COLORS.blue60}`)
41+
expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
4242
expect(label).toHaveStyle(`padding: ${SPACING.spacing24}`)
4343
})
4444
it('renders the small button', () => {
@@ -48,7 +48,7 @@ describe('RadioButton', () => {
4848
}
4949
render(props)
5050
const label = screen.getByRole('label')
51-
expect(label).toHaveStyle(`background-color: ${COLORS.blue40}`)
51+
expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
5252
expect(label).toHaveStyle(`padding: ${SPACING.spacing20}`)
5353
})
5454
it('renders the small selected button', () => {
@@ -59,7 +59,7 @@ describe('RadioButton', () => {
5959
}
6060
render(props)
6161
const label = screen.getByRole('label')
62-
expect(label).toHaveStyle(`background-color: ${COLORS.blue60}`)
62+
expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
6363
expect(label).toHaveStyle(`padding: ${SPACING.spacing20}`)
6464
})
6565
})

‎app/src/atoms/buttons/__tests__/SmallButton.test.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ describe('SmallButton', () => {
2525
fireEvent.click(screen.getByText('small button'))
2626
expect(props.onClick).toHaveBeenCalled()
2727
expect(screen.getByRole('button')).toHaveStyle(
28-
`background-color: ${COLORS.blue60}`
28+
`background-color: ${COLORS.blue50}`
2929
)
3030
expect(screen.getByRole('button')).toHaveStyle(
3131
`border-radius: ${BORDERS.borderRadius16}`
@@ -38,7 +38,7 @@ describe('SmallButton', () => {
3838
}
3939
render(props)
4040
expect(screen.getByRole('button')).toHaveStyle(
41-
`background-color: ${COLORS.red55}`
41+
`background-color: ${COLORS.red50}`
4242
)
4343
})
4444
it('renders the secondary button', () => {
@@ -48,7 +48,7 @@ describe('SmallButton', () => {
4848
}
4949
render(props)
5050
expect(screen.getByRole('button')).toHaveStyle(
51-
`background-color: ${COLORS.blue40}`
51+
`background-color: ${COLORS.blue35}`
5252
)
5353
})
5454
it('renders the tertiary high light button', () => {

‎app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe('SubmitPrimaryButton', () => {
2828
it('renders submit primary button with text - active', () => {
2929
render(props)
3030
const button = screen.getByText('submit primary button')
31-
expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
31+
expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
3232
expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
3333
expect(button).toHaveStyle(
3434
`padding: ${SPACING.spacing8} ${SPACING.spacing16}`

‎app/src/atoms/buttons/__tests__/TabbedButton.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ describe('Unselected TabbedButton', () => {
2323
it('renders unselected tabbed button with text', () => {
2424
render(props)
2525
const button = screen.getByText('tabbed button')
26-
expect(button).toHaveStyle(`background-color: ${COLORS.purple40}`)
26+
expect(button).toHaveStyle(`background-color: ${COLORS.purple35}`)
2727
expect(button).toHaveStyle(
2828
`padding: ${SPACING.spacing16} ${SPACING.spacing24}`
2929
)
@@ -68,7 +68,7 @@ describe('Selected TabbedButton', () => {
6868
it('renders selected tabbed button with text', () => {
6969
render(props)
7070
const button = screen.getByText('tabbed button')
71-
expect(button).toHaveStyle(`background-color: ${COLORS.purple55}`)
71+
expect(button).toHaveStyle(`background-color: ${COLORS.purple50}`)
7272
expect(button).toHaveStyle(
7373
`padding: ${SPACING.spacing16} ${SPACING.spacing24}`
7474
)

‎app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ describe('TertiaryButton', () => {
2222
it('renders tertiary button with text', () => {
2323
render(props)
2424
const button = screen.getByText('tertiary button')
25-
expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
25+
expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
2626
expect(button).toHaveStyle(
2727
`padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
2828
)
@@ -52,7 +52,7 @@ describe('TertiaryButton', () => {
5252
props.backgroundColor = COLORS.red50
5353
render(props)
5454
const button = screen.getByText('tertiary button')
55-
expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
55+
expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
5656
expect(button).toHaveStyle(`color: ${COLORS.white}`)
5757
})
5858
})

‎app/src/atoms/buttons/__tests__/ToggleButton.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe('ToggleButton', () => {
2828
it('renders toggle button - on', () => {
2929
render(props)
3030
const button = screen.getByLabelText('toggle button')
31-
expect(button).toHaveStyle(`color: ${COLORS.blue55}`)
31+
expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
3232
expect(button).toHaveStyle(`height: ${SIZE_2}`)
3333
expect(button).toHaveStyle(`width: ${SIZE_2}`)
3434
expect(button).toHaveAttribute('aria-checked', 'true')
@@ -52,7 +52,7 @@ describe('ToggleButton', () => {
5252
props.toggledOn = false
5353
render(props)
5454
const button = screen.getByLabelText('toggle button')
55-
expect(button).toHaveStyle(`color: ${COLORS.grey55}`)
55+
expect(button).toHaveStyle(`color: ${COLORS.grey50}`)
5656
expect(button).toHaveStyle(`height: ${SIZE_2}`)
5757
expect(button).toHaveStyle(`width: ${SIZE_2}`)
5858
expect(button).toHaveAttribute('aria-checked', 'false')

‎app/src/molecules/CardButton/__tests__/CardButton.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ describe('CardButton', () => {
4949
screen.getByText('Find a network in your lab or enter your own.')
5050
expect(screen.getByTestId('cardButton_icon_wifi')).toBeInTheDocument()
5151
const button = screen.getByRole('button')
52-
expect(button).toHaveStyle(`background-color: ${COLORS.blue40}`)
52+
expect(button).toHaveStyle(`background-color: ${COLORS.blue35}`)
5353
})
5454

5555
it('renders the button as disabled', () => {

‎app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@ describe('MiniCard', () => {
2525
it('renders the correct style unselectedOptionStyles', () => {
2626
render(props)
2727
const miniCard = screen.getByText('mock mini card')
28-
expect(miniCard).toHaveStyle(`background-color: ${COLORS.grey10}`)
29-
expect(miniCard).toHaveStyle(`border: 1px solid ${COLORS.grey35}`)
28+
expect(miniCard).toHaveStyle(`background-color: ${COLORS.white}`)
29+
expect(miniCard).toHaveStyle(`border: 1px solid ${COLORS.grey30}`)
3030
expect(miniCard).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
3131
expect(miniCard).toHaveStyle(`padding: ${SPACING.spacing8}`)
3232
expect(miniCard).toHaveStyle(`width: 100%`)

‎app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ describe('ModuleIcon', () => {
5858
it('renders SharedIcon with correct style', () => {
5959
render(props)
6060
const module = screen.getByTestId('ModuleIcon_ot-temperature-v2')
61-
expect(module).toHaveStyle(`color: ${COLORS.black90}`)
61+
expect(module).toHaveStyle(`color: ${COLORS.grey60}`)
6262
expect(module).toHaveStyle(`height: ${SPACING.spacing16}`)
6363
expect(module).toHaveStyle(`width: ${SPACING.spacing16}`)
6464
expect(module).toHaveStyle(`margin-left: ${SPACING.spacing2}`)

‎app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ describe('RecentRunProtocolCard', () => {
250250
it('when tapping a card, mock functions is called and loading state is activated', () => {
251251
render(props)
252252
const button = screen.getByLabelText('RecentRunProtocolCard')
253-
expect(button).toHaveStyle(`background-color: ${COLORS.green40}`)
253+
expect(button).toHaveStyle(`background-color: ${COLORS.green35}`)
254254
fireEvent.click(button)
255255
expect(mockTrackEvent).toHaveBeenCalledWith({
256256
name: ANALYTICS_PROTOCOL_PROCEED_TO_RUN,

0 commit comments

Comments
 (0)