Skip to content

feat: extract TextInput and TextArea components #303

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
jcestibariz merged 1 commit into from
Mar 3, 2026
Merged

feat: extract TextInput and TextArea components #303

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
54 changes: 54 additions & 0 deletions packages/pelagos/__tests__/formFields/TextArea-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import {shallow} from 'enzyme';

import TextArea from '../../src/formFields/TextArea';

jest.unmock('../../src/formFields/TextArea');

describe('TextArea', () => {
describe('rendering', () => {
it('renders expected elements', () => {
const wrapper = shallow(
<TextArea id="test" value="value" placeholder="placeholder" required maxLength={10} onChange={jest.fn()} />
);
expect(wrapper.getElement()).toMatchSnapshot();
});

it('renders expected elements when className is set', () => {
const wrapper = shallow(
<TextArea
id="test"
className="TestClass"
value="value"
placeholder="placeholder"
maxLength={10}
onChange={jest.fn()}
/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});

it('renders expected elements when resize is set', () => {
const wrapper = shallow(
<TextArea id="test" value="value" placeholder="placeholder" maxLength={10} resize={true} onChange={jest.fn()} />
);
expect(wrapper.getElement()).toMatchSnapshot();
});

it('renders expected elements when error is set', () => {
const wrapper = shallow(
<TextArea id="test" value="value" placeholder="placeholder" maxLength={10} error onChange={jest.fn()} />
);
expect(wrapper.getElement()).toMatchSnapshot();
});
});

describe('behaviour', () => {
it('calls onChange when a change event is fired', () => {
const onChange = jest.fn();
const event = {target: {value: 'test'}};
const wrapper = shallow(<TextArea value="" onChange={onChange} />);
wrapper.find('[as="textarea"]').simulate('change', event);
expect(onChange.mock.calls).toEqual([['test']]);
});
});
});
43 changes: 1 addition & 42 deletions packages/pelagos/__tests__/formFields/TextAreaField-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,22 +49,7 @@ describe('TextAreaField', () => {
expect(wrapper.getElement()).toMatchSnapshot();
});

it('does not add the resize class if the resize is true', () => {
const wrapper = shallow(
<TextAreaField
id="test"
label="Label"
value="value"
placeholder="placeholder"
maxLength={10}
resize={true}
onChange={jest.fn()}
/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});

it('renders expected elements when showCounter is true', () => {
it('renders expected elements when showCounter is set', () => {
const wrapper = shallow(
<TextAreaField
id="test"
Expand All @@ -78,31 +63,5 @@ describe('TextAreaField', () => {
);
expect(wrapper.getElement()).toMatchSnapshot();
});

it('adds the error class if the error is set', () => {
const wrapper = shallow(
<TextAreaField
id="test"
label="Label"
value="value"
placeholder="placeholder"
maxLength={10}
helperText="Helper text"
error="Error"
onChange={jest.fn()}
/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});
});

describe('behaviour', () => {
it('calls onChange when a change event is fired', () => {
const onChange = jest.fn();
const event = {target: {value: 'test'}};
const wrapper = shallow(<TextAreaField label="Label" value="" onChange={onChange} />);
wrapper.find('[as="textarea"]').simulate('change', event);
expect(onChange.mock.calls).toEqual([['test']]);
});
});
});
67 changes: 67 additions & 0 deletions packages/pelagos/__tests__/formFields/TextInput-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,67 @@
import {shallow} from 'enzyme';

import TextInput from '../../src/formFields/TextInput';

jest.unmock('../../src/formFields/TextInput');

describe('TextInput', () => {
describe('rendering', () => {
it('renders expected elements', () => {
const wrapper = shallow(
<TextInput
id="test"
type="text"
name="name"
value="value"
placeholder="placeholder"
maxLength={10}
required
onChange={jest.fn()}
/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});

it('renders expected elements when className is set', () => {
const wrapper = shallow(
<TextInput
id="test"
className="TestClass"
type="text"
name="name"
value="value"
placeholder="placeholder"
maxLength={10}
onChange={jest.fn()}
/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});

it('renders expected elements when error is set', () => {
const wrapper = shallow(
<TextInput
id="test"
type="text"
name="name"
value="value"
placeholder="placeholder"
maxLength={10}
error
onChange={jest.fn()}
/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});
});

describe('behaviour', () => {
it('calls onChange when a change event is fired', () => {
const onChange = jest.fn();
const event = {target: {value: 'test'}};
const wrapper = shallow(<TextInput onChange={onChange} />);
wrapper.simulate('change', event);
expect(onChange.mock.calls).toEqual([['test']]);
});
});
});
32 changes: 1 addition & 31 deletions packages/pelagos/__tests__/formFields/TextInputField-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import TextInputField from '../../src/formFields/TextInputField';
import useRandomId from '../../src/hooks/useRandomId';

jest.unmock('../../src/formFields/TextInputField');
jest.mock('lodash-es/debounce', () => jest.fn((f) => f));

useRandomId.mockReturnValue('random-id');

Expand All @@ -29,23 +28,6 @@ describe('TextInputField', () => {
expect(useRandomId.mock.calls).toEqual([['test']]);
});

it('renders expected elements when value is empty', () => {
const wrapper = shallow(
<TextInputField
id="test"
label="Label"
type="text"
name="name"
value=""
placeholder="placeholder"
maxLength={10}
disabled={false}
onChange={jest.fn()}
/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});

it('renders expected elements when className is set', () => {
const wrapper = shallow(
<TextInputField
Expand All @@ -57,14 +39,13 @@ describe('TextInputField', () => {
value="value"
placeholder="placeholder"
maxLength={10}
disabled={false}
onChange={jest.fn()}
/>
);
expect(wrapper.getElement()).toMatchSnapshot();
});

it('adds the error class if the error is set', () => {
it('renders expected elements when error is set', () => {
const wrapper = shallow(
<TextInputField
id="test"
Expand All @@ -74,7 +55,6 @@ describe('TextInputField', () => {
value="value"
placeholder="placeholder"
maxLength={10}
disabled={false}
helperText="Helper text"
error="Error"
onChange={jest.fn()}
Expand All @@ -83,14 +63,4 @@ describe('TextInputField', () => {
expect(wrapper.getElement()).toMatchSnapshot();
});
});

describe('behaviour', () => {
it('calls onChange when a change event is fired', () => {
const onChange = jest.fn();
const event = {target: {value: 'test'}};
const wrapper = shallow(<TextInputField label="Label" name="name" value="" onChange={onChange} />);
wrapper.find('[as="input"]').simulate('change', event);
expect(onChange.mock.calls).toEqual([['test']]);
});
});
});
51 changes: 51 additions & 0 deletions packages/pelagos/__tests__/formFields/__snapshots__/TextArea-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing

exports[`TextArea rendering renders expected elements 1`] = `
<Layer
aria-required={true}
as="textarea"
className="TextAreaField__area TextAreaField--noresize"
id="test"
maxLength={10}
onChange={[Function]}
placeholder="placeholder"
value="value"
/>
`;

exports[`TextArea rendering renders expected elements when className is set 1`] = `
<Layer
as="textarea"
className="TextAreaField__area TextAreaField--noresize TestClass"
id="test"
maxLength={10}
onChange={[Function]}
placeholder="placeholder"
value="value"
/>
`;

exports[`TextArea rendering renders expected elements when error is set 1`] = `
<Layer
aria-invalid={true}
as="textarea"
className="TextAreaField__area TextAreaField--noresize TextAreaField--error"
id="test"
maxLength={10}
onChange={[Function]}
placeholder="placeholder"
value="value"
/>
`;

exports[`TextArea rendering renders expected elements when resize is set 1`] = `
<Layer
as="textarea"
className="TextAreaField__area"
id="test"
maxLength={10}
onChange={[Function]}
placeholder="placeholder"
value="value"
/>
`;
Loading