alisaza
e1eaf5eff5
Extract admin dashboard from ghabilee-frontend2 into a dedicated Next.js app for backoffice.ghabilee.ir (no SEO indexing / Clarity).
67 lines
2.5 KiB
TypeScript
67 lines
2.5 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
|
|
import {
|
|
buildConsumerFieldWrapper,
|
|
buildConsumerOtpSegmentClass,
|
|
resolveConsumerTone,
|
|
withConsumerFieldError,
|
|
} from '@/components/consumer/input/consumerInputStyles'
|
|
|
|
describe('consumerInputStyles', () => {
|
|
it('forces select to muted tone even when bordered is requested', () => {
|
|
expect(resolveConsumerTone('select', 'bordered')).toBe('muted')
|
|
expect(resolveConsumerTone('input', 'muted')).toBe('muted')
|
|
expect(resolveConsumerTone('input')).toBe('bordered')
|
|
})
|
|
|
|
it('builds muted fill background', () => {
|
|
const classes = buildConsumerFieldWrapper({ size: 'md', radius: 'control', tone: 'muted' })
|
|
|
|
expect(classes).toContain('bg-[#E2E2E280]')
|
|
})
|
|
|
|
it('builds bordered field wrapper with consumer sizing and focus', () => {
|
|
const classes = buildConsumerFieldWrapper({ size: 'md', radius: 'control', tone: 'bordered' })
|
|
|
|
expect(classes).toContain('h-12')
|
|
expect(classes).toContain('rounded-[10px]')
|
|
expect(classes).toContain('border-consumer-border')
|
|
expect(classes).toContain('focus-within:!border-consumer-focus')
|
|
})
|
|
|
|
it('builds muted select wrapper background', () => {
|
|
const classes = buildConsumerFieldWrapper({ size: 'lg', radius: 'full', tone: 'muted' })
|
|
|
|
expect(classes).toContain('h-[52px]')
|
|
expect(classes).toContain('rounded-full')
|
|
expect(classes).toContain('bg-[#E2E2E280]')
|
|
})
|
|
|
|
it('applies full radius from consumer wrapper classes', () => {
|
|
const classes = buildConsumerFieldWrapper({ size: 'lg', radius: 'full', tone: 'bordered' })
|
|
|
|
expect(classes).toContain('rounded-full')
|
|
expect(classes).not.toContain('rounded-none')
|
|
})
|
|
|
|
it('keeps error border overrides on focus and kills invalid outline/ring', () => {
|
|
const classes = withConsumerFieldError(buildConsumerFieldWrapper({ size: 'sm', radius: 'full', tone: 'bordered' }))
|
|
|
|
expect(classes).toContain('!border')
|
|
expect(classes).toContain('!border-fourth')
|
|
expect(classes).toContain('focus-within:!border-fourth')
|
|
expect(classes).toContain('data-[active=true]:!border-fourth')
|
|
expect(classes).toContain('!outline-none')
|
|
expect(classes).toContain('!ring-0')
|
|
})
|
|
|
|
it('builds otp segment classes from size and radius', () => {
|
|
const classes = buildConsumerOtpSegmentClass({ size: 'md', radius: 'control' })
|
|
|
|
expect(classes).toContain('size-12')
|
|
expect(classes).toContain('rounded-[10px]')
|
|
expect(classes).toContain('border-consumer-border')
|
|
expect(classes).toContain('data-[active=true]:!border-primary')
|
|
})
|
|
})
|