e2e/formState.spec.ts - master - githubmirror/react-hook-form

e2e/formState.spec.ts
645 строк18 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('form state', () => {
  test('should return correct form state with onSubmit mode', async ({
    page,
  }) => {
    await page.goto('/formState/onSubmit');

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: [],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await type(page.locator('input[name="firstName"]'), 'test');
    await page.locator('input[name="firstName"]').blur();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await page.locator('input[name="firstName"]').clear();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName'],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await type(page.locator('input[name="firstName"]'), 'test');
    await type(page.locator('input[name="lastName"]'), 'test');
    await page.locator('input[name="lastName"]').blur();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName', 'lastName'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: true,
      });

    await page.locator('input[name="lastName"]').clear();

    await page.locator('#submit').click();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName'],
        isSubmitted: true,
        submitCount: 1,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await type(page.locator('input[name="lastName"]'), 'test');
    await page.locator('#submit').click();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName', 'lastName'],
        isSubmitted: true,
        submitCount: 2,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: true,
        isValid: true,
      });
    await expect(page.locator('#renderCount')).toContainText('16');
  });

  test('should return correct form state with onChange mode', async ({
    page,
  }) => {
    await page.goto('/formState/onChange');

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: [],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await type(page.locator('input[name="firstName"]'), 'test');
    await page.locator('input[name="firstName"]').blur();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await page.locator('input[name="firstName"]').clear();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName'],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await type(page.locator('input[name="firstName"]'), 'test');
    await type(page.locator('input[name="lastName"]'), 'test');
    await page.locator('input[name="lastName"]').blur();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName', 'lastName'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: true,
      });

    await page.locator('input[name="lastName"]').clear();

    await page.locator('#submit').click();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName'],
        isSubmitted: true,
        submitCount: 1,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await type(page.locator('input[name="lastName"]'), 'test');
    await page.locator('#submit').click();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName', 'lastName'],
        isSubmitted: true,
        submitCount: 2,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: true,
        isValid: true,
      });
    await expect(page.locator('#renderCount')).toContainText('14');
  });

  test('should return correct form state with onBlur mode', async ({
    page,
  }) => {
    await page.goto('/formState/onBlur');

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: [],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await type(page.locator('input[name="firstName"]'), 'test');
    await page.locator('input[name="firstName"]').blur();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await page.locator('input[name="firstName"]').clear();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName'],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await type(page.locator('input[name="firstName"]'), 'test');
    await type(page.locator('input[name="lastName"]'), 'test');
    await page.locator('input[name="lastName"]').blur();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName', 'lastName'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: true,
      });

    await page.locator('input[name="lastName"]').clear();

    await page.locator('#submit').click();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName'],
        isSubmitted: true,
        submitCount: 1,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await type(page.locator('input[name="lastName"]'), 'test');
    await page.locator('#submit').click();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName', 'lastName'],
        isSubmitted: true,
        submitCount: 2,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: true,
        isValid: true,
      });
    // Verified non-deterministic across repeated runs (observed 13-15); see e2e/utils.ts
    await expectRenderCountInRange(page.locator('#renderCount'), 13, 15);
  });

  test('should reset dirty value when inputs reset back to default with onSubmit mode', async ({
    page,
  }) => {
    await page.goto('/formState/onSubmit');
    await type(page.locator('input[name="firstName"]'), 'test');
    await page.locator('input[name="firstName"]').blur();
    await type(page.locator('input[name="lastName"]'), 'test');
    await page.locator('input[name="lastName"]').blur();

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName', 'lastName'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: true,
      });

    await page.locator('input[name="firstName"]').clear();
    await page.locator('input[name="lastName"]').clear();

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName'],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await page.locator('select[name="select"]').focus();
    await page.locator('select[name="select"]').selectOption('test1');
    await page.locator('select[name="select"]').blur();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['select'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName', 'select'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });
    await page.locator('select[name="select"]').selectOption('');

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName', 'select'],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await page.locator('input[name="checkbox"]').click();
    await page.locator('input[name="checkbox"]').blur();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['checkbox'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName', 'select', 'checkbox'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await page.locator('input[name="checkbox"]').uncheck();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName', 'select', 'checkbox'],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await page.locator('input[name="checkbox-checked"]').uncheck();
    await page.locator('input[name="checkbox-checked"]').blur();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['checkbox-checked'],
        isSubmitted: false,
        submitCount: 0,
        touched: [
          'firstName',
          'lastName',
          'select',
          'checkbox',
          'checkbox-checked',
        ],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });
    await page.locator('input[name="checkbox-checked"]').click();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: [
          'firstName',
          'lastName',
          'select',
          'checkbox',
          'checkbox-checked',
        ],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await page.locator('input[name="radio"]').click();
    await page.locator('input[name="radio"]').blur();
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['radio'],
        isSubmitted: false,
        submitCount: 0,
        touched: [
          'firstName',
          'lastName',
          'select',
          'checkbox',
          'checkbox-checked',
          'radio',
        ],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await page.locator('select[name="select"]').selectOption('');
    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['radio'],
        isSubmitted: false,
        submitCount: 0,
        touched: [
          'firstName',
          'lastName',
          'select',
          'checkbox',
          'checkbox-checked',
          'radio',
        ],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });
    await expect(page.locator('#renderCount')).toContainText('21');
  });

  test('should reset dirty value when inputs reset back to default with onBlur mode', async ({
    page,
  }) => {
    await page.goto('/formState/onBlur');
    await type(page.locator('input[name="firstName"]'), 'test');
    await page.locator('input[name="firstName"]').blur();
    await type(page.locator('input[name="lastName"]'), 'test');
    await page.locator('input[name="lastName"]').blur();

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName', 'lastName'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: true,
      });

    await page.locator('input[name="firstName"]').clear();
    await page.locator('input[name="lastName"]').clear();
    await page.locator('input[name="lastName"]').blur();

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName'],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });
    // Verified non-deterministic across repeated runs (observed 8-9); see e2e/utils.ts
    await expectRenderCountInRange(page.locator('#renderCount'), 8, 9);
  });

  test('should reset dirty value when inputs reset back to default with onChange mode', async ({
    page,
  }) => {
    await page.goto('/formState/onChange');
    await type(page.locator('input[name="firstName"]'), 'test');
    await page.locator('input[name="firstName"]').blur();
    await type(page.locator('input[name="lastName"]'), 'test');
    await page.locator('input[name="lastName"]').blur();

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: ['firstName', 'lastName'],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName'],
        isDirty: true,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: true,
      });

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

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: [],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await type(page.locator('input[name="firstName"]'), 'test');
    await page.locator('input[name="firstName"]').blur();
    await type(page.locator('input[name="lastName"]'), 'test');
    await page.locator('input[name="lastName"]').blur();

    await page.locator('input[name="firstName"]').clear();
    await page.locator('input[name="lastName"]').clear();

    await expect
      .poll(async () =>
        JSON.parse((await page.locator('#state').textContent()) || 'null'),
      )
      .toEqual({
        dirty: [],
        isSubmitted: false,
        submitCount: 0,
        touched: ['firstName', 'lastName'],
        isDirty: false,
        isSubmitting: false,
        isSubmitSuccessful: false,
        isValid: false,
      });

    await expect(page.locator('#renderCount')).toContainText('14');
  });
});