generated from nl-design-system/example
-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
test(components-react): add visual baseline to all formfield componen…
…ts (#347) # Contents Add visual tests baseline to all formfield components Co-authored-by: Jaap-Hein Wester <[email protected]> Co-authored-by: Remy Parzinski <[email protected]>
- Loading branch information
3 people
authored
Jan 3, 2025
1 parent
2f40d5d
commit bfde11c
Showing
29 changed files
with
690 additions
and
38 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
50 changes: 50 additions & 0 deletions
50
packages/components-react/src/form-field-checkbox/test/form-field-checkbox.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,50 @@ | ||
| import { describe, expect, it } from '@jest/globals'; | ||
| import { render, screen } from '@testing-library/react'; | ||
| import { LuxFormFieldCheckbox } from '../FormFieldCheckbox'; | ||
|
|
||
| describe('Form Field Checkbox', () => { | ||
| it('renders a basic form field checkbox with label and input', () => { | ||
| render(<LuxFormFieldCheckbox label="Name" />); | ||
|
|
||
| expect(screen.getByText('Name')).toBeInTheDocument(); | ||
| expect(screen.getByRole('checkbox')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('applies the base class', () => { | ||
| render(<LuxFormFieldCheckbox label="Name" />); | ||
|
|
||
| const formField = screen.getByText('Name').closest('.utrecht-form-field'); | ||
| expect(formField).toHaveClass('utrecht-form-field'); | ||
| }); | ||
|
|
||
| it('can have an additional class name', () => { | ||
| render(<LuxFormFieldCheckbox label="Name" className="custom-class" />); | ||
|
|
||
| const formField = screen.getByText('Name').closest('.utrecht-form-field'); | ||
| expect(formField).toHaveClass('utrecht-form-field'); | ||
| expect(formField).toHaveClass('custom-class'); | ||
| }); | ||
|
|
||
| it('renders description when provided', () => { | ||
| render(<LuxFormFieldCheckbox label="Name" description="Enter your full name" />); | ||
|
|
||
| expect(screen.getByText('Enter your full name')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('renders error message when invalid and error message provided', () => { | ||
| render(<LuxFormFieldCheckbox label="Name" invalid={true} errorMessage="Name is required" />); | ||
|
|
||
| expect(screen.getByText('Name is required')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('adds the correct attributes to the Checkbox', () => { | ||
| render(<LuxFormFieldCheckbox label="Name" checked required />); | ||
|
|
||
| const checkbox = screen.getByRole('checkbox'); | ||
|
|
||
| expect(checkbox).toBeInTheDocument(); | ||
| expect(checkbox).toBeChecked(); | ||
| expect(checkbox).toHaveAttribute('aria-required', 'true'); | ||
| expect(checkbox).not.toHaveAttribute('required'); | ||
| }); | ||
| }); |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| /** | ||
| * Pick only certain keys form object. | ||
| * | ||
| * @export | ||
| * @template {object} T | ||
| * @template {keyof T} U | ||
| * @param {T} obj Object to pick from | ||
| * @param {Array<U>} keys Keys to pick | ||
| * @returns {Pick<T, U>} Object containing only picked keys | ||
| */ | ||
| export function pick<T extends object, U extends keyof T>(obj: T, keys: Array<U>): Pick<T, U> { | ||
| const ret = {} as Pick<T, U>; | ||
| for (const k of keys) { | ||
| ret[k] = obj[k]; | ||
| } | ||
| return ret; | ||
| } |
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
23 changes: 23 additions & 0 deletions
23
packages/storybook/src/react-components/form-field-checkbox/visual/States.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,23 @@ | ||
| import { LuxFormFieldCheckbox } from '@lux-design-system/components-react'; | ||
|
|
||
| export const VisualStates = () => ( | ||
| <> | ||
| <LuxFormFieldCheckbox label="Label" /> | ||
| <LuxFormFieldCheckbox label="Label" checked /> | ||
| <LuxFormFieldCheckbox label="Label" description="Description" /> | ||
| <h5 className="utrecht-heading-4">Hover & Focus</h5> | ||
| <div className="pseudo-hover-all"> | ||
| <LuxFormFieldCheckbox label="Label" /> | ||
| </div> | ||
| <div className="pseudo-focus-all pseudo-focus-visible-all"> | ||
| <LuxFormFieldCheckbox label="Label" /> | ||
| </div> | ||
| <h5 className="utrecht-heading-4">Invalid</h5> | ||
| <LuxFormFieldCheckbox label="Label" errorMessage="Error Message" invalid /> | ||
| <LuxFormFieldCheckbox label="Label" description="Description" errorMessage="Error Message" invalid /> | ||
| <h5 className="utrecht-heading-4">Disabled</h5> | ||
| <LuxFormFieldCheckbox label="Label" disabled /> | ||
| <LuxFormFieldCheckbox label="Label" disabled checked /> | ||
| <LuxFormFieldCheckbox label="Label" description="Description" disabled /> | ||
| </> | ||
| ); |
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
Oops, something went wrong.