Skip to content

Commit c8c834c

Browse files
coder966coder966
committed
tests: fix tests because validation errors occur one render cycle (or more) after the trigger.
1 parent 9c8ff28 commit c8c834c

9 files changed

+96
-61
lines changed

‎src/__tests__/form/RruCheckboxInput.test.tsx‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { act, render, renderHook, screen } from '@testing-library/react';
17+
import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
1818
import userEvent from '@testing-library/user-event';
1919
import React from 'react';
2020
import * as yup from 'yup';
@@ -167,9 +167,10 @@ describe('RruCheckboxInput', () => {
167167
await submitForm(container);
168168

169169
// validation for bad input
170-
expect(onSubmit).toHaveBeenCalledTimes(0);
171-
expect(inputElement?.getAttribute('class')).toContain('is-invalid');
172-
expect(screen.getByText('You must agree')).toBeTruthy();
170+
await waitFor(() => {
171+
expect(onSubmit).toHaveBeenCalledTimes(0);
172+
expect(screen.getByText('You must agree')).toBeTruthy();
173+
});
173174

174175
// make it checked
175176
inputElement && (await userEvent.click(inputElement));
@@ -178,9 +179,11 @@ describe('RruCheckboxInput', () => {
178179
await submitForm(container);
179180

180181
// validation for valid input
181-
expect(onSubmit).toHaveBeenCalledTimes(1);
182-
expect(onSubmit.mock.calls[0][0]).toEqual({
183-
agree: true,
182+
await waitFor(() => {
183+
expect(onSubmit).toHaveBeenCalledTimes(1);
184+
expect(onSubmit.mock.calls[0][0]).toEqual({
185+
agree: true,
186+
});
184187
});
185188
});
186189

@@ -233,7 +236,7 @@ describe('RruCheckboxInput', () => {
233236
expect(formContext.current.getFieldValue('agree')).toEqual(true);
234237
await act(async () => formContext.current.setFieldValue('agree', false));
235238
expect(formContext.current.getFieldValue('agree')).toEqual(false);
236-
expect(container.querySelector('[data-field-value="true"]')).toBeTruthy();
239+
expect(container.querySelector('[data-field-value="false"]')).toBeTruthy();
237240

238241
// submit the form
239242
await submitForm(container);

‎src/__tests__/form/RruDateTimeInput.test.tsx‎

Lines changed: 12 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { act, render, renderHook, screen } from '@testing-library/react';
17+
import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
1818
import React from 'react';
1919
import * as yup from 'yup';
2020
import RruDateTimeInput from '../../form/RruDateTimeInput/RruDateTimeInput';
@@ -177,8 +177,10 @@ describe('RruDateTimeInput', () => {
177177
await submitForm(container);
178178

179179
// validation for bad input
180-
expect(onSubmit).toHaveBeenCalledTimes(0);
181-
expect(screen.getByText('The date is too old')).toBeTruthy();
180+
await waitFor(() => {
181+
expect(onSubmit).toHaveBeenCalledTimes(0);
182+
expect(screen.getByText('The date is too old')).toBeTruthy();
183+
});
182184

183185
// delete the current value in the input element
184186
await selectDate(container, 'birthDate', '2020-05-12');
@@ -187,11 +189,13 @@ describe('RruDateTimeInput', () => {
187189
await submitForm(container);
188190

189191
// validation for valid input
190-
expect(onSubmit).toHaveBeenCalledTimes(1);
191-
expect(onSubmit.mock.calls[0][0]).toEqual({
192-
// because using YUP validation schema causes the value to be casted to Date object
193-
// TODO: This is a bug in react-hook-form, open PR
194-
birthDate: new Date(new Date('2020-05-12').getTime() - 3 * 60 * 60 * 1000),
192+
await waitFor(() => {
193+
expect(onSubmit).toHaveBeenCalledTimes(1);
194+
expect(onSubmit.mock.calls[0][0]).toEqual({
195+
// because using YUP validation schema causes the value to be casted to Date object
196+
// TODO: This is a bug in react-hook-form, open PR
197+
birthDate: new Date(new Date('2020-05-12').getTime() - 3 * 60 * 60 * 1000),
198+
});
195199
});
196200
});
197201

‎src/__tests__/form/RruFileInput.test.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { act, render, renderHook, screen } from '@testing-library/react';
17+
import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
1818
import React from 'react';
1919
import * as yup from 'yup';
2020
import RruFileInput from '../../form/RruFileInput/RruFileInput';
@@ -178,19 +178,23 @@ describe('RruFileInput', () => {
178178
await submitForm(container);
179179

180180
// validation for bad input
181-
expect(onSubmit).toHaveBeenCalledTimes(0);
182-
expect(screen.getByText('Attachment is required')).toBeTruthy();
181+
await waitFor(() => {
182+
expect(onSubmit).toHaveBeenCalledTimes(0);
183+
expect(screen.getByText('Attachment is required')).toBeTruthy();
184+
});
183185

184186
await selectFile(container, 'cat.png');
185187

186188
// submit the form
187189
await submitForm(container);
188190

189191
// validation for valid input
190-
expect(onSubmit).toHaveBeenCalledTimes(1);
191-
expect(onSubmit.mock.calls[0][0]).toBeTruthy();
192-
expect(onSubmit.mock.calls[0][0].attachment).toBeTruthy();
193-
expect(onSubmit.mock.calls[0][0].attachment.name).toEqual('cat.png');
192+
await waitFor(() => {
193+
expect(onSubmit).toHaveBeenCalledTimes(1);
194+
expect(onSubmit.mock.calls[0][0]).toBeTruthy();
195+
expect(onSubmit.mock.calls[0][0].attachment).toBeTruthy();
196+
expect(onSubmit.mock.calls[0][0].attachment.name).toEqual('cat.png');
197+
});
194198
});
195199

196200
it('should watch the input', async () => {

‎src/__tests__/form/RruMultiCheckboxInput.test.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { act, render, renderHook, screen } from '@testing-library/react';
17+
import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
1818
import React from 'react';
1919
import * as yup from 'yup';
2020
import colorsOptions from '../../../stories/data/colorsOptions';
@@ -157,8 +157,10 @@ describe('RruMultiCheckboxInput', () => {
157157
await submitForm(container);
158158

159159
// validation for bad input
160-
expect(onSubmit).toHaveBeenCalledTimes(0);
161-
expect(screen.getByText('You must select at least one')).toBeTruthy();
160+
await waitFor(() => {
161+
expect(onSubmit).toHaveBeenCalledTimes(0);
162+
expect(screen.getByText('You must select at least one')).toBeTruthy();
163+
});
162164

163165
// change
164166
await checkOption(container, 'Orange');
@@ -167,9 +169,11 @@ describe('RruMultiCheckboxInput', () => {
167169
await submitForm(container);
168170

169171
// validation for valid input
170-
expect(onSubmit).toHaveBeenCalledTimes(1);
171-
expect(onSubmit.mock.calls[0][0]).toEqual({
172-
color: ['ORANGE'],
172+
await waitFor(() => {
173+
expect(onSubmit).toHaveBeenCalledTimes(1);
174+
expect(onSubmit.mock.calls[0][0]).toEqual({
175+
color: ['ORANGE'],
176+
});
173177
});
174178
});
175179

‎src/__tests__/form/RruMultiSelectInput.test.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { act, render, renderHook, screen } from '@testing-library/react';
17+
import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
1818
import React from 'react';
1919
import * as yup from 'yup';
2020
import colorsOptions from '../../../stories/data/colorsOptions';
@@ -157,8 +157,10 @@ describe('RruMultiSelectInput', () => {
157157
await submitForm(container);
158158

159159
// validation for bad input
160-
expect(onSubmit).toHaveBeenCalledTimes(0);
161-
expect(screen.getByText('You must select at least one')).toBeTruthy();
160+
await waitFor(() => {
161+
expect(onSubmit).toHaveBeenCalledTimes(0);
162+
expect(screen.getByText('You must select at least one')).toBeTruthy();
163+
});
162164

163165
// change
164166
await selectOption(container, 'Orange');
@@ -167,9 +169,11 @@ describe('RruMultiSelectInput', () => {
167169
await submitForm(container);
168170

169171
// validation for valid input
170-
expect(onSubmit).toHaveBeenCalledTimes(1);
171-
expect(onSubmit.mock.calls[0][0]).toEqual({
172-
color: ['ORANGE'],
172+
await waitFor(() => {
173+
expect(onSubmit).toHaveBeenCalledTimes(1);
174+
expect(onSubmit.mock.calls[0][0]).toEqual({
175+
color: ['ORANGE'],
176+
});
173177
});
174178
});
175179

‎src/__tests__/form/RruRadioInput.test.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { act, render, renderHook, screen } from '@testing-library/react';
17+
import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
1818
import React from 'react';
1919
import * as yup from 'yup';
2020
import colorsOptions from '../../../stories/data/colorsOptions';
@@ -157,8 +157,10 @@ describe('RruRadioInput', () => {
157157
await submitForm(container);
158158

159159
// validation for bad input
160-
expect(onSubmit).toHaveBeenCalledTimes(0);
161-
expect(screen.getByText('You must select a color')).toBeTruthy();
160+
await waitFor(() => {
161+
expect(onSubmit).toHaveBeenCalledTimes(0);
162+
expect(screen.getByText('You must select a color')).toBeTruthy();
163+
});
162164

163165
// change
164166
await checkOption(container, 'Orange');
@@ -167,9 +169,11 @@ describe('RruRadioInput', () => {
167169
await submitForm(container);
168170

169171
// validation for valid input
170-
expect(onSubmit).toHaveBeenCalledTimes(1);
171-
expect(onSubmit.mock.calls[0][0]).toEqual({
172-
color: 'ORANGE',
172+
await waitFor(() => {
173+
expect(onSubmit).toHaveBeenCalledTimes(1);
174+
expect(onSubmit.mock.calls[0][0]).toEqual({
175+
color: 'ORANGE',
176+
});
173177
});
174178
});
175179

‎src/__tests__/form/RruSelectInput.test.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { act, render, renderHook, screen } from '@testing-library/react';
17+
import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
1818
import React from 'react';
1919
import * as yup from 'yup';
2020
import colorsOptions from '../../../stories/data/colorsOptions';
@@ -157,8 +157,10 @@ describe('RruSelectInput', () => {
157157
await submitForm(container);
158158

159159
// validation for bad input
160-
expect(onSubmit).toHaveBeenCalledTimes(0);
161-
expect(screen.getByText('You must select a color')).toBeTruthy();
160+
await waitFor(() => {
161+
expect(onSubmit).toHaveBeenCalledTimes(0);
162+
expect(screen.getByText('You must select a color')).toBeTruthy();
163+
});
162164

163165
// change
164166
await selectOption(container, 'Orange');
@@ -167,9 +169,11 @@ describe('RruSelectInput', () => {
167169
await submitForm(container);
168170

169171
// validation for valid input
170-
expect(onSubmit).toHaveBeenCalledTimes(1);
171-
expect(onSubmit.mock.calls[0][0]).toEqual({
172-
color: 'ORANGE',
172+
await waitFor(() => {
173+
expect(onSubmit).toHaveBeenCalledTimes(1);
174+
expect(onSubmit.mock.calls[0][0]).toEqual({
175+
color: 'ORANGE',
176+
});
173177
});
174178
});
175179

‎src/__tests__/form/RruTextInput.test.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { act, render, renderHook, screen } from '@testing-library/react';
17+
import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
1818
import userEvent from '@testing-library/user-event';
1919
import React from 'react';
2020
import * as yup from 'yup';
@@ -180,9 +180,11 @@ describe('RruTextInput', () => {
180180
await submitForm(container);
181181

182182
// validation for bad input
183-
expect(onSubmit).toHaveBeenCalledTimes(0);
184-
expect(emailInput?.getAttribute('class')).toContain('is-invalid');
185-
expect(screen.getByText('The email address is incorrect')).toBeTruthy();
183+
await waitFor(() => {
184+
expect(onSubmit).toHaveBeenCalledTimes(0);
185+
expect(emailInput?.getAttribute('class')).toContain('is-invalid');
186+
expect(screen.getByText('The email address is incorrect')).toBeTruthy();
187+
});
186188

187189
// delete the current value in the input element
188190
emailInput && (await userEvent.tripleClick(emailInput));
@@ -194,9 +196,11 @@ describe('RruTextInput', () => {
194196
await submitForm(container);
195197

196198
// validation for valid input
197-
expect(onSubmit).toHaveBeenCalledTimes(1);
198-
expect(onSubmit.mock.calls[0][0]).toEqual({
199-
email: 'khalid@test.com',
199+
await waitFor(() => {
200+
expect(onSubmit).toHaveBeenCalledTimes(1);
201+
expect(onSubmit.mock.calls[0][0]).toEqual({
202+
email: 'khalid@test.com',
203+
});
200204
});
201205
});
202206

‎src/__tests__/form/RruTextareaInput.test.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
* limitations under the License.
1515
*/
1616

17-
import { act, render, renderHook, screen } from '@testing-library/react';
17+
import { act, render, renderHook, screen, waitFor } from '@testing-library/react';
1818
import userEvent from '@testing-library/user-event';
1919
import React from 'react';
2020
import * as yup from 'yup';
@@ -178,9 +178,11 @@ describe('RruTextareaInput', () => {
178178
await submitForm(container);
179179

180180
// validation for bad input
181-
expect(onSubmit).toHaveBeenCalledTimes(0);
182-
expect(myTextInput?.getAttribute('class')).toContain('is-invalid');
183-
expect(screen.getByText('The text you entered is too short.')).toBeTruthy();
181+
await waitFor(() => {
182+
expect(onSubmit).toHaveBeenCalledTimes(0);
183+
expect(myTextInput?.getAttribute('class')).toContain('is-invalid');
184+
expect(screen.getByText('The text you entered is too short.')).toBeTruthy();
185+
});
184186

185187
// delete the current value in the input element
186188
myTextInput && (await userEvent.tripleClick(myTextInput));
@@ -192,9 +194,11 @@ describe('RruTextareaInput', () => {
192194
await submitForm(container);
193195

194196
// validation for valid input
195-
expect(onSubmit).toHaveBeenCalledTimes(1);
196-
expect(onSubmit.mock.calls[0][0]).toEqual({
197-
myText: 'This is a long paragraph',
197+
await waitFor(() => {
198+
expect(onSubmit).toHaveBeenCalledTimes(1);
199+
expect(onSubmit.mock.calls[0][0]).toEqual({
200+
myText: 'This is a long paragraph',
201+
});
198202
});
199203
});
200204

0 commit comments

Comments
 (0)