diff --git a/tests/components/ct-react-vite/src/components/Counter.tsx b/tests/components/ct-react-vite/src/components/Counter.tsx index cce35000c8..18e999de73 100644 --- a/tests/components/ct-react-vite/src/components/Counter.tsx +++ b/tests/components/ct-react-vite/src/components/Counter.tsx @@ -17,9 +17,9 @@ import { useLayoutEffect, useRef, useState } from "react" _remountCount++; } }, []) - return
props.onClick?.('hello')}> -
{ props.count }
-
{ remountCount }
+ return
+ } diff --git a/tests/components/ct-react-vite/tests/update.spec.tsx b/tests/components/ct-react-vite/tests/update.spec.tsx index cb2b06258a..e492a4e4cb 100644 --- a/tests/components/ct-react-vite/tests/update.spec.tsx +++ b/tests/components/ct-react-vite/tests/update.spec.tsx @@ -1,5 +1,6 @@ import { test, expect } from '@playwright/experimental-ct-react'; import Counter from '@/components/Counter'; +import DefaultChildren from '@/components/DefaultChildren'; test('update props without remounting', async ({ mount }) => { const component = await mount(); @@ -12,6 +13,17 @@ test('update props without remounting', async ({ mount }) => { await expect(component.getByTestId('remount-count')).toContainText('1'); }); +test('update child props without remounting', async ({ mount }) => { + const component = await mount(); + await expect(component.getByTestId('props')).toContainText('9001'); + + await component.update(); + await expect(component).not.toContainText('9001'); + await expect(component.getByTestId('props')).toContainText('1337'); + + await expect(component.getByTestId('remount-count')).toContainText('1'); +}); + test('update callbacks without remounting', async ({ mount }) => { const component = await mount(); @@ -29,7 +41,26 @@ test('update callbacks without remounting', async ({ mount }) => { await expect(component.getByTestId('remount-count')).toContainText('1'); }); -test('update slots without remounting', async ({ mount }) => { +test('update child callbacks without remounting', async ({ mount }) => { + const component = await mount(); + + const messages: string[] = []; + await component.update( + + { + messages.push(message); + }} + /> + + ); + await component.getByRole('button').click(); + expect(messages).toEqual(['hello']); + + await expect(component.getByTestId('remount-count')).toContainText('1'); +}); + +test('update children without remounting', async ({ mount }) => { const component = await mount(Default Slot); await expect(component).toContainText('Default Slot'); @@ -39,3 +70,22 @@ test('update slots without remounting', async ({ mount }) => { await expect(component.getByTestId('remount-count')).toContainText('1'); }); + +test('update grandchild without remounting', async ({ mount }) => { + const component = await mount( + + Default Slot + + ); + await expect(component.getByRole('button')).toContainText('Default Slot'); + + await component.update( + + Test Slot + + ); + await expect(component.getByRole('button')).not.toContainText('Default Slot'); + await expect(component.getByRole('button')).toContainText('Test Slot'); + + await expect(component.getByTestId('remount-count')).toContainText('1'); +}); diff --git a/tests/components/ct-react17/src/components/Counter.tsx b/tests/components/ct-react17/src/components/Counter.tsx index cce35000c8..18e999de73 100644 --- a/tests/components/ct-react17/src/components/Counter.tsx +++ b/tests/components/ct-react17/src/components/Counter.tsx @@ -17,9 +17,9 @@ import { useLayoutEffect, useRef, useState } from "react" _remountCount++; } }, []) - return
props.onClick?.('hello')}> -
{ props.count }
-
{ remountCount }
+ return
+ } diff --git a/tests/components/ct-react17/src/components/MultipleChildren.tsx b/tests/components/ct-react17/src/components/MultipleChildren.tsx index 63bd0104c6..283f88a189 100644 --- a/tests/components/ct-react17/src/components/MultipleChildren.tsx +++ b/tests/components/ct-react17/src/components/MultipleChildren.tsx @@ -1,4 +1,3 @@ - type MultipleChildrenProps = { children?: [any, any, any]; } diff --git a/tests/components/ct-react17/tests/update.spec.tsx b/tests/components/ct-react17/tests/update.spec.tsx index 110e642cc3..50967dc50e 100644 --- a/tests/components/ct-react17/tests/update.spec.tsx +++ b/tests/components/ct-react17/tests/update.spec.tsx @@ -1,5 +1,6 @@ import { test, expect } from '@playwright/experimental-ct-react17'; import Counter from '@/components/Counter'; +import DefaultChildren from '@/components/DefaultChildren'; test('update props without remounting', async ({ mount }) => { const component = await mount(); @@ -12,6 +13,17 @@ test('update props without remounting', async ({ mount }) => { await expect(component.getByTestId('remount-count')).toContainText('1'); }); +test('update child props without remounting', async ({ mount }) => { + const component = await mount(); + await expect(component.getByTestId('props')).toContainText('9001'); + + await component.update(); + await expect(component).not.toContainText('9001'); + await expect(component.getByTestId('props')).toContainText('1337'); + + await expect(component.getByTestId('remount-count')).toContainText('1'); +}); + test('update callbacks without remounting', async ({ mount }) => { const component = await mount(); @@ -29,7 +41,26 @@ test('update callbacks without remounting', async ({ mount }) => { await expect(component.getByTestId('remount-count')).toContainText('1'); }); -test('update slots without remounting', async ({ mount }) => { +test('update child callbacks without remounting', async ({ mount }) => { + const component = await mount(); + + const messages: string[] = []; + await component.update( + + { + messages.push(message); + }} + /> + + ); + await component.getByRole('button').click(); + expect(messages).toEqual(['hello']); + + await expect(component.getByTestId('remount-count')).toContainText('1'); +}); + +test('update children without remounting', async ({ mount }) => { const component = await mount(Default Slot); await expect(component).toContainText('Default Slot'); @@ -39,3 +70,22 @@ test('update slots without remounting', async ({ mount }) => { await expect(component.getByTestId('remount-count')).toContainText('1'); }); + +test('update grandchild without remounting', async ({ mount }) => { + const component = await mount( + + Default Slot + + ); + await expect(component.getByRole('button')).toContainText('Default Slot'); + + await component.update( + + Test Slot + + ); + await expect(component.getByRole('button')).not.toContainText('Default Slot'); + await expect(component.getByRole('button')).toContainText('Test Slot'); + + await expect(component.getByTestId('remount-count')).toContainText('1'); +}); diff --git a/tests/components/ct-solid/src/components/Counter.tsx b/tests/components/ct-solid/src/components/Counter.tsx index c9bc132307..12725c5638 100644 --- a/tests/components/ct-solid/src/components/Counter.tsx +++ b/tests/components/ct-solid/src/components/Counter.tsx @@ -10,10 +10,10 @@ import { createSignal } from "solid-js"; export default function Counter(props: CounterProps) { const [remountCount, setRemountCount] = createSignal(_remountCount++); - return
props.onClick?.('hello')}> -
{props.count}
-
{remountCount()}
+ return
+ } \ No newline at end of file diff --git a/tests/components/ct-solid/tests/update.spec.tsx b/tests/components/ct-solid/tests/update.spec.tsx index 7c1d96b987..930e93b1b3 100644 --- a/tests/components/ct-solid/tests/update.spec.tsx +++ b/tests/components/ct-solid/tests/update.spec.tsx @@ -1,5 +1,6 @@ import { test, expect } from '@playwright/experimental-ct-solid'; import Counter from '@/components/Counter'; +import DefaultChildren from '@/components/DefaultChildren'; test('update props without remounting', async ({ mount }) => { const component = await mount(); @@ -16,13 +17,13 @@ test('update props without remounting', async ({ mount }) => { await expect(component.getByTestId('remount-count')).toContainText('2'); }); -test('update slots without remounting', async ({ mount }) => { - const component = await mount(Default Slot); - await expect(component).toContainText('Default Slot'); +test('update child props without remounting', async ({ mount }) => { + const component = await mount(); + await expect(component.getByTestId('props')).toContainText('9001'); - await component.update(Test Slot); - await expect(component).not.toContainText('Default Slot'); - await expect(component).toContainText('Test Slot'); + await component.update(); + await expect(component).not.toContainText('9001'); + await expect(component.getByTestId('props')).toContainText('1337'); /** * Ideally toContainText('2') should be toContainText('1') @@ -51,3 +52,64 @@ test('update callbacks without remounting', async ({ mount }) => { */ await expect(component.getByTestId('remount-count')).toContainText('2'); }); + +test('update child callbacks without remounting', async ({ mount }) => { + const component = await mount(); + + const messages: string[] = []; + await component.update( + + { + messages.push(message); + }} + /> + + ); + await component.getByRole('button').click(); + expect(messages).toEqual(['hello']); + + /** + * Ideally toContainText('2') should be toContainText('1') + * However it seems impossible to update the props, slots or events of a rendered component + */ + await expect(component.getByTestId('remount-count')).toContainText('2'); +}); + +test('update children without remounting', async ({ mount }) => { + const component = await mount(Default Slot); + await expect(component).toContainText('Default Slot'); + + await component.update(Test Slot); + await expect(component).not.toContainText('Default Slot'); + await expect(component).toContainText('Test Slot'); + + /** + * Ideally toContainText('2') should be toContainText('1') + * However it seems impossible to update the props, slots or events of a rendered component + */ + await expect(component.getByTestId('remount-count')).toContainText('2'); +}); + +test('update grandchild without remounting', async ({ mount }) => { + const component = await mount( + + Default Slot + + ); + await expect(component.getByRole('button')).toContainText('Default Slot'); + + await component.update( + + Test Slot + + ); + await expect(component.getByRole('button')).not.toContainText('Default Slot'); + await expect(component.getByRole('button')).toContainText('Test Slot'); + + /** + * Ideally toContainText('2') should be toContainText('1') + * However it seems impossible to update the props, slots or events of a rendered component + */ + await expect(component.getByTestId('remount-count')).toContainText('2'); +}); diff --git a/tests/components/ct-svelte-vite/src/components/Counter.svelte b/tests/components/ct-svelte-vite/src/components/Counter.svelte index d7c6a0b409..0362e2ac53 100644 --- a/tests/components/ct-svelte-vite/src/components/Counter.svelte +++ b/tests/components/ct-svelte-vite/src/components/Counter.svelte @@ -6,9 +6,9 @@ const dispatch = createEventDispatcher(); update(); -
dispatch('submit', 'hello')}> -
{count}
-
{remountCount}
+
+ diff --git a/tests/components/ct-svelte/src/components/Counter.svelte b/tests/components/ct-svelte/src/components/Counter.svelte index e5d59503a1..38674bb6c3 100644 --- a/tests/components/ct-svelte/src/components/Counter.svelte +++ b/tests/components/ct-svelte/src/components/Counter.svelte @@ -6,9 +6,9 @@ const dispatch = createEventDispatcher(); update(); -
dispatch('submit', 'hello')}> -
{count}
-
{remountCount}
+
+ diff --git a/tests/components/ct-vue-cli/src/components/Counter.vue b/tests/components/ct-vue-cli/src/components/Counter.vue index 8ded37ff23..47bc1c17cc 100644 --- a/tests/components/ct-vue-cli/src/components/Counter.vue +++ b/tests/components/ct-vue-cli/src/components/Counter.vue @@ -1,8 +1,10 @@