78 lines
2.7 KiB
TypeScript
78 lines
2.7 KiB
TypeScript
import * as React from 'react'
|
|
import { createElement } from 'react'
|
|
import { describe, expect, it } from 'vitest'
|
|
import { renderToStaticMarkup } from 'react-dom/server'
|
|
import ImageGenerationInlineCountButton from '@/components/image-generation/ImageGenerationInlineCountButton'
|
|
|
|
describe('ImageGenerationInlineCountButton', () => {
|
|
it('keeps the select enabled when only the action is disabled', () => {
|
|
Reflect.set(globalThis, 'React', React)
|
|
|
|
const html = renderToStaticMarkup(
|
|
createElement(ImageGenerationInlineCountButton, {
|
|
prefix: createElement('span', null, '生成'),
|
|
suffix: createElement('span', null, '张图片'),
|
|
value: 3,
|
|
options: [1, 2, 3],
|
|
onValueChange: () => undefined,
|
|
onClick: () => undefined,
|
|
actionDisabled: true,
|
|
selectDisabled: false,
|
|
ariaLabel: '选择生成数量',
|
|
}),
|
|
)
|
|
|
|
expect(html).toContain('role="button"')
|
|
expect(html).toContain('aria-disabled="true"')
|
|
expect(html).not.toContain('<select disabled=""')
|
|
expect(html).toContain('rounded-full bg-white/12')
|
|
expect(html).toContain('inline-flex shrink-0 items-center whitespace-nowrap leading-none')
|
|
})
|
|
|
|
it('renders the count control as a rounded inline pill with the chevron inside it', () => {
|
|
Reflect.set(globalThis, 'React', React)
|
|
|
|
const html = renderToStaticMarkup(
|
|
createElement(ImageGenerationInlineCountButton, {
|
|
prefix: createElement('span', null, '重新生成'),
|
|
suffix: createElement('span', null, '张'),
|
|
value: 2,
|
|
options: [1, 2, 3],
|
|
onValueChange: () => undefined,
|
|
onClick: () => undefined,
|
|
ariaLabel: '选择重新生成数量',
|
|
}),
|
|
)
|
|
|
|
expect(html).toContain('重新生成')
|
|
expect(html).toContain('张')
|
|
expect(html).toContain('whitespace-nowrap')
|
|
expect(html).toContain('rounded-full bg-white/12')
|
|
expect(html).toContain('right-2')
|
|
expect(html).toContain('hover:bg-white/16')
|
|
})
|
|
|
|
it('can render a regenerate action without exposing the count selector', () => {
|
|
Reflect.set(globalThis, 'React', React)
|
|
|
|
const html = renderToStaticMarkup(
|
|
createElement(ImageGenerationInlineCountButton, {
|
|
prefix: createElement('span', null, '重新生成'),
|
|
suffix: null,
|
|
value: 2,
|
|
options: [1, 2, 3],
|
|
onValueChange: () => undefined,
|
|
onClick: () => undefined,
|
|
showCountControl: false,
|
|
ariaLabel: '重新生成当前图片',
|
|
className: 'inline-flex h-6 items-center justify-center rounded-md px-1.5',
|
|
}),
|
|
)
|
|
|
|
expect(html).toContain('重新生成')
|
|
expect(html).toContain('type="button"')
|
|
expect(html).not.toContain('<select')
|
|
expect(html).not.toContain('rounded-full bg-white/12')
|
|
})
|
|
})
|