githubmirror/react-hook-form

e2e/watchUseFieldArrayNested.spec.ts
178 строк5 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 } from './utils';

test.describe('watchUseFieldArrayNested', () => {
  test('should watch the correct nested field array', async ({ page }) => {
    await page.goto('/watchUseFieldArrayNested');

    const result = async () =>
      JSON.parse((await page.locator('#result').textContent()) || 'null');

    await expect.poll(result).toEqual([
      {
        firstName: 'Bill',
        keyValue: [{ name: '1a' }, { name: '1c' }],
        lastName: 'Luo',
      },
    ]);

    await page.locator(`#nest-append-0`).click();
    await page.locator(`#nest-prepend-0`).click();
    await page.locator(`#nest-insert-0`).click();
    await page.locator(`#nest-swap-0`).click();
    await page.locator(`#nest-move-0`).click();

    await expect.poll(result).toEqual([
      {
        firstName: 'Bill',
        keyValue: [
          { name: 'insert' },
          { name: 'prepend' },
          { name: '1a' },
          { name: '1c' },
          { name: 'append' },
        ],
        lastName: 'Luo',
      },
    ]);

    await page.locator('#nest-update-0').click();

    await expect.poll(result).toEqual([
      {
        firstName: 'Bill',
        keyValue: [
          { name: 'billUpdate' },
          { name: 'prepend' },
          { name: '1a' },
          { name: '1c' },
          { name: 'append' },
        ],
        lastName: 'Luo',
      },
    ]);

    await page.locator(`#nest-remove-0`).click();

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

    await expect.poll(result).toEqual([
      {
        firstName: 'Bill',
        keyValue: [
          { name: 'billUpdate' },
          { name: '1a' },
          { name: '1c' },
          { name: 'append' },
        ],
        lastName: 'Luo',
      },
    ]);

    await page.locator('#prepend').click();
    await page.locator('#append').click();
    await page.locator('#swap').click();
    await page.locator('#insert').click();

    await expect.poll(result).toEqual([
      { firstName: 'prepend', keyValue: [] },
      { firstName: 'insert', keyValue: [] },
      { firstName: 'append', keyValue: [] },
      {
        firstName: 'Bill',
        lastName: 'Luo',
        keyValue: [
          { name: 'billUpdate' },
          { name: '1a' },
          { name: '1c' },
          { name: 'append' },
        ],
      },
    ]);

    await page.locator(`#nest-append-0`).click();
    await page.locator(`#nest-prepend-0`).click();
    await page.locator(`#nest-insert-0`).click();
    await page.locator(`#nest-swap-0`).click();
    await page.locator(`#nest-move-0`).click();

    await expect.poll(result).toEqual([
      {
        firstName: 'prepend',
        keyValue: [{ name: 'insert' }, { name: 'prepend' }, { name: 'append' }],
      },
      { firstName: 'insert', keyValue: [] },
      { firstName: 'append', keyValue: [] },
      {
        firstName: 'Bill',
        lastName: 'Luo',
        keyValue: [
          { name: 'billUpdate' },
          { name: '1a' },
          { name: '1c' },
          { name: 'append' },
        ],
      },
    ]);

    await page.locator('#nest-remove-3').click();
    await page.locator('#nest-remove-3').click();

    await expect.poll(result).toEqual([
      {
        firstName: 'prepend',
        keyValue: [{ name: 'insert' }, { name: 'prepend' }, { name: 'append' }],
      },
      { firstName: 'insert', keyValue: [] },
      { firstName: 'append', keyValue: [] },
      {
        firstName: 'Bill',
        lastName: 'Luo',
        keyValue: [{ name: 'billUpdate' }, { name: 'append' }],
      },
    ]);

    await page.locator('#nest-remove-all-3').click();
    await page.locator('#nest-remove-all-2').click();
    await page.locator('#nest-remove-all-1').click();
    await page.locator('#nest-remove-all-0').click();

    await expect.poll(result).toEqual([
      { firstName: 'prepend', keyValue: [] },
      { firstName: 'insert', keyValue: [] },
      { firstName: 'append', keyValue: [] },
      { firstName: 'Bill', lastName: 'Luo', keyValue: [] },
    ]);

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

    await expect.poll(result).toEqual([
      { firstName: 'BillUpdate', keyValue: [] },
      { firstName: 'insert', keyValue: [] },
      { firstName: 'append', keyValue: [] },
      { firstName: 'Bill', lastName: 'Luo', keyValue: [] },
    ]);

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

    await expect
      .poll(result)
      .toEqual([{ firstName: 'BillUpdate', keyValue: [] }]);

    // The exact render count is stable at 36 under Cypress, but verified
    // non-deterministic under Playwright (observed 35-36 across 10+ local
    // runs). Use a bounded range instead of an exact match.
    await expectRenderCountInRange(page.locator('#count'), 34, 37);

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

    // #result is a <p>, not a form control, so Playwright's toHaveValue()
    // can't be used here (it requires an input/select/textarea). The
    // meaningful equivalent of the original "empty value" check is that the
    // watched `test` array is now empty.
    await expect(page.locator('#result')).toHaveText('[]');
  });
});