@opentrons/components 0.1.6-alpha.18 → 0.1.6-alpha.19

package/src/atoms/Toast/__tests__/Toast.test.tsx

@@ -1,174 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import '@testing-library/jest-dom/vitest'
-import { act, fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-import { Toast, TOAST_ANIMATION_DURATION } from '..'
-
-const render = (props: React.ComponentProps<typeof Toast>) => {
-  return renderWithProviders(<Toast {...props} displayType="desktop" />)[0]
-}
-
-describe('Toast', () => {
-  let props: React.ComponentProps<typeof Toast>
-  beforeEach(() => {
-    props = {
-      id: '1',
-      message: 'test message',
-      type: 'success',
-      closeButton: true,
-      onClose: vi.fn(),
-    }
-  })
-
-  it('renders correct message', () => {
-    render(props)
-    screen.getByText('test message')
-  })
-
-  it('calls onClose when close button is pressed', () => {
-    vi.useFakeTimers()
-    render(props)
-    const closeButton = screen.getByRole('button')
-    fireEvent.click(closeButton)
-    act(() => {
-      vi.advanceTimersByTime(TOAST_ANIMATION_DURATION)
-    })
-    expect(props.onClose).toHaveBeenCalled()
-  })
-
-  it('does not render x button if prop is false', () => {
-    props = {
-      ...props,
-      closeButton: false,
-    }
-    render(props)
-    expect(screen.queryByRole('button')).toBeNull()
-  })
-
-  it('should have success styling when passing success as type', () => {
-    render(props)
-    const successToast = screen.getByTestId('Toast_success')
-    expect(successToast).toHaveStyle(`color: #04aa65
-    background-color: #f3fffa`)
-    screen.getByLabelText('icon_success')
-  })
-
-  it('should have warning styling when passing warning as type', () => {
-    props = {
-      ...props,
-      type: 'warning',
-    }
-    render(props)
-    const warningToast = screen.getByTestId('Toast_warning')
-    expect(warningToast).toHaveStyle(`color: #f09d20
-    background-color: #fffcf5`)
-    screen.getByLabelText('icon_warning')
-  })
-
-  it('should have error styling when passing error as type', () => {
-    props = {
-      ...props,
-      type: 'error',
-    }
-    render(props)
-    const errorToast = screen.getByTestId('Toast_error')
-    expect(errorToast).toHaveStyle(`color: #bf0000
-    background-color: #fff3f3`)
-    screen.getByLabelText('icon_error')
-  })
-
-  it('should have info styling when passing info as type', () => {
-    props = {
-      ...props,
-      type: 'info',
-    }
-    render(props)
-    const infoToast = screen.getByTestId('Toast_info')
-    expect(infoToast).toHaveStyle(`color: #16212D
-    background-color: #eaeaeb`)
-    screen.getByLabelText('icon_info')
-  })
-
-  it('should stay more than 7 seconds when disableTimeout is true', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      disableTimeout: true,
-    }
-    render(props)
-    screen.getByText('test message')
-    act(() => {
-      vi.advanceTimersByTime(100)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-    act(() => {
-      vi.advanceTimersByTime(7000)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-  })
-
-  it('should not stay more than 7 seconds when disableTimeout is false', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      disableTimeout: false,
-    }
-    render(props)
-    screen.getByText('test message')
-    act(() => {
-      vi.advanceTimersByTime(100)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-    act(() => {
-      vi.advanceTimersByTime(9000)
-    })
-    expect(props.onClose).toHaveBeenCalled()
-  })
-
-  it('should dismiss when a second toast appears', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      disableTimeout: true,
-      exitNow: true,
-    }
-    render(props)
-    screen.getByText('test message')
-    act(() => {
-      vi.advanceTimersByTime(100)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-    act(() => {
-      vi.advanceTimersByTime(TOAST_ANIMATION_DURATION)
-    })
-    expect(props.onClose).toHaveBeenCalled()
-  })
-  it('renders link text with an optional callback', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      linkText: 'test link',
-      onLinkClick: vi.fn(),
-    }
-    render(props)
-    const clickableLink = screen.getByText('test link')
-    fireEvent.click(clickableLink)
-    expect(props.onLinkClick).toHaveBeenCalled()
-  })
-  it('toast will not disappear on a general click if both close button and clickable link present', async () => {
-    vi.useFakeTimers()
-    props = {
-      ...props,
-      linkText: 'test link',
-      closeButton: true,
-    }
-    render(props)
-    const clickableLink = screen.getByText('test message')
-    fireEvent.click(clickableLink)
-    act(() => {
-      vi.advanceTimersByTime(TOAST_ANIMATION_DURATION)
-    })
-    expect(props.onClose).not.toHaveBeenCalled()
-  })
-})

package/src/atoms/ToggleGroup/__tests__/ToggleGroup.test.tsx

@@ -1,28 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect, vi } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
-import { renderWithProviders } from '../../../testing/utils'
-import { ToggleGroup } from '../index'
-
-const render = (props: React.ComponentProps<typeof ToggleGroup>) => {
-  return renderWithProviders(<ToggleGroup {...props} />)
-}
-
-describe('ToggleGroup', () => {
-  let props: React.ComponentProps<typeof ToggleGroup>
-
-  it('should render text and buttons', () => {
-    props = {
-      leftText: 'mock leftText',
-      rightText: 'mock rightText',
-      leftClick: vi.fn(),
-      rightClick: vi.fn(),
-      selectedValue: 'mock leftText',
-    }
-    render(props)
-    fireEvent.click(screen.getByText('mock leftText'))
-    expect(props.leftClick).toHaveBeenCalled()
-    fireEvent.click(screen.getByText('mock rightText'))
-    expect(props.rightClick).toHaveBeenCalled()
-  })
-})

package/src/atoms/Tooltip/__tests__/Tooltip.test.tsx

@@ -1,78 +0,0 @@
-import type * as React from 'react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import '@testing-library/jest-dom/vitest'
-import { screen } from '@testing-library/react'
-
-import { COLORS } from '../../../helix-design-system'
-import { TOOLTIP_TOP } from '../../../tooltips'
-import { SPACING } from '../../../ui-style-constants'
-import { POSITION_ABSOLUTE } from '../../../styles'
-
-import { renderWithProviders } from '../../../testing/utils'
-import { Tooltip } from '..'
-
-const render = (props: React.ComponentProps<typeof Tooltip>) => {
-  return renderWithProviders(<Tooltip {...props} />)[0]
-}
-
-const placement = TOOLTIP_TOP
-const id = 'Tooltip_123'
-const tooltipRef = vi.fn()
-const tooltipStyle = {
-  position: POSITION_ABSOLUTE,
-  left: SPACING.spacing4,
-} as const
-const arrowRef = vi.fn()
-const arrowStyle = {
-  position: POSITION_ABSOLUTE,
-  left: SPACING.spacing8,
-} as const
-
-const MockTooltipProps = {
-  id: id,
-  placement: placement,
-  arrowStyle: arrowStyle,
-  arrowRef: arrowRef,
-  visible: true,
-  ref: tooltipRef,
-  style: tooltipStyle,
-}
-
-describe('Tooltip', () => {
-  let props: React.ComponentProps<typeof Tooltip>
-
-  beforeEach(() => {
-    props = {
-      children: 'mock children' as React.ReactNode,
-      tooltipProps: MockTooltipProps,
-      key: 'mock key',
-    }
-  })
-
-  it('renders correct children when the tooltip is visible', () => {
-    render(props)
-    const tooltip = screen.getByText('mock children')
-    expect(tooltip).toBeInTheDocument()
-    expect(tooltip).toHaveStyle('position: absolute')
-    expect(tooltip).toHaveStyle('left: 0.25rem')
-    expect(tooltip).toHaveStyle(`background: ${COLORS.black90}`)
-    expect(tooltip).toHaveStyle(`color: ${COLORS.white}`)
-    expect(tooltip).toHaveStyle('max-width: 8.75rem')
-    expect(tooltip).toHaveStyle('font-size: 0.625rem')
-    expect(tooltip).toHaveAttribute('role', 'tooltip')
-  })
-
-  it('renders correct children when the tooltip is visible with a specific with', () => {
-    props = { ...props, width: '3rem' }
-    render(props)
-    const tooltip = screen.getByText('mock children')
-    expect(tooltip).toHaveStyle('width: 3rem')
-  })
-
-  it('does not render children when the tooltip is invisible', () => {
-    MockTooltipProps.visible = false
-    render(props)
-    const tooltip = screen.queryByText('mock children')
-    expect(tooltip).not.toBeInTheDocument()
-  })
-})

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

@@ -1,47 +0,0 @@
-import type * as React from 'react'
-import { describe, it, beforeEach, expect } from 'vitest'
-import { screen } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
-
-import { AlertPrimaryButton } from '../AlertPrimaryButton'
-
-const render = (props: React.ComponentProps<typeof AlertPrimaryButton>) => {
-  return renderWithProviders(<AlertPrimaryButton {...props} />)[0]
-}
-
-describe('AlertPrimaryButton', () => {
-  let props: React.ComponentProps<typeof AlertPrimaryButton>
-
-  beforeEach(() => {
-    props = {
-      children: 'alert primary button',
-    }
-  })
-
-  it('renders alert primary button with text', () => {
-    render(props)
-    const button = screen.getByText('alert primary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.red50}`)
-    expect(button).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
-    )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
-    expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
-    expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight20}`)
-    expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
-    expect(button).toHaveStyle(
-      `text-transform: ${TYPOGRAPHY.textTransformNone}`
-    )
-    expect(button).toHaveStyle('box-shadow: 0 0 0')
-  })
-
-  it('renders alert primary button with text and disabled', () => {
-    props.disabled = true
-    render(props)
-    const button = screen.getByText('alert primary button')
-    expect(button).toBeDisabled()
-  })
-})

package/src/atoms/buttons/__tests__/AltPrimaryButton.test.tsx

@@ -1,57 +0,0 @@
-import type * as React from 'react'
-import { describe, it, beforeEach, expect } from 'vitest'
-import { screen } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
-import { AltPrimaryButton } from '../AltPrimaryButton'
-
-const render = (props: React.ComponentProps<typeof AltPrimaryButton>) => {
-  return renderWithProviders(<AltPrimaryButton {...props} />)[0]
-}
-
-describe('AltPrimaryButton', () => {
-  let props: React.ComponentProps<typeof AltPrimaryButton>
-
-  beforeEach(() => {
-    props = {
-      children: 'alt primary button',
-    }
-  })
-
-  it('renders alt primary button with text', () => {
-    render(props)
-    const button = screen.getByText('alt primary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`)
-    expect(button).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
-    )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
-    expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
-    expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight20}`)
-    expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
-    expect(button).toHaveStyle(
-      `text-transform: ${TYPOGRAPHY.textTransformNone}`
-    )
-    expect(button).toHaveStyle(`box-shadow: none`)
-    expect(button).toHaveStyle(`color: ${COLORS.black90}`)
-  })
-
-  it('renders alt primary button with text and disabled', () => {
-    props.disabled = true
-    render(props)
-    const button = screen.getByText('alt primary button')
-    expect(button).toBeDisabled()
-    expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`)
-    expect(button).toHaveStyle(`color: ${COLORS.grey40}`)
-  })
-
-  // (kk: 09/23/2024) hover test needs jsdom update so this will be activated later
-  //   it('applies the correct states to the button - hover', () => {
-  //     render(props)
-  //     const button = screen.getByText('alt primary button')
-  //     fireEvent.mouseOver(button)
-  //     expect(button).toHaveStyle(`background-color: ${COLORS.grey35}`)
-  //   })
-})

package/src/atoms/buttons/__tests__/EmptySelectorButton.test.tsx

@@ -1,42 +0,0 @@
-import type * as React from 'react'
-import '@testing-library/jest-dom/vitest'
-import { fireEvent, screen } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../../testing/utils'
-import { JUSTIFY_CENTER, JUSTIFY_START } from '../../../styles'
-import { EmptySelectorButton } from '../EmptySelectorButton'
-
-const render = (props: React.ComponentProps<typeof EmptySelectorButton>) => {
-  return renderWithProviders(<EmptySelectorButton {...props} />)[0]
-}
-
-describe('EmptySelectorButton', () => {
-  let props: React.ComponentProps<typeof EmptySelectorButton>
-  beforeEach(() => {
-    props = {
-      onClick: vi.fn(),
-      text: 'mock text',
-      iconName: 'add',
-      textAlignment: 'left',
-    }
-  })
-  it('renders the props and button cta', () => {
-    render(props)
-    const button = screen.getByText('mock text')
-    fireEvent.click(button)
-    expect(props.onClick).toHaveBeenCalled()
-    screen.getByTestId('EmptySelectorButton_add')
-    expect(screen.getByTestId('EmptySelectorButton_container')).toHaveStyle(
-      `justify-content: ${JUSTIFY_START}`
-    )
-  })
-  it('renders middled aligned button', () => {
-    props.textAlignment = 'middle'
-    props.iconName = undefined
-    render(props)
-    expect(screen.getByTestId('EmptySelectorButton_container')).toHaveStyle(
-      `justify-content: ${JUSTIFY_CENTER}`
-    )
-    screen.queryByTestId('EmptySelectorButton_add')
-  })
-})

package/src/atoms/buttons/__tests__/LargeButton.test.tsx

@@ -1,91 +0,0 @@
-import type * 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 { renderWithProviders } from '../../../testing/utils'
-import { COLORS } from '../../../helix-design-system'
-import { LargeButton } from '../LargeButton'
-
-const render = (props: React.ComponentProps<typeof LargeButton>) => {
-  return renderWithProviders(<LargeButton {...props} />)[0]
-}
-
-describe('LargeButton', () => {
-  let props: React.ComponentProps<typeof LargeButton>
-  beforeEach(() => {
-    props = {
-      onClick: vi.fn(),
-      buttonText: 'large button',
-      iconName: 'play-round-corners',
-    }
-  })
-  it('renders the default button and it works as expected', () => {
-    render(props)
-    fireEvent.click(screen.getByText('large button'))
-    expect(props.onClick).toHaveBeenCalled()
-  })
-  it('renders the alert button', () => {
-    props = {
-      ...props,
-      buttonType: 'alert',
-    }
-    render(props)
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.red35}`
-    )
-  })
-  it('renders the secondary button', () => {
-    props = {
-      ...props,
-      buttonType: 'secondary',
-    }
-    render(props)
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.blue35}`
-    )
-  })
-
-  it('renders the alertStroke button', () => {
-    props = {
-      ...props,
-      buttonType: 'alertStroke',
-    }
-    render(props)
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.transparent}`
-    )
-  })
-
-  it('renders the alertAlt button', () => {
-    props = {
-      ...props,
-      buttonType: 'alertAlt',
-    }
-    render(props)
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.white}`
-    )
-  })
-
-  it('renders the stroke button', () => {
-    props = {
-      ...props,
-      buttonType: 'stroke',
-    }
-    render(props)
-    expect(screen.getByRole('button')).toHaveStyle(
-      `background-color: ${COLORS.white}`
-    )
-    expect(screen.getByRole('button')).toHaveStyle(`color: ${COLORS.blue50}`)
-  })
-
-  it('renders the button as disabled', () => {
-    props = {
-      ...props,
-      disabled: true,
-    }
-    render(props)
-    expect(screen.getByRole('button')).toBeDisabled()
-  })
-})

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

@@ -1,64 +0,0 @@
-import type * as React from 'react'
-import { describe, it, beforeEach, expect } from 'vitest'
-import { fireEvent, screen } from '@testing-library/react'
-import '@testing-library/jest-dom/vitest'
-import { renderWithProviders } from '../../../testing/utils'
-import { BORDERS, COLORS } from '../../../helix-design-system'
-import { TYPOGRAPHY, SPACING } from '../../../ui-style-constants'
-import { PrimaryButton } from '../PrimaryButton'
-
-const render = (props: React.ComponentProps<typeof PrimaryButton>) => {
-  return renderWithProviders(<PrimaryButton {...props} />)[0]
-}
-
-describe('PrimaryButton', () => {
-  let props: React.ComponentProps<typeof PrimaryButton>
-
-  beforeEach(() => {
-    props = {
-      children: 'primary button',
-    }
-  })
-
-  it('renders primary button with text', () => {
-    render(props)
-    const button = screen.getByText('primary button')
-    expect(button).toHaveStyle(`background-color: ${COLORS.blue50}`)
-    expect(button).toHaveStyle(
-      `padding: ${SPACING.spacing8} ${SPACING.spacing16} ${SPACING.spacing8} ${SPACING.spacing16}`
-    )
-    expect(button).toHaveStyle(`font-size: ${TYPOGRAPHY.fontSizeP}`)
-    expect(button).toHaveStyle(`font-weight: ${TYPOGRAPHY.fontWeightSemiBold}`)
-    expect(button).toHaveStyle(`line-height: ${TYPOGRAPHY.lineHeight20}`)
-    expect(button).toHaveStyle(`border-radius: ${BORDERS.borderRadius8}`)
-    expect(button).toHaveStyle(
-      `text-transform: ${TYPOGRAPHY.textTransformNone}`
-    )
-    expect(button).toHaveStyle(`box-shadow: none`)
-    expect(button).toHaveStyle(`color: ${COLORS.white}`)
-  })
-
-  it('renders primary button with text and disabled', () => {
-    props.disabled = true
-    render(props)
-    const button = screen.getByText('primary button')
-    expect(button).toBeDisabled()
-    expect(button).toHaveStyle(`background-color: ${COLORS.grey30}`)
-    expect(button).toHaveStyle(`color: ${COLORS.grey40}`)
-  })
-
-  it('applies the correct states to the button - hover', () => {
-    render(props)
-    const button = screen.getByText('primary button')
-    fireEvent.mouseOver(button)
-    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.red50}`)
-    expect(button).toHaveStyle(`color: ${COLORS.white}`)
-  })
-})

package/src/atoms/buttons/__tests__/RadioButton.test.tsx

@@ -1,98 +0,0 @@
-import type * as React from 'react'
-import '@testing-library/jest-dom/vitest'
-import { screen, queryByAttribute } from '@testing-library/react'
-import { describe, it, expect, vi, beforeEach } from 'vitest'
-import { renderWithProviders } from '../../../testing/utils'
-import { COLORS } from '../../../helix-design-system'
-import { SPACING } from '../../../ui-style-constants'
-import { RadioButton } from '../RadioButton'
-
-const render = (props: React.ComponentProps<typeof RadioButton>) => {
-  return renderWithProviders(<RadioButton {...props} />)[0]
-}
-
-describe('RadioButton', () => {
-  let props: React.ComponentProps<typeof RadioButton>
-  beforeEach(() => {
-    props = {
-      onChange: vi.fn(),
-      buttonLabel: 'radio button',
-      buttonValue: 1,
-    }
-  })
-
-  it('renders the large button', () => {
-    props = {
-      ...props,
-      radioButtonType: 'large',
-    }
-    render(props)
-    const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
-    expect(label).toHaveStyle(
-      `padding: ${SPACING.spacing12} ${SPACING.spacing16}`
-    )
-  })
-
-  it('renders the large selected button', () => {
-    props = {
-      ...props,
-      isSelected: true,
-      radioButtonType: 'large',
-    }
-    render(props)
-    const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
-    expect(label).toHaveStyle(
-      `padding: ${SPACING.spacing12} ${SPACING.spacing16}`
-    )
-  })
-
-  it('renders the small button with an icon', () => {
-    props = {
-      ...props,
-      radioButtonType: 'small',
-      iconName: 'alert-circle',
-    }
-    render(props)
-    const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue35}`)
-    expect(label).toHaveStyle(
-      `padding: ${SPACING.spacing12} ${SPACING.spacing16}`
-    )
-  })
-
-  it('renders the small selected button', () => {
-    props = {
-      ...props,
-      isSelected: true,
-      radioButtonType: 'small',
-    }
-    render(props)
-    const label = screen.getByRole('label')
-    expect(label).toHaveStyle(`background-color: ${COLORS.blue50}`)
-    expect(label).toHaveStyle(
-      `padding: ${SPACING.spacing12} ${SPACING.spacing16}`
-    )
-  })
-
-  it('renders id instead of buttonLabel when id is set', () => {
-    props = {
-      ...props,
-      id: 'mock-radio-button-id',
-    }
-    render(props)
-    const getById = queryByAttribute.bind(null, 'id')
-    const idRadioButton = getById(
-      render(props).container,
-      'mock-radio-button-id'
-    )
-    expect(idRadioButton).toBeInTheDocument()
-    const buttonLabelIdRadioButton = getById(
-      render(props).container,
-      //  @ts-expect-error(ja, 8/23/24): buttonLabel is a string type
-      props.buttonLabel
-    )
-    expect(buttonLabelIdRadioButton).not.toBeInTheDocument()
-  })
-})