mirror of
https://github.com/microsoft/playwright.git
synced 2024-12-02 10:34:27 +03:00
test(ct): svelte router (#18749)
This commit is contained in:
Sander
GitHub
parent
f540ce08f2
commit
600d6bc635
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<main>Dashboard</main>
|
||||
@ -0,0 +1 @@
|
||||
<main>Login</main>
|
||||
@ -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;
|
||||
}
|
||||
|
||||
@ -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');
|
||||
});
|
||||
|
||||
7
tests/components/ct-svelte-vite/vite.config.ts
Normal file
7
tests/components/ct-svelte-vite/vite.config.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [svelte()]
|
||||
})
|
||||
@ -23,6 +23,7 @@
|
||||
"@playwright/test": "^1.22.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"svelte": "^3.0.0"
|
||||
"svelte": "^3.0.0",
|
||||
"svelte-navigator": "^3.2.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -3,9 +3,6 @@ import './assets/index.css';
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
props: {
|
||||
name: 'world'
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
|
||||
@ -0,0 +1 @@
|
||||
<main>Dashboard</main>
|
||||
1
tests/components/ct-svelte/src/pages/LoginPage.svelte
Normal file
1
tests/components/ct-svelte/src/pages/LoginPage.svelte
Normal file
@ -0,0 +1 @@
|
||||
<main>Login</main>
|
||||
@ -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');
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user