Skip to content

Commit

Permalink
TextArea test revamp (#8150)
Browse files Browse the repository at this point in the history 
* Text area test revamp

* Edit ref test

* remove unnecessary tests

* add tests for default behavior

* add default validity test
  • Loading branch information
@Dominik-Petrik
Dominik-Petrik authored Oct 14, 2022
1 parent 5a7fd83 commit e723d5b
Show file tree
Hide file tree
Showing 2 changed files with 134 additions and 233 deletions.
242 changes: 129 additions & 113 deletions packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx
View file
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
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>
`;

0 comments on commit e723d5b

Please sign in to comment.