more test fixes

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

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { vi, it, expect, describe } from 'vitest'
-import { fireEvent, waitFor, screen, prettyDOM } from '@testing-library/react'
+import { fireEvent } from '@testing-library/react'
 import { COLORS } from '@opentrons/components'
 
 import { renderWithProviders } from '../../../__testing-utils__'

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'
@@ -48,5 +48,4 @@ describe('FloatingActionButton', () => {
     const button = screen.getByRole('button')
     expect(button).toBeDisabled()
   })
-
 })

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

@@ -1,8 +1,7 @@
 import * as React from 'react'
 import '@testing-library/jest-dom/vitest'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
-import { screen, fireEvent, waitFor, prettyDOM } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
+import { screen } from '@testing-library/react'
 import { COLORS, SPACING, TYPOGRAPHY, BORDERS } from '@opentrons/components'
 import { renderWithProviders } from '../../../__testing-utils__'
 

components/Makefile

@@ -5,7 +5,7 @@ port ?= 6060
 
 # These variables can be overriden when make is invoked to customize the
 # behavior of jest
-tests ?=
+tests ?= src
 cov_opts ?= --coverage=true
 test_opts ?=
 

components/src/atoms/CheckboxField/__tests__/CheckboxField.test.tsx

@@ -41,7 +41,7 @@ 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.grey60)}`)
+    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
     expect(checkBoxIcon).toHaveStyle(
       `border-radius: ${String(BORDERS.borderRadius2)}`
@@ -82,7 +82,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.blue60)}`)
+    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.blue50)}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
     expect(checkBoxIcon).toHaveStyle(
       `border-radius: ${String(BORDERS.borderRadius2)}`
@@ -99,7 +99,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.grey60)}`)
+    expect(checkBoxIcon).toHaveStyle(`color: ${String(COLORS.grey50)}`)
     expect(checkBoxIcon).toHaveStyle(`display: flex`)
     expect(checkBoxIcon).toHaveStyle(
       `border-radius: ${String(BORDERS.borderRadius2)}`

components/src/atoms/buttons/__tests__/AlertPrimaryButton.test.tsx

@@ -24,7 +24,7 @@ describe('AlertPrimaryButton', () => {
   it('renders alert primary button with text', () => {
     render(props)
     const button = screen.getByText('alert primary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.red55}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
     expect(button).toHaveStyle(
       `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
     )

components/src/atoms/buttons/__tests__/PrimaryButton.test.tsx

@@ -23,7 +23,7 @@ describe('PrimaryButton', () => {
   it('renders primary button with text', () => {
     render(props)
     const button = screen.getByText('primary 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}`
     )
@@ -51,14 +51,14 @@ describe('PrimaryButton', () => {
     render(props)
     const button = screen.getByText('primary button')
     fireEvent.mouseOver(button)
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue60}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
   })
 
   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.blue60}`)
+    expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
     expect(button).toHaveStyle(`color: ${COLORS.white}`)
   })
 })

components/src/atoms/buttons/__tests__/SecondaryButton.test.tsx

@@ -35,7 +35,7 @@ describe('SecondaryButton', () => {
     expect(button).toHaveStyle(
       `text-transform: ${TYPOGRAPHY.textTransformNone}`
     )
-    expect(button).toHaveStyle(`color: ${COLORS.blue55}`)
+    expect(button).toHaveStyle(`color: ${COLORS.blue50}`)
   })
 
   it('renders secondary button with text and disabled', () => {
@@ -49,6 +49,6 @@ describe('SecondaryButton', () => {
     props.color = COLORS.red50
     render(props)
     const button = screen.getByText('secondary button')
-    expect(button).toHaveStyle(`color: ${COLORS.blue55}`)
+    expect(button).toHaveStyle(`color: ${COLORS.red50}`)
   })
 })

protocol-designer/src/components/modals/CreateFileWizard/__tests__/EquipmentOption.test.tsx

@@ -39,7 +39,7 @@ describe('EquipmentOption', () => {
     }
     render(props)
     expect(screen.getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle(
-      `background-color: ${COLORS.grey10}`
+      `background-color: ${COLORS.white}`
     )
   })
   it('renders the equipment option without check not selected and image', () => {
@@ -55,7 +55,7 @@ describe('EquipmentOption', () => {
       screen.getByLabelText('EquipmentOption_checkbox-blank-outline')
     ).toHaveStyle(`color: ${COLORS.grey50}`)
     expect(screen.getByLabelText('EquipmentOption_flex_mockText')).toHaveStyle(
-      `border: 1px ${BORDERS.styleSolid} ${COLORS.grey35}`
+      `border: 1px ${BORDERS.styleSolid} ${COLORS.grey30}`
     )
   })
   it('renders the equipment option without check selected', () => {