Skip to content

Commit

Permalink
Add support for svelte 5
Browse files Browse the repository at this point in the history
  • Loading branch information
@edoardocavazza
edoardocavazza committed Jun 17, 2024
1 parent 77be9ad commit 52babfb
Show file tree
Hide file tree
Showing 4 changed files with 2,176 additions and 2,029 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"@chialab/eslint-config": "^4.0.3",
"@chialab/prettier-config": "^1.2.2",
"@sveltejs/vite-plugin-svelte": "^3.0.2",
"@testing-library/svelte": "^4.0.3",
"@testing-library/svelte": "^5.1.0",
"@vitest/browser": "^1.0.0",
"@vitest/coverage-istanbul": "^1.2.1",
"eslint": "^8.44.0",
Expand All @@ -56,7 +56,7 @@
"publint": "^0.1.15",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"svelte": "^4.0.2",
"svelte": "^5.0.0-next.0",
"typescript": "^5.0.2",
"uhtml": "^3.2.1",
"vite": "^5.0.0",
Expand Down
54 changes: 23 additions & 31 deletions tests/svelte.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,23 @@
import { cleanup, render } from '@testing-library/svelte';
import { afterEach, describe, expect, test } from 'vitest';
import { render } from '@testing-library/svelte';
import { describe, expect, test } from 'vitest';
import Test1 from './components/Test1.svelte';
import Test2 from './components/Test2.svelte';
import Test3 from './components/Test3.svelte';

describe('Svelte', () => {
afterEach(cleanup);

test('should update text content', async () => {
const body = document.createElement('div');
const { component } = render(
const { container, rerender } = render(
Test1,
{
props: {
text: 'Text',
},
},
{
container: body,
container: document.createElement('div'),
}
);

const container = body.children[0];
const element = container.children[0];
const textNode = element.childNodes[0];
element.connectedCallback();
Expand All @@ -32,90 +28,86 @@ describe('Svelte', () => {
expect(textNode.parentNode).toBe(element);
expect(textNode.textContent).toBe('Text');
expect(container.innerHTML).toBe(
'<custom-element><span>Text<!--isµ0--></span><div><!--isµ1--></div></custom-element><!--<Test1>-->'
'<custom-element><span>Text<!--isµ0--></span><div><!--isµ1--></div></custom-element>'
);

await component.$set({ text: 'Update' });
await rerender({ text: 'Update' });

expect(container.childNodes.length).toBe(2);
expect(container.children[0]).toBe(element);
expect(element.childNodes.length).toBe(1);
expect(textNode.textContent).toBe('Update');
expect(container.innerHTML).toBe(
'<custom-element><span>Update<!--isµ0--></span><div><!--isµ1--></div></custom-element><!--<Test1>-->'
'<custom-element><span>Update<!--isµ0--></span><div><!--isµ1--></div></custom-element>'
);
});

test('should update text content with multiple text nodes', async () => {
const body = document.createElement('div');
const { component } = render(
const { container, rerender } = render(
Test2,
{
props: {
text: 'Text',
},
},
{
container: body,
container: document.createElement('div'),
}
);

const container = body.children[0];
const element = container.children[0];
const textNode = element.childNodes[0];
element.connectedCallback();

expect(container.childNodes.length).toBe(2);
expect(element.parentNode).toBe(container);
expect(element.childNodes.length).toBe(3);
expect(element.childNodes.length).toBe(1);
expect(textNode.parentNode).toBe(element);
expect(textNode.textContent).toBe('Text');
expect(textNode.textContent).toBe('Text children');
expect(container.innerHTML).toBe(
'<custom-element><span>Text children<!--isµ0--></span><div><!--isµ1--></div></custom-element><!--<Test2>-->'
'<custom-element><span>Text children<!--isµ0--></span><div><!--isµ1--></div></custom-element>'
);

await component.$set({ text: 'Update' });
await rerender({ text: 'Update' });

expect(container.childNodes.length).toBe(2);
expect(container.children[0]).toBe(element);
expect(element.childNodes.length).toBe(3);
expect(textNode.textContent).toBe('Update');
expect(element.childNodes.length).toBe(1);
expect(textNode.textContent).toBe('Update children');
expect(container.innerHTML.replace(/\n\s+/g, ' ')).toBe(
'<custom-element><span>Update children<!--isµ0--></span><div><!--isµ1--></div></custom-element><!--<Test2>-->'
'<custom-element><span>Update children<!--isµ0--></span><div><!--isµ1--></div></custom-element>'
);
});

test('should update named slots', async () => {
const body = document.createElement('div');
const { component } = render(
const { container, rerender } = render(
Test3,
{
props: {
title: true,
},
},
{
container: body,
container: document.createElement('div'),
}
);
const container = body.children[0];
const element = container.children[0];
const textNode = element.childNodes[0];
const lastNode = element.childNodes[2];
element.connectedCallback();

expect(element.childNodes.length).toBe(3);
expect(element.childNodes.length).toBe(4);
expect(container.innerHTML.replace(/\n\s+/g, ' ')).toBe(
'<custom-element><span>Text end<!--isµ0--></span><div><h1 slot="children">Title</h1><!--isµ1--></div></custom-element><!--<Test3>-->'
'<custom-element><span>Text <!----> end<!--isµ0--></span><div><h1 slot="children">Title</h1><!--isµ1--></div></custom-element>'
);

await component.$set({ title: false });
await rerender({ title: false });

expect(element.childNodes.length).toBe(3);
expect(element.childNodes.length).toBe(4);
expect(element.childNodes[0]).toBe(textNode);
expect(element.childNodes[2]).toBe(lastNode);
expect(container.innerHTML.replace(/\n\s+/g, ' ')).toBe(
'<custom-element><span>Text end<!--isµ0--></span><div><h2 slot="children">Subitle</h2><!--isµ1--></div></custom-element><!--<Test3>-->'
'<custom-element><span>Text <!----> end<!--isµ0--></span><div><h2 slot="children">Subitle</h2><!--isµ1--></div></custom-element>'
);
});
});
6 changes: 5 additions & 1 deletion vite.config.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { svelte } from '@sveltejs/vite-plugin-svelte';
import { svelteTesting } from '@testing-library/svelte/vite';
import { defineConfig } from 'vite';

export default defineConfig({
plugins: [svelte()],
plugins: [svelte(), svelteTesting()],
test: {
browser: {
name: 'chrome',
Expand All @@ -13,5 +14,8 @@ export default defineConfig({
provider: 'istanbul',
include: ['src'],
},
alias: {
'@testing-library/svelte': '@testing-library/svelte/svelte5',
},
},
});
Loading

0 comments on commit 52babfb

Please sign in to comment.