packages/loading-button/__tests__/LoadingButton.e2e.tsx - develop - bearury/ui-kit-ce

packages/loading-button/__tests__/LoadingButton.e2e.tsx
191 строка5 KB
Kalinichenko.N.A
feat(loading-button): реализован новый компонент LoadingButton
17 фев 2025, 17:19
17 фев 2025, 17:19a139ee5
import * as React from 'react'
import { test, expect } from '@playwright/experimental-ct-react17'
import { LoadingButton } from '../src'
import { TButtonKinds, TButtonColor } from '@v-uik/button'
import { createTheme } from '@v-uik/theme'

const buttonKinds: Array<TButtonKinds> = ['contained', 'outlined', 'ghost']
const buttonColors: Array<TButtonColor> = ['primary', 'secondary', 'error']

test.use({ viewport: { width: 400, height: 100 } })

test.describe('LoadingButton', () => {
  buttonKinds.forEach((kind) => {
    test.describe(kind, () => {
      buttonColors.forEach((color) => {
        test.describe(color, () => {
          test('enabled', async ({ mount }) => {
            const component = await mount(
              <LoadingButton isLoading kind={kind} color={color}>
                button
              </LoadingButton>
            )

            await expect(component).toHaveScreenshot()
          })

          test('active', async ({ mount, page }) => {
            const component = await mount(
              <div style={{ padding: 5 }}>
                <LoadingButton isLoading kind={kind} color={color}>
                  button
                </LoadingButton>
              </div>
            )
            await page.mouse.move(30, 30)
            await page.mouse.down()

            await expect(component).toHaveScreenshot()
          })

          test('focus', async ({ mount }) => {
            const component = await mount(
              <div style={{ padding: 5 }}>
                <LoadingButton isLoading kind={kind} color={color}>
                  button
                </LoadingButton>
              </div>
            )
            await component.locator('button').focus()

            await expect(component).toHaveScreenshot()
          })

          test('disabled', async ({ mount }) => {
            const component = await mount(
              <LoadingButton isLoading disabled kind={kind} color={color}>
                button
              </LoadingButton>
            )

            await expect(component).toHaveScreenshot()
          })
        })
      })

      test('sizes', async ({ mount }) => {
        const component = await mount(
          <div>
            <LoadingButton
              isLoading
              size="sm"
              kind={kind}
              style={{ margin: 10 }}
            >
              button
            </LoadingButton>
            <LoadingButton
              isLoading
              size="md"
              kind={kind}
              style={{ margin: 10 }}
            >
              button
            </LoadingButton>
            <LoadingButton
              isLoading
              size="lg"
              kind={kind}
              style={{ margin: 10 }}
            >
              button
            </LoadingButton>
          </div>
        )

        await expect(component).toHaveScreenshot()
      })

      test('sizes with custom typography', async ({ mount }) => {
        const theme = createTheme({
          comp: {
            backwardCompatibilityMode: false,
            button: {
              typographyFontSizeSm: '9px',
              typographyLineHeightSm: '1px',
              typographyFontSizeMd: '25px',
              typographyLineHeightMd: '30px',
              typographyFontSizeLg: '60px',
              typographyLineHeightLg: '90px',
            },
          },
        })

        const component = await mount(
          <div>
            <LoadingButton
              isLoading
              size="sm"
              kind={kind}
              style={{ margin: 10 }}
            >
              button
            </LoadingButton>
            <LoadingButton isLoading kind={kind} style={{ margin: 10 }}>
              button
            </LoadingButton>
            <LoadingButton
              isLoading
              size="md"
              kind={kind}
              style={{ margin: 10 }}
            >
              button
            </LoadingButton>
            <LoadingButton
              isLoading
              size="lg"
              kind={kind}
              style={{ margin: 10 }}
            >
              button
            </LoadingButton>
          </div>,
          {
            hooksConfig: {
              theme,
            },
          }
        )

        await expect(component).toHaveScreenshot()
      })

      test('fullWidth', async ({ mount }) => {
        const component = await mount(
          <LoadingButton isLoading fullWidth kind={kind}>
            button
          </LoadingButton>
        )

        await expect(component).toHaveScreenshot()
      })

      test('suffix', async ({ mount }) => {
        const component = await mount(
          <LoadingButton
            isLoading
            fullWidth
            showLoaderSuffix
            hideLoaderPrefix
            kind={kind}
          >
            button
          </LoadingButton>
        )

        await expect(component).toHaveScreenshot()
      })

      test('only icon', async ({ mount }) => {
        const component = await mount(
          <LoadingButton isLoading fullWidth loadingTitle="" kind={kind}>
            button
          </LoadingButton>
        )

        await expect(component).toHaveScreenshot()
      })
    })
  })
})