Skip to content

Commit d30e8cf

Browse files
wintondeshongwintondeshong
authored
Merge pull request #63 from SaidShah/add-tests-for-molecules-select-form-field
Add tests for molecules select form field
2 parents f0440ff + 143ea04 commit d30e8cf

File tree

3 files changed

+177
-13
lines changed

3 files changed

+177
-13
lines changed

‎src/atoms/forms/select.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@ const Select: React.FC<SelectProps> = (props: SelectProps) => {
5050
return (
5151
<div className={classNames.join(" ")}>
5252
<select
53+
id={props.id}
5354
onChange={handleChange}
5455
value={props.value}
5556
name={props.name}>

‎src/molecules/form-fields/select-form-field.test.tsx‎

Lines changed: 170 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,173 @@
1-
// import React from "react";
2-
// import { render } from "@testing-library/react";
3-
// import { SelectFormField } from "./select-form-field";
4-
// import faker from "faker";
5-
// import uuid from "uuid";
1+
import React from "react";
2+
import { render, fireEvent } from "@testing-library/react";
3+
import {
4+
SelectFormField,
5+
InvalidSelectFormValueClass,
6+
} from "./select-form-field";
7+
import faker from "faker";
8+
import uuid from "uuid";
69

710
describe("SelectFormField", () => {
8-
test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/26", () => {});
11+
test("when default props, renders with label", () => {
12+
// Arrange
13+
const label = faker.random.words();
14+
const selectLabel = faker.random.word();
15+
const selectValue = faker.random.word();
16+
17+
// Act
18+
const { getByText } = render(
19+
<SelectFormField
20+
onChange={() => {}}
21+
label={label}
22+
id={uuid()}
23+
values={[{ value: selectValue, label: selectLabel }]}
24+
/>
25+
);
26+
27+
// Assert
28+
expect(getByText(label)).not.toBeNil();
29+
});
30+
31+
test("when has errorsMessages prop, renders with error messages", () => {
32+
// Arrange
33+
const expected = faker.random.words();
34+
const firstErrorMessage = faker.random.words();
35+
const secondErrorMessage = faker.random.words();
36+
const selectLabel = faker.random.word();
37+
const selectValue = faker.random.word();
38+
39+
// Act
40+
const { getByText } = render(
41+
<SelectFormField
42+
label={expected}
43+
onChange={() => {}}
44+
id={uuid()}
45+
errorMessages={[firstErrorMessage, secondErrorMessage]}
46+
values={[{ value: selectValue, label: selectLabel }]}
47+
/>
48+
);
49+
50+
// Assert
51+
expect(getByText(firstErrorMessage)).not.toBeNil();
52+
expect(getByText(secondErrorMessage)).not.toBeNil();
53+
});
54+
55+
test("when has errorsMessage prop, renders with error message", () => {
56+
// Arrange
57+
const expected = faker.random.words();
58+
const testErrorMessage = faker.random.words();
59+
const selectLabel = faker.random.word();
60+
const selectValue = faker.random.word();
61+
62+
// Act
63+
const { getByText } = render(
64+
<SelectFormField
65+
label={expected}
66+
onChange={() => {}}
67+
id={uuid()}
68+
errorMessage={testErrorMessage}
69+
values={[{ value: selectValue, label: selectLabel }]}
70+
/>
71+
);
72+
73+
// Assert
74+
expect(getByText(testErrorMessage)).not.toBeNil();
75+
});
76+
77+
test(`when isValid prop is false, renders with ${InvalidSelectFormValueClass} class name`, () => {
78+
// Arrange
79+
const label = faker.random.words();
80+
const selectLabel = faker.random.word();
81+
const selectValue = faker.random.word();
82+
83+
// Act
84+
const { container } = render(
85+
<SelectFormField
86+
onChange={() => {}}
87+
label={label}
88+
isValid={false}
89+
id={uuid()}
90+
values={[{ value: selectValue, label: selectLabel }]}
91+
/>
92+
);
93+
const result = container.querySelector(
94+
"." + InvalidSelectFormValueClass
95+
);
96+
97+
// Assert
98+
expect(result).not.toBeNil();
99+
});
100+
101+
test(`when isValid prop is true, renders without ${InvalidSelectFormValueClass} class name`, () => {
102+
// Arrange
103+
const label = faker.random.words();
104+
const selectLabel = faker.random.word();
105+
const selectValue = faker.random.word();
106+
107+
// Act
108+
const { container } = render(
109+
<SelectFormField
110+
onChange={() => {}}
111+
label={label}
112+
isValid={true}
113+
id={uuid()}
114+
values={[{ value: selectValue, label: selectLabel }]}
115+
/>
116+
);
117+
const result = container.querySelector(
118+
"." + InvalidSelectFormValueClass
119+
);
120+
121+
// Assert
122+
expect(result).toBeNil();
123+
});
124+
125+
test("when required prop set, renders with required text", () => {
126+
// Arrange
127+
const label = faker.random.words();
128+
const requiredText = "*";
129+
const selectLabel = faker.random.word();
130+
const selectValue = faker.random.word();
131+
132+
// Act
133+
const { container } = render(
134+
<SelectFormField
135+
onChange={() => {}}
136+
label={label}
137+
required={true}
138+
id={uuid()}
139+
values={[{ value: selectValue, label: selectLabel }]}
140+
/>
141+
);
142+
const htmlLabelTag = container.getElementsByTagName("label");
143+
144+
// Assert
145+
expect(htmlLabelTag[0].textContent).toContain(requiredText);
146+
});
147+
148+
test("when onChange set, calls handler upon change", () => {
149+
// Arrange
150+
const label = faker.random.word();
151+
let isChecked = false;
152+
const handleChange = () => (isChecked = true);
153+
const selectLabel = faker.random.word();
154+
const selectValue = faker.random.word();
155+
156+
// Act
157+
const { getByLabelText } = render(
158+
<SelectFormField
159+
onChange={handleChange}
160+
label={label}
161+
id={label}
162+
values={[{ value: selectValue, label: selectLabel }]}
163+
/>
164+
);
165+
166+
fireEvent.change(getByLabelText(label), {
167+
target: { value: faker.random.word() },
168+
});
169+
170+
// Assert
171+
expect(isChecked).toBeTrue();
172+
});
9173
});

‎src/molecules/form-fields/select-form-field.tsx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ import { Select, SelectOption } from "../../atoms/forms/select";
44
import { StringUtils, CollectionUtils } from "andculturecode-javascript-core";
55

66
// -----------------------------------------------------------------------------------------
7-
// #region Component
7+
// #region Constants
88
// -----------------------------------------------------------------------------------------
99

1010
const COMPONENT_CLASS = "c-form-field";
11+
export const InvalidSelectFormValueClass = "-invalid";
1112

12-
// #endregion Component
13+
// #endregion Constants
1314

1415
// -----------------------------------------------------------------------------------------
1516
// #region Interfaces
@@ -18,7 +19,6 @@ const COMPONENT_CLASS = "c-form-field";
1819
export interface SelectFormFieldProps {
1920
errorMessage?: string;
2021
errorMessages?: string[];
21-
fieldId?: string;
2222
id: string;
2323
isValid?: boolean;
2424
name?: string;
@@ -40,7 +40,6 @@ const SelectFormField: React.FC<SelectFormFieldProps> = (
4040
const {
4141
errorMessage,
4242
errorMessages,
43-
id,
4443
isValid,
4544
name,
4645
label,
@@ -49,14 +48,14 @@ const SelectFormField: React.FC<SelectFormFieldProps> = (
4948
values,
5049
} = props;
5150

52-
const cssIsValid = isValid ? "" : "-invalid";
53-
const fieldId = props.fieldId ?? uuid.v4();
51+
const cssIsValid = isValid ? "" : InvalidSelectFormValueClass;
52+
const id = props.id ?? uuid.v4();
5453
const hasErrorMessage = StringUtils.hasValue(errorMessage);
5554
const hasErrors = CollectionUtils.hasValues(errorMessages);
5655

5756
return (
5857
<div className={`${COMPONENT_CLASS} ${cssIsValid}`}>
59-
<label htmlFor={fieldId}>
58+
<label htmlFor={id}>
6059
{label}
6160
{required ? "*" : ""}
6261
</label>

0 commit comments

Comments
 (0)