-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
(PC-33528)[PRO] feat: design adjustement
- Loading branch information
1 parent
55acade
commit 4c43813
Showing
5 changed files
with
257 additions
and
42 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
140 changes: 140 additions & 0 deletions
140
pro/src/ui-kit/MultiSelect/__specs__/MultiSelectTrigger.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,140 @@ | ||
| import { fireEvent, render, screen } from '@testing-library/react' | ||
| import { axe } from 'vitest-axe' | ||
|
|
||
| import { MultiSelectTrigger } from '../MultiSelectTrigger' | ||
|
|
||
| describe('<MultiSelectTrigger />', () => { | ||
| const mockToggleDropdown = vi.fn() | ||
|
|
||
| const props = { | ||
| isOpen: false, | ||
| selectedCount: 2, | ||
| toggleDropdown: mockToggleDropdown, | ||
| legend: 'Select Options', | ||
| label: 'Options Label', | ||
| } | ||
|
|
||
| it('should render correctly', () => { | ||
| render(<MultiSelectTrigger {...props} />) | ||
|
|
||
| expect(screen.getByText('Options Label')).toBeInTheDocument() | ||
| expect(screen.getByText('2')).toBeInTheDocument() // This is the selectedCount badge | ||
| }) | ||
|
|
||
| it('should have no accessibility violations', async () => { | ||
| const { container } = render(<MultiSelectTrigger {...props} />) | ||
|
|
||
| const results = await axe(container) | ||
| expect(results).toHaveNoViolations() | ||
| }) | ||
|
|
||
| it('should disable the button when disabled prop is passed', () => { | ||
| render(<MultiSelectTrigger {...props} disabled />) | ||
|
|
||
| const button = screen.getByRole('button') | ||
|
|
||
| expect(button).toBeDisabled() | ||
| }) | ||
|
|
||
| it('should display the chevron open icon if panel is opened', () => { | ||
| const { container } = render( | ||
| <MultiSelectTrigger {...props} isOpen={true} /> | ||
| ) | ||
|
|
||
| let chevronIcon = container.querySelector('svg') | ||
|
|
||
| expect(chevronIcon).toHaveClass('chevron chevronOpen') | ||
| }) | ||
|
|
||
| it('should not display the chevron icon open if panel is closed', () => { | ||
| const { container } = render( | ||
| <MultiSelectTrigger {...props} isOpen={false} /> | ||
| ) | ||
|
|
||
| let chevronIcon = container.querySelector('svg') | ||
|
|
||
| chevronIcon = container.querySelector('svg') | ||
|
|
||
| expect(chevronIcon).not.toHaveClass('chevron chevronOpen') | ||
| }) | ||
|
|
||
| it('should render badge with correct count when options are selected', () => { | ||
| // Simulate a selected count of 3 | ||
| render( | ||
| <MultiSelectTrigger | ||
| isOpen={false} | ||
| selectedCount={3} | ||
| toggleDropdown={mockToggleDropdown} | ||
| legend="Legend" | ||
| label="Select Options" | ||
| /> | ||
| ) | ||
|
|
||
| // Check if the badge is rendered with the correct count | ||
| expect(screen.getByText('3')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should not render badge when no options are selected', () => { | ||
| // Simulate a selected count of 0 (no options selected) | ||
| render( | ||
| <MultiSelectTrigger | ||
| isOpen={false} | ||
| selectedCount={0} | ||
| toggleDropdown={mockToggleDropdown} | ||
| legend="Legend" | ||
| label="Select Options" | ||
| /> | ||
| ) | ||
|
|
||
| // Check that the badge is not rendered | ||
| const badge = screen.queryByText('0') | ||
| expect(badge).toBeNull() | ||
| }) | ||
|
|
||
| it('should update badge count when selecting and deselecting options', () => { | ||
| const { rerender } = render( | ||
| <MultiSelectTrigger | ||
| isOpen={false} | ||
| selectedCount={2} | ||
| toggleDropdown={mockToggleDropdown} | ||
| legend="Legend" | ||
| label="Select Options" | ||
| /> | ||
| ) | ||
|
|
||
| // Check if the badge displays the correct count initially | ||
| expect(screen.getByText('2')).toBeInTheDocument() | ||
|
|
||
| // Rerender with updated selected count | ||
| rerender( | ||
| <MultiSelectTrigger | ||
| isOpen={false} | ||
| selectedCount={5} | ||
| toggleDropdown={mockToggleDropdown} | ||
| legend="Legend" | ||
| label="Select Options" | ||
| /> | ||
| ) | ||
|
|
||
| // Check if the badge now displays the updated count | ||
| expect(screen.getByText('5')).toBeInTheDocument() | ||
| }) | ||
|
|
||
| it('should call toggleDropdown when the button is clicked', () => { | ||
| render( | ||
| <MultiSelectTrigger | ||
| isOpen={false} | ||
| selectedCount={2} | ||
| toggleDropdown={mockToggleDropdown} | ||
| legend="Legend" | ||
| label="Select Options" | ||
| /> | ||
| ) | ||
|
|
||
| const button = screen.getByRole('button') | ||
| fireEvent.click(button) | ||
|
|
||
| // Verify if toggleDropdown was called when the button is clicked | ||
| expect(mockToggleDropdown).toHaveBeenCalledTimes(1) | ||
| }) | ||
| }) |