From 600d6bc635c81e3accd171ca42396cd8953e2603 Mon Sep 17 00:00:00 2001
From: Sander <info@mesander.com>
Date: Tue, 20 Dec 2022 00:34:45 +0100
Subject: [PATCH] test(ct): svelte router (#18749)

---
 tests/components/ct-svelte-vite/package.json  |  7 +-
 .../components/ct-svelte-vite/src/App.svelte  | 74 ++++---------------
 .../src/pages/DashboardPage.svelte            |  1 +
 .../ct-svelte-vite/src/pages/LoginPage.svelte |  1 +
 .../components/ct-svelte-vite/src/svelte.d.ts |  5 +-
 .../ct-svelte-vite/src/tests.spec.ts          | 10 +++
 .../components/ct-svelte-vite/vite.config.ts  |  7 ++
 tests/components/ct-svelte/package.json       |  3 +-
 tests/components/ct-svelte/src/App.svelte     | 42 ++++-------
 tests/components/ct-svelte/src/main.js        |  3 -
 .../ct-svelte/src/pages/DashboardPage.svelte  |  1 +
 .../ct-svelte/src/pages/LoginPage.svelte      |  1 +
 tests/components/ct-svelte/src/tests.spec.ts  | 10 +++
 13 files changed, 70 insertions(+), 95 deletions(-)
 create mode 100644 tests/components/ct-svelte-vite/src/pages/DashboardPage.svelte
 create mode 100644 tests/components/ct-svelte-vite/src/pages/LoginPage.svelte
 create mode 100644 tests/components/ct-svelte-vite/vite.config.ts
 create mode 100644 tests/components/ct-svelte/src/pages/DashboardPage.svelte
 create mode 100644 tests/components/ct-svelte/src/pages/LoginPage.svelte

diff --git a/tests/components/ct-svelte-vite/package.json b/tests/components/ct-svelte-vite/package.json
index 83c84b8c53..256841e718 100644
--- a/tests/components/ct-svelte-vite/package.json
+++ b/tests/components/ct-svelte-vite/package.json
@@ -11,8 +11,7 @@
   },
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^1.1.0",
-    "@tsconfig/svelte": "^2.0.1",
-    "svelte": "^3.49.0",
+    "@tsconfig/svelte": "^3.0.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"
   }
 }
diff --git a/tests/components/ct-svelte-vite/src/App.svelte b/tests/components/ct-svelte-vite/src/App.svelte
index 69b11de63d..1ba1936792 100644
--- a/tests/components/ct-svelte-vite/src/App.svelte
+++ b/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>
-  <img src={logo} alt="Svelte Logo" />
-  <h1>Hello Typescript!</h1>
-
-  <p>
-    Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte
-    apps.
-  </p>
-
-  <p>
-    Check out <a href="https://github.com/sveltejs/kit#readme">SvelteKit</a> for
-    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>
+<Router>
+  <header>
+    <img src="{logo}" alt="logo" width="125" height="125" />
+    <Link to="/">Login</Link>
+    <Link to="/dashboard">Dashboard</Link>
+  </header>
+  <Route path="/*">
+    <Route component="{LoginPage}" />
+    <Route path="dashboard" component="{DashboardPage}" />
+  </Route>
+</Router>
diff --git a/tests/components/ct-svelte-vite/src/pages/DashboardPage.svelte b/tests/components/ct-svelte-vite/src/pages/DashboardPage.svelte
new file mode 100644
index 0000000000..161f5338e8
--- /dev/null
+++ b/tests/components/ct-svelte-vite/src/pages/DashboardPage.svelte
@@ -0,0 +1 @@
+<main>Dashboard</main>
diff --git a/tests/components/ct-svelte-vite/src/pages/LoginPage.svelte b/tests/components/ct-svelte-vite/src/pages/LoginPage.svelte
new file mode 100644
index 0000000000..3c359ab27c
--- /dev/null
+++ b/tests/components/ct-svelte-vite/src/pages/LoginPage.svelte
@@ -0,0 +1 @@
+<main>Login</main>
diff --git a/tests/components/ct-svelte-vite/src/svelte.d.ts b/tests/components/ct-svelte-vite/src/svelte.d.ts
index 0fdb59facc..393ff5ef70 100644
--- a/tests/components/ct-svelte-vite/src/svelte.d.ts
+++ b/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.
-  export default value;
+  import type { ComponentType } from 'svelte';
+  const component: ComponentType;
+  export default component;
 }
diff --git a/tests/components/ct-svelte-vite/src/tests.spec.ts b/tests/components/ct-svelte-vite/src/tests.spec.ts
index 12b58506c8..cdacefe5c6 100644
--- a/tests/components/ct-svelte-vite/src/tests.spec.ts
+++ b/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');
+});
diff --git a/tests/components/ct-svelte-vite/vite.config.ts b/tests/components/ct-svelte-vite/vite.config.ts
new file mode 100644
index 0000000000..401b4d4bd6
--- /dev/null
+++ b/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()]
+})
diff --git a/tests/components/ct-svelte/package.json b/tests/components/ct-svelte/package.json
index 5a491ded3b..bdfb38249c 100644
--- a/tests/components/ct-svelte/package.json
+++ b/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"
   }
 }
diff --git a/tests/components/ct-svelte/src/App.svelte b/tests/components/ct-svelte/src/App.svelte
index 9d6aec93d6..c089e091a7 100644
--- a/tests/components/ct-svelte/src/App.svelte
+++ b/tests/components/ct-svelte/src/App.svelte
@@ -1,30 +1,16 @@
-<script>
-  export let name;
+<script lang="ts">
+import { Link, Route, Router } from "svelte-navigator";
+import LoginPage from './pages/LoginPage.svelte';
+import DashboardPage from './pages/DashboardPage.svelte';
 </script>
 
-<main>
-  <h1>Hello {name}!</h1>
-  <p>Visit the <a href="https://svelte.dev/tutorial">Svelte tutorial</a> to learn how to build Svelte apps.</p>
-</main>
-
-<style>
-  main {
-    text-align: center;
-    padding: 1em;
-    max-width: 240px;
-    margin: 0 auto;
-  }
-
-  h1 {
-    color: #ff3e00;
-    text-transform: uppercase;
-    font-size: 4em;
-    font-weight: 100;
-  }
-
-  @media (min-width: 640px) {
-    main {
-      max-width: none;
-    }
-  }
-</style>
+<Router>
+  <header>
+    <Link to="/">Login</Link>
+    <Link to="/dashboard">Dashboard</Link>
+  </header>
+  <Route path="/*">
+    <Route component="{LoginPage}" />
+    <Route path="dashboard" component="{DashboardPage}" />
+  </Route>
+</Router>
diff --git a/tests/components/ct-svelte/src/main.js b/tests/components/ct-svelte/src/main.js
index d5e74d2004..e081023688 100644
--- a/tests/components/ct-svelte/src/main.js
+++ b/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;
diff --git a/tests/components/ct-svelte/src/pages/DashboardPage.svelte b/tests/components/ct-svelte/src/pages/DashboardPage.svelte
new file mode 100644
index 0000000000..161f5338e8
--- /dev/null
+++ b/tests/components/ct-svelte/src/pages/DashboardPage.svelte
@@ -0,0 +1 @@
+<main>Dashboard</main>
diff --git a/tests/components/ct-svelte/src/pages/LoginPage.svelte b/tests/components/ct-svelte/src/pages/LoginPage.svelte
new file mode 100644
index 0000000000..3c359ab27c
--- /dev/null
+++ b/tests/components/ct-svelte/src/pages/LoginPage.svelte
@@ -0,0 +1 @@
+<main>Login</main>
diff --git a/tests/components/ct-svelte/src/tests.spec.ts b/tests/components/ct-svelte/src/tests.spec.ts
index 91db6f0f73..c42d557f1e 100644
--- a/tests/components/ct-svelte/src/tests.spec.ts
+++ b/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');
+});