fix(ct-vue): update default slot should work (#32952)

Closes https://github.com/microsoft/playwright/issues/32809

We were writing onto the wrong object.

packages/playwright-ct-vue/registerSource.mjs

@@ -188,7 +188,7 @@ function __pwWrapFunctions(slots) {
     for (const [key, value] of Object.entries(slots || {}))
       slotsWithRenderFunctions[key] = () => [value];
   } else if (slots?.length) {
-    slots['default'] = () => slots;
+    slotsWithRenderFunctions['default'] = () => slots;
   }
   return slotsWithRenderFunctions;
 }

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

@@ -0,0 +1,3 @@
+<template>
+  <slot>default value</slot>
+</template>

tests/components/ct-vue-vite/tests/slots/slots.spec.js

@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-vue';
 import DefaultSlot from '@/components/DefaultSlot.vue';
 import NamedSlots from '@/components/NamedSlots.vue';
 import Button from '@/components/Button.vue';
+import SlotDefaultValue from "@/components/SlotDefaultValue.vue";
 
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
@@ -49,3 +50,13 @@ test('render a component with a named slot', async ({ mount }) => {
   await expect(component).toContainText('Main Content');
   await expect(component).toContainText('Footer');
 });
+
+test('updating default slot should work', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32809' } }, async ({ mount }) => {
+  const slots = { default: 'foo' };
+
+  const component = await mount(SlotDefaultValue, { slots });
+  await expect(component).toHaveText('foo');
+
+  await component.update({ slots });
+  await expect(component).toHaveText('foo');
+});

tests/components/ct-vue-vite/tests/slots/slots.spec.ts

@@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-vue';
 import DefaultSlot from '@/components/DefaultSlot.vue';
 import NamedSlots from '@/components/NamedSlots.vue';
 import Button from '@/components/Button.vue';
+import SlotDefaultValue from "@/components/SlotDefaultValue.vue";
 
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
@@ -49,3 +50,13 @@ test('render a component with a named slot', async ({ mount }) => {
   await expect(component).toContainText('Main Content');
   await expect(component).toContainText('Footer');
 });
+
+test('updating default slot should work', { annotation: { type: 'issue', description: 'https://github.com/microsoft/playwright/issues/32809' } }, async ({ mount }) => {
+  const slots = { default: 'foo' };
+
+  const component = await mount(SlotDefaultValue, { slots });
+  await expect(component).toHaveText('foo');
+
+  await component.update({ slots });
+  await expect(component).toHaveText('foo');
+});