test(protocol-designer, labware-library): update cypress (#14971)

closes AUTH-219 and AUTH-220
Opentrons · May 6, 2024 · 2066225 · 2066225
1 parent c3d6678
commit 2066225
Show file tree

Hide file tree

Showing 57 changed files with 3,331 additions and 3,570 deletions.
diff --git a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx
@@ -29,7 +29,7 @@ describe('ExternalLink', () => {
     const link = screen.getByText('Test Link')
     expect(link).toHaveAttribute('href', 'https://opentrons.com')
     expect(link).toHaveAttribute('target', '_blank')
-    expect(link).toHaveStyle(`color: ${COLORS.blue55}`)
+    expect(link).toHaveStyle(`color: ${COLORS.blue50}`)
   })
 
   it('renders open-in-new icon', () => {

diff --git a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx b/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx
@@ -28,47 +28,7 @@ describe('OverflowBtn', () => {
     })
 
     expect(getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.grey35}`
-    )
-  })
-
-  it('renders an active state', () => {
-    const { getByRole } = render({
-      onClick: vi.fn(),
-    })
-
-    expect(getByRole('button')).toHaveStyle(
-      `background-color: ${String(COLORS.grey35)}`
-    )
-  })
-
-  it.skip('renders a focus state', () => {
-    const { getByRole } = render({
-      onClick: vi.fn(),
-    })
-
-    // @ts-expect-error Refactor to test modifier states.
-    expect(getByRole('button')).toHaveStyleRule(
-      'box-shadow',
-      `0 0 0 3px ${String(COLORS.yellow50)}`,
-      {
-        modifier: ':focus-visible',
-      }
-    )
-  })
-
-  it.skip('renders a disabled state', () => {
-    const { getByRole } = render({
-      onClick: vi.fn(),
-    })
-
-    // @ts-expect-error Refactor to test modifier states.
-    expect(getByRole('button')).toHaveStyleRule(
-      'fill',
-      `${String(COLORS.grey40)}`,
-      {
-        modifier: ':disabled circle',
-      }
+      `background-color: ${COLORS.transparent}`
     )
   })
 })
diff --git a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { describe, it, expect, vi, beforeEach } from 'vitest'
 import '@testing-library/jest-dom/vitest'
-import { fireEvent, screen } from '@testing-library/react'
+import { screen } from '@testing-library/react'
 import { BORDERS, COLORS, SPACING, TYPOGRAPHY } from '@opentrons/components'
 
 import { i18n } from '../../../i18n'
@@ -30,7 +30,7 @@ describe('FloatingActionButton', () => {
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing12} ${SPACING.spacing24}`
     )
-    expect(button).toHaveStyle(`background-color: ${COLORS.purple55}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.purple50}`)
     expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSize28}`)
     expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
     expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight36}`)
@@ -47,14 +47,5 @@ describe('FloatingActionButton', () => {
     render(props)
     const button = screen.getByRole('button')
     expect(button).toBeDisabled()
-    expect(button).toHaveStyle(`background-color: ${COLORS.grey35}`)
-    expect(button).toHaveStyle(`color: ${COLORS.grey50}`)
-  })
-
-  it('applies the correct states to the unselected floating action button - active', () => {
-    render(props)
-    const button = screen.getByRole('button')
-    fireEvent.mouseLeave(button)
-    expect(button).toHaveStyle(`background-color : ${COLORS.purple55}`)
   })
 })
diff --git a/app/src/atoms/buttons/__tests__/LargeButton.test.tsx b/app/src/atoms/buttons/__tests__/LargeButton.test.tsx
@@ -24,9 +24,6 @@ describe('LargeButton', () => {
     render(props)
     fireEvent.click(screen.getByText('large button'))
     expect(props.onClick).toHaveBeenCalled()
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.blue60}`
-    )
   })
   it('renders the alert button', () => {
     props = {
@@ -35,7 +32,7 @@ describe('LargeButton', () => {
     }
     render(props)
     expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.red40}`
+      `background-color: ${COLORS.red35}`
     )
   })
   it('renders the secondary button', () => {
@@ -45,7 +42,7 @@ describe('LargeButton', () => {
     }
     render(props)
     expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.blue40}`
+      `background-color: ${COLORS.blue35}`
     )
   })
   it('renders the button as disabled', () => {

diff --git a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx
@@ -24,31 +24,36 @@ describe('MediumButton', () => {
     render(props)
     fireEvent.click(screen.getByText('Medium button'))
     expect(props.onClick).toHaveBeenCalled()
-    expect(screen.getByRole('button')).toHaveStyle('background-color: #045dd0')
   })
   it('renders the alert button', () => {
     props = {
       ...props,
       buttonType: 'alert',
     }
     render(props)
-    expect(screen.getByRole('button')).toHaveStyle('background-color: #b91f20')
+    expect(screen.getByRole('button')).toHaveStyle(
+      `background-color: ${COLORS.red50}`
+    )
   })
   it('renders the secondary button', () => {
     props = {
       ...props,
       buttonType: 'secondary',
     }
     render(props)
-    expect(screen.getByRole('button')).toHaveStyle('background-color: #94afd4')
+    expect(screen.getByRole('button')).toHaveStyle(
+      `background-color: ${COLORS.blue35}`
+    )
   })
   it('renders the secondary alert button', () => {
     props = {
       ...props,
       buttonType: 'alertSecondary',
     }
     render(props)
-    expect(screen.getByRole('button')).toHaveStyle('background-color: #ccabac')
+    expect(screen.getByRole('button')).toHaveStyle(
+      `background-color: ${COLORS.red35}`
+    )
   })
   it('renders the tertiary high button', () => {
     props = {
@@ -57,7 +62,7 @@ describe('MediumButton', () => {
     }
     render(props)
     expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.grey35}`
+      `background-color: ${COLORS.white}`
     )
   })
   it('renders the tertiary low light button', () => {
@@ -67,7 +72,7 @@ describe('MediumButton', () => {
     }
     render(props)
     expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.grey35}`
+      `background-color: ${COLORS.white}`
     )
   })
   it('renders the button as disabled', () => {

diff --git a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx
@@ -1,12 +1,19 @@
 import * as React from 'react'
 import '@testing-library/jest-dom/vitest'
-import { describe, it, expect, beforeEach } from 'vitest'
-import { screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { screen } from '@testing-library/react'
 import { COLORS, SPACING, TYPOGRAPHY, BORDERS } from '@opentrons/components'
 import { renderWithProviders } from '../../../__testing-utils__'
 
 import { QuaternaryButton } from '..'
 
+vi.mock('styled-components', async () => {
+  const actual = await vi.importActual(
+    'styled-components/dist/styled-components.browser.esm.js'
+  )
+  return actual
+})
+
 const render = (props: React.ComponentProps<typeof QuaternaryButton>) => {
   return renderWithProviders(<QuaternaryButton {...props} />)[0]
 }
@@ -25,7 +32,7 @@ describe('QuaternaryButton', () => {
     const button = screen.getByText('secondary tertiary button')
     expect(button).toHaveStyle(`background-color: ${COLORS.white}`)
     expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadiusFull}`)
-    expect(button).toHaveStyle('box-shadow: 0 0 0')
+    expect(button).toHaveStyle('box-shadow: none')
     expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
@@ -47,14 +54,6 @@ describe('QuaternaryButton', () => {
     expect(button).toHaveStyle('opacity: 50%')
   })
 
-  it('applies the correct states to the button - hover', () => {
-    render(props)
-    const button = screen.getByText('secondary tertiary button')
-    fireEvent.mouseOver(button)
-    expect(button).toHaveStyle('opacity: 70%')
-    expect(button).toHaveStyle('box-shadow: 0 0 0')
-  })
-
   it('renders secondary tertiary button with text and different background color', () => {
     props.color = COLORS.red50
     render(props)

diff --git a/app/src/atoms/buttons/__tests__/RadioButton.test.tsx b/app/src/atoms/buttons/__tests__/RadioButton.test.tsx
@@ -27,7 +27,7 @@ describe('RadioButton', () => {
     }
     render(props)
     const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue40}`)
+    expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
     expect(label).toHaveStyle(`padding: ${SPACING.spacing24}`)
   })
   it('renders the large selected button', () => {
@@ -38,7 +38,7 @@ describe('RadioButton', () => {
     }
     render(props)
     const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue60}`)
+    expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
     expect(label).toHaveStyle(`padding: ${SPACING.spacing24}`)
   })
   it('renders the small button', () => {
@@ -48,7 +48,7 @@ describe('RadioButton', () => {
     }
     render(props)
     const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue40}`)
+    expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
     expect(label).toHaveStyle(`padding: ${SPACING.spacing20}`)
   })
   it('renders the small selected button', () => {
@@ -59,7 +59,7 @@ describe('RadioButton', () => {
     }
     render(props)
     const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue60}`)
+    expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
     expect(label).toHaveStyle(`padding: ${SPACING.spacing20}`)
   })
 })
diff --git a/app/src/atoms/buttons/__tests__/SmallButton.test.tsx b/app/src/atoms/buttons/__tests__/SmallButton.test.tsx
@@ -25,7 +25,7 @@ describe('SmallButton', () => {
     fireEvent.click(screen.getByText('small button'))
     expect(props.onClick).toHaveBeenCalled()
     expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.blue60}`
+      `background-color: ${COLORS.blue50}`
     )
     expect(screen.getByRole('button')).toHaveStyle(
       `border-radius: ${BORDERS.borderRadius16}`
@@ -38,7 +38,7 @@ describe('SmallButton', () => {
     }
     render(props)
     expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.red55}`
+      `background-color: ${COLORS.red50}`
     )
   })
   it('renders the secondary button', () => {
@@ -48,7 +48,7 @@ describe('SmallButton', () => {
     }
     render(props)
     expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.blue40}`
+      `background-color: ${COLORS.blue35}`
     )
   })
   it('renders the tertiary high light button', () => {

diff --git a/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx b/app/src/atoms/buttons/__tests__/SubmitPrimaryButton.test.tsx
@@ -28,7 +28,7 @@ describe('SubmitPrimaryButton', () => {
   it('renders submit primary button with text - active', () => {
     render(props)
     const button = screen.getByText('submit primary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
     expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16}`

diff --git a/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx b/app/src/atoms/buttons/__tests__/TabbedButton.test.tsx
@@ -23,7 +23,7 @@ describe('Unselected TabbedButton', () => {
   it('renders unselected tabbed button with text', () => {
     render(props)
     const button = screen.getByText('tabbed button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.purple40}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.purple35}`)
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
     )
@@ -68,7 +68,7 @@ describe('Selected TabbedButton', () => {
   it('renders selected tabbed button with text', () => {
     render(props)
     const button = screen.getByText('tabbed button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.purple55}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.purple50}`)
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing16} ${SPACING.spacing24}`
     )

diff --git a/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx b/app/src/atoms/buttons/__tests__/TertiaryButton.test.tsx
@@ -22,7 +22,7 @@ describe('TertiaryButton', () => {
   it('renders tertiary button with text', () => {
     render(props)
     const button = screen.getByText('tertiary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
     )
@@ -52,7 +52,7 @@ describe('TertiaryButton', () => {
     props.backgroundColor = COLORS.red50
     render(props)
     const button = screen.getByText('tertiary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
     expect(button).toHaveStyle(`color: ${COLORS.white}`)
   })
 })
diff --git a/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx b/app/src/atoms/buttons/__tests__/ToggleButton.test.tsx
@@ -28,7 +28,7 @@ describe('ToggleButton', () => {
   it('renders toggle button - on', () => {
     render(props)
     const button = screen.getByLabelText('toggle button')
-    expect(button).toHaveStyle(`color: ${COLORS.blue55}`)
+    expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
     expect(button).toHaveStyle(`height: ${SIZE_2}`)
     expect(button).toHaveStyle(`width: ${SIZE_2}`)
     expect(button).toHaveAttribute('aria-checked', 'true')
@@ -52,7 +52,7 @@ describe('ToggleButton', () => {
     props.toggledOn = false
     render(props)
     const button = screen.getByLabelText('toggle button')
-    expect(button).toHaveStyle(`color: ${COLORS.grey55}`)
+    expect(button).toHaveStyle(`color: ${COLORS.grey50}`)
     expect(button).toHaveStyle(`height: ${SIZE_2}`)
     expect(button).toHaveStyle(`width: ${SIZE_2}`)
     expect(button).toHaveAttribute('aria-checked', 'false')

diff --git a/app/src/molecules/CardButton/__tests__/CardButton.test.tsx b/app/src/molecules/CardButton/__tests__/CardButton.test.tsx
@@ -49,7 +49,7 @@ describe('CardButton', () => {
     screen.getByText('Find a network in your lab or enter your own.')
     expect(screen.getByTestId('cardButton_icon_wifi')).toBeInTheDocument()
     const button = screen.getByRole('button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue40}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue35}`)
   })
 
   it('renders the button as disabled', () => {

diff --git a/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx b/app/src/molecules/MiniCard/__tests__/MiniCard.test.tsx
@@ -25,8 +25,8 @@ describe('MiniCard', () => {
   it('renders the correct style unselectedOptionStyles', () => {
     render(props)
     const miniCard = screen.getByText('mock mini card')
-    expect(miniCard).toHaveStyle(`background-color: ${COLORS.grey10}`)
-    expect(miniCard).toHaveStyle(`border: 1px solid ${COLORS.grey35}`)
+    expect(miniCard).toHaveStyle(`background-color: ${COLORS.white}`)
+    expect(miniCard).toHaveStyle(`border: 1px solid ${COLORS.grey30}`)
     expect(miniCard).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
     expect(miniCard).toHaveStyle(`padding: ${SPACING.spacing8}`)
     expect(miniCard).toHaveStyle(`width: 100%`)

diff --git a/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx b/app/src/molecules/ModuleIcon/__tests__/ModuleIcon.test.tsx
@@ -58,7 +58,7 @@ describe('ModuleIcon', () => {
   it('renders SharedIcon with correct style', () => {
     render(props)
     const module = screen.getByTestId('ModuleIcon_ot-temperature-v2')
-    expect(module).toHaveStyle(`color: ${COLORS.black90}`)
+    expect(module).toHaveStyle(`color: ${COLORS.grey60}`)
     expect(module).toHaveStyle(`height: ${SPACING.spacing16}`)
     expect(module).toHaveStyle(`width: ${SPACING.spacing16}`)
     expect(module).toHaveStyle(`margin-left: ${SPACING.spacing2}`)

diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx
@@ -250,7 +250,7 @@ describe('RecentRunProtocolCard', () => {
   it('when tapping a card, mock functions is called and loading state is activated', () => {
     render(props)
     const button = screen.getByLabelText('RecentRunProtocolCard')
-    expect(button).toHaveStyle(`background-color: ${COLORS.green40}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.green35}`)
     fireEvent.click(button)
     expect(mockTrackEvent).toHaveBeenCalledWith({
       name: ANALYTICS_PROTOCOL_PROCEED_TO_RUN,