refactor: add a svelte4 version of tests

package-lock.json

@@ -7027,6 +7027,31 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/svelte": {
+      "version": "5.20.2",
+      "resolved": "https://registry.npmjs.org/svelte/-/svelte-5.20.2.tgz",
+      "integrity": "sha512-aYXJreNUiyTob0QOzRZeBXZMGeFZDch6SrSRV8QTncZb6zj0O3BEdUzPpojuHQ1pTvk+KX7I6rZCXPUf8pTPxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@ampproject/remapping": "^2.3.0",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@types/estree": "^1.0.5",
+        "acorn": "^8.12.1",
+        "acorn-typescript": "^1.4.13",
+        "aria-query": "^5.3.1",
+        "axobject-query": "^4.1.0",
+        "clsx": "^2.1.1",
+        "esm-env": "^1.2.1",
+        "esrap": "^1.4.3",
+        "is-reference": "^3.0.3",
+        "locate-character": "^3.0.0",
+        "magic-string": "^0.30.11",
+        "zimmerframe": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=18"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "dev": true,
@@ -7833,7 +7858,7 @@
       "dependencies": {
         "playwright": "1.51.0-next",
         "playwright-core": "1.51.0-next",
-        "vite": "^5.4.14 || ^6.0.0"
+        "vite": "^6.1.0"
       },
       "engines": {
         "node": ">=18"
@@ -7881,7 +7906,7 @@
         "playwright": "cli.js"
       },
       "devDependencies": {
-        "svelte": "^5.19.9"
+        "svelte": "^5.20.2"
       },
       "engines": {
         "node": ">=18"
@@ -7921,29 +7946,6 @@
         "vite": "^6.0.0"
       }
     },
-    "packages/playwright-ct-svelte/node_modules/svelte": {
-      "version": "5.19.9",
-      "license": "MIT",
-      "dependencies": {
-        "@ampproject/remapping": "^2.3.0",
-        "@jridgewell/sourcemap-codec": "^1.5.0",
-        "@types/estree": "^1.0.5",
-        "acorn": "^8.12.1",
-        "acorn-typescript": "^1.4.13",
-        "aria-query": "^5.3.1",
-        "axobject-query": "^4.1.0",
-        "clsx": "^2.1.1",
-        "esm-env": "^1.2.1",
-        "esrap": "^1.4.3",
-        "is-reference": "^3.0.3",
-        "locate-character": "^3.0.0",
-        "magic-string": "^0.30.11",
-        "zimmerframe": "^1.1.2"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "packages/playwright-ct-svelte/node_modules/vitefu": {
       "version": "1.0.5",
       "license": "MIT",

packages/playwright-ct-core/package.json

@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "playwright-core": "1.51.0-next",
-    "vite": "^5.4.14 || ^6.0.0",
+    "vite": "^6.1.0",
     "playwright": "1.51.0-next"
   }
 }

packages/playwright-ct-svelte/package.json

@@ -34,7 +34,7 @@
     "@sveltejs/vite-plugin-svelte": "^5.0.3"
   },
   "devDependencies": {
-    "svelte": "^5.19.9"
+    "svelte": "^5.20.2"
   },
   "bin": {
     "playwright": "cli.js"

tests/components/ct-svelte-vite/package.json

@@ -14,7 +14,7 @@
     "@tsconfig/svelte": "^5.0.2",
     "svelte-check": "^3.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.2.8"
+    "vite": "^6.1.0"
   },
   "dependencies": {
     "svelte": "^5.19.9"

tests/components/ct-svelte4/.gitignore

@@ -0,0 +1,5 @@
+/node_modules/
+/public/build/
+/public/tests/
+
+.DS_Store

tests/components/ct-svelte4/README.md

@@ -0,0 +1,109 @@
+*Psst — looking for a more complete solution? Check out [SvelteKit](https://kit.svelte.dev), the official framework for building web applications of all sizes, with a beautiful development experience and flexible filesystem-based routing.*
+
+*Looking for a shareable component template instead? You can [use SvelteKit for that as well](https://kit.svelte.dev/docs#packaging) or the older [sveltejs/component-template](https://github.com/sveltejs/component-template)*
+
+---
+
+# svelte app
+
+This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
+
+To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
+
+```bash
+npx degit sveltejs/template svelte-app
+cd svelte-app
+```
+
+*Note that you will need to have [Node.js](https://nodejs.org) installed.*
+
+
+## Get started
+
+Install the dependencies...
+
+```bash
+cd svelte-app
+npm install
+```
+
+...then start [Rollup](https://rollupjs.org):
+
+```bash
+npm run dev
+```
+
+Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
+
+By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
+
+If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
+
+## Building and running in production mode
+
+To create an optimised version of the app:
+
+```bash
+npm run build
+```
+
+You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
+
+
+## Single-page app mode
+
+By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
+
+If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
+
+```js
+"start": "sirv public --single"
+```
+
+## Using TypeScript
+
+This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
+
+```bash
+node scripts/setupTypeScript.js
+```
+
+Or remove the script via:
+
+```bash
+rm scripts/setupTypeScript.js
+```
+
+If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte).
+
+## Deploying to the web
+
+### With [Vercel](https://vercel.com)
+
+Install `vercel` if you haven't already:
+
+```bash
+npm install -g vercel
+```
+
+Then, from within your project folder:
+
+```bash
+cd public
+vercel deploy --name my-project
+```
+
+### With [surge](https://surge.sh/)
+
+Install `surge` if you haven't already:
+
+```bash
+npm install -g surge
+```
+
+Then, from within your project folder:
+
+```bash
+npm run build
+surge public my-project.surge.sh
+```

tests/components/ct-svelte4/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "ct-svelte",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "build": "rollup -c",
+    "dev": "rollup -c -w",
+    "start": "sirv public --no-clear",
+    "typecheck": "tsc --noEmit"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^17.0.0",
+    "@rollup/plugin-node-resolve": "^11.0.0",
+    "rollup": "^2.3.4",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-livereload": "^2.0.0",
+    "rollup-plugin-svelte": "^7.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "sirv-cli": "^2.0.0"
+  },
+  "dependencies": {
+    "svelte": "^5.19.9"
+  }
+}

tests/components/ct-svelte4/playwright.config.ts

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) Microsoft Corporation.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { defineConfig, devices } from '@playwright/experimental-ct-svelte';
+import { resolve } from 'path';
+
+export default defineConfig({
+  testDir: 'tests',
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? 'html' : 'line',
+  use: {
+    trace: 'on-first-retry',
+    ctViteConfig: {
+      resolve: {
+        alias: {
+          '@': resolve(__dirname, './src'),
+        }
+      }
+    }
+  },
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+    {
+      name: 'firefox',
+      use: { ...devices['Desktop Firefox'] },
+    },
+    {
+      name: 'webkit',
+      use: { ...devices['Desktop Safari'] },
+    },
+  ],
+});

tests/components/ct-svelte4/playwright/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Svelte Test</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./index.ts"></script>
+  </body>
+</html>

tests/components/ct-svelte4/playwright/index.ts

@@ -0,0 +1,15 @@
+// @ts-check
+import '../src/assets/index.css';
+import { beforeMount, afterMount } from '@playwright/experimental-ct-svelte/hooks';
+
+export type HooksConfig = {
+  route: string;
+}
+
+beforeMount<HooksConfig>(async ({ hooksConfig }) => {
+  console.log(`Before mount: ${JSON.stringify(hooksConfig)}`);
+});
+  
+afterMount<HooksConfig>(async () => {
+  console.log(`After mount`);
+});

tests/components/ct-svelte4/public/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset='utf-8'>
+  <meta name='viewport' content='width=device-width,initial-scale=1'>
+
+  <title>Svelte app</title>
+
+  <link rel='icon' type='image/png' href='/favicon.png'>
+  <link rel='stylesheet' href='/build/bundle.css'>
+
+  <script defer src='/build/bundle.js'></script>
+</head>
+
+<body>
+</body>
+</html>

tests/components/ct-svelte4/rollup.config.js

@@ -0,0 +1,121 @@
+import svelte from 'rollup-plugin-svelte';
+import commonjs from '@rollup/plugin-commonjs';
+import resolve from '@rollup/plugin-node-resolve';
+import livereload from 'rollup-plugin-livereload';
+import { terser } from 'rollup-plugin-terser';
+import css from 'rollup-plugin-css-only';
+
+const production = !process.env.ROLLUP_WATCH;
+
+function serve() {
+  let server;
+
+  function toExit() {
+    if (server) server.kill(0);
+  }
+
+  return {
+    writeBundle() {
+      if (server) return;
+      server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
+        stdio: ['ignore', 'inherit', 'inherit'],
+        shell: true
+      });
+
+      process.on('SIGTERM', toExit);
+      process.on('exit', toExit);
+    }
+  };
+}
+
+const prod = {
+  input: 'src/main.js',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/build/bundle.js'
+  },
+  plugins: [
+    svelte({
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production
+      }
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: 'bundle.css' }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ['svelte']
+    }),
+    commonjs(),
+
+    // In dev mode, call `npm run start` once
+    // the bundle has been generated
+    !production && serve(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser()
+  ],
+  watch: {
+    clearScreen: false
+  }
+};
+
+const test = {
+  input: 'src/tests.js',
+  output: {
+    sourcemap: true,
+    format: 'iife',
+    name: 'app',
+    file: 'public/tests/bundle.js'
+  },
+  plugins: [
+    svelte({
+      compilerOptions: {
+        // enable run-time checks when not in production
+        dev: !production
+      }
+    }),
+    // we'll extract any component CSS out into
+    // a separate file - better for performance
+    css({ output: 'bundle.css' }),
+
+    // If you have external dependencies installed from
+    // npm, you'll most likely need these plugins. In
+    // some cases you'll need additional configuration -
+    // consult the documentation for details:
+    // https://github.com/rollup/plugins/tree/master/packages/commonjs
+    resolve({
+      browser: true,
+      dedupe: ['svelte']
+    }),
+    commonjs(),
+
+    // Watch the `public` directory and refresh the
+    // browser on changes when not in production
+    !production && livereload('public'),
+
+    // If we're building for production (npm run build
+    // instead of npm run dev), minify
+    production && terser()
+  ],
+  watch: {
+    clearScreen: false
+  },
+};
+
+export default [ prod, test ];

tests/components/ct-svelte4/scripts/setupTypeScript.js

@@ -0,0 +1,121 @@
+// @ts-check
+
+/** This script modifies the project to support TS code in .svelte files like:
+
+  <script lang="ts">
+    export let name: string;
+  </script>
+ 
+  As well as validating the code for CI.
+  */
+
+/**  To work on this script:
+  rm -rf test-template template && git clone sveltejs/template test-template && node scripts/setupTypeScript.js test-template
+*/
+
+const fs = require("fs")
+const path = require("path")
+const { argv } = require("process")
+
+const projectRoot = argv[2] || path.join(__dirname, "..")
+
+// Add deps to pkg.json
+const packageJSON = JSON.parse(fs.readFileSync(path.join(projectRoot, "package.json"), "utf8"))
+packageJSON.devDependencies = Object.assign(packageJSON.devDependencies, {
+  "svelte-check": "^2.0.0",
+  "svelte-preprocess": "^4.0.0",
+  "@rollup/plugin-typescript": "^8.0.0",
+  "typescript": "^4.0.0",
+  "tslib": "^2.0.0",
+  "@tsconfig/svelte": "^2.0.0"
+})
+
+// Add script for checking
+packageJSON.scripts = Object.assign(packageJSON.scripts, {
+  "check": "svelte-check --tsconfig ./tsconfig.json"
+})
+
+// Write the package JSON
+fs.writeFileSync(path.join(projectRoot, "package.json"), JSON.stringify(packageJSON, null, "  "))
+
+// mv src/main.js to main.ts - note, we need to edit rollup.config.js for this too
+const beforeMainJSPath = path.join(projectRoot, "src", "main.js")
+const afterMainTSPath = path.join(projectRoot, "src", "main.ts")
+fs.renameSync(beforeMainJSPath, afterMainTSPath)
+
+// Switch the app.svelte file to use TS
+const appSveltePath = path.join(projectRoot, "src", "App.svelte")
+let appFile = fs.readFileSync(appSveltePath, "utf8")
+appFile = appFile.replace("<script>", '<script lang="ts">')
+appFile = appFile.replace("export let name;", 'export let name: string;')
+fs.writeFileSync(appSveltePath, appFile)
+
+// Edit rollup config
+const rollupConfigPath = path.join(projectRoot, "rollup.config.js")
+let rollupConfig = fs.readFileSync(rollupConfigPath, "utf8")
+
+// Edit imports
+rollupConfig = rollupConfig.replace(`'rollup-plugin-terser';`, `'rollup-plugin-terser';
+import sveltePreprocess from 'svelte-preprocess';
+import typescript from '@rollup/plugin-typescript';`)
+
+// Replace name of entry point
+rollupConfig = rollupConfig.replace(`'src/main.js'`, `'src/main.ts'`)
+
+// Add preprocessor
+rollupConfig = rollupConfig.replace(
+  'compilerOptions:',
+  'preprocess: sveltePreprocess({ sourceMap: !production }),\n\t\t\tcompilerOptions:'
+);
+
+// Add TypeScript
+rollupConfig = rollupConfig.replace(
+  'commonjs(),',
+  'commonjs(),\n\t\ttypescript({\n\t\t\tsourceMap: !production,\n\t\t\tinlineSources: !production\n\t\t}),'
+);
+fs.writeFileSync(rollupConfigPath, rollupConfig)
+
+// Add TSConfig
+const tsconfig = `{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/*", "__sapper__/*", "public/*"]
+}`
+const tsconfigPath =  path.join(projectRoot, "tsconfig.json")
+fs.writeFileSync(tsconfigPath, tsconfig)
+
+// Add global.d.ts
+const dtsPath =  path.join(projectRoot, "src", "global.d.ts")
+fs.writeFileSync(dtsPath, `/// <reference types="svelte" />`)
+
+// Delete this script, but not during testing
+if (!argv[2]) {
+  // Remove the script
+  fs.unlinkSync(path.join(__filename))
+
+  // Check for Mac's DS_store file, and if it's the only one left remove it
+  const remainingFiles = fs.readdirSync(path.join(__dirname))
+  if (remainingFiles.length === 1 && remainingFiles[0] === '.DS_store') {
+    fs.unlinkSync(path.join(__dirname, '.DS_store'))
+  }
+
+  // Check if the scripts folder is empty
+  if (fs.readdirSync(path.join(__dirname)).length === 0) {
+    // Remove the scripts folder
+    fs.rmdirSync(path.join(__dirname))
+  }
+}
+
+// Adds the extension recommendation
+fs.mkdirSync(path.join(projectRoot, ".vscode"), { recursive: true })
+fs.writeFileSync(path.join(projectRoot, ".vscode", "extensions.json"), `{
+  "recommendations": ["svelte.svelte-vscode"]
+}
+`)
+
+console.log("Converted to TypeScript.")
+
+if (fs.existsSync(path.join(projectRoot, "node_modules"))) {
+  console.log("\nYou will need to re-run your dependency manager to get started.")
+}

tests/components/ct-svelte4/src/App.svelte

@@ -0,0 +1,34 @@
+<script>
+import { onMount, onDestroy } from 'svelte';
+import LoginPage from './pages/LoginPage.svelte';
+import DashboardPage from './pages/DashboardPage.svelte';
+
+let path = '';
+function updatePath() {
+  path = window.location.pathname;
+}
+onMount(() => {
+  updatePath();
+  window.addEventListener('popstate', updatePath);
+});
+onDestroy(() => {
+  window.removeEventListener('popstate', updatePath);
+});
+/**
+ * @param newPath {string}
+ */
+function navigate(newPath) {
+  history.pushState({}, '', newPath);
+  updatePath();
+}
+</script>
+
+<header>
+  <a on:click={(e) => { e.preventDefault(); navigate('/'); }} href='/login'>Login</a>
+  <a on:click={(e) => { e.preventDefault(); navigate('/dashboard'); }} href='/dashboard'>Dashboard</a>
+</header>
+{#if path === '/'}
+  <LoginPage />
+{:else if path === '/dashboard'}
+  <DashboardPage />
+{/if}

tests/components/ct-svelte4/src/assets/index.css

@@ -0,0 +1,20 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #e3e3e3;
+    background-color: #1b1b1d;
+  }
+}

tests/components/ct-svelte4/src/components/Button.svelte

@@ -0,0 +1,7 @@
+<script>
+import { createEventDispatcher } from "svelte";
+export let title;
+const dispatch = createEventDispatcher();
+</script>
+    
+<button on:click={() => dispatch('submit', 'hello')}>{title}</button>

tests/components/ct-svelte4/src/components/Component.svelte

@@ -0,0 +1 @@
+<div>test</div>

tests/components/ct-svelte4/src/components/Counter.svelte

@@ -0,0 +1,14 @@
+<script>
+import { update, remountCount } from '../store'
+import { createEventDispatcher } from "svelte";
+export let count;
+const dispatch = createEventDispatcher();
+update();
+</script>
+
+<button on:click={() => dispatch('submit', 'hello')}>
+  <span data-testid="props">{count}</span>
+  <span data-testid="remount-count">{remountCount}</span>
+  <slot name="main" />
+  <slot />
+</button>

tests/components/ct-svelte4/src/components/DefaultSlot.svelte

@@ -0,0 +1,9 @@
+<div>
+  <h1>Welcome!</h1>
+  <main>
+    <slot />
+  </main>
+  <footer>
+    Thanks for visiting.
+  </footer>
+</div>

tests/components/ct-svelte4/src/components/MultiRoot.svelte

@@ -0,0 +1,2 @@
+<div>root 1</div>
+<div>root 2</div>

tests/components/ct-svelte4/src/components/NamedSlots.svelte

@@ -0,0 +1,11 @@
+<div>
+  <header>
+    <slot name="header" />
+  </header>
+  <main>
+    <slot name="main" />
+  </main>
+  <footer>
+    <slot name="footer" />
+  </footer>
+</div>

tests/components/ct-svelte4/src/main.js

@@ -0,0 +1,8 @@
+import App from './App.svelte';
+import './assets/index.css';
+
+const app = new App({
+  target: document.body,
+});
+
+export default app;

tests/components/ct-svelte4/src/pages/DashboardPage.svelte

@@ -0,0 +1 @@
+<main>Dashboard</main>

tests/components/ct-svelte4/src/pages/LoginPage.svelte

@@ -0,0 +1 @@
+<main>Login</main>

tests/components/ct-svelte4/src/store/index.ts

@@ -0,0 +1,4 @@
+export let remountCount = 0;
+export function update() {
+  remountCount++;
+}

tests/components/ct-svelte4/tests/events.spec.ts

@@ -0,0 +1,16 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Button from '@/components/Button.svelte';
+
+test('emit an submit event when the button is clicked', async ({ mount }) => {
+  const messages: string[] = [];
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+    on: {
+      submit: (data: string) => messages.push(data),
+    },
+  });
+  await component.click();
+  expect(messages).toEqual(['hello']);
+});

tests/components/ct-svelte4/tests/render.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Button from '@/components/Button.svelte';
+import Component from '@/components/Component.svelte';
+import Empty from '@/components/Empty.svelte';
+
+test('render props', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await expect(component).toContainText('Submit');
+});
+
+test('render a component without options', async ({ mount }) => {
+  const component = await mount(Component);
+  await expect(component).toContainText('test');
+});
+
+test('get textContent of the empty component', async ({ mount }) => {
+  const component = await mount(Empty);
+  expect(await component.allTextContents()).toEqual(['']);
+  expect(await component.textContent()).toBe('');
+  await expect(component).toHaveText('');
+});

tests/components/ct-svelte4/tests/router.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import App from '@/App.svelte';
+
+test('navigate to a page by clicking a link', async ({ page, mount }) => {
+  const component = await mount(App);
+  await expect(component.getByRole('main')).toHaveText('Login');
+  await expect(page).toHaveURL('/');
+  await component.getByRole('link', { name: 'Dashboard' }).click();
+  await expect(component.getByRole('main')).toHaveText('Dashboard');
+  await expect(page).toHaveURL('/dashboard');
+});

tests/components/ct-svelte4/tests/slots.spec.ts

@@ -0,0 +1,25 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import DefaultSlot from '@/components/DefaultSlot.svelte';
+import NamedSlots from '@/components/NamedSlots.svelte';
+
+test('render a default slot', async ({ mount }) => {
+  const component = await mount(DefaultSlot, {
+    slots: {
+      default: 'Main Content',
+    },
+  });
+  await expect(component).toContainText('Main Content');
+});
+
+test('render a component with a named slot', async ({ mount }) => {
+  const component = await mount(NamedSlots, {
+    slots: {
+      header: 'Header',
+      main: 'Main Content',
+      footer: 'Footer',
+    },
+  });
+  await expect(component).toContainText('Header');
+  await expect(component).toContainText('Main Content');
+  await expect(component).toContainText('Footer');
+});

tests/components/ct-svelte4/tests/unmount.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Button from '@/components/Button.svelte';
+import MultiRoot from '@/components/MultiRoot.svelte';
+
+test('unmount', async ({ page, mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await expect(page.locator('#root')).toContainText('Submit');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('Submit');
+});
+
+test('unmount a multi root component', async ({ page, mount }) => {
+  const component = await mount(MultiRoot);
+  await expect(page.locator('#root')).toContainText('root 1');
+  await expect(page.locator('#root')).toContainText('root 2');
+  await component.unmount();
+  await expect(page.locator('#root')).not.toContainText('root 1');
+  await expect(page.locator('#root')).not.toContainText('root 2');
+});
+
+test('unmount twice throws an error', async ({ mount }) => {
+  const component = await mount(Button, {
+    props: {
+      title: 'Submit',
+    },
+  });
+  await component.unmount();
+  await expect(component.unmount()).rejects.toThrowError('Component was not mounted');
+});

tests/components/ct-svelte4/tests/update.spec.ts

@@ -0,0 +1,32 @@
+import { test, expect } from '@playwright/experimental-ct-svelte';
+import Counter from '@/components/Counter.svelte';
+
+test('update props without remounting', async ({ mount }) => {
+  const component = await mount(Counter, {
+    props: { count: 9001 },
+  });
+  await expect(component.getByTestId('props')).toContainText('9001');
+
+  await component.update({
+    props: { count: 1337 },
+  });
+  await expect(component).not.toContainText('9001');
+  await expect(component.getByTestId('props')).toContainText('1337');
+
+  await expect(component.getByTestId('remount-count')).toContainText('1');
+});
+
+test('update event listeners without remounting', async ({ mount }) => {
+  const component = await mount(Counter);
+
+  const messages: string[] = [];
+  await component.update({
+    on: {
+      submit: (data: string) => messages.push(data),
+    },
+  });
+  await component.click();
+  expect(messages).toEqual(['hello']);
+
+  await expect(component.getByTestId('remount-count')).toContainText('1');
+});

tests/components/ct-svelte4/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "skipLibCheck": true,
+    "moduleResolution": "node",
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "*": ["_"],
+    }
+  }
+}