Skip to content

Commit 43e370f

Browse files
Lms24Lms24
authored
test(svelte): Add Svelte 5 E2E test app (#11814)
In #11807 I added a SvelteKit+Svelte 5 E2E test. Let's also add a small Svelte 5 standalone/SPA app ensure we cover such apps as well.
1 parent 101c31b commit 43e370f

File tree

21 files changed

+521
-0
lines changed

21 files changed

+521
-0
lines changed

‎.github/workflows/build.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1006,6 +1006,7 @@ jobs:
10061006
'react-create-hash-router',
10071007
'react-router-6-use-routes',
10081008
'standard-frontend-react',
1009+
'svelte-5',
10091010
'sveltekit',
10101011
'sveltekit-2',
10111012
'sveltekit-2-svelte-5',

‎dev-packages/e2e-tests/test-applications/svelte-5/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎dev-packages/e2e-tests/test-applications/svelte-5/.npmrc‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
@sentry:registry=http://127.0.0.1:4873
2+
@sentry-internal:registry=http://127.0.0.1:4873

‎dev-packages/e2e-tests/test-applications/svelte-5/README.md‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
# Svelte + TS + Vite
2+
3+
This template should help get you started developing with Svelte and TypeScript in Vite.
4+
5+
## Recommended IDE Setup
6+
7+
[VS Code](https://code.visualstudio.com/) +
8+
[Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
9+
10+
## Need an official Svelte framework?
11+
12+
Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its
13+
serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less,
14+
and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
15+
16+
## Technical considerations
17+
18+
**Why use this over SvelteKit?**
19+
20+
- It brings its own routing solution which might not be preferable for some users.
21+
- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
22+
23+
This template contains as little as possible to get started with Vite + TypeScript + Svelte, while taking into account
24+
the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other
25+
`create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
26+
27+
Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been
28+
structured similarly to SvelteKit so that it is easy to migrate.
29+
30+
**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
31+
32+
Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash
33+
references keeps the default TypeScript setting of accepting type information from the entire workspace, while also
34+
adding `svelte` and `vite/client` type information.
35+
36+
**Why include `.vscode/extensions.json`?**
37+
38+
Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to
39+
install the recommended extension upon opening the project.
40+
41+
**Why enable `allowJs` in the TS template?**
42+
43+
While `allowJs: false` would indeed prevent the use of `.js` files in the project, it does not prevent the use of
44+
JavaScript syntax in `.svelte` files. In addition, it would force `checkJs: false`, bringing the worst of both worlds:
45+
not being able to guarantee the entire codebase is TypeScript, and also having worse typechecking for the existing
46+
JavaScript. In addition, there are valid use cases in which a mixed codebase may be relevant.
47+
48+
**Why is HMR not preserving my local component state?**
49+
50+
HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and
51+
`@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details
52+
[here](https://github.com/rixo/svelte-hmr#svelte-hmr).
53+
54+
If you have state that's important to retain within a component, consider creating an external store which would not be
55+
replaced by HMR.
56+
57+
```ts
58+
// store.ts
59+
// An extremely simple external store
60+
import { writable } from 'svelte/store';
61+
export default writable(0);
62+
```

‎dev-packages/e2e-tests/test-applications/svelte-5/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + Svelte + TS</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.ts"></script>
12+
</body>
13+
</html>

‎dev-packages/e2e-tests/test-applications/svelte-5/package.json‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
{
2+
"name": "svelte-5",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vite",
8+
"build": "vite build",
9+
"preview": "vite preview",
10+
"check": "svelte-check --tsconfig ./tsconfig.json",
11+
"test:prod": "TEST_ENV=production playwright test",
12+
"test:build": "pnpm install && npx playwright install && pnpm build",
13+
"test:assert": "pnpm test:prod"
14+
},
15+
"devDependencies": {
16+
"@playwright/test": "^1.43.1",
17+
"@sentry-internal/event-proxy-server": "link:../../../event-proxy-server",
18+
"@sentry/types": "latest || *",
19+
"@sentry/utils": "latest || *",
20+
"@sveltejs/vite-plugin-svelte": "^3.0.2",
21+
"@tsconfig/svelte": "^5.0.2",
22+
"svelte": "^5.0.0-next.115",
23+
"svelte-check": "^3.6.7",
24+
"tslib": "^2.6.2",
25+
"typescript": "^5.2.2",
26+
"vite": "^5.2.0",
27+
"wait-port": "1.0.4"
28+
},
29+
"dependencies": {
30+
"@sentry/svelte": "latest || *"
31+
}
32+
}

‎dev-packages/e2e-tests/test-applications/svelte-5/playwright.config.ts‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import type { PlaywrightTestConfig } from '@playwright/test';
2+
import { devices } from '@playwright/test';
3+
4+
// Fix urls not resolving to localhost on Node v17+
5+
// See: https://github.com/axios/axios/issues/3821#issuecomment-1413727575
6+
import { setDefaultResultOrder } from 'dns';
7+
setDefaultResultOrder('ipv4first');
8+
9+
const testEnv = process.env.TEST_ENV;
10+
11+
if (!testEnv) {
12+
throw new Error('No test env defined');
13+
}
14+
15+
const sveltePort = 3030;
16+
const eventProxyPort = 3031;
17+
18+
/**
19+
* See https://playwright.dev/docs/test-configuration.
20+
*/
21+
const config: PlaywrightTestConfig = {
22+
testDir: './test',
23+
/* Maximum time one test can run for. */
24+
timeout: 150_000,
25+
expect: {
26+
/**
27+
* Maximum time expect() should wait for the condition to be met.
28+
* For example in `await expect(locator).toHaveText();`
29+
*/
30+
timeout: 10000,
31+
},
32+
/* Run tests in files in parallel */
33+
fullyParallel: false,
34+
workers: 1,
35+
/* Fail the build on CI if you accidentally left test.only in the source code. */
36+
forbidOnly: !!process.env.CI,
37+
/* `next dev` is incredibly buggy with the app dir */
38+
retries: testEnv === 'development' ? 3 : 0,
39+
/* Reporter to use. See https://playwright.dev/docs/test-reporters */
40+
reporter: 'list',
41+
/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
42+
use: {
43+
/* Maximum time each action such as `click()` can take. Defaults to 0 (no limit). */
44+
actionTimeout: 0,
45+
/* Base URL to use in actions like `await page.goto('/')`. */
46+
baseURL: `http://localhost:${sveltePort}`,
47+
48+
/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
49+
trace: 'on-first-retry',
50+
},
51+
52+
/* Configure projects for major browsers */
53+
projects: [
54+
{
55+
name: 'chromium',
56+
use: {
57+
...devices['Desktop Chrome'],
58+
},
59+
},
60+
],
61+
62+
/* Run your local dev server before starting the tests */
63+
webServer: [
64+
{
65+
command: 'node ./start-event-proxy.cjs',
66+
port: eventProxyPort,
67+
reuseExistingServer: false,
68+
},
69+
{
70+
command: `pnpm wait-port ${eventProxyPort} && pnpm preview --port ${sveltePort}`,
71+
port: sveltePort,
72+
reuseExistingServer: false,
73+
},
74+
],
75+
};
76+
77+
export default config;

‎dev-packages/e2e-tests/test-applications/svelte-5/public/vite.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎dev-packages/e2e-tests/test-applications/svelte-5/src/App.svelte‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<script lang="ts">
2+
import svelteLogo from './assets/svelte.svg'
3+
import viteLogo from '/vite.svg'
4+
import Counter from './lib/Counter.svelte'
5+
6+
function throwError() {
7+
throw new Error('Error thrown from Svelte 5 E2E test app')
8+
}
9+
</script>
10+
11+
<main>
12+
<div>
13+
<a href="https://vitejs.dev" target="_blank" rel="noreferrer">
14+
<img src={viteLogo} class="logo" alt="Vite Logo" />
15+
</a>
16+
<a href="https://svelte.dev" target="_blank" rel="noreferrer">
17+
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
18+
</a>
19+
</div>
20+
<h1>Vite + Svelte</h1>
21+
22+
<div class="card">
23+
<Counter />
24+
<button id="errorBtn" onclick={() => throwError()}>Error</button>
25+
</div>
26+
27+
<p>
28+
Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
29+
</p>
30+
31+
<p class="read-the-docs">
32+
Click on the Vite and Svelte logos to learn more
33+
</p>
34+
</main>
35+
36+
<style>
37+
.logo {
38+
height: 6em;
39+
padding: 1.5em;
40+
will-change: filter;
41+
transition: filter 300ms;
42+
}
43+
.logo:hover {
44+
filter: drop-shadow(0 0 2em #646cffaa);
45+
}
46+
.logo.svelte:hover {
47+
filter: drop-shadow(0 0 2em #ff3e00aa);
48+
}
49+
.read-the-docs {
50+
color: #888;
51+
}
52+
</style>

‎dev-packages/e2e-tests/test-applications/svelte-5/src/app.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
:root {
2+
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
3+
line-height: 1.5;
4+
font-weight: 400;
5+
6+
color-scheme: light dark;
7+
color: rgba(255, 255, 255, 0.87);
8+
background-color: #242424;
9+
10+
font-synthesis: none;
11+
text-rendering: optimizeLegibility;
12+
-webkit-font-smoothing: antialiased;
13+
-moz-osx-font-smoothing: grayscale;
14+
}
15+
16+
a {
17+
font-weight: 500;
18+
color: #646cff;
19+
text-decoration: inherit;
20+
}
21+
a:hover {
22+
color: #535bf2;
23+
}
24+
25+
body {
26+
margin: 0;
27+
display: flex;
28+
place-items: center;
29+
min-width: 320px;
30+
min-height: 100vh;
31+
}
32+
33+
h1 {
34+
font-size: 3.2em;
35+
line-height: 1.1;
36+
}
37+
38+
.card {
39+
padding: 2em;
40+
}
41+
42+
#app {
43+
max-width: 1280px;
44+
margin: 0 auto;
45+
padding: 2rem;
46+
text-align: center;
47+
}
48+
49+
button {
50+
border-radius: 8px;
51+
border: 1px solid transparent;
52+
padding: 0.6em 1.2em;
53+
font-size: 1em;
54+
font-weight: 500;
55+
font-family: inherit;
56+
background-color: #1a1a1a;
57+
cursor: pointer;
58+
transition: border-color 0.25s;
59+
}
60+
button:hover {
61+
border-color: #646cff;
62+
}
63+
button:focus,
64+
button:focus-visible {
65+
outline: 4px auto -webkit-focus-ring-color;
66+
}
67+
68+
@media (prefers-color-scheme: light) {
69+
:root {
70+
color: #213547;
71+
background-color: #ffffff;
72+
}
73+
a:hover {
74+
color: #747bff;
75+
}
76+
button {
77+
background-color: #f9f9f9;
78+
}
79+
}

0 commit comments

Comments
 (0)