test(ct): svelte router (#18749)

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

@@ -11,8 +11,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.1.0",
-    "@tsconfig/svelte": "^2.0.1",
+    "@tsconfig/svelte": "^3.0.0",
-    "svelte": "^3.49.0",
     "svelte-check": "^2.2.7",
     "svelte-preprocess": "^4.9.8",
     "tslib": "^2.3.1",
@@ -22,5 +21,9 @@
   "@standaloneDevDependencies": {
     "@playwright/experimental-ct-svelte": "^1.22.2",
     "@playwright/test": "^1.22.2"
+  },
+  "dependencies": {
+    "svelte": "^3.49.0",
+    "svelte-navigator": "^3.2.2"
   }
 }

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

@@ -1,62 +1,18 @@
 <script lang="ts">
-  import logo from './assets/svelte.png'
+import { Link, Route, Router } from "svelte-navigator";
+import logo from './assets/svelte.png'
+import LoginPage from './pages/LoginPage.svelte';
+import DashboardPage from './pages/DashboardPage.svelte';
 </script>
 
-<main>
+<Router>
-  <img src={logo} alt="Svelte Logo" />
+  <header>
-  <h1>Hello Typescript!</h1>
+    <img src="{logo}" alt="logo" width="125" height="125" />
-
+    <Link to="/">Login</Link>
-  <p>
+    <Link to="/dashboard">Dashboard</Link>
-    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
+  </header>
-    apps.
+  <Route path="/*">
-  </p>
+    <Route component="{LoginPage}" />
-
+    <Route path="dashboard" component="{DashboardPage}" />
-  <p>
+  </Route>
-    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
+</Router>
-    the officially supported framework, also powered by Vite!
-  </p>
-</main>
-
-<style>
-  :root {
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
-      Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-  }
-
-  main {
-    text-align: center;
-    padding: 1em;
-    margin: 0 auto;
-  }
-
-  img {
-    height: 16rem;
-    width: 16rem;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4rem;
-    font-weight: 100;
-    line-height: 1.1;
-    margin: 2rem auto;
-    max-width: 14rem;
-  }
-
-  p {
-    max-width: 14rem;
-    margin: 1rem auto;
-    line-height: 1.35;
-  }
-
-  @media (min-width: 480px) {
-    h1 {
-      max-width: none;
-    }
-
-    p {
-      max-width: none;
-    }
-  }
-</style>

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

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

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

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

tests/components/ct-svelte-vite/src/svelte.d.ts

@@ -1,4 +1,5 @@
 declare module '*.svelte' {
-  const value: any; // Add better type definitions here if desired.
+  import type { ComponentType } from 'svelte';
-  export default value;
+  const component: ComponentType;
+  export default component;
 }

tests/components/ct-svelte-vite/src/tests.spec.ts

@@ -15,6 +15,7 @@
  */
 
 import { test, expect } from '@playwright/experimental-ct-svelte';
+import App from './App.svelte';
 import Button from './components/Button.svelte';
 import Counter from './components/Counter.svelte';
 import DefaultSlot from './components/DefaultSlot.svelte';
@@ -138,3 +139,12 @@ test('get textContent of the empty component', async ({ mount }) => {
   expect(await component.textContent()).toBe('');
   await expect(component).toHaveText('');
 });
+
+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-svelte-vite/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import { svelte } from '@sveltejs/vite-plugin-svelte'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [svelte()]
+})

tests/components/ct-svelte/package.json

@@ -23,6 +23,7 @@
     "@playwright/test": "^1.22.2"
   },
   "dependencies": {
-    "svelte": "^3.0.0"
+    "svelte": "^3.0.0",
+    "svelte-navigator": "^3.2.2"
   }
 }

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

@@ -1,30 +1,16 @@
-<script>
+<script lang="ts">
-  export let name;
+import { Link, Route, Router } from "svelte-navigator";
+import LoginPage from './pages/LoginPage.svelte';
+import DashboardPage from './pages/DashboardPage.svelte';
 </script>
 
-<main>
+<Router>
-  <h1>Hello {name}!</h1>
+  <header>
-  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
+    <Link to="/">Login</Link>
-</main>
+    <Link to="/dashboard">Dashboard</Link>
-
+  </header>
-<style>
+  <Route path="/*">
-  main {
+    <Route component="{LoginPage}" />
-    text-align: center;
+    <Route path="dashboard" component="{DashboardPage}" />
-    padding: 1em;
+  </Route>
-    max-width: 240px;
+</Router>
-    margin: 0 auto;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4em;
-    font-weight: 100;
-  }
-
-  @media (min-width: 640px) {
-    main {
-      max-width: none;
-    }
-  }
-</style>

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

@@ -3,9 +3,6 @@ import './assets/index.css';
 
 const app = new App({
   target: document.body,
-  props: {
-    name: 'world'
-  }
 });
 
 export default app;

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

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

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

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

tests/components/ct-svelte/src/tests.spec.ts

@@ -15,6 +15,7 @@
  */
 
 import { test, expect } from '@playwright/experimental-ct-svelte';
+import App from './App.svelte';
 import Button from './components/Button.svelte';
 import Counter from './components/Counter.svelte';
 import Component from './components/Component.svelte';
@@ -144,3 +145,12 @@ test('get textContent of the empty component', async ({ mount }) => {
   expect(await component.textContent()).toBe('');
   await expect(component).toHaveText('');
 });
+
+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');
+});