packages/loading-button/__tests__/LoadingButton.test.tsx - develop - kaws/ui-kit-ce

packages/loading-button/__tests__/LoadingButton.test.tsx

100 строк3 KB

Калиниченко Никита Артемович

feat(loading-button): добавлена возможность контроллировать уровень состояния загрузки

26 мар 2025, 16:51

26 мар 2025, 16:51152b206

import * as React from 'react'
import { render } from '@testing-library/react'
import { LoadingButton } from '../src'
import { light } from '@v-uik/theme'

it('render component', () => {
  const { getByRole } = render(<LoadingButton />)
  expect(getByRole('button')).toBeInTheDocument()
})

it('has disabled attribute', () => {
  const { getByRole } = render(<LoadingButton disabled>Button</LoadingButton>)

  expect(getByRole('button')).toHaveAttribute('disabled')
})

it('correctly sets background and color depends on property', () => {
  const { getByRole, rerender } = render(<LoadingButton>button</LoadingButton>)
  expect(getByRole('button')).toHaveStyle({
    'background-color': light.comp.button.colorBackgroundContainedPrimary,
    color: light.comp.button.colorTextContainedPrimary,
  })
  rerender(
    <LoadingButton kind="outlined" color="secondary">
      button
    </LoadingButton>
  )
  expect(getByRole('button')).toHaveStyle({
    'background-color': 'transparent',
    color: light.comp.button.colorTextOutlinedSecondary,
  })
  rerender(
    <LoadingButton kind="ghost" color="error">
      button
    </LoadingButton>
  )
  expect(getByRole('button')).toHaveStyle({
    'background-color': 'transparent',
    color: light.comp.button.colorTextGhostError,
  })
})

it('set height depends on size property', () => {
  const { getByRole, rerender } = render(<LoadingButton>button</LoadingButton>)
  expect(getByRole('button')).toHaveStyle({
    'padding-top': '8px',
    'padding-bottom': '8px',
  })
  rerender(<LoadingButton size="sm">button</LoadingButton>)
  expect(getByRole('button')).toHaveStyle({
    'padding-top': '4px',
    'padding-bottom': '4px',
  })
  rerender(<LoadingButton size="lg">button</LoadingButton>)
  expect(getByRole('button')).toHaveStyle({
    'padding-top': '12px',
    'padding-bottom': '12px',
  })
})

it('renders LoadingButton with prefixProps', () => {
  const { getByRole } = render(
    <LoadingButton
      isLoading
      prefixProps={{
        color: 'red',
      }}
    >
      Button
    </LoadingButton>
  )
  expect(getByRole('button')).toBeInTheDocument()
  const bar = getByRole('img', { name: 'bar' })
  expect(bar).toBeInTheDocument()
  expect(bar).toHaveStyle('stroke: red')
})

it('renders LoadingButton with suffixProps', () => {
  const { getByRole } = render(
    <LoadingButton
      isLoading
      hideLoaderPrefix
      showLoaderSuffix
      suffixProps={{
        color: 'green',
      }}
    >
      Button
    </LoadingButton>
  )
  expect(getByRole('button')).toBeInTheDocument()
  const bar = getByRole('img', { name: 'bar' })
  expect(bar).toBeInTheDocument()
  expect(bar).toHaveStyle('stroke: green')
})

it('correct handle fullWidth property', () => {
  const { getByRole } = render(<LoadingButton fullWidth>button</LoadingButton>)
  expect(getByRole('button')).toHaveStyle('width: 100%')
})