From 0deae3d1b4f49d24cd6e4923d9027bd66fefb212 Mon Sep 17 00:00:00 2001
From: Simon Knott <info@simonknott.de>
Date: Fri, 4 Oct 2024 12:09:56 +0200
Subject: [PATCH] add repro

---
 .../ct-vue-vite/src/components/HelloWorld.vue | 42 +++++++++++++++++++
 .../ct-vue-vite/tests/slots/slots.spec.js     | 12 ++++++
 2 files changed, 54 insertions(+)
 create mode 100644 tests/components/ct-vue-vite/src/components/HelloWorld.vue

diff --git a/tests/components/ct-vue-vite/src/components/HelloWorld.vue b/tests/components/ct-vue-vite/src/components/HelloWorld.vue
new file mode 100644
index 0000000000..e8733b24db
--- /dev/null
+++ b/tests/components/ct-vue-vite/src/components/HelloWorld.vue
@@ -0,0 +1,42 @@
+<script setup>
+defineProps({
+  msg: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+    <h3>
+      <slot>default value</slot>
+    </h3>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+
+h3 {
+  font-size: 1.2rem;
+}
+
+.greetings h1,
+.greetings h3 {
+  text-align: center;
+}
+
+@media (min-width: 1024px) {
+  .greetings h1,
+  .greetings h3 {
+    text-align: left;
+  }
+}
+</style>
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..d93a30bef8 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 HelloWorld from "@/components/HelloWorld.vue";
 
 test('render a default slot', async ({ mount }) => {
   const component = await mount(DefaultSlot, {
@@ -49,3 +50,14 @@ 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(HelloWorld, { slots });
+  await expect(component).toHaveText('foo');
+
+  await component.update({ slots });
+  await expect(component).toHaveText('foo');
+});