feat(web): base-ui slider (#34064)

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
yyh
2026-03-25 16:03:49 +08:00
committed by GitHub
parent 1789988be7
commit a8e1ff85db
43 changed files with 425 additions and 1068 deletions

View File

@ -14,6 +14,8 @@ describe('IndexMethod', () => {
vi.clearAllMocks()
})
const getKeywordSlider = () => screen.getByLabelText('datasetSettings.form.numberOfKeywords')
describe('Rendering', () => {
it('should render without crashing', () => {
render(<IndexMethod {...defaultProps} />)
@ -123,8 +125,7 @@ describe('IndexMethod', () => {
describe('KeywordNumber', () => {
it('should render KeywordNumber component inside Economy option', () => {
render(<IndexMethod {...defaultProps} />)
// KeywordNumber has a slider
expect(screen.getByRole('slider')).toBeInTheDocument()
expect(getKeywordSlider()).toBeInTheDocument()
})
it('should pass keywordNumber to KeywordNumber component', () => {

View File

@ -11,6 +11,8 @@ describe('KeyWordNumber', () => {
vi.clearAllMocks()
})
const getSlider = () => screen.getByLabelText('datasetSettings.form.numberOfKeywords')
describe('Rendering', () => {
it('should render without crashing', () => {
render(<KeyWordNumber {...defaultProps} />)
@ -31,8 +33,7 @@ describe('KeyWordNumber', () => {
it('should render slider', () => {
render(<KeyWordNumber {...defaultProps} />)
// Slider has a slider role
expect(screen.getByRole('slider')).toBeInTheDocument()
expect(getSlider()).toBeInTheDocument()
})
it('should render input number field', () => {
@ -61,7 +62,7 @@ describe('KeyWordNumber', () => {
it('should pass correct value to slider', () => {
render(<KeyWordNumber {...defaultProps} keywordNumber={30} />)
const slider = screen.getByRole('slider')
const slider = getSlider()
expect(slider).toHaveAttribute('aria-valuenow', '30')
})
})
@ -71,8 +72,7 @@ describe('KeyWordNumber', () => {
const handleChange = vi.fn()
render(<KeyWordNumber {...defaultProps} onKeywordNumberChange={handleChange} />)
const slider = screen.getByRole('slider')
// Verify slider is rendered and interactive
const slider = getSlider()
expect(slider).toBeInTheDocument()
expect(slider).not.toBeDisabled()
})
@ -109,14 +109,14 @@ describe('KeyWordNumber', () => {
describe('Slider Configuration', () => {
it('should have max value of 50', () => {
render(<KeyWordNumber {...defaultProps} />)
const slider = screen.getByRole('slider')
expect(slider).toHaveAttribute('aria-valuemax', '50')
const slider = getSlider()
expect(slider).toHaveAttribute('max', '50')
})
it('should have min value of 0', () => {
render(<KeyWordNumber {...defaultProps} />)
const slider = screen.getByRole('slider')
expect(slider).toHaveAttribute('aria-valuemin', '0')
const slider = getSlider()
expect(slider).toHaveAttribute('min', '0')
})
})
@ -162,7 +162,7 @@ describe('KeyWordNumber', () => {
describe('Accessibility', () => {
it('should have accessible slider', () => {
render(<KeyWordNumber {...defaultProps} />)
const slider = screen.getByRole('slider')
const slider = getSlider()
expect(slider).toBeInTheDocument()
})

View File

@ -1,7 +1,6 @@
import * as React from 'react'
import { useCallback } from 'react'
import { useTranslation } from 'react-i18next'
import Slider from '@/app/components/base/slider'
import Tooltip from '@/app/components/base/tooltip'
import {
NumberField,
@ -11,6 +10,7 @@ import {
NumberFieldIncrement,
NumberFieldInput,
} from '@/app/components/base/ui/number-field'
import { Slider } from '@/app/components/base/ui/slider'
const MIN_KEYWORD_NUMBER = 0
const MAX_KEYWORD_NUMBER = 50
@ -47,7 +47,8 @@ const KeyWordNumber = ({
value={keywordNumber}
min={MIN_KEYWORD_NUMBER}
max={MAX_KEYWORD_NUMBER}
onChange={onKeywordNumberChange}
onValueChange={onKeywordNumberChange}
aria-label={t('form.numberOfKeywords', { ns: 'datasetSettings' })}
/>
<NumberField
className="w-12 shrink-0"