Skip to content

Commit e723d5b

Browse files
Dominik-PetrikDominik-Petrik
authored
TextArea test revamp (#8150)
* Text area test revamp * Edit ref test * remove unnecessary tests * add tests for default behavior * add default validity test
1 parent 5a7fd83 commit e723d5b

File tree

2 files changed

+134
-233
lines changed

2 files changed

+134
-233
lines changed

‎packages/react-core/src/components/TextArea/__tests__/TextArea.test.tsx‎

Lines changed: 129 additions & 113 deletions
Original file line numberDiff line numberDiff line change
@@ -3,124 +3,140 @@ import React from 'react';
33
import { render, screen } from '@testing-library/react';
44
import userEvent from '@testing-library/user-event';
55

6-
import { TextArea, TextAreaBase } from '../TextArea';
6+
import { TextArea } from '../TextArea';
77
import { ValidatedOptions } from '../../../helpers/constants';
88

99
const props = {
1010
onChange: jest.fn(),
1111
value: 'test textarea'
1212
};
1313

14-
describe('TextArea', () => {
15-
test('textarea passes value and event to onChange handler', async () => {
16-
const user = userEvent.setup();
17-
18-
render(<TextAreaBase {...props} value="" aria-label="test textarea" />);
19-
20-
await user.type(screen.getByLabelText('test textarea'), 'a');
21-
expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
22-
});
23-
24-
test('simple text area', () => {
25-
const { asFragment } = render(<TextArea {...props} aria-label="simple textarea" />);
26-
expect(asFragment()).toMatchSnapshot();
27-
});
28-
29-
test('disabled text area using isDisabled', () => {
30-
const { asFragment } = render(<TextArea {...props} aria-label="is disabled textarea" isDisabled />);
31-
expect(asFragment()).toMatchSnapshot();
32-
});
33-
34-
test('disabled text area using disabled', () => {
35-
const { asFragment } = render(<TextArea {...props} aria-label="disabled textarea" disabled />);
36-
expect(asFragment()).toMatchSnapshot();
37-
});
38-
39-
test('read only text area using isReadOnly', () => {
40-
const { asFragment } = render(<TextArea {...props} aria-label="is read only textarea" isReadOnly />);
41-
expect(asFragment()).toMatchSnapshot();
42-
});
43-
44-
test('read only text area using default readOnlyVariant', () => {
45-
const { asFragment } = render(
46-
<TextArea {...props} aria-label="is default read only textarea" readOnlyVariant="default" />
47-
);
48-
expect(asFragment()).toMatchSnapshot();
49-
});
50-
51-
test('read only text area using plain readOnlyVariant', () => {
52-
const { asFragment } = render(
53-
<TextArea {...props} aria-label="is plain read only textarea" readOnlyVariant="plain" />
54-
);
55-
expect(asFragment()).toMatchSnapshot();
56-
});
57-
58-
test('read only text area using readOnly', () => {
59-
const { asFragment } = render(<TextArea {...props} aria-label="read only textarea" readOnly />);
60-
expect(asFragment()).toMatchSnapshot();
61-
});
62-
63-
test('validated text area success', () => {
64-
render(<TextArea {...props} required validated={ValidatedOptions.success} aria-label="validated textarea" />);
65-
expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-success');
66-
});
67-
68-
test('validated text area warning', () => {
69-
render(<TextArea {...props} required validated={ValidatedOptions.warning} aria-label="validated textarea" />);
70-
expect(screen.getByLabelText('validated textarea')).toHaveClass('pf-m-warning');
71-
});
72-
73-
test('validated text area error', () => {
74-
const { asFragment } = render(
75-
<TextArea {...props} required validated={ValidatedOptions.error} aria-label="validated textarea" />
76-
);
77-
expect(asFragment()).toMatchSnapshot();
78-
});
79-
80-
test('vertically resizable text area', () => {
81-
const { asFragment } = render(
82-
<TextArea resizeOrientation="vertical" {...props} aria-label="vertical resize textarea" />
83-
);
84-
expect(asFragment()).toMatchSnapshot();
85-
});
86-
87-
test('horizontally resizable text area', () => {
88-
const { asFragment } = render(
89-
<TextArea
90-
resizeOrientation="horizontal"
91-
{...props}
92-
required
93-
validated={'error'}
94-
aria-label="horizontal resize textarea"
95-
/>
96-
);
97-
expect(asFragment()).toMatchSnapshot();
98-
});
99-
100-
test('should throw console error when no aria-label or id is given', () => {
101-
const myMock = jest.fn();
102-
global.console = { ...global.console, error: myMock };
103-
104-
render(<TextArea {...props} />);
105-
106-
expect(myMock).toHaveBeenCalled();
107-
});
108-
109-
test('should not throw console error when id is given but no aria-label', () => {
110-
const myMock = jest.fn();
111-
global.console = { ...global.console, error: myMock };
112-
113-
render(<TextArea {...props} id="5" />);
114-
115-
expect(myMock).not.toHaveBeenCalled();
116-
});
117-
118-
test('should not throw console error when aria-label is given but no id', () => {
119-
const myMock = jest.fn();
120-
global.console = { ...global.console, error: myMock };
121-
122-
render(<TextArea {...props} aria-label="test textarea" />);
123-
124-
expect(myMock).not.toHaveBeenCalled();
125-
});
14+
test('Textarea input passes value and event to onChange handler', async () => {
15+
const user = userEvent.setup();
16+
render(<TextArea {...props} value="" aria-label="test textarea" />);
17+
18+
await user.type(screen.getByRole('textbox'), 'a');
19+
20+
expect(props.onChange).toHaveBeenCalledWith('a', expect.any(Object));
21+
});
22+
23+
test('Renders simple text input', () => {
24+
render(
25+
<div data-testid="textarea">
26+
<TextArea aria-label="simple textarea" />
27+
</div>
28+
);
29+
expect(screen.getByTestId('textarea').firstChild).toBeVisible();
30+
});
31+
32+
test('Renders with custom class passed', () => {
33+
render(<TextArea aria-label="custom class textarea" className="test-class" />);
34+
35+
expect(screen.getByRole('textbox')).toHaveClass('test-class');
36+
});
37+
38+
test('Renders text area with required attribute using isRequired', () => {
39+
render(<TextArea aria-label="required textarea" isRequired />);
40+
41+
expect(screen.getByRole('textbox')).toBeRequired();
42+
});
43+
44+
test('Text area is not required by default', () => {
45+
render(<TextArea aria-label="not required textarea" />);
46+
47+
expect(screen.getByRole('textbox')).not.toBeRequired();
48+
});
49+
50+
test('Renders disabled text area using isDisabled', () => {
51+
render(<TextArea aria-label="is disabled textarea" isDisabled />);
52+
expect(screen.getByRole('textbox')).toBeDisabled();
53+
});
54+
55+
test('Text area is not disabled by default', () => {
56+
render(<TextArea aria-label="not disabled textarea" />);
57+
expect(screen.getByRole('textbox')).not.toBeDisabled();
58+
});
59+
60+
test('Renders read only text area using readOnlyVariant', () => {
61+
render(<TextArea aria-label="is read only textarea" readOnlyVariant={'default'} />);
62+
expect(screen.getByRole('textbox')).toHaveAttribute('readonly');
63+
});
64+
65+
test('Text area is not read only by default', () => {
66+
render(<TextArea aria-label="not read only textarea" />);
67+
expect(screen.getByRole('textbox')).not.toHaveAttribute('readonly');
68+
});
69+
70+
test('Renders text area with default class name only', () => {
71+
render(<TextArea aria-label="validated textarea" />);
72+
expect(screen.getByRole('textbox')).toHaveClass('pf-c-form-control', { exact: true });
73+
});
74+
75+
test('Renders validated text area with success className', () => {
76+
render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.success} />);
77+
expect(screen.getByRole('textbox')).toHaveClass('pf-m-success');
78+
});
79+
80+
test('Renders validated text area with warning className', () => {
81+
render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.warning} />);
82+
expect(screen.getByRole('textbox')).toHaveClass('pf-m-warning');
83+
});
84+
85+
test('Renders invalid text area', () => {
86+
render(<TextArea aria-label="validated textarea" validated={ValidatedOptions.error} />);
87+
expect(screen.getByRole('textbox')).toBeInvalid();
88+
});
89+
90+
test('Text area is not invalid by default', () => {
91+
render(<TextArea aria-label="validated textarea" />);
92+
expect(screen.getByRole('textbox')).not.toBeInvalid();
93+
});
94+
95+
test('Renders vertically resizable text area', () => {
96+
render(<TextArea aria-label="vertical resize textarea" resizeOrientation="vertical" />);
97+
expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-vertical');
98+
});
99+
100+
test('Renders horizontally resizable text area', () => {
101+
render(<TextArea aria-label="horizontal resize textarea" resizeOrientation="horizontal" />);
102+
expect(screen.getByRole('textbox')).toHaveClass('pf-m-resize-horizontal');
103+
});
104+
105+
test('Throws console error when no aria-label or id is given', () => {
106+
jest.spyOn(global.console, 'error');
107+
108+
render(<TextArea />);
109+
110+
expect(console.error).toHaveBeenCalled();
111+
});
112+
113+
test('Does not throw console error when id is given but no aria-label', () => {
114+
jest.spyOn(global.console, 'error');
115+
116+
render(<TextArea id="5" />);
117+
118+
expect(console.error).not.toHaveBeenCalled();
119+
});
120+
121+
test('Does not throw console error when aria-label is given but no id', () => {
122+
jest.spyOn(global.console, 'error');
123+
124+
render(<TextArea aria-label="test textarea" />);
125+
126+
expect(console.error).not.toHaveBeenCalled();
127+
});
128+
129+
test('TextArea can be accessed via passed ref', () => {
130+
const testRef: React.RefObject<HTMLTextAreaElement> = React.createRef();
131+
render(<TextArea ref={testRef} />);
132+
global.scrollTo = jest.fn();
133+
testRef.current?.focus();
134+
expect(screen.getByRole('textbox')).toHaveFocus();
135+
});
136+
137+
test('Matches the snapshot', () => {
138+
const { asFragment } = render(
139+
<TextArea className="custom class" isRequired isDisabled autoResize aria-label="test textarea" />
140+
);
141+
expect(asFragment()).toMatchSnapshot();
126142
});

‎packages/react-core/src/components/TextArea/__tests__/__snapshots__/TextArea.test.tsx.snap‎

Lines changed: 5 additions & 120 deletions
Original file line numberDiff line numberDiff line change
@@ -1,129 +1,14 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`TextArea disabled text area using disabled 1`] = `
3+
exports[`Matches the snapshot 1`] = `
44
<DocumentFragment>
55
<textarea
66
aria-invalid="false"
7-
aria-label="disabled textarea"
8-
class="pf-c-form-control"
7+
aria-label="test textarea"
8+
class="pf-c-form-control custom class"
99
disabled=""
10-
>
11-
test textarea
12-
</textarea>
13-
</DocumentFragment>
14-
`;
15-
16-
exports[`TextArea disabled text area using isDisabled 1`] = `
17-
<DocumentFragment>
18-
<textarea
19-
aria-invalid="false"
20-
aria-label="is disabled textarea"
21-
class="pf-c-form-control"
22-
disabled=""
23-
>
24-
test textarea
25-
</textarea>
26-
</DocumentFragment>
27-
`;
28-
29-
exports[`TextArea horizontally resizable text area 1`] = `
30-
<DocumentFragment>
31-
<textarea
32-
aria-invalid="true"
33-
aria-label="horizontal resize textarea"
34-
class="pf-c-form-control pf-m-resize-horizontal"
35-
required=""
36-
>
37-
test textarea
38-
</textarea>
39-
</DocumentFragment>
40-
`;
41-
42-
exports[`TextArea read only text area using default readOnlyVariant 1`] = `
43-
<DocumentFragment>
44-
<textarea
45-
aria-invalid="false"
46-
aria-label="is default read only textarea"
47-
class="pf-c-form-control"
48-
readonly=""
49-
>
50-
test textarea
51-
</textarea>
52-
</DocumentFragment>
53-
`;
54-
55-
exports[`TextArea read only text area using isReadOnly 1`] = `
56-
<DocumentFragment>
57-
<textarea
58-
aria-invalid="false"
59-
aria-label="is read only textarea"
60-
class="pf-c-form-control"
61-
readonly=""
62-
>
63-
test textarea
64-
</textarea>
65-
</DocumentFragment>
66-
`;
67-
68-
exports[`TextArea read only text area using plain readOnlyVariant 1`] = `
69-
<DocumentFragment>
70-
<textarea
71-
aria-invalid="false"
72-
aria-label="is plain read only textarea"
73-
class="pf-c-form-control pf-m-plain"
74-
readonly=""
75-
>
76-
test textarea
77-
</textarea>
78-
</DocumentFragment>
79-
`;
80-
81-
exports[`TextArea read only text area using readOnly 1`] = `
82-
<DocumentFragment>
83-
<textarea
84-
aria-invalid="false"
85-
aria-label="read only textarea"
86-
class="pf-c-form-control"
87-
readonly=""
88-
>
89-
test textarea
90-
</textarea>
91-
</DocumentFragment>
92-
`;
93-
94-
exports[`TextArea simple text area 1`] = `
95-
<DocumentFragment>
96-
<textarea
97-
aria-invalid="false"
98-
aria-label="simple textarea"
99-
class="pf-c-form-control"
100-
>
101-
test textarea
102-
</textarea>
103-
</DocumentFragment>
104-
`;
105-
106-
exports[`TextArea validated text area error 1`] = `
107-
<DocumentFragment>
108-
<textarea
109-
aria-invalid="true"
110-
aria-label="validated textarea"
111-
class="pf-c-form-control"
11210
required=""
113-
>
114-
test textarea
115-
</textarea>
116-
</DocumentFragment>
117-
`;
118-
119-
exports[`TextArea vertically resizable text area 1`] = `
120-
<DocumentFragment>
121-
<textarea
122-
aria-invalid="false"
123-
aria-label="vertical resize textarea"
124-
class="pf-c-form-control pf-m-resize-vertical"
125-
>
126-
test textarea
127-
</textarea>
11+
style="--pf-c-form-control--textarea--Height: 6px;"
12+
/>
12813
</DocumentFragment>
12914
`;

0 commit comments

Comments
 (0)