add repro

This commit is contained in:
Simon Knott 2024-10-04 12:09:56 +02:00
parent 895be9f8de
commit 0deae3d1b4
No known key found for this signature in database
GPG key ID: 8CEDC00028084AEC
2 changed files with 54 additions and 0 deletions

View file

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

View file

@ -2,6 +2,7 @@ import { test, expect } from '@playwright/experimental-ct-vue';
import DefaultSlot from '@/components/DefaultSlot.vue'; import DefaultSlot from '@/components/DefaultSlot.vue';
import NamedSlots from '@/components/NamedSlots.vue'; import NamedSlots from '@/components/NamedSlots.vue';
import Button from '@/components/Button.vue'; import Button from '@/components/Button.vue';
import HelloWorld from "@/components/HelloWorld.vue";
test('render a default slot', async ({ mount }) => { test('render a default slot', async ({ mount }) => {
const component = await mount(DefaultSlot, { 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('Main Content');
await expect(component).toContainText('Footer'); 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');
});