mirror of https://github.com/sveltejs/svelte
parent
9400b2f441
commit
8e70bf79f4
@ -0,0 +1,43 @@
|
||||
export default {
|
||||
html: `
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
|
||||
<h1>Bag'ol stores</h1>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
|
||||
<button>Click me!</button>
|
||||
`,
|
||||
|
||||
async test({ assert, target, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const clickEvent = new window.Event('click');
|
||||
|
||||
await button.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>10</p>
|
||||
<p>11</p>
|
||||
<p>12</p>
|
||||
|
||||
<h1>Bag'ol stores</h1>
|
||||
<p>14</p>
|
||||
<p>13</p>
|
||||
<p>12</p>
|
||||
|
||||
<button>Click me!</button>
|
||||
`
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,48 @@
|
||||
<script>
|
||||
import { get, writable } from 'svelte/store'
|
||||
|
||||
let bagOlStores = writable({
|
||||
firstNonStore: 1,
|
||||
secondNonStore: 2,
|
||||
thirdNonStore: 3,
|
||||
firstStore: writable(4),
|
||||
secondStore: writable(5),
|
||||
thirdStore: writable(6)
|
||||
});
|
||||
|
||||
let { firstNonStore, secondNonStore, thirdNonStore, firstStore, secondStore, thirdStore } = $bagOlStores;
|
||||
|
||||
function changeStores() {
|
||||
$bagOlStores = ({
|
||||
firstNonStore,
|
||||
secondNonStore,
|
||||
thirdNonStore,
|
||||
$firstStore,
|
||||
$secondStore,
|
||||
thirdStore
|
||||
} = {
|
||||
firstNonStore: 7,
|
||||
secondNonStore: 8,
|
||||
thirdNonStore: 9,
|
||||
$firstStore: 10,
|
||||
$secondStore: 11,
|
||||
firstStore: writable(14),
|
||||
secondStore: writable(13),
|
||||
thirdStore: writable(12)
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>{firstNonStore}</p>
|
||||
<p>{secondNonStore}</p>
|
||||
<p>{thirdNonStore}</p>
|
||||
<p>{$firstStore}</p>
|
||||
<p>{$secondStore}</p>
|
||||
<p>{$thirdStore}</p>
|
||||
|
||||
<h1>Bag'ol stores</h1>
|
||||
<p>{get($bagOlStores.firstStore)}</p>
|
||||
<p>{get($bagOlStores.secondStore)}</p>
|
||||
<p>{get($bagOlStores.thirdStore)}</p>
|
||||
|
||||
<button on:click={changeStores}>Click me!</button>
|
||||
@ -0,0 +1,43 @@
|
||||
export default {
|
||||
html: `
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
|
||||
<h1>Bag'ol stores</h1>
|
||||
<p>6</p>
|
||||
<p>undefined</p>
|
||||
<p>undefined</p>
|
||||
|
||||
<button>Click me!</button>
|
||||
`,
|
||||
|
||||
async test({ assert, target, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const clickEvent = new window.Event('click');
|
||||
|
||||
await button.dispatchEvent(clickEvent);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>10</p>
|
||||
<p>11</p>
|
||||
<p>12</p>
|
||||
|
||||
<h1>Bag'ol stores</h1>
|
||||
<p>12</p>
|
||||
<p>14</p>
|
||||
<p>15</p>
|
||||
|
||||
<button>Click me!</button>
|
||||
`
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,42 @@
|
||||
<script>
|
||||
import { get, writable } from 'svelte/store'
|
||||
|
||||
let bagOlStores = writable([1, 2, 3, writable(4), writable(5), writable(6)]);
|
||||
|
||||
let firstNonStore, secondNonStore, thirdNonStore, firstStore, secondStore, thirdStore;
|
||||
([firstNonStore, secondNonStore, thirdNonStore, firstStore, secondStore, thirdStore] = $bagOlStores);
|
||||
|
||||
function changeStores() {
|
||||
$bagOlStores = ([
|
||||
firstNonStore,
|
||||
secondNonStore,
|
||||
thirdNonStore,
|
||||
$firstStore,
|
||||
$secondStore,
|
||||
thirdStore
|
||||
] = [
|
||||
7,
|
||||
8,
|
||||
9,
|
||||
10,
|
||||
11,
|
||||
writable(12),
|
||||
writable(14),
|
||||
writable(15)
|
||||
]);
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>{firstNonStore}</p>
|
||||
<p>{secondNonStore}</p>
|
||||
<p>{thirdNonStore}</p>
|
||||
<p>{$firstStore}</p>
|
||||
<p>{$secondStore}</p>
|
||||
<p>{$thirdStore}</p>
|
||||
|
||||
<h1>Bag'ol stores</h1>
|
||||
<p>{get($bagOlStores[5])}</p>
|
||||
<p>{get($bagOlStores[6])}</p>
|
||||
<p>{get($bagOlStores[7])}</p>
|
||||
|
||||
<button on:click={changeStores}>Click me!</button>
|
||||
Loading…
Reference in new issue