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 @@
-
+
+
+
+