playwright/tests/components/ct-react/tests/update.spec.tsx

42 lines
1.4 KiB
TypeScript

import { test, expect } from '@playwright/experimental-ct-react';
import Counter from '@/components/Counter';
test('update props without remounting', async ({ mount }) => {
const component = await mount(<Counter count={9001} />);
await expect(component.locator('#props')).toContainText('9001');
await component.update(<Counter count={1337} />);
await expect(component).not.toContainText('9001');
await expect(component.locator('#props')).toContainText('1337');
await expect(component.locator('#remount-count')).toContainText('1');
});
test('update callbacks without remounting', async ({ mount }) => {
const component = await mount(<Counter />);
const messages: string[] = [];
await component.update(
<Counter
onClick={(message) => {
messages.push(message);
}}
/>
);
await component.click();
expect(messages).toEqual(['hello']);
await expect(component.locator('#remount-count')).toContainText('1');
});
test('update slots without remounting', async ({ mount }) => {
const component = await mount(<Counter>Default Slot</Counter>);
await expect(component).toContainText('Default Slot');
await component.update(<Counter>Test Slot</Counter>);
await expect(component).not.toContainText('Default Slot');
await expect(component).toContainText('Test Slot');
await expect(component.locator('#remount-count')).toContainText('1');
});