[BUG] Experimental CT: Svelte named Slots

[aMediocreDad]

Context:

• Playwright Version: experimental-ct-svelte": 1.23.4
• Operating System: Mac / Linux
• Node.js version: 16.14.2 / 18.5.0
• Browser: All
• Extra: *

Code Snippet

Help us help you! Put down a short code snippet that illustrates your bug and
that we can run and debug locally. For example:

Reproduction: https://github.com/aMediocreDad/playwright-svelte-slots-repro

import { test, expect } from "@playwright/experimental-ct-svelte";

import Component from "./slot-example.svelte";

test("Named Slots", async ({ mount }) => {
	const component = await mount(Component, {
		props: {
			title: "Named Slots",
		},
		// This should work
		slots: {
			text: "Hello World",
		},
	});

	const title = component.locator("h1");

	await expect(title).toHaveText("Named Slots");

	const text = component.locator("p");

	// Yet, this fails
	await expect(text).toContainText("Hello World");
});

Describe the bug

While this is experimental the FAQ indicates that you can pass (text) to named slots when mounting the Svelte component.

This seems to be wrong. It would, however, be a desirable feature.

[sand4rt]

related to: sveltejs/svelte#2588

[aMediocreDad]

related to: sveltejs/svelte#2588

I was under the impression that Playwright had some custom code that did this. Injecting slots programmatically when mounting Svelte components has never been a feature in Svelte 3. It does, however, look like it is possible when using an editor like VS Code and the Svelte LSP, this because of an internal handler for the typing of the component that unfortunately has to be exposed.

[bhvngt]

I stumble upon this while playing around with component testing for my svelte components. As @aMediocreDad said, seems like passing of slots (default or named) is not working out of the box.

@aMediocreDad Did you manage to make it work for your use case by following sveltejs/svelte#2588. Code there does not seem to work for me.

[aMediocreDad]

@aMediocreDad Did you manage to make it work for your use case by following sveltejs/svelte#2588. Code there does not seem to work for me.

No, I have not tried using those solutions. We use the same solutions we do for Storybook, which is using a svelte component that wraps the one being tested populating the slot with relevant parameters exposed through props.

[bhvngt]

Thanks @sand4rt for addressing this issue. The included test passes text content to the slot. Is it also possible to pass components to slots?

[sand4rt]

@bhvngt lets track that in: #15900