From ff0c4989040c00e8f70f84831aed6549343dfac6 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Fri, 4 Oct 2024 14:18:21 +0200
Subject: [PATCH] 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         |  2 +-
 .../ct-vue-vite/src/components/SlotDefaultValue.vue   |  3 +++
 .../components/ct-vue-vite/tests/slots/slots.spec.js  | 11 +++++++++++
 .../components/ct-vue-vite/tests/slots/slots.spec.ts  | 11 +++++++++++
 4 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 tests/components/ct-vue-vite/src/components/SlotDefaultValue.vue

diff --git a/packages/playwright-ct-vue/registerSource.mjs b/packages/playwright-ct-vue/registerSource.mjs
index 07ce5298f4..33bc74e731 100644
--- a/packages/playwright-ct-vue/registerSource.mjs
+++ b/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;
 }
diff --git a/tests/components/ct-vue-vite/src/components/SlotDefaultValue.vue b/tests/components/ct-vue-vite/src/components/SlotDefaultValue.vue
new file mode 100644
index 0000000000..c5944a3f8a
--- /dev/null
+++ b/tests/components/ct-vue-vite/src/components/SlotDefaultValue.vue
@@ -0,0 +1,3 @@
+<template>
+  <slot>default value</slot>
+</template>
diff --git a/tests/components/ct-vue-vite/tests/slots/slots.spec.js b/tests/components/ct-vue-vite/tests/slots/slots.spec.js
index a33c9dac92..7d36d9733b 100644
--- a/tests/components/ct-vue-vite/tests/slots/slots.spec.js
+++ b/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');
+});
diff --git a/tests/components/ct-vue-vite/tests/slots/slots.spec.ts b/tests/components/ct-vue-vite/tests/slots/slots.spec.ts
index a33c9dac92..7d36d9733b 100644
--- a/tests/components/ct-vue-vite/tests/slots/slots.spec.ts
+++ b/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');
+});