mirror of https://github.com/sveltejs/svelte
add some missing legacy tests (#10875)
parent
6822decec2
commit
2cabc884ca
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
export let a;
|
||||
export const b = 2;
|
||||
</script>
|
||||
|
||||
<p>a: {a}</p>
|
||||
<p>b: {b}</p>
|
@ -0,0 +1,27 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
get props() {
|
||||
return { a: 3, b: 4 };
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>a: 3</p>
|
||||
<p>b: 2</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
await component.$set({
|
||||
a: 5,
|
||||
b: 6
|
||||
});
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>a: 5</p>
|
||||
<p>b: 2</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
import Nested from './Nested.svelte';
|
||||
|
||||
export let a;
|
||||
export let b;
|
||||
</script>
|
||||
|
||||
<Nested a={a} b={b}/>
|
@ -0,0 +1,37 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
get props() {
|
||||
return { a: 1, b: 2 };
|
||||
},
|
||||
|
||||
html: `
|
||||
<p>a: 1</p>
|
||||
<p>b: 2</p>
|
||||
<p>c: 3</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
await component.$set({ a: 4 });
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>a: 4</p>
|
||||
<p>b: 2</p>
|
||||
<p>c: 6</p>
|
||||
`
|
||||
);
|
||||
|
||||
await component.$set({ b: 5 });
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>a: 4</p>
|
||||
<p>b: 5</p>
|
||||
<p>c: 9</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,8 @@
|
||||
<script>
|
||||
export let a;
|
||||
$: c = a + $$props.b;
|
||||
</script>
|
||||
|
||||
<p>a: {a}</p>
|
||||
<p>b: {$$props.b}</p>
|
||||
<p>c: {c}</p>
|
@ -0,0 +1,13 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
html: `
|
||||
<div>
|
||||
<p class="tooltip">static stuff</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="tooltip">dynamic stuff</p>
|
||||
</div>
|
||||
<button>unused</button>
|
||||
`
|
||||
});
|
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
import { spread } from './spread.js';
|
||||
let dynamic = 'dynamic';
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<p {...spread()}>static stuff</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p {...spread()}>{dynamic} stuff</p>
|
||||
</div>
|
||||
|
||||
<button on:click={() => dynamic = ''}>unused</button>
|
@ -0,0 +1,6 @@
|
||||
export function spread() {
|
||||
return {
|
||||
class: 'tooltip',
|
||||
id: null
|
||||
};
|
||||
}
|
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let name = 'World';
|
||||
</script>
|
||||
|
||||
<div>Hello {name}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,15 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip_if_ssr: true,
|
||||
compileOptions: {
|
||||
cssHash: () => 'svelte-xyz'
|
||||
},
|
||||
async test({ assert, component, window }) {
|
||||
assert.htmlEqual(
|
||||
window.document.head.innerHTML,
|
||||
'<style>div.svelte-xyz\n{\ncolor:\nred;\n}</style>'
|
||||
);
|
||||
assert.htmlEqual(component.div.innerHTML, '<div class="svelte-xyz">Hello World</div>');
|
||||
}
|
||||
});
|
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
import App from './App.svelte';
|
||||
import { onMount, mount, unmount } from 'svelte';
|
||||
|
||||
export let div;
|
||||
|
||||
onMount(() => {
|
||||
div = document.createElement('div');
|
||||
|
||||
const app = mount(App, {
|
||||
target: div
|
||||
});
|
||||
|
||||
return () => {
|
||||
unmount(app);
|
||||
}
|
||||
});
|
||||
</script>
|
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let name = 'World';
|
||||
</script>
|
||||
|
||||
<div>Hello {name}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,15 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip_if_ssr: true,
|
||||
compileOptions: {
|
||||
cssHash: () => 'svelte-xyz'
|
||||
},
|
||||
async test({ assert, component, window }) {
|
||||
assert.htmlEqual(
|
||||
window.document.head.innerHTML,
|
||||
'<style>div.svelte-xyz\n{\ncolor:\nred;\n}</style>'
|
||||
);
|
||||
assert.htmlEqual(component.div.innerHTML, '<div class="svelte-xyz">Hello World</div>');
|
||||
}
|
||||
});
|
@ -0,0 +1,18 @@
|
||||
<script>
|
||||
import App from './App.svelte';
|
||||
import { onMount, mount, unmount } from 'svelte';
|
||||
|
||||
export let div;
|
||||
|
||||
onMount(() => {
|
||||
const app = mount(App, {
|
||||
target: div
|
||||
});
|
||||
|
||||
return () => {
|
||||
unmount(app);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={div} />
|
@ -0,0 +1,11 @@
|
||||
<script>
|
||||
let name = 'World';
|
||||
</script>
|
||||
|
||||
<div>Hello {name}</div>
|
||||
|
||||
<style>
|
||||
div {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,18 @@
|
||||
import { test } from '../../test';
|
||||
|
||||
export default test({
|
||||
skip_if_ssr: true,
|
||||
compileOptions: {
|
||||
cssHash: () => 'svelte-xyz'
|
||||
},
|
||||
async test({ assert, component, window }) {
|
||||
assert.htmlEqual(
|
||||
window.document.head.innerHTML,
|
||||
'<style>div.svelte-xyz\n{\ncolor:\nred;\n}</style>'
|
||||
);
|
||||
assert.htmlEqual(
|
||||
component.div.shadowRoot.innerHTML,
|
||||
'<div class="svelte-xyz">Hello World</div>'
|
||||
);
|
||||
}
|
||||
});
|
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
import App from './App.svelte';
|
||||
import { onMount, mount, unmount } from 'svelte';
|
||||
|
||||
export let div;
|
||||
onMount(() => {
|
||||
const root = div.attachShadow({ mode: 'open' });
|
||||
|
||||
const app = mount(App, {
|
||||
target: root
|
||||
});
|
||||
|
||||
return () => {
|
||||
unmount(app);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div bind:this={div} />
|
Loading…
Reference in new issue