Skip to content

Commit f3e0c87

Browse files
sfriedelsfriedel
committed
test: separate snapshots for svelte versions without async rendering support
1 parent 760cc81 commit f3e0c87

File tree

10 files changed

+251
-23
lines changed

10 files changed

+251
-23
lines changed

‎pnpm-lock.yaml‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎testsuite/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@sveltejs/vite-plugin-svelte": "6.1.0",
1818
"@testing-library/svelte": "5.2.8",
1919
"@types/jsdom": "21.1.7",
20+
"@types/semver": "7.7.1",
2021
"@vitest/ui": "3.2.4",
2122
"autoprefixer": "10.4.21",
2223
"npm-run-all2": "8.0.4",

‎testsuite/tests/ssr/__snapshots__/svelte@5-pre-async/cases.test.ts.snap‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`Case empty-pattern-with-attributes/Test.svelte > should render 1`] = `
4+
{
5+
"body": "<!--[--><!--[--><!---->Some text<!----><!--]--><!--]-->",
6+
"head": "",
7+
"html": "<!--[--><!--[--><!---->Some text<!----><!--]--><!--]-->",
8+
}
9+
`;
10+
11+
exports[`Case localize-store/Test.svelte > should render 1`] = `
12+
{
13+
"body": "<!--[--><div id="plain">Test
14+
Attribute</div> <div id="with-vars">Test ⁨with variables⁩
15+
Attribute ⁨with variables⁩</div><!--]-->",
16+
"head": "",
17+
"html": "<!--[--><div id="plain">Test
18+
Attribute</div> <div id="with-vars">Test ⁨with variables⁩
19+
Attribute ⁨with variables⁩</div><!--]-->",
20+
}
21+
`;
22+
23+
exports[`Case overlay-rendering/Test.svelte > should render 1`] = `
24+
{
25+
"body": "<!--[--><svelte-fluent-overlay style="display: contents;">This <a data-l10n-name="link" href="https://example.com/">link</a> is rendered with Overlay.</svelte-fluent-overlay><!--]-->",
26+
"head": "<!--[--><template><a data-l10n-name="link" href="https://example.com/"></a><!----></template><!--]-->",
27+
"html": "<!--[--><svelte-fluent-overlay style="display: contents;">This <a data-l10n-name="link" href="https://example.com/">link</a> is rendered with Overlay.</svelte-fluent-overlay><!--]-->",
28+
}
29+
`;
30+
31+
exports[`Case readme-example/Test.svelte > should render 1`] = `
32+
{
33+
"body": "<!--[--><strong><!--[!-->Hello, ⁨Anna⁩!<!--]--><!----></strong> <p><!--[!-->⁨Anna⁩ ⁨added ⁨3⁩ new photos⁩ to ⁨her stream⁩.<!--]--><!----></p><!--]-->",
34+
"head": "",
35+
"html": "<!--[--><strong><!--[!-->Hello, ⁨Anna⁩!<!--]--><!----></strong> <p><!--[!-->⁨Anna⁩ ⁨added ⁨3⁩ new photos⁩ to ⁨her stream⁩.<!--]--><!----></p><!--]-->",
36+
}
37+
`;

‎testsuite/tests/ssr/__snapshots__/svelte@5-pre-async/examples.test.ts.snap‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
2+
3+
exports[`Example frontpage/App.svelte > should render 1`] = `
4+
{
5+
"body": "<!--[--><strong><!--[!-->Hello, ⁨Anna⁩!<!--]--><!----></strong> <p><!--[!-->⁨Anna⁩ ⁨added ⁨3⁩ new photos⁩ to ⁨her stream⁩.<!--]--><!----></p><!--]-->",
6+
"head": "",
7+
"html": "<!--[--><strong><!--[!-->Hello, ⁨Anna⁩!<!--]--><!----></strong> <p><!--[!-->⁨Anna⁩ ⁨added ⁨3⁩ new photos⁩ to ⁨her stream⁩.<!--]--><!----></p><!--]-->",
8+
}
9+
`;
10+
11+
exports[`Example localize/attributes/App.svelte > should render 1`] = `
12+
{
13+
"body": "<!--[--><button>Show prompt</button><!--]-->",
14+
"head": "",
15+
"html": "<!--[--><button>Show prompt</button><!--]-->",
16+
}
17+
`;
18+
19+
exports[`Example localize/dynamic-text/App.svelte > should render 1`] = `
20+
{
21+
"body": "<!--[--><button>Say hello</button><!--]-->",
22+
"head": "",
23+
"html": "<!--[--><button>Say hello</button><!--]-->",
24+
}
25+
`;
26+
27+
exports[`Example localize/static-text/App.svelte > should render 1`] = `
28+
{
29+
"body": "<!--[--><button>Say hello</button><!--]-->",
30+
"head": "",
31+
"html": "<!--[--><button>Say hello</button><!--]-->",
32+
}
33+
`;
34+
35+
exports[`Example localized/attributes/App.svelte > should render 1`] = `
36+
{
37+
"body": "<!--[--><!--[--><div>Please confirm the action.</div> <div><button>Ok</button> <button>Cancel</button></div><!----><!--]--><!--]-->",
38+
"head": "",
39+
"html": "<!--[--><!--[--><div>Please confirm the action.</div> <div><button>Ok</button> <button>Cancel</button></div><!----><!--]--><!--]-->",
40+
}
41+
`;
42+
43+
exports[`Example localized/attributes-with-variables/App.svelte > should render 1`] = `
44+
{
45+
"body": "<!--[--><!--[--><div>Please confirm the action for ⁨20⁩ items.</div> <div><button>Yes, perform action for ⁨20⁩ items</button> <button>Cancel</button></div><!----><!--]--><!--]-->",
46+
"head": "",
47+
"html": "<!--[--><!--[--><div>Please confirm the action for ⁨20⁩ items.</div> <div><button>Yes, perform action for ⁨20⁩ items</button> <button>Cancel</button></div><!----><!--]--><!--]-->",
48+
}
49+
`;
50+
51+
exports[`Example localized/dynamic-text/App.svelte > should render 1`] = `
52+
{
53+
"body": "<!--[--><!--[!-->You have ⁨10⁩ unread emails.<!--]--><!--]-->",
54+
"head": "",
55+
"html": "<!--[--><!--[!-->You have ⁨10⁩ unread emails.<!--]--><!--]-->",
56+
}
57+
`;
58+
59+
exports[`Example localized/static-text/App.svelte > should render 1`] = `
60+
{
61+
"body": "<!--[--><!--[!-->Hello, world!<!--]--><!--]-->",
62+
"head": "",
63+
"html": "<!--[--><!--[!-->Hello, world!<!--]--><!--]-->",
64+
}
65+
`;
66+
67+
exports[`Example localized-legacy/attributes/App.svelte > should render 1`] = `
68+
{
69+
"body": "<!--[--><!--[--><!----><div>Please confirm the action.</div> <div><button>Ok</button> <button>Cancel</button></div><!----><!----><!--]--><!--]-->",
70+
"head": "",
71+
"html": "<!--[--><!--[--><!----><div>Please confirm the action.</div> <div><button>Ok</button> <button>Cancel</button></div><!----><!----><!--]--><!--]-->",
72+
}
73+
`;
74+
75+
exports[`Example overlay/dynamic-text/App.svelte > should render 1`] = `
76+
{
77+
"body": "<!--[--><svelte-fluent-overlay style="display: contents;">You can download "⁨Example Product⁩" by clicking
78+
on the <strong>Download</strong> button or read
79+
the <a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer">release notes</a> to learn more.</svelte-fluent-overlay><!--]-->",
80+
"head": "<!--[--><template><a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer"></a><!----></template><!--]-->",
81+
"html": "<!--[--><svelte-fluent-overlay style="display: contents;">You can download "⁨Example Product⁩" by clicking
82+
on the <strong>Download</strong> button or read
83+
the <a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer">release notes</a> to learn more.</svelte-fluent-overlay><!--]-->",
84+
}
85+
`;
86+
87+
exports[`Example overlay/static-text/App.svelte > should render 1`] = `
88+
{
89+
"body": "<!--[--><svelte-fluent-overlay style="display: contents;">Read the <a data-l10n-name="link" href="https://example.com/">documentation</a> for more information.</svelte-fluent-overlay><!--]-->",
90+
"head": "<!--[--><template><a data-l10n-name="link" href="https://example.com/"></a><!----></template><!--]-->",
91+
"html": "<!--[--><svelte-fluent-overlay style="display: contents;">Read the <a data-l10n-name="link" href="https://example.com/">documentation</a> for more information.</svelte-fluent-overlay><!--]-->",
92+
}
93+
`;
94+
95+
exports[`Example provider/App.svelte > should render 1`] = `
96+
{
97+
"body": "<!--[--><!----><!--[!-->Hello, world!<!--]--><!----><!--]-->",
98+
"head": "",
99+
"html": "<!--[--><!----><!--[!-->Hello, world!<!--]--><!----><!--]-->",
100+
}
101+
`;
102+
103+
exports[`Example tutorial/attributes/App.svelte > should render 1`] = `
104+
{
105+
"body": "<!--[--><!--[--><label>Login <input type="email" placeholder="email@example.com" title="Type your login email" aria-label="Login input value"/></label><!----><!--]--><!--]-->",
106+
"head": "",
107+
"html": "<!--[--><!--[--><label>Login <input type="email" placeholder="email@example.com" title="Type your login email" aria-label="Login input value"/></label><!----><!--]--><!--]-->",
108+
}
109+
`;
110+
111+
exports[`Example tutorial/first-steps/App.svelte > should render 1`] = `
112+
{
113+
"body": "<!--[--><!--[!-->Hello, world!<!--]--><!--]-->",
114+
"head": "",
115+
"html": "<!--[--><!--[!-->Hello, world!<!--]--><!--]-->",
116+
}
117+
`;
118+
119+
exports[`Example tutorial/interpolation/App.svelte > should render 1`] = `
120+
{
121+
"body": "<!--[--><!--[!-->Hello, ⁨everyone⁩!<!--]--><!--]-->",
122+
"head": "",
123+
"html": "<!--[--><!--[!-->Hello, ⁨everyone⁩!<!--]--><!--]-->",
124+
}
125+
`;
126+
127+
exports[`Example tutorial/interpolation-custom-functions/App.svelte > should render 1`] = `
128+
{
129+
"body": "<!--[--><div><!--[!-->Weekday ⁨2⁩ is ⁨Tuesday⁩<!--]--><!----></div> <div><!--[!-->Weekday of ⁨2/6/2024⁩ is ⁨Tuesday⁩<!--]--><!----></div><!--]-->",
130+
"head": "",
131+
"html": "<!--[--><div><!--[!-->Weekday ⁨2⁩ is ⁨Tuesday⁩<!--]--><!----></div> <div><!--[!-->Weekday of ⁨2/6/2024⁩ is ⁨Tuesday⁩<!--]--><!----></div><!--]-->",
132+
}
133+
`;
134+
135+
exports[`Example tutorial/interpolation-formatting/App.svelte > should render 1`] = `
136+
{
137+
"body": "<!--[--><div><!--[!-->Your DPI ratio is ⁨1.778⁩<!--]--><!----></div> <div><!--[!-->Your account balance is ⁨$1,234.56⁩<!--]--><!----></div> <div><!--[!-->Today is ⁨September 13, 2022⁩<!--]--><!----></div><!--]-->",
138+
"head": "",
139+
"html": "<!--[--><div><!--[!-->Your DPI ratio is ⁨1.778⁩<!--]--><!----></div> <div><!--[!-->Your account balance is ⁨$1,234.56⁩<!--]--><!----></div> <div><!--[!-->Today is ⁨September 13, 2022⁩<!--]--><!----></div><!--]-->",
140+
}
141+
`;
142+
143+
exports[`Example tutorial/multi-language/App.svelte > should render 1`] = `
144+
{
145+
"body": "<!--[--><!--[!-->Hello, world!<!--]--><!--]-->",
146+
"head": "",
147+
"html": "<!--[--><!--[!-->Hello, world!<!--]--><!--]-->",
148+
}
149+
`;
150+
151+
exports[`Example tutorial/translation-files/App.svelte > should render 1`] = `
152+
{
153+
"body": "<!--[--><!--[!-->Hello, world!<!--]--><!--]-->",
154+
"head": "",
155+
"html": "<!--[--><!--[!-->Hello, world!<!--]--><!--]-->",
156+
}
157+
`;

‎testsuite/tests/ssr/__snapshots__/svelte@5/cases.test.ts.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,9 @@ exports[`Case localize-store/Test.svelte > should render 1`] = `
2222

2323
exports[`Case overlay-rendering/Test.svelte > should render 1`] = `
2424
{
25-
"body": "<!--[--><svelte-fluent-overlay style="display: contents;">This <a data-l10n-name="link" href="https://example.com/">link</a> is rendered with Overlay.</svelte-fluent-overlay><!--]-->",
25+
"body": "<!--[--><svelte-fluent-overlay style="display: contents;"></svelte-fluent-overlay><!--]-->",
2626
"head": "<!--[--><template><a data-l10n-name="link" href="https://example.com/"></a><!----></template><!--]-->",
27-
"html": "<!--[--><svelte-fluent-overlay style="display: contents;">This <a data-l10n-name="link" href="https://example.com/">link</a> is rendered with Overlay.</svelte-fluent-overlay><!--]-->",
27+
"html": "<!--[--><svelte-fluent-overlay style="display: contents;"></svelte-fluent-overlay><!--]-->",
2828
}
2929
`;
3030

‎testsuite/tests/ssr/__snapshots__/svelte@5/examples.test.ts.snap‎

Lines changed: 8 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -66,37 +66,33 @@ exports[`Example localized/static-text/App.svelte > should render 1`] = `
6666

6767
exports[`Example localized-legacy/attributes/App.svelte > should render 1`] = `
6868
{
69-
"body": "<!--[--><!--[--><!----><div>Please confirm the action.</div> <div><button>Ok</button> <button>Cancel</button></div><!----><!----><!--]--><!--]-->",
69+
"body": "<!--[--><!--[--><!--[--><div>Please confirm the action.</div> <div><button>Ok</button> <button>Cancel</button></div><!--]--><!----><!--]--><!--]-->",
7070
"head": "",
71-
"html": "<!--[--><!--[--><!----><div>Please confirm the action.</div> <div><button>Ok</button> <button>Cancel</button></div><!----><!----><!--]--><!--]-->",
71+
"html": "<!--[--><!--[--><!--[--><div>Please confirm the action.</div> <div><button>Ok</button> <button>Cancel</button></div><!--]--><!----><!--]--><!--]-->",
7272
}
7373
`;
7474

7575
exports[`Example overlay/dynamic-text/App.svelte > should render 1`] = `
7676
{
77-
"body": "<!--[--><svelte-fluent-overlay style="display: contents;">You can download "⁨Example Product⁩" by clicking
78-
on the <strong>Download</strong> button or read
79-
the <a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer">release notes</a> to learn more.</svelte-fluent-overlay><!--]-->",
77+
"body": "<!--[--><svelte-fluent-overlay style="display: contents;"></svelte-fluent-overlay><!--]-->",
8078
"head": "<!--[--><template><a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer"></a><!----></template><!--]-->",
81-
"html": "<!--[--><svelte-fluent-overlay style="display: contents;">You can download "⁨Example Product⁩" by clicking
82-
on the <strong>Download</strong> button or read
83-
the <a data-l10n-name="release-notes" href="https://example.com/" target="_blank" rel="noreferrer">release notes</a> to learn more.</svelte-fluent-overlay><!--]-->",
79+
"html": "<!--[--><svelte-fluent-overlay style="display: contents;"></svelte-fluent-overlay><!--]-->",
8480
}
8581
`;
8682

8783
exports[`Example overlay/static-text/App.svelte > should render 1`] = `
8884
{
89-
"body": "<!--[--><svelte-fluent-overlay style="display: contents;">Read the <a data-l10n-name="link" href="https://example.com/">documentation</a> for more information.</svelte-fluent-overlay><!--]-->",
85+
"body": "<!--[--><svelte-fluent-overlay style="display: contents;"></svelte-fluent-overlay><!--]-->",
9086
"head": "<!--[--><template><a data-l10n-name="link" href="https://example.com/"></a><!----></template><!--]-->",
91-
"html": "<!--[--><svelte-fluent-overlay style="display: contents;">Read the <a data-l10n-name="link" href="https://example.com/">documentation</a> for more information.</svelte-fluent-overlay><!--]-->",
87+
"html": "<!--[--><svelte-fluent-overlay style="display: contents;"></svelte-fluent-overlay><!--]-->",
9288
}
9389
`;
9490

9591
exports[`Example provider/App.svelte > should render 1`] = `
9692
{
97-
"body": "<!--[--><!----><!--[!-->Hello, world!<!--]--><!----><!--]-->",
93+
"body": "<!--[--><!--[--><!--[!-->Hello, world!<!--]--><!--]--><!--]-->",
9894
"head": "",
99-
"html": "<!--[--><!----><!--[!-->Hello, world!<!--]--><!----><!--]-->",
95+
"html": "<!--[--><!--[--><!--[!-->Hello, world!<!--]--><!--]--><!--]-->",
10096
}
10197
`;
10298

‎testsuite/tests/ssr/cases.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { describe, it, expect, vi } from 'vitest';
2-
import { render } from 'svelte/server';
32
import type { ComponentModule } from '../utils';
3+
import { renderSync } from './render';
44

55
vi.stubGlobal('navigator', { languages: [] });
66

@@ -15,7 +15,7 @@ for (const test of tests) {
1515
describe(`Case ${test.name}`, () => {
1616
it('should render', async () => {
1717
const component = ((await test.module()) as ComponentModule).default;
18-
const res = render(component, { props: {}, context: new Map() });
18+
const res = renderSync(component, { props: {}, context: new Map() });
1919
expect(res).toMatchSnapshot();
2020
});
2121
});

‎testsuite/tests/ssr/examples.test.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { describe, it, expect, vi } from 'vitest';
2-
import { render } from 'svelte/server';
32
import { allExamples } from 'svelte-fluent-examples';
43
import type { ComponentModule } from '../utils';
4+
import { renderSync } from './render';
55

66
vi.stubGlobal('navigator', { languages: [] });
77

88
for (const example of allExamples) {
99
describe(`Example ${example.name}`, () => {
1010
it('should render', async () => {
1111
const component = ((await example.module()) as ComponentModule).default;
12-
const res = render(component, { props: {}, context: new Map() });
12+
const res = renderSync(component, { props: {}, context: new Map() });
1313
expect(res).toMatchSnapshot();
1414
});
1515
});

‎testsuite/tests/ssr/render.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import type { Component, ComponentProps, SvelteComponent } from 'svelte';
2+
import { render } from 'svelte/server';
3+
4+
type RenderSyncResult = {
5+
head: string;
6+
body: string;
7+
html: string;
8+
};
9+
10+
export function renderSync<
11+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
12+
Comp extends SvelteComponent<any> | Component<any>,
13+
Props extends ComponentProps<Comp> = ComponentProps<Comp>
14+
>(...args: Parameters<typeof render<Comp, Props>>): RenderSyncResult {
15+
const res = render<Comp, Props>(...args);
16+
return {
17+
body: res.body,
18+
head: res.head,
19+
html: res.html
20+
};
21+
}

‎testsuite/vitest.config.js‎

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,24 @@ import { createRequire } from 'node:module';
77
import * as fs from 'node:fs';
88
import { svelte } from '@sveltejs/vite-plugin-svelte';
99

10-
function getSvelteMajor() {
10+
const isSsrTest = process.env.TEST_SSR === '1';
11+
12+
function getSvelteVersion() {
1113
const require = createRequire(import.meta.url);
1214
const sveltePackage = JSON.parse(
1315
fs.readFileSync(require.resolve('svelte/package.json')).toString()
1416
);
15-
return semver.major(sveltePackage.version);
17+
return sveltePackage.version;
1618
}
1719

18-
const svelteMajor = getSvelteMajor();
19-
const isSsrTest = process.env.TEST_SSR === '1';
20+
function getSnapshotDir() {
21+
const svelteVersion = getSvelteVersion();
22+
const svelteMajor = semver.major(svelteVersion);
23+
if (isSsrTest && semver.satisfies(svelteVersion, '<5.39.0')) {
24+
return `svelte@${svelteMajor}-pre-async`;
25+
}
26+
return `svelte@${svelteMajor}`;
27+
}
2028

2129
/** @type {Partial<import('vite').UserConfig['test']>} */
2230
const testConfigDom = {
@@ -36,7 +44,7 @@ export default defineConfig({
3644
setupFiles: 'tests/setup.js',
3745
resolveSnapshotPath: (testPath, snapExtension) => {
3846
return join(
39-
join(dirname(testPath), '__snapshots__', `svelte@${svelteMajor}`),
47+
join(dirname(testPath), '__snapshots__', getSnapshotDir()),
4048
`${basename(testPath)}${snapExtension}`
4149
);
4250
},

0 commit comments

Comments
 (0)