-
Notifications
You must be signed in to change notification settings - Fork 90
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(TextInput): no unexpected autocomplete when label prop present (#509
- Loading branch information
Showing
4 changed files
with
237 additions
and
122 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
167 changes: 167 additions & 0 deletions
167
src/components/TextInput/__tests__/TextInput.input.test.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,167 @@ | ||
import React from 'react'; | ||
import userEvent from '@testing-library/user-event'; | ||
import {render, screen, fireEvent} from '@testing-library/react'; | ||
import {TextInput} from '../TextInput'; | ||
|
||
describe('TextInput input', () => { | ||
describe('without label prop', () => { | ||
describe('basic', () => { | ||
test('render input by default', () => { | ||
render(<TextInput />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input).toBeVisible(); | ||
expect(input.tagName.toLowerCase()).toBe('input'); | ||
}); | ||
|
||
test('render error message with error prop', () => { | ||
const {container} = render(<TextInput error="Some Error" />); | ||
|
||
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access | ||
expect(container.querySelector('.yc-text-input__error')).toBeInTheDocument(); | ||
expect(screen.getByText('Some Error')).toBeVisible(); | ||
}); | ||
|
||
test('do not show error without error prop', () => { | ||
const {container} = render(<TextInput />); | ||
|
||
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access | ||
expect(container.querySelector('.yc-text-input__error')).not.toBeInTheDocument(); | ||
}); | ||
|
||
test('render clear button with hasClear prop', () => { | ||
render(<TextInput hasClear />); | ||
|
||
expect(screen.getByRole('button', {name: 'Clear input value'})).toBeInTheDocument(); | ||
}); | ||
|
||
test('do not render clear button without hasClear prop', () => { | ||
render(<TextInput />); | ||
|
||
expect( | ||
screen.queryByRole('button', {name: 'Clear input value'}), | ||
).not.toBeInTheDocument(); | ||
}); | ||
|
||
test('call onChange when input changes value', () => { | ||
const onChangeFn = jest.fn(); | ||
|
||
render(<TextInput onChange={onChangeFn} />); | ||
fireEvent.change(screen.getByRole('textbox'), {target: {value: '1'}}); | ||
|
||
expect(onChangeFn).toBeCalled(); | ||
}); | ||
|
||
test('call onUpdate with certain value when input changes value', () => { | ||
const onUpdateFn = jest.fn(); | ||
const value = 'some'; | ||
|
||
render(<TextInput onUpdate={onUpdateFn} />); | ||
fireEvent.change(screen.getByRole('textbox'), {target: {value}}); | ||
|
||
expect(onUpdateFn).toBeCalledWith(value); | ||
}); | ||
|
||
test('call onChange when click to clean button', async () => { | ||
const onChangeFn = jest.fn(); | ||
const user = userEvent.setup(); | ||
render(<TextInput hasClear onChange={onChangeFn} />); | ||
const clear = screen.getByRole('button', {name: 'Clear input value'}); | ||
|
||
if (clear) { | ||
await user.click(clear); | ||
} | ||
|
||
expect(onChangeFn).toBeCalled(); | ||
}); | ||
|
||
test('call onUpdate with emply value when click to clean button', async () => { | ||
const onUpdateFn = jest.fn(); | ||
const user = userEvent.setup(); | ||
render(<TextInput hasClear onUpdate={onUpdateFn} />); | ||
const clear = screen.getByRole('button', {name: 'Clear input value'}); | ||
|
||
if (clear) { | ||
await user.click(clear); | ||
} | ||
|
||
expect(onUpdateFn).toBeCalledWith(''); | ||
}); | ||
}); | ||
|
||
describe('autocomplete', () => { | ||
test('render no autocomplete attribute when no autoComplete, no id, no name props', () => { | ||
render(<TextInput />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBeNull(); | ||
}); | ||
|
||
test('render autocomplete=on attribute with autoComplete prop', () => { | ||
render(<TextInput autoComplete />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBe('on'); | ||
}); | ||
|
||
test('render autocomplete=off attribute with autoComplete=false prop', () => { | ||
render(<TextInput autoComplete={false} />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBe('off'); | ||
}); | ||
}); | ||
}); | ||
|
||
describe('with label prop', () => { | ||
describe('basic', () => { | ||
test('render input with label', () => { | ||
const {container} = render(<TextInput label="Label:" />); | ||
|
||
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access | ||
const label = container.querySelector('.yc-text-input__label'); | ||
|
||
expect(label).toBeInTheDocument(); | ||
expect(label?.tagName.toLowerCase()).toBe('label'); | ||
expect(screen.getByText('Label:')).toBeVisible(); | ||
}); | ||
}); | ||
|
||
describe('autocomplete', () => { | ||
test('render autocomplete=off attribute when no autoComplete, no id, no name props', () => { | ||
render(<TextInput label="Label:" />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBe('off'); | ||
}); | ||
|
||
test('render no autocomplete attribute when no autoComplete prop, but id prop set', () => { | ||
render(<TextInput id="yc-id" label="Label:" />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBeNull(); | ||
}); | ||
|
||
test('render no autocomplete attribute when no autoComplete prop, but name prop set', () => { | ||
render(<TextInput name="yc-name" label="Label:" />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBeNull(); | ||
}); | ||
|
||
test('render autocomplete=on attribute when autoComplete prop "on"', () => { | ||
render(<TextInput autoComplete="on" label="Label:" />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBe('on'); | ||
}); | ||
|
||
test('render autocomplete=off attribute when autoComplete prop "off"', () => { | ||
render(<TextInput autoComplete="off" label="Label:" />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBe('off'); | ||
}); | ||
}); | ||
}); | ||
}); |
This file was deleted.
Oops, something went wrong.
63 changes: 63 additions & 0 deletions
63
src/components/TextInput/__tests__/TextInput.textarea.test.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,63 @@ | ||
import React from 'react'; | ||
import {render, screen} from '@testing-library/react'; | ||
import {TextInput} from '../TextInput'; | ||
|
||
describe('TextInput textarea', () => { | ||
describe('without label prop', () => { | ||
describe('basic', () => { | ||
test('render textarea with multiline prop', () => { | ||
render(<TextInput multiline />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input).toBeVisible(); | ||
expect(input.tagName.toLowerCase()).toBe('textarea'); | ||
}); | ||
}); | ||
|
||
describe('autocomplete', () => { | ||
test('render no autocomplete attribute when no autoComplete, no id, no name props', () => { | ||
render(<TextInput multiline />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBeNull(); | ||
}); | ||
}); | ||
}); | ||
|
||
describe('with label prop', () => { | ||
describe('basic', () => { | ||
test('render textarea without label', () => { | ||
const {container} = render(<TextInput multiline label="Label:" />); | ||
|
||
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access | ||
const label = container.querySelector('.yc-text-input__label'); | ||
|
||
expect(label).toBeNull(); | ||
expect(screen.queryByText('Label:')).toBeNull(); | ||
}); | ||
}); | ||
|
||
describe('autocomplete', () => { | ||
test('render no autocomplete attribute when no autoComplete, no id, no name props', () => { | ||
render(<TextInput multiline label="Label:" />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBeNull(); | ||
}); | ||
|
||
test('render no autocomplete attribute when no autoComplete prop, but id prop set', () => { | ||
render(<TextInput multiline id="yc-id" label="Label:" />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBeNull(); | ||
}); | ||
|
||
test('render no autocomplete attribute when no autoComplete prop, but name prop set', () => { | ||
render(<TextInput multiline name="yc-name" label="Label:" />); | ||
const input = screen.getByRole('textbox'); | ||
|
||
expect(input.getAttribute('autocomplete')).toBeNull(); | ||
}); | ||
}); | ||
}); | ||
}); |