-
Notifications
You must be signed in to change notification settings - Fork 2.8k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Input: implement primary slot (#20863)
- Loading branch information
1 parent
f71032d
commit 58c3108
Showing
10 changed files
with
230 additions
and
121 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
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 |
|---|---|---|
| @@ -1,18 +1,88 @@ | ||
| import * as React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
| import { render, RenderResult, fireEvent, screen } from '@testing-library/react'; | ||
| import { Input } from './Input'; | ||
| import { isConformant } from '../../common/isConformant'; | ||
|
|
||
| function getInput(): HTMLInputElement { | ||
| return screen.getByRole('textbox') as HTMLInputElement; | ||
| } | ||
|
|
||
| describe('Input', () => { | ||
| let renderedComponent: RenderResult | undefined; | ||
|
|
||
| afterEach(() => { | ||
| if (renderedComponent) { | ||
| renderedComponent.unmount(); | ||
| renderedComponent = undefined; | ||
| } | ||
| }); | ||
|
|
||
| isConformant({ | ||
| Component: Input, | ||
| displayName: 'Input', | ||
| primarySlot: 'input', | ||
| }); | ||
|
|
||
| // TODO add more tests here, and create visual regression tests in /apps/vr-tests | ||
|
|
||
| it('renders a default state', () => { | ||
| const result = render(<Input />); | ||
| expect(result.container).toMatchSnapshot(); | ||
| }); | ||
|
|
||
| it('respects value', () => { | ||
| renderedComponent = render(<Input value="hello" />); | ||
| expect(getInput().value).toEqual('hello'); | ||
| }); | ||
|
|
||
| it('respects updates to value', () => { | ||
| renderedComponent = render(<Input value="hello" />); | ||
| expect(getInput().value).toEqual('hello'); | ||
|
|
||
| renderedComponent.rerender(<Input value="world" />); | ||
| expect(getInput().value).toEqual('world'); | ||
| }); | ||
|
|
||
| it('respects defaultValue', () => { | ||
| renderedComponent = render(<Input defaultValue="hello" />); | ||
| expect(getInput().value).toEqual('hello'); | ||
| }); | ||
|
|
||
| it('ignores updates to defaultValue', () => { | ||
| renderedComponent = render(<Input defaultValue="hello" />); | ||
| expect(getInput().value).toEqual('hello'); | ||
|
|
||
| renderedComponent.rerender(<Input defaultValue="world" />); | ||
| expect(getInput().value).toEqual('hello'); | ||
| }); | ||
|
|
||
| it('prefers value over defaultValue', () => { | ||
| renderedComponent = render(<Input value="hello" defaultValue="world" />); | ||
| expect(getInput().value).toEqual('hello'); | ||
| }); | ||
|
|
||
| it('with value, calls onChange but does not update on text entry', () => { | ||
| const onChange = jest.fn(); | ||
| renderedComponent = render(<Input value="hello" onChange={onChange} />); | ||
| const input = getInput(); | ||
| fireEvent.change(input, { target: { value: 'world' } }); | ||
| expect(onChange).toHaveBeenCalledTimes(1); | ||
| expect(onChange.mock.calls[0][1]).toEqual({ value: 'world' }); | ||
| expect(input.value).toBe('hello'); | ||
| }); | ||
|
|
||
| it('with defaultValue, calls onChange and updates value on text entry', () => { | ||
| const onChange = jest.fn(); | ||
| renderedComponent = render(<Input defaultValue="hello" onChange={onChange} />); | ||
| const input = getInput(); | ||
| fireEvent.change(input, { target: { value: 'world' } }); | ||
| expect(onChange).toHaveBeenCalledTimes(1); | ||
| expect(onChange.mock.calls[0][1]).toEqual({ value: 'world' }); | ||
| expect(input.value).toBe('world'); | ||
| }); | ||
|
|
||
| it('does not call onChange when value prop updates', () => { | ||
| const onChange = jest.fn(); | ||
| renderedComponent = render(<Input value="hello" onChange={onChange} />); | ||
| renderedComponent.rerender(<Input value="world" onChange={onChange} />); | ||
| expect(onChange).toHaveBeenCalledTimes(0); | ||
| }); | ||
| }); |
Oops, something went wrong.