Skip to content

Commit 43d9985

Browse files
shlokaminshlokamin
committed
fix more unit tests and e2e tests
1 parent cf769f0 commit 43d9985

File tree

22 files changed

+71
-130
lines changed

22 files changed

+71
-130
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: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import * as React from 'react'
22
import { vi, it, expect, describe } from 'vitest'
3-
import { fireEvent } from '@testing-library/react'
3+
import { fireEvent, waitFor, screen, prettyDOM } from '@testing-library/react'
44
import { COLORS } from '@opentrons/components'
55

66
import { renderWithProviders } from '../../../__testing-utils__'
@@ -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: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -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,6 @@ 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}`)
5250
})
5351

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}`)
59-
})
6052
})

‎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: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
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, fireEvent, waitFor, prettyDOM } from '@testing-library/react'
5+
import userEvent from '@testing-library/user-event'
56
import { COLORS, SPACING, TYPOGRAPHY, BORDERS } from '@opentrons/components'
67
import { renderWithProviders } from '../../../__testing-utils__'
78

89
import { QuaternaryButton } from '..'
910

11+
vi.mock('styled-components', async () => {
12+
const actual = await vi.importActual(
13+
'styled-components/dist/styled-components.browser.esm.js'
14+
)
15+
return actual
16+
})
17+
1018
const render = (props: React.ComponentProps<typeof QuaternaryButton>) => {
1119
return renderWithProviders(<QuaternaryButton {...props} />)[0]
1220
}
@@ -25,7 +33,7 @@ describe('QuaternaryButton', () => {
2533
const button = screen.getByText('secondary tertiary button')
2634
expect(button).toHaveStyle(`background-color: ${COLORS.white}`)
2735
expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
28-
expect(button).toHaveStyle('box-shadow: 0 0 0')
36+
expect(button).toHaveStyle('box-shadow: none')
2937
expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
3038
expect(button).toHaveStyle(
3139
`padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
@@ -47,14 +55,6 @@ describe('QuaternaryButton', () => {
4755
expect(button).toHaveStyle('opacity: 50%')
4856
})
4957

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-
5858
it('renders secondary tertiary button with text and different background color', () => {
5959
props.color = COLORS.red50
6060
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
)

0 commit comments

Comments
 (0)