githubmirror/react-hook-form

e2e/basic.spec.ts
394 строки17 KB
Bill
🥗 migrate to playwright & fix delay error feature (#13589)
11 июл 2026, 12:39
11 июл 2026, 12:3911bd6df
import { expect, test } from '@playwright/test';

import { expectRenderCountInRange, type } from './utils';

test.describe('basic form validation', () => {
  test('should validate the form and reset the form', async ({ page }) => {
    await page.goto('/basic/onSubmit');
    await page.locator('button#submit').click();

    await expect(page.locator(':focus')).toHaveAttribute(
      'name',
      'nestItem.nest1',
    );

    await expect(page.locator('input[name="firstName"] + p')).toContainText(
      'firstName error',
    );
    await expect(
      page.locator('input[name="nestItem.nest1"] + p'),
    ).toContainText('nest 1 error');
    await expect(
      page.locator('input[name="arrayItem.0.test1"] + p'),
    ).toContainText('array item 1 error');
    await expect(page.locator('input[name="lastName"] + p')).toContainText(
      'lastName error',
    );
    await expect(page.locator('select[name="selectNumber"] + p')).toContainText(
      'selectNumber error',
    );
    await expect(page.locator('select[name="multiple"] + p')).toContainText(
      'multiple error',
    );
    await expect(
      page.locator('input[name="minRequiredLength"] + p'),
    ).toContainText('minRequiredLength error');
    await expect(page.locator('input[name="radio"] + p')).toContainText(
      'radio error',
    );
    await expect(page.locator('input[name="checkbox"] + p')).toContainText(
      'checkbox error',
    );
    await expect(page.locator('input[name="checkboxArray"] + p')).toContainText(
      'checkboxArray error',
    );
    await expect(page.locator('input[name="validate"] + p')).toContainText(
      'validate error',
    );

    await type(page.locator('input[name="firstName"]'), 'bill');
    await type(page.locator('input[name="firstName"]'), 'a');
    await type(page.locator('input[name="arrayItem.0.test1"]'), 'ab');
    await type(page.locator('input[name="nestItem.nest1"]'), 'ab');
    await type(page.locator('input[name="lastName"]'), 'luo123456');
    await expect(page.locator('input[name="lastName"] + p')).toContainText(
      'lastName error',
    );
    await page.locator('select[name="selectNumber"]').selectOption('1');
    await type(page.locator('input[name="pattern"]'), 'luo');
    await type(page.locator('input[name="min"]'), '1');
    await type(page.locator('input[name="max"]'), '21');
    await page.locator('input[name="minDate"]').fill('2019-07-30');
    await page.locator('input[name="maxDate"]').fill('2019-08-02');
    await page.locator('input[name="lastName"]').clear();
    await type(page.locator('input[name="lastName"]'), 'luo');
    await type(page.locator('input[name="minLength"]'), 'b');
    await type(page.locator('input[name="validate"]'), 'test');

    await expect(page.locator('input[name="pattern"] + p')).toContainText(
      'pattern error',
    );
    await expect(page.locator('input[name="minLength"] + p')).toContainText(
      'minLength error',
    );
    await expect(page.locator('input[name="min"] + p')).toContainText(
      'min error',
    );
    await expect(page.locator('input[name="max"] + p')).toContainText(
      'max error',
    );
    await expect(page.locator('input[name="minDate"] + p')).toContainText(
      'minDate error',
    );
    await expect(page.locator('input[name="maxDate"] + p')).toContainText(
      'maxDate error',
    );

    await type(page.locator('input[name="pattern"]'), '23');
    await type(page.locator('input[name="minLength"]'), 'bi');
    await type(page.locator('input[name="minRequiredLength"]'), 'bi');
    await page.locator('select[name="multiple"]').selectOption(['optionA']);
    await page.locator('input[name="radio"][value="1"]').check();
    await page.locator('input[name="min"]').clear();
    await type(page.locator('input[name="min"]'), '11');
    await page.locator('input[name="max"]').clear();
    await type(page.locator('input[name="max"]'), '19');
    await page.locator('input[name="minDate"]').fill('2019-08-01');
    await page.locator('input[name="maxDate"]').fill('2019-08-01');
    await page.locator('input[name="checkbox"]').check();
    await page.locator('input[name="checkboxArray"][value="3"]').check();
    await page
      .locator('select[name="multiple"]')
      .selectOption(['optionA', 'optionB']);

    await expect(page.locator('p')).toHaveCount(0);

    await page.locator('#submit').click();

    await expect
      .poll(async () => {
        const text = await page.locator('pre').textContent();
        return JSON.parse(text || 'null');
      })
      .toEqual({
        nestItem: { nest1: 'ab' },
        arrayItem: [{ test1: 'ab' }],
        firstName: 'billa',
        lastName: 'luo',
        min: '11',
        max: '19',
        minDate: '2019-08-01',
        maxDate: '2019-08-01',
        minLength: 'bbi',
        minRequiredLength: 'bi',
        selectNumber: '1',
        pattern: 'luo23',
        radio: '1',
        checkbox: true,
        checkboxArray: ['3'],
        multiple: ['optionA', 'optionB'],
        validate: 'test',
      });
    await page.locator('#submit').click();

    await page.locator('#resetForm').click();
    await expect(page.locator('input[name="firstName"]')).toHaveValue('');
    await expect(page.locator('input[name="lastName"]')).toHaveValue('');
    await expect(page.locator('select[name="selectNumber"]')).toHaveValue('');
    await expect(page.locator('input[name="minRequiredLength"]')).toHaveValue(
      '',
    );
    await expect(page.locator('input[name="radio"]:checked')).toHaveCount(0);
    await expect(page.locator('input[name="max"]')).toHaveValue('');
    await expect(page.locator('input[name="min"]')).toHaveValue('');
    await expect(page.locator('input[name="minLength"]')).toHaveValue('');
    await expect(page.locator('input[name="checkbox"]')).not.toBeChecked();
    await expect(page.locator('input[name="pattern"]')).toHaveValue('');
    await expect(page.locator('input[name="minDate"]')).toHaveValue('');
    await expect(page.locator('input[name="maxDate"]')).toHaveValue('');
    // The exact render count isn't deterministic run-to-run under
    // Playwright for this long, async-validation-heavy sequence (observed
    // 37-38 across repeated local runs), unlike Cypress's apparent
    // stability here — assert a bounded range instead of an exact number.
    await expectRenderCountInRange(page.locator('#renderCount'), 35, 40);

    await expect(page.locator('#on-invalid-called-times')).toContainText('1');
  });

  test('should validate the form with onTouched mode', async ({ page }) => {
    await page.goto('/basic/onTouched');
    await page.locator('input[name="nestItem.nest1"]').focus();
    await type(page.locator('input[name="nestItem.nest1"]'), 'test');
    await page.locator('input[name="nestItem.nest1"]').clear();
    await expect(page.locator('p')).toHaveCount(0);
    await page.locator('input[name="nestItem.nest1"]').blur();
    await expect(
      page.locator('input[name="nestItem.nest1"] + p'),
    ).toContainText('nest 1 error');

    await page.locator('input[name="arrayItem.0.test1"]').focus();
    await page.locator('input[name="arrayItem.0.test1"]').blur();
    await expect(
      page.locator('input[name="arrayItem.0.test1"] + p'),
    ).toContainText('array item 1 error');

    await page.locator('select[name="selectNumber"]').focus();
    await page.locator('select[name="selectNumber"]').blur();
    await expect(page.locator('select[name="selectNumber"] + p')).toContainText(
      'selectNumber error',
    );
    await page.locator('select[name="selectNumber"]').selectOption('1');

    await page.locator('input[name="radio"]').first().focus();
    await page.locator('input[name="radio"]').first().blur();
    await expect(page.locator('input[name="radio"] + p')).toContainText(
      'radio error',
    );
    await page.locator('input[name="radio"][value="1"]').check();

    await page.locator('input[name="checkbox"]').focus();
    await page.locator('input[name="checkbox"]').blur();
    await expect(page.locator('input[name="checkbox"] + p')).toContainText(
      'checkbox error',
    );
    await page.locator('input[name="checkbox"]').check();
    await page.locator('input[name="checkbox"]').blur();

    await type(page.locator('input[name="nestItem.nest1"]'), 'test');
    await type(page.locator('input[name="arrayItem.0.test1"]'), 'test');

    await expect(page.locator('p')).toHaveCount(0);

    // Verified stable against the live app (see basic onSubmit test comment).
    await expect(page.locator('#renderCount')).toContainText('12');
  });

  test('should validate the form with onBlur mode and reset the form', async ({
    page,
  }) => {
    await page.goto('/basic/onBlur');

    await page.locator('input[name="nestItem.nest1"]').focus();
    await page.locator('input[name="nestItem.nest1"]').blur();
    await expect(
      page.locator('input[name="nestItem.nest1"] + p'),
    ).toContainText('nest 1 error');
    await type(page.locator('input[name="nestItem.nest1"]'), 'a');

    await page.locator('input[name="arrayItem.0.test1"]').focus();
    await page.locator('input[name="arrayItem.0.test1"]').blur();
    await expect(
      page.locator('input[name="arrayItem.0.test1"] + p'),
    ).toContainText('array item 1 error');
    await type(page.locator('input[name="arrayItem.0.test1"]'), 'a');

    await page.locator('input[name="firstName"]').focus();
    await page.locator('input[name="firstName"]').blur();
    await expect(page.locator('input[name="firstName"] + p')).toContainText(
      'firstName error',
    );
    await type(page.locator('input[name="firstName"]'), 'bill');

    await type(page.locator('input[name="lastName"]'), 'luo123456');
    await page.locator('input[name="lastName"]').blur();
    await expect(page.locator('input[name="lastName"] + p')).toContainText(
      'lastName error',
    );

    await page.locator('select[name="selectNumber"]').focus();
    await page.locator('select[name="selectNumber"]').blur();
    await expect(page.locator('select[name="selectNumber"] + p')).toContainText(
      'selectNumber error',
    );
    // In onBlur mode, selectOption() alone doesn't trigger revalidation the
    // way a real user interaction does (Playwright dispatches an untrusted
    // change event); an explicit focus/blur cycle around it does.
    await page.locator('select[name="selectNumber"]').focus();
    await page.locator('select[name="selectNumber"]').selectOption('1');
    await page.locator('select[name="selectNumber"]').blur();

    await type(page.locator('input[name="pattern"]'), 'luo');
    await type(page.locator('input[name="min"]'), '1');
    await type(page.locator('input[name="max"]'), '21');
    await page.locator('input[name="minDate"]').fill('2019-07-30');
    await page.locator('input[name="maxDate"]').fill('2019-08-02');
    await page.locator('input[name="lastName"]').clear();
    await type(page.locator('input[name="lastName"]'), 'luo');
    await type(page.locator('input[name="minLength"]'), 'b');
    await page.locator('input[name="minLength"]').blur();
    await expect(page.locator('input[name="minLength"] + p')).toContainText(
      'minLength error',
    );
    await expect(page.locator('input[name="min"] + p')).toContainText(
      'min error',
    );
    await expect(page.locator('input[name="max"] + p')).toContainText(
      'max error',
    );
    await expect(page.locator('input[name="minDate"] + p')).toContainText(
      'minDate error',
    );
    await expect(page.locator('input[name="maxDate"] + p')).toContainText(
      'maxDate error',
    );

    await type(page.locator('input[name="pattern"]'), '23');
    await type(page.locator('input[name="minLength"]'), 'bi');
    await type(page.locator('input[name="minRequiredLength"]'), 'bi');
    await page.locator('select[name="multiple"]').selectOption(['optionA']);
    await page.locator('input[name="radio"]').first().focus();
    await page.locator('input[name="radio"]').first().blur();
    await expect(page.locator('input[name="radio"] + p')).toContainText(
      'radio error',
    );
    await page.locator('input[name="radio"][value="1"]').check();
    await page.locator('input[name="min"]').clear();
    await type(page.locator('input[name="min"]'), '11');
    await page.locator('input[name="max"]').clear();
    await type(page.locator('input[name="max"]'), '19');
    await page.locator('input[name="minDate"]').fill('2019-08-01');
    await page.locator('input[name="maxDate"]').fill('2019-08-01');
    await page.locator('input[name="checkbox"]').focus();
    await page.locator('input[name="checkbox"]').blur();
    await expect(page.locator('input[name="checkbox"] + p')).toContainText(
      'checkbox error',
    );
    await page.locator('input[name="checkbox"]').check();
    await page.locator('input[name="checkbox"]').blur();

    await expect(page.locator('p')).toHaveCount(0);

    await page.locator('#resetForm').click();
    await expect(page.locator('input[name="firstName"]')).toHaveValue('');
    await expect(page.locator('input[name="lastName"]')).toHaveValue('');
    await expect(page.locator('select[name="selectNumber"]')).toHaveValue('');
    await expect(page.locator('input[name="minRequiredLength"]')).toHaveValue(
      '',
    );
    await expect(page.locator('input[name="radio"]:checked')).toHaveCount(0);
    await expect(page.locator('input[name="max"]')).toHaveValue('');
    await expect(page.locator('input[name="min"]')).toHaveValue('');
    await expect(page.locator('input[name="minLength"]')).toHaveValue('');
    await expect(page.locator('input[name="checkbox"]')).not.toBeChecked();
    await expect(page.locator('input[name="pattern"]')).toHaveValue('');
    await expect(page.locator('input[name="minDate"]')).toHaveValue('');
    await expect(page.locator('input[name="maxDate"]')).toHaveValue('');
    // Observed 22-28 across repeated local runs — see comment on the
    // onSubmit test's render-count assertion above.
    await expectRenderCountInRange(page.locator('#renderCount'), 20, 30);
  });

  test('should validate the form with onChange mode and reset the form', async ({
    page,
  }) => {
    await page.goto('/basic/onChange');

    await type(page.locator('input[name="firstName"]'), 'bill');
    await type(page.locator('input[name="lastName"]'), 'luo123456');
    await expect(page.locator('input[name="lastName"] + p')).toContainText(
      'lastName error',
    );
    await page.locator('select[name="selectNumber"]').selectOption('1');
    await type(page.locator('input[name="pattern"]'), 'luo');
    await type(page.locator('input[name="min"]'), '1');
    await type(page.locator('input[name="max"]'), '21');
    await page.locator('input[name="minDate"]').fill('2019-07-30');
    await page.locator('input[name="maxDate"]').fill('2019-08-02');
    await page.locator('input[name="lastName"]').clear();
    await type(page.locator('input[name="lastName"]'), 'luo');
    await type(page.locator('input[name="minLength"]'), 'b');

    await expect(page.locator('input[name="pattern"] + p')).toContainText(
      'pattern error',
    );
    await expect(page.locator('input[name="minLength"] + p')).toContainText(
      'minLength error',
    );
    await expect(page.locator('input[name="min"] + p')).toContainText(
      'min error',
    );
    await expect(page.locator('input[name="max"] + p')).toContainText(
      'max error',
    );
    await expect(page.locator('input[name="minDate"] + p')).toContainText(
      'minDate error',
    );
    await expect(page.locator('input[name="maxDate"] + p')).toContainText(
      'maxDate error',
    );

    await type(page.locator('input[name="pattern"]'), '23');
    await type(page.locator('input[name="minLength"]'), 'bi');
    await type(page.locator('input[name="minRequiredLength"]'), 'bi');
    await page.locator('select[name="multiple"]').selectOption(['optionA']);
    await page.locator('input[name="radio"][value="1"]').check();
    await page.locator('input[name="min"]').clear();
    await type(page.locator('input[name="min"]'), '11');
    await page.locator('input[name="max"]').clear();
    await type(page.locator('input[name="max"]'), '19');
    await page.locator('input[name="minDate"]').fill('2019-08-01');
    await page.locator('input[name="maxDate"]').fill('2019-08-01');
    await page.locator('input[name="checkbox"]').check();

    await expect(page.locator('p')).toHaveCount(0);

    await page.locator('#resetForm').click();
    await expect(page.locator('input[name="firstName"]')).toHaveValue('');
    await expect(page.locator('input[name="lastName"]')).toHaveValue('');
    await expect(page.locator('select[name="selectNumber"]')).toHaveValue('');
    await expect(page.locator('input[name="minRequiredLength"]')).toHaveValue(
      '',
    );
    await expect(page.locator('input[name="radio"]:checked')).toHaveCount(0);
    await expect(page.locator('input[name="max"]')).toHaveValue('');
    await expect(page.locator('input[name="min"]')).toHaveValue('');
    await expect(page.locator('input[name="minLength"]')).toHaveValue('');
    await expect(page.locator('input[name="checkbox"]')).not.toBeChecked();
    await expect(page.locator('input[name="pattern"]')).toHaveValue('');
    await expect(page.locator('input[name="minDate"]')).toHaveValue('');
    await expect(page.locator('input[name="maxDate"]')).toHaveValue('');
    // Observed 20-23 across repeated local runs — see comment on the
    // onSubmit test's render-count assertion above.
    await expectRenderCountInRange(page.locator('#renderCount'), 18, 25);
  });
});