Skip to content

TextArea test revamp #8150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
nicolethoen merged 5 commits into from
Oct 14, 2022
Merged

TextArea test revamp #8150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
9f8e5d4
Text area test revamp
dominik-petrik Sep 29, 2022
56d1877
Edit ref test
dominik-petrik Oct 4, 2022
4a60b4d
remove unnecessary tests
dominik-petrik Oct 13, 2022
3cf0368
add tests for default behavior
dominik-petrik Oct 13, 2022
2d7c2ce
add default validity test
dominik-petrik Oct 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
242 changes: 129 additions & 113 deletions packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,124 +3,140 @@ import React from 'react';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';

import { TextArea, TextAreaBase } from '../TextArea';
import { TextArea } from '../TextArea';
import { ValidatedOptions } from '../../../helpers/constants';

const props = {
onChange: jest.fn(),
value: 'test textarea'
};

describe('TextArea', () => {
test('textarea passes value and event to onChange handler', async () => {
const user = userEvent.setup();

render(<TextAreaBase {...props} value="" aria-label="test textarea" />);

await user.type(screen.getByLabelText('test textarea'), 'a');
expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
});

test('simple text area', () => {
const { asFragment } = render(<TextArea {...props} aria-label="simple textarea" />);
expect(asFragment()).toMatchSnapshot();
});

test('disabled text area using isDisabled', () => {
const { asFragment } = render(<TextArea {...props} aria-label="is disabled textarea" isDisabled />);
expect(asFragment()).toMatchSnapshot();
});

test('disabled text area using disabled', () => {
const { asFragment } = render(<TextArea {...props} aria-label="disabled textarea" disabled />);
expect(asFragment()).toMatchSnapshot();
});

test('read only text area using isReadOnly', () => {
const { asFragment } = render(<TextArea {...props} aria-label="is read only textarea" isReadOnly />);
expect(asFragment()).toMatchSnapshot();
});

test('read only text area using default readOnlyVariant', () => {
const { asFragment } = render(
<TextArea {...props} aria-label="is default read only textarea" readOnlyVariant="default" />
);
expect(asFragment()).toMatchSnapshot();
});

test('read only text area using plain readOnlyVariant', () => {
const { asFragment } = render(
<TextArea {...props} aria-label="is plain read only textarea" readOnlyVariant="plain" />
);
expect(asFragment()).toMatchSnapshot();
});

test('read only text area using readOnly', () => {
const { asFragment } = render(<TextArea {...props} aria-label="read only textarea" readOnly />);
expect(asFragment()).toMatchSnapshot();
});

test('validated text area success', () => {
render(<TextArea {...props} required validated={ValidatedOptions.success} aria-label="validated textarea" />);
expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-success');
});

test('validated text area warning', () => {
render(<TextArea {...props} required validated={ValidatedOptions.warning} aria-label="validated textarea" />);
expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-warning');
});

test('validated text area error', () => {
const { asFragment } = render(
<TextArea {...props} required validated={ValidatedOptions.error} aria-label="validated textarea" />
);
expect(asFragment()).toMatchSnapshot();
});

test('vertically resizable text area', () => {
const { asFragment } = render(
<TextArea resizeOrientation="vertical" {...props} aria-label="vertical resize textarea" />
);
expect(asFragment()).toMatchSnapshot();
});

test('horizontally resizable text area', () => {
const { asFragment } = render(
<TextArea
resizeOrientation="horizontal"
{...props}
required
validated={'error'}
aria-label="horizontal resize textarea"
/>
);
expect(asFragment()).toMatchSnapshot();
});

test('should throw console error when no aria-label or id is given', () => {
const myMock = jest.fn();
global.console = { ...global.console, error: myMock };

render(<TextArea {...props} />);

expect(myMock).toHaveBeenCalled();
});

test('should not throw console error when id is given but no aria-label', () => {
const myMock = jest.fn();
global.console = { ...global.console, error: myMock };

render(<TextArea {...props} id="5" />);

expect(myMock).not.toHaveBeenCalled();
});

test('should not throw console error when aria-label is given but no id', () => {
const myMock = jest.fn();
global.console = { ...global.console, error: myMock };

render(<TextArea {...props} aria-label="test textarea" />);

expect(myMock).not.toHaveBeenCalled();
});
test('Textarea input passes value and event to onChange handler', async () => {
const user = userEvent.setup();
render(<TextArea {...props} value="" aria-label="test textarea" />);

await user.type(screen.getByRole('textbox'), 'a');

expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
});

test('Renders simple text input', () => {
render(
<div data-testid="textarea">
<TextArea aria-label="simple textarea" />
</div>
);
expect(screen.getByTestId('textarea').firstChild).toBeVisible();
});

test('Renders with custom class passed', () => {
render(<TextArea aria-label="custom class textarea" className="test-class" />);

expect(screen.getByRole('textbox')).toHaveClass('test-class');
});

test('Renders text area with required attribute using isRequired', () => {
render(<TextArea aria-label="required textarea" isRequired />);

expect(screen.getByRole('textbox')).toBeRequired();
});

test('Text area is not required by default', () => {
render(<TextArea aria-label="not required textarea" />);

expect(screen.getByRole('textbox')).not.toBeRequired();
});

test('Renders disabled text area using isDisabled', () => {
render(<TextArea aria-label="is disabled textarea" isDisabled />);
expect(screen.getByRole('textbox')).toBeDisabled();
});

test('Text area is not disabled by default', () => {
render(<TextArea aria-label="not disabled textarea" />);
expect(screen.getByRole('textbox')).not.toBeDisabled();
});

test('Renders read only text area using readOnlyVariant', () => {
render(<TextArea aria-label="is read only textarea" readOnlyVariant={'default'} />);
expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
});

test('Text area is not read only by default', () => {
render(<TextArea aria-label="not read only textarea" />);
expect(screen.getByRole('textbox')).not.toHaveAttribute('readonly');
});

test('Renders text area with default class name only', () => {
render(<TextArea aria-label="validated textarea" />);
expect(screen.getByRole('textbox')).toHaveClass('pf-c-form-control', { exact: true });
});

test('Renders validated text area with success className', () => {
render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.success} />);
expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');
});

test('Renders validated text area with warning className', () => {
render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.warning} />);
expect(screen.getByRole('textbox')).toHaveClass('pf-m-warning');
});

test('Renders invalid text area', () => {
render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.error} />);
expect(screen.getByRole('textbox')).toBeInvalid();
});

test('Text area is not invalid by default', () => {
render(<TextArea aria-label="validated textarea" />);
expect(screen.getByRole('textbox')).not.toBeInvalid();
});

test('Renders vertically resizable text area', () => {
render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-vertical');
});

test('Renders horizontally resizable text area', () => {
render(<TextArea aria-label="horizontal resize textarea" resizeOrientation="horizontal" />);
expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-horizontal');
});

test('Throws console error when no aria-label or id is given', () => {
jest.spyOn(global.console, 'error');

render(<TextArea />);

expect(console.error).toHaveBeenCalled();
});

test('Does not throw console error when id is given but no aria-label', () => {
jest.spyOn(global.console, 'error');

render(<TextArea id="5" />);

expect(console.error).not.toHaveBeenCalled();
});

test('Does not throw console error when aria-label is given but no id', () => {
jest.spyOn(global.console, 'error');

render(<TextArea aria-label="test textarea" />);

expect(console.error).not.toHaveBeenCalled();
});

test('TextArea can be accessed via passed ref', () => {
const testRef: React.RefObject<HTMLTextAreaElement> = React.createRef();
render(<TextArea ref={testRef} />);
global.scrollTo = jest.fn();
testRef.current?.focus();
expect(screen.getByRole('textbox')).toHaveFocus();
});

test('Matches the snapshot', () => {
const { asFragment } = render(
<TextArea className="custom class" isRequired isDisabled autoResize aria-label="test textarea" />
);
expect(asFragment()).toMatchSnapshot();
});
125 changes: 5 additions & 120 deletions packages/react-core/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,129 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`TextArea disabled text area using disabled 1`] = `
exports[`Matches the snapshot 1`] = `
<DocumentFragment>
<textarea
aria-invalid="false"
aria-label="disabled textarea"
class="pf-c-form-control"
aria-label="test textarea"
class="pf-c-form-control custom class"
disabled=""
>
test textarea
</textarea>
</DocumentFragment>
`;

exports[`TextArea disabled text area using isDisabled 1`] = `
<DocumentFragment>
<textarea
aria-invalid="false"
aria-label="is disabled textarea"
class="pf-c-form-control"
disabled=""
>
test textarea
</textarea>
</DocumentFragment>
`;

exports[`TextArea horizontally resizable text area 1`] = `
<DocumentFragment>
<textarea
aria-invalid="true"
aria-label="horizontal resize textarea"
class="pf-c-form-control pf-m-resize-horizontal"
required=""
>
test textarea
</textarea>
</DocumentFragment>
`;

exports[`TextArea read only text area using default readOnlyVariant 1`] = `
<DocumentFragment>
<textarea
aria-invalid="false"
aria-label="is default read only textarea"
class="pf-c-form-control"
readonly=""
>
test textarea
</textarea>
</DocumentFragment>
`;

exports[`TextArea read only text area using isReadOnly 1`] = `
<DocumentFragment>
<textarea
aria-invalid="false"
aria-label="is read only textarea"
class="pf-c-form-control"
readonly=""
>
test textarea
</textarea>
</DocumentFragment>
`;

exports[`TextArea read only text area using plain readOnlyVariant 1`] = `
<DocumentFragment>
<textarea
aria-invalid="false"
aria-label="is plain read only textarea"
class="pf-c-form-control pf-m-plain"
readonly=""
>
test textarea
</textarea>
</DocumentFragment>
`;

exports[`TextArea read only text area using readOnly 1`] = `
<DocumentFragment>
<textarea
aria-invalid="false"
aria-label="read only textarea"
class="pf-c-form-control"
readonly=""
>
test textarea
</textarea>
</DocumentFragment>
`;

exports[`TextArea simple text area 1`] = `
<DocumentFragment>
<textarea
aria-invalid="false"
aria-label="simple textarea"
class="pf-c-form-control"
>
test textarea
</textarea>
</DocumentFragment>
`;

exports[`TextArea validated text area error 1`] = `
<DocumentFragment>
<textarea
aria-invalid="true"
aria-label="validated textarea"
class="pf-c-form-control"
required=""
>
test textarea
</textarea>
</DocumentFragment>
`;

exports[`TextArea vertically resizable text area 1`] = `
<DocumentFragment>
<textarea
aria-invalid="false"
aria-label="vertical resize textarea"
class="pf-c-form-control pf-m-resize-vertical"
>
test textarea
</textarea>
style="--pf-c-form-control--textarea--Height: 6px;"
/>
</DocumentFragment>
`;