ac67247636
* test: finished all ui components test * chore: update naming of mock handle change modal test
91 lines
3.2 KiB
TypeScript
91 lines
3.2 KiB
TypeScript
import React from 'react'
|
|
import { render, screen } from '@testing-library/react'
|
|
import '@testing-library/jest-dom'
|
|
import { Button, buttonConfig } from './index'
|
|
|
|
// Mock the styles
|
|
jest.mock('./styles.scss', () => ({}))
|
|
|
|
describe('@joi/core/Button', () => {
|
|
it('renders with default props', () => {
|
|
render(<Button>Click me</Button>)
|
|
const button = screen.getByRole('button', { name: /click me/i })
|
|
expect(button).toBeInTheDocument()
|
|
expect(button).toHaveClass('btn btn--primary btn--medium btn--solid')
|
|
})
|
|
|
|
it('applies custom className', () => {
|
|
render(<Button className="custom-class">Test Button</Button>)
|
|
const badge = screen.getByText('Test Button')
|
|
expect(badge).toHaveClass('custom-class')
|
|
})
|
|
|
|
it('renders as a child component when asChild is true', () => {
|
|
render(
|
|
<Button asChild>
|
|
<a href="/">Link Button</a>
|
|
</Button>
|
|
)
|
|
const link = screen.getByRole('link', { name: /link button/i })
|
|
expect(link).toBeInTheDocument()
|
|
expect(link).toHaveClass('btn btn--primary btn--medium btn--solid')
|
|
})
|
|
|
|
it.each(Object.keys(buttonConfig.variants.theme))(
|
|
'renders with theme %s',
|
|
(theme) => {
|
|
render(<Button theme={theme as any}>Theme Button</Button>)
|
|
const button = screen.getByRole('button', { name: /theme button/i })
|
|
expect(button).toHaveClass(`btn btn--${theme}`)
|
|
}
|
|
)
|
|
|
|
it.each(Object.keys(buttonConfig.variants.variant))(
|
|
'renders with variant %s',
|
|
(variant) => {
|
|
render(<Button variant={variant as any}>Variant Button</Button>)
|
|
const button = screen.getByRole('button', { name: /variant button/i })
|
|
expect(button).toHaveClass(`btn btn--${variant}`)
|
|
}
|
|
)
|
|
|
|
it.each(Object.keys(buttonConfig.variants.size))(
|
|
'renders with size %s',
|
|
(size) => {
|
|
render(<Button size={size as any}>Size Button</Button>)
|
|
const button = screen.getByRole('button', { name: /size button/i })
|
|
expect(button).toHaveClass(`btn btn--${size}`)
|
|
}
|
|
)
|
|
|
|
it('renders with block prop', () => {
|
|
render(<Button block>Block Button</Button>)
|
|
const button = screen.getByRole('button', { name: /block button/i })
|
|
expect(button).toHaveClass('btn btn--block')
|
|
})
|
|
|
|
it('fails when a new theme is added without updating the test', () => {
|
|
const expectedThemes = ['primary', 'ghost', 'icon', 'destructive']
|
|
const actualThemes = Object.keys(buttonConfig.variants.theme)
|
|
expect(actualThemes).toEqual(expectedThemes)
|
|
})
|
|
|
|
it('fails when a new variant is added without updating the test', () => {
|
|
const expectedVariant = ['solid', 'soft', 'outline']
|
|
const actualVariants = Object.keys(buttonConfig.variants.variant)
|
|
expect(actualVariants).toEqual(expectedVariant)
|
|
})
|
|
|
|
it('fails when a new size is added without updating the test', () => {
|
|
const expectedSizes = ['small', 'medium', 'large']
|
|
const actualSizes = Object.keys(buttonConfig.variants.size)
|
|
expect(actualSizes).toEqual(expectedSizes)
|
|
})
|
|
|
|
it('fails when a new variant CVA is added without updating the test', () => {
|
|
const expectedVariantsCVA = ['theme', 'variant', 'size', 'block']
|
|
const actualVariant = Object.keys(buttonConfig.variants)
|
|
expect(actualVariant).toEqual(expectedVariantsCVA)
|
|
})
|
|
})
|