test(ct): update child (#22712)

tests/components/ct-react-vite/src/components/Counter.tsx

@@ -17,9 +17,9 @@ import { useLayoutEffect, useRef, useState } from "react"
        _remountCount++;
      }
    }, [])
-   return <div onClick={() => props.onClick?.('hello')}>
+   return <button onClick={() => props.onClick?.('hello')}>
-     <div data-testid="props">{ props.count }</div>
+     <span data-testid="props">{ props.count }</span>
-     <div data-testid="remount-count">{ remountCount }</div>
+     <span data-testid="remount-count">{ remountCount }</span>
      { props.children }
-   </div>
+   </button>
  }

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(<Counter count={9001} />);
@@ -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(<DefaultChildren><Counter count={9001} /></DefaultChildren>);
+  await expect(component.getByTestId('props')).toContainText('9001');
+
+  await component.update(<DefaultChildren><Counter count={1337} /></DefaultChildren>);
+  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(<Counter />);
 
@@ -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(<DefaultChildren><Counter /></DefaultChildren>);
+
+  const messages: string[] = [];
+  await component.update(
+    <DefaultChildren>
+      <Counter
+        onClick={(message) => {
+          messages.push(message);
+        }}
+      />
+    </DefaultChildren>
+  );
+  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(<Counter>Default Slot</Counter>);
   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(
+    <DefaultChildren>
+      <Counter>Default Slot</Counter>
+    </DefaultChildren>
+  );
+  await expect(component.getByRole('button')).toContainText('Default Slot');
+
+  await component.update(
+    <DefaultChildren>
+      <Counter>Test Slot</Counter>
+    </DefaultChildren>
+  );
+  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');
+});

tests/components/ct-react17/src/components/Counter.tsx

@@ -17,9 +17,9 @@ import { useLayoutEffect, useRef, useState } from "react"
        _remountCount++;
      }
    }, [])
-   return <div onClick={() => props.onClick?.('hello')}>
+   return <button onClick={() => props.onClick?.('hello')}>
-     <div data-testid="props">{ props.count }</div>
+     <span data-testid="props">{ props.count }</span>
-     <div data-testid="remount-count">{ remountCount }</div>
+     <span data-testid="remount-count">{ remountCount }</span>
      { props.children }
-   </div>
+   </button>
  }

tests/components/ct-react17/src/components/MultipleChildren.tsx

@@ -1,4 +1,3 @@
-
 type MultipleChildrenProps = {
   children?: [any, any, any];
 }

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(<Counter count={9001} />);
@@ -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(<DefaultChildren><Counter count={9001} /></DefaultChildren>);
+  await expect(component.getByTestId('props')).toContainText('9001');
+
+  await component.update(<DefaultChildren><Counter count={1337} /></DefaultChildren>);
+  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(<Counter />);
 
@@ -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(<DefaultChildren><Counter /></DefaultChildren>);
+
+  const messages: string[] = [];
+  await component.update(
+    <DefaultChildren>
+      <Counter
+        onClick={(message) => {
+          messages.push(message);
+        }}
+      />
+    </DefaultChildren>
+  );
+  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(<Counter>Default Slot</Counter>);
   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(
+    <DefaultChildren>
+      <Counter>Default Slot</Counter>
+    </DefaultChildren>
+  );
+  await expect(component.getByRole('button')).toContainText('Default Slot');
+
+  await component.update(
+    <DefaultChildren>
+      <Counter>Test Slot</Counter>
+    </DefaultChildren>
+  );
+  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');
+});

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 <div onClick={() => props.onClick?.('hello')}>
+  return <button onClick={() => props.onClick?.('hello')}>
-     <div data-testid="props">{props.count}</div>
+     <span data-testid="props">{props.count}</span>
-     <div data-testid="remount-count">{remountCount()}</div>
+     <span data-testid="remount-count">{remountCount()}</span>
      { props.children }
-   </div>
+   </button>
  }
  

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(<Counter count={9001} />);
@@ -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 }) => {
+test('update child props without remounting', async ({ mount }) => {
-  const component = await mount(<Counter>Default Slot</Counter>);
+  const component = await mount(<DefaultChildren><Counter count={9001} /></DefaultChildren>);
-  await expect(component).toContainText('Default Slot');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
-  await component.update(<Counter>Test Slot</Counter>);
+  await component.update(<DefaultChildren><Counter count={1337} /></DefaultChildren>);
-  await expect(component).not.toContainText('Default Slot');
+  await expect(component).not.toContainText('9001');
-  await expect(component).toContainText('Test Slot');
+  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(<DefaultChildren><Counter /></DefaultChildren>);
+
+  const messages: string[] = [];
+  await component.update(
+    <DefaultChildren>
+      <Counter
+        onClick={(message) => {
+          messages.push(message);
+        }}
+      />
+    </DefaultChildren>
+  );
+  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(<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');
+
+  /**
+   * 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(
+    <DefaultChildren>
+      <Counter>Default Slot</Counter>
+    </DefaultChildren>
+  );
+  await expect(component.getByRole('button')).toContainText('Default Slot');
+
+  await component.update(
+    <DefaultChildren>
+      <Counter>Test Slot</Counter>
+    </DefaultChildren>
+  );
+  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');
+});

tests/components/ct-svelte-vite/src/components/Counter.svelte

@@ -6,9 +6,9 @@ const dispatch = createEventDispatcher();
 update();
 </script>
 
-<div on:click={() => dispatch('submit', 'hello')}>
+<button on:click={() => dispatch('submit', 'hello')}>
-  <div data-testid="props">{count}</div>
+  <span data-testid="props">{count}</span>
-  <div data-testid="remount-count">{remountCount}</div>
+  <span data-testid="remount-count">{remountCount}</span>
   <slot name="main" />
   <slot />
-</div>
+</button>

tests/components/ct-svelte/src/components/Counter.svelte

@@ -6,9 +6,9 @@ const dispatch = createEventDispatcher();
 update();
 </script>
 
-<div on:click={() => dispatch('submit', 'hello')}>
+<button on:click={() => dispatch('submit', 'hello')}>
-  <div data-testid="props">{count}</div>
+  <span data-testid="props">{count}</span>
-  <div data-testid="remount-count">{remountCount}</div>
+  <span data-testid="remount-count">{remountCount}</span>
   <slot name="main" />
   <slot />
-</div>
+</button>

tests/components/ct-vue-cli/src/components/Counter.vue

@@ -1,8 +1,10 @@
 <template>
-  <div>
+  <button @click="$emit('submit', 'hello')">
+    <span data-testid="props">{{ count }}</span>
     <span data-testid="remount-count">{{ remountCount }}</span>
-    <span data-testid="rerender-count">{{ count }}</span>
+    <slot name="main" />
-  </div>
+    <slot />
+  </button>
 </template>
 
 <script lang="ts">

tests/components/ct-vue-cli/tests/update/update.spec.ts

@@ -1,19 +1,47 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import Counter from '@/components/Counter.vue';
 
-test('renderer and keep the component instance intact', async ({ mount }) => {
+test('update props without remounting', async ({ mount }) => {
-  const component = await mount<{ count: number }>(Counter, {
+  const component = await mount(Counter, {
-    props: {
+    props: { count: 9001 },
-      count: 9001,
-    },
   });
-  await expect(component.getByTestId('rerender-count')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
-  await component.update({ props: { count: 1337 } });
+  await component.update({
-  await expect(component.getByTestId('rerender-count')).toContainText('1337');
+    props: { count: 1337 },
-
+  });
-  await component.update({ props: { count: 42 } });
+  await expect(component).not.toContainText('9001');
-  await expect(component.getByTestId('rerender-count')).toContainText('42');
+  await expect(component.getByTestId('props')).toContainText('1337');
+
+  await expect(component.getByTestId('remount-count')).toContainText('1');
+});
+
+test('update event listeners without remounting', async ({ mount }) => {
+  const component = await mount(Counter);
+
+  const messages: string[] = [];
+  await component.update({
+    on: {
+      submit: (count: string) => messages.push(count),
+    },
+  });
+  await component.click();
+  expect(messages).toEqual(['hello']);
+
+  await expect(component.getByTestId('remount-count')).toContainText('1');
+});
+
+test('update slots without remounting', async ({ mount }) => {
+  const component = await mount(Counter, {
+    slots: { default: 'Default Slot' },
+  });
+  await expect(component).toContainText('Default Slot');
+
+  await component.update({
+    slots: { main: 'Test Slot' },
+  });
+  await expect(component).not.toContainText('Default Slot');
+  await expect(component).toContainText('Test Slot');
 
   await expect(component.getByTestId('remount-count')).toContainText('1');
 });

tests/components/ct-vue-cli/tests/update/update.spec.tsx

@@ -1,15 +1,45 @@
 import { test, expect } from '@playwright/experimental-ct-vue';
 import Counter from '@/components/Counter.vue';
 
-test('renderer and keep the component instance intact', async ({ mount }) => {
+test('update props without remounting', async ({ mount }) => {
   const component = await mount(<Counter count={9001} />);
-  await expect(component.getByTestId('rerender-count')).toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('9001');
 
   await component.update(<Counter count={1337} />);
-  await expect(component.getByTestId('rerender-count')).toContainText('1337');
+  await expect(component).not.toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('1337');
 
-  await component.update(<Counter count={42} />);
+  await expect(component.getByTestId('remount-count')).toContainText('1');
-  await expect(component.getByTestId('rerender-count')).toContainText('42');
+});
+
+test('update event listeners without remounting', async ({ mount }) => {
+  const component = await mount(<Counter />);
+
+  const messages: string[] = [];
+  await component.update(
+    <Counter
+      v-on:submit={(count: string) => {
+        messages.push(count);
+      }}
+    />
+  );
+  await component.click();
+  expect(messages).toEqual(['hello']);
+
+  await expect(component.getByTestId('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>
+      <template v-slot:main>Test Slot</template>
+    </Counter>
+  );
+  await expect(component).not.toContainText('Default Slot');
+  await expect(component).toContainText('Test Slot');
 
   await expect(component.getByTestId('remount-count')).toContainText('1');
 });

tests/components/ct-vue-vite/src/components/Counter.vue

@@ -1,10 +1,10 @@
 <template>
-  <div @click="$emit('submit', 'hello')">
+  <button @click="$emit('submit', 'hello')">
-    <div data-testid="props">{{ count }}</div>
+    <span data-testid="props">{{ count }}</span>
-    <div data-testid="remount-count">{{ remountCount }}</div>
+    <span data-testid="remount-count">{{ remountCount }}</span>
     <slot name="main" />
     <slot />
-  </div>
+  </button>
 </template>
 
 <script lang="ts">

tests/components/ct-vue2-cli/src/components/Counter.vue

@@ -1,10 +1,10 @@
 <template>
-  <div @click="$emit('submit', 'hello')">
+  <button @click="$emit('submit', 'hello')">
-    <div data-testid="props">{{ count }}</div>
+    <span data-testid="props">{{ count }}</span>
-    <div data-testid="remount-count">{{ remountCount }}</div>
+    <span data-testid="remount-count">{{ remountCount }}</span>
     <slot name="main" />
     <slot />
-  </div>
+  </button>
  </template>
 
 <script lang="ts">