youngkingdom/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-06 02:18:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(switch): Base UI migration with loading/skeleton variants (#33345)

Browse Source 
Signed-off-by: yyh <yuanyouhuilyz@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
This commit is contained in:
yyh
2026-03-12 14:40:43 +08:00
committed by GitHub
parent b44b37518a
commit c43307dae1
21 changed files with 518 additions and 624 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/app/components/datasets/documents/components/__tests__/operations.spec.tsx
View File

@ -117,9 +117,8 @@ describe('Operations', () => {
it('should render disabled switch when embeddingAvailable is false in list scene', () => {
render(<Operations {...defaultProps} embeddingAvailable={false} scene="list" />)
// Switch component uses opacity-50 class when disabled
const disabledSwitch = document.querySelector('.\\!opacity-50')
expect(disabledSwitch).toBeInTheDocument()
const disabledSwitch = screen.getByRole('switch')
expect(disabledSwitch).toHaveAttribute('aria-disabled', 'true')
})
})

9
web/app/components/datasets/documents/detail/completed/segment-card/__tests__/index.spec.tsx
View File

@ -206,7 +206,7 @@ describe('SegmentCard', () => {
)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveClass('!cursor-not-allowed')
expect(switchElement).toHaveAttribute('aria-disabled', 'true')
})
it('should show action buttons when embeddingAvailable is true', () => {
@ -792,9 +792,8 @@ describe('SegmentCard', () => {
/>,
)
// The Switch component uses CSS classes for disabled state, not the native disabled attribute
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveClass('!cursor-not-allowed', '!opacity-50')
expect(switchElement).toHaveAttribute('aria-disabled', 'true')
})
it('should handle zero word count', () => {
@ -877,7 +876,7 @@ describe('SegmentCard', () => {
)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveClass('bg-components-toggle-bg')
expect(switchElement).toHaveAttribute('aria-checked', 'true')
})
it('should render real Switch component with unchecked state', () => {
@ -893,7 +892,7 @@ describe('SegmentCard', () => {
)
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveClass('bg-components-toggle-bg-unchecked')
expect(switchElement).toHaveAttribute('aria-checked', 'false')
})
it('should render real SegmentIndexTag with position formatting', () => {

20
web/app/components/datasets/documents/status-item/__tests__/index.spec.tsx
View File

@ -169,9 +169,8 @@ describe('StatusItem', () => {
datasetId="dataset-1"
/>,
)
const switchElement = document.querySelector('[role="switch"]')
// Switch component uses opacity-50 and cursor-not-allowed when disabled
expect(switchElement).toHaveClass('!opacity-50')
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveAttribute('aria-disabled', 'true')
})
it('should render switch as disabled when embedding (queuing status)', () => {
@ -187,9 +186,8 @@ describe('StatusItem', () => {
datasetId="dataset-1"
/>,
)
const switchElement = document.querySelector('[role="switch"]')
// Switch component uses opacity-50 and cursor-not-allowed when disabled
expect(switchElement).toHaveClass('!opacity-50')
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveAttribute('aria-disabled', 'true')
})
it('should render switch as disabled when embedding (indexing status)', () => {
@ -205,9 +203,8 @@ describe('StatusItem', () => {
datasetId="dataset-1"
/>,
)
const switchElement = document.querySelector('[role="switch"]')
// Switch component uses opacity-50 and cursor-not-allowed when disabled
expect(switchElement).toHaveClass('!opacity-50')
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveAttribute('aria-disabled', 'true')
})
it('should render switch as disabled when embedding (paused status)', () => {
@ -223,9 +220,8 @@ describe('StatusItem', () => {
datasetId="dataset-1"
/>,
)
const switchElement = document.querySelector('[role="switch"]')
// Switch component uses opacity-50 and cursor-not-allowed when disabled
expect(switchElement).toHaveClass('!opacity-50')
const switchElement = screen.getByRole('switch')
expect(switchElement).toHaveAttribute('aria-disabled', 'true')
})
})

7
web/app/components/datasets/extra-info/__tests__/index.spec.tsx
View File

@ -674,9 +674,7 @@ describe('ApiAccessCard', () => {
)
const switchButton = screen.getByRole('switch')
// Headless UI Switch uses CSS classes for disabled state
expect(switchButton).toHaveClass('!cursor-not-allowed')
expect(switchButton).toHaveClass('!opacity-50')
expect(switchButton).toHaveAttribute('aria-disabled', 'true')
})
it('should enable switch when user is workspace manager', () => {
@ -689,8 +687,7 @@ describe('ApiAccessCard', () => {
)
const switchButton = screen.getByRole('switch')
expect(switchButton).not.toHaveClass('!cursor-not-allowed')
expect(switchButton).not.toHaveClass('!opacity-50')
expect(switchButton).not.toHaveAttribute('aria-disabled', 'true')
})
})

5
web/app/components/datasets/extra-info/api-access/__tests__/card.spec.tsx
View File

@ -155,8 +155,7 @@ describe('Card (API Access)', () => {
const switchButton = screen.getByRole('switch')
expect(switchButton).toHaveAttribute('aria-checked', 'true')
// Headless UI Switch uses CSS classes for disabled state, not the disabled attribute
expect(switchButton).toHaveClass('!cursor-not-allowed', '!opacity-50')
expect(switchButton).toHaveAttribute('aria-disabled', 'true')
})
it('should enable switch when user is workspace manager', () => {
@ -164,7 +163,7 @@ describe('Card (API Access)', () => {
render(<Card apiEnabled={true} />)
const switchButton = screen.getByRole('switch')
expect(switchButton).not.toBeDisabled()
expect(switchButton).not.toHaveAttribute('aria-disabled', 'true')
})
})

14
web/app/components/datasets/metadata/metadata-dataset/__tests__/dataset-metadata-drawer.spec.tsx
View File

@ -325,18 +325,12 @@ describe('DatasetMetadataDrawer', () => {
fireEvent.change(inputs[0], { target: { value: 'changed_name' } })
// Find and click cancel button
const cancelBtns = screen.getAllByText(/cancel/i)
const cancelBtn = cancelBtns.find(btn =>
!btn.closest('button')?.classList.contains('btn-primary'),
)
if (cancelBtn)
fireEvent.click(cancelBtn)
fireEvent.click(screen.getByRole('button', { name: 'common.operation.cancel' }))
// Verify input resets or modal closes
// Verify rename modal closes while drawer stays open
await waitFor(() => {
const currentInputs = document.querySelectorAll('input')
// Either no inputs (modal closed) or value reset
expect(currentInputs.length === 0 || currentInputs[0].value !== 'changed_name').toBe(true)
expect(screen.queryByRole('dialog', { name: 'dataset.metadata.datasetMetadata.rename' })).not.toBeInTheDocument()
expect(screen.getAllByRole('dialog')).toHaveLength(1)
})
})