From 43d9985dfb0e0985ca39e1f28c96e6a702f3eef9 Mon Sep 17 00:00:00 2001 From: Shlok Amin Date: Fri, 26 Apr 2024 10:48:45 -0400 Subject: [PATCH] fix more unit tests and e2e tests --- .../Link/__tests__/ExternalLink.test.tsx | 2 +- .../MenuList/__tests__/OverflowBtn.test.tsx | 44 +------------------ .../__tests__/FloatingActionButton.test.tsx | 10 +---- .../buttons/__tests__/LargeButton.test.tsx | 7 +-- .../buttons/__tests__/MediumButton.test.tsx | 17 ++++--- .../__tests__/QuaternaryButton.test.tsx | 22 +++++----- .../buttons/__tests__/RadioButton.test.tsx | 8 ++-- .../buttons/__tests__/SmallButton.test.tsx | 6 +-- .../__tests__/SubmitPrimaryButton.test.tsx | 2 +- .../buttons/__tests__/TabbedButton.test.tsx | 4 +- .../buttons/__tests__/TertiaryButton.test.tsx | 4 +- .../buttons/__tests__/ToggleButton.test.tsx | 4 +- .../CardButton/__tests__/CardButton.test.tsx | 2 +- .../MiniCard/__tests__/MiniCard.test.tsx | 4 +- .../ModuleIcon/__tests__/ModuleIcon.test.tsx | 2 +- .../__tests__/RecentRunProtocolCard.test.tsx | 2 +- .../__tests__/ChoosePipette.test.tsx | 4 +- .../__tests__/ChooseEnum.test.tsx | 4 +- .../cypress/e2e/labware-creator/create.cy.js | 2 +- .../e2e/labware-creator/customTubeRack.cy.js | 41 ++++++----------- package.json | 2 +- yarn.lock | 8 ++-- 22 files changed, 71 insertions(+), 130 deletions(-) diff --git a/app/src/atoms/Link/__tests__/ExternalLink.test.tsx b/app/src/atoms/Link/__tests__/ExternalLink.test.tsx index f89572e2429..6d39662a104 100644 --- 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 index 4dd34e9c07e..c6b8e80c620 100644 --- a/app/src/atoms/MenuList/__tests__/OverflowBtn.test.tsx +++ b/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 } from '@testing-library/react' +import { fireEvent, waitFor, screen, prettyDOM } from '@testing-library/react' import { COLORS } from '@opentrons/components' import { renderWithProviders } from '../../../__testing-utils__' @@ -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 index 7e62b0f8662..e93e08f715c 100644 --- a/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/FloatingActionButton.test.tsx @@ -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,6 @@ 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 index 945dce27823..86576cb1381 100644 --- 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 index f4d23ea3a32..1c85bf34eb1 100644 --- a/app/src/atoms/buttons/__tests__/MediumButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/MediumButton.test.tsx @@ -24,7 +24,6 @@ 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 = { @@ -32,7 +31,9 @@ describe('MediumButton', () => { 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 = { @@ -40,7 +41,9 @@ describe('MediumButton', () => { 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 = { @@ -48,7 +51,9 @@ describe('MediumButton', () => { 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 index 978f46e3c08..13ef4eceed6 100644 --- a/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx +++ b/app/src/atoms/buttons/__tests__/QuaternaryButton.test.tsx @@ -1,12 +1,20 @@ 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, fireEvent, waitFor, prettyDOM } from '@testing-library/react' +import userEvent from '@testing-library/user-event' 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) => { return renderWithProviders()[0] } @@ -25,7 +33,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 +55,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 index da44e16dffd..2f6e29103bd 100644 --- 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 index 2aa55acef6e..9c3e03f9b04 100644 --- 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 index 40f61eeef13..c4d33d2aef5 100644 --- 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 index 893b71ab904..2a5ef52551d 100644 --- 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 index 4c0b2b97a1e..11790f63c47 100644 --- 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 index d9aa36d565a..bc47fabe48c 100644 --- 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 index bcffe52df26..80d17c32d08 100644 --- 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 index 536f8dc0b37..6a7c3efd034 100644 --- 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 index aa570078eb8..49e0ed4c118 100644 --- 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 index 10de409948a..8033ef00a02 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/__tests__/RecentRunProtocolCard.test.tsx @@ -247,7 +247,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: 'proceedToRun', diff --git a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx index bca0e623619..11a0f0f8452 100644 --- a/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx +++ b/app/src/organisms/PipetteWizardFlows/__tests__/ChoosePipette.test.tsx @@ -65,7 +65,7 @@ describe('ChoosePipette', () => { // Single and 8-Channel pipettes are selected first by default expect(singleMountPipettes).toHaveStyle( - `background-color: ${COLORS.blue30}` + `background-color: ${COLORS.blue10}` ) expect(ninetySixPipette).toHaveStyle(`background-color: ${COLORS.white}`) @@ -139,7 +139,7 @@ describe('ChoosePipette', () => { name: '96-Channel pipette 96-Channel pipette', }) expect(singleMountPipettes).toHaveStyle(`background-color: ${COLORS.white}`) - expect(ninetySixPipette).toHaveStyle(`background-color: ${COLORS.blue30}`) + expect(ninetySixPipette).toHaveStyle(`background-color: ${COLORS.blue10}`) }) it('renders the correct text for the 96 channel button when there is a left pipette attached', () => { vi.mocked(getIsGantryEmpty).mockReturnValue(false) diff --git a/app/src/organisms/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx b/app/src/organisms/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx index e0facc22d96..2af4dc11a3c 100644 --- a/app/src/organisms/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx +++ b/app/src/organisms/ProtocolSetupParameters/__tests__/ChooseEnum.test.tsx @@ -73,7 +73,7 @@ describe('ChooseEnum', () => { const selectedOption = screen.getByRole('label', { name: 'temp offset', }) - expect(notSelectedOption).toHaveStyle(`background-color: ${COLORS.blue40}`) - expect(selectedOption).toHaveStyle(`background-color: ${COLORS.blue60}`) + expect(notSelectedOption).toHaveStyle(`background: ${COLORS.blue35}`) + expect(selectedOption).toHaveStyle(`background: ${COLORS.blue50}`) }) }) diff --git a/labware-library/cypress/e2e/labware-creator/create.cy.js b/labware-library/cypress/e2e/labware-creator/create.cy.js index c0a667be233..3c2999653d0 100644 --- a/labware-library/cypress/e2e/labware-creator/create.cy.js +++ b/labware-library/cypress/e2e/labware-creator/create.cy.js @@ -3,7 +3,7 @@ // { force: true } context('The Labware Creator Landing Page', () => { - before(() => { + beforeEach(() => { cy.visit('/create') cy.viewport('macbook-15') cy.contains('NO').click({ force: true }) diff --git a/labware-library/cypress/e2e/labware-creator/customTubeRack.cy.js b/labware-library/cypress/e2e/labware-creator/customTubeRack.cy.js index e9f829a438f..d0a56e1c801 100644 --- a/labware-library/cypress/e2e/labware-creator/customTubeRack.cy.js +++ b/labware-library/cypress/e2e/labware-creator/customTubeRack.cy.js @@ -11,12 +11,11 @@ context('Tubes and Rack', () => { }) describe('Custom 6 x 4 tube rack', () => { - it('should show analytics opt-in', () => { + it('should create a custom tuberack', () => { cy.contains('Share sessions with the Opentrons Product Team?') cy.contains('NO').click({ force: true }) - }) - it('should allow user to select custom tube rack', () => { + // allow user to select custom tube rack // TODO(IL, 2021-05-15): give Dropdown component semantic selectors for E2E cy.get('label') .contains('What type of labware are you creating?') @@ -36,13 +35,11 @@ context('Tubes and Rack', () => { .click() cy.contains('start creating labware').click({ force: true }) - }) - it('does not have a preview image', () => { + // no preview image yet cy.contains('Add missing info to see labware preview').should('exist') - }) - it('tests regularity', () => { + // regularity cy.get("input[name='homogeneousWells'][value='false']").check({ force: true, }) @@ -58,9 +55,8 @@ context('Tubes and Rack', () => { cy.get("input[name='footprintXDimension']").type('128').blur() cy.get("input[name='footprintYDimension']").clear().type('86').blur() - }) - it('tests height', () => { + // height cy.get("input[name='labwareZDimension']").type('150').blur() cy.contains('This labware may be too tall').should('exist') cy.get("input[name='labwareZDimension']").clear().type('200').blur() @@ -72,9 +68,8 @@ context('Tubes and Rack', () => { cy.contains( 'Your labware is not compatible with the Labware Creator' ).should('not.exist') - }) - it('tests grid', () => { + // grid cy.get("input[name='gridRows']").type('6').blur() cy.get("input[name='gridColumns']").type('4').blur() @@ -84,16 +79,14 @@ context('Tubes and Rack', () => { cy.get("input[name='regularColumnSpacing'][value='true']").check({ force: true, }) - }) - it('tests volume', () => { + // volume cy.get("input[name='wellVolume']").focus().blur() cy.contains('Volume is a required field').should('exist') cy.get("input[name='wellVolume']").type('1500').blur() cy.contains('Volume is a required field').should('not.exist') - }) - it('tests rectangular wells', () => { + // rectangular wells cy.get("input[name='wellShape'][value='rectangular']").check({ force: true, }) @@ -108,9 +101,8 @@ context('Tubes and Rack', () => { cy.contains('Tube Y is a required field').should('exist') cy.get("input[name='wellYDimension']").type('10').blur() cy.contains('Tube Y is a required field').should('not.exist') - }) - it('tests circular wells', () => { + // circular wells cy.get("input[name='wellShape'][value='circular']").check({ force: true, }) @@ -121,9 +113,8 @@ context('Tubes and Rack', () => { cy.contains('Diameter is a required field').should('exist') cy.get("input[name='wellDiameter']").type('12').blur() cy.contains('Diameter is a required field').should('not.exist') - }) - it('tests well bottom shape and depth', () => { + // well bottom shape and depth cy.get("input[name='wellBottomShape'][value='flat']").check({ force: true, }) @@ -146,20 +137,17 @@ context('Tubes and Rack', () => { cy.contains('Depth is a required field').should('exist') cy.get("input[name='wellDepth']").type('100').blur() cy.contains('Depth is a required field').should('not.exist') - }) - it('tests offset', () => { + // offset cy.get("input[name='gridSpacingX']").type('18').blur() cy.get("input[name='gridSpacingY']").type('14').blur() cy.get("input[name='gridOffsetX']").type('15').blur() cy.get("input[name='gridOffsetY']").type('8').blur() - }) - it('does has a preview image', () => { + // verify preview image cy.contains('Add missing info to see labware preview').should('not.exist') - }) - it('tests the file export', () => { + // test file export // Try with missing fields cy.get('button[class*="_export_button_"]').click({ force: true }) cy.contains( @@ -180,9 +168,8 @@ context('Tubes and Rack', () => { cy.get("input[placeholder='somerackbrand_24_tuberack_1500ul']").should( 'exist' ) - }) - it('should export a file matching the fixture', () => { + // now try again with all fields inputed cy.fixture(expectedExportFixture).then(expectedExportLabwareDef => { cy.get('button').contains('EXPORT FILE').click() diff --git a/package.json b/package.json index 007e9328c01..4301ebd9fb7 100755 --- a/package.json +++ b/package.json @@ -45,7 +45,7 @@ "@storybook/addon-links": "^7.6.16", "@storybook/react": "^7.6.16", "@storybook/react-vite": "^7.6.16", - "@testing-library/jest-dom": "6.4.0", + "@testing-library/jest-dom": "6.4.2", "@testing-library/react": "14.2.1", "@testing-library/user-event": "13.5.0", "@types/express": "^4.17.11", diff --git a/yarn.lock b/yarn.lock index 08eeaf7ced5..920529d67f4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3849,10 +3849,10 @@ lz-string "^1.5.0" pretty-format "^27.0.2" -"@testing-library/jest-dom@6.4.0": - version "6.4.0" - resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.0.tgz#e7391967af57273effdaa181fc291be0ecc155bd" - integrity sha512-GgGT3OR8qhIjk2SBMy51AYDWoMnAyR/cwjZO4SttuBmIQ9wWy9QmVOeaSbgT5Bm0J6qLBaf4+dsJWfisvafoaA== +"@testing-library/jest-dom@6.4.2": + version "6.4.2" + resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.4.2.tgz#38949f6b63722900e2d75ba3c6d9bf8cffb3300e" + integrity sha512-CzqH0AFymEMG48CpzXFriYYkOjk6ZGPCLMhW9e9jg3KMCn5OfJecF8GtGW7yGfR/IgCe3SX8BSwjdzI6BBbZLw== dependencies: "@adobe/css-tools" "^4.3.2" "@babel/runtime" "^7.9.2"