mirror of https://github.com/sveltejs/svelte
rixo
6 years ago
commit
ae5d759da7
@ -0,0 +1,75 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import {
|
||||
SvelteComponent,
|
||||
append,
|
||||
detach,
|
||||
element,
|
||||
init,
|
||||
insert,
|
||||
noop,
|
||||
safe_not_equal,
|
||||
set_data,
|
||||
text
|
||||
} from "svelte/internal";
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let p;
|
||||
let t0;
|
||||
let t1;
|
||||
|
||||
return {
|
||||
c() {
|
||||
p = element("p");
|
||||
t0 = text("x: ");
|
||||
t1 = text(/*x*/ ctx[0]);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, p, anchor);
|
||||
append(p, t0);
|
||||
append(p, t1);
|
||||
},
|
||||
p(ctx, [dirty]) {
|
||||
if (dirty & /*x*/ 1) set_data(t1, /*x*/ ctx[0]);
|
||||
},
|
||||
i: noop,
|
||||
o: noop,
|
||||
d(detaching) {
|
||||
if (detaching) detach(p);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function instance($$self, $$props, $$invalidate) {
|
||||
let x = 0;
|
||||
let y = 1;
|
||||
x += 1;
|
||||
|
||||
{
|
||||
x += 2;
|
||||
}
|
||||
|
||||
setTimeout(
|
||||
function foo() {
|
||||
$$invalidate(0, x += 10);
|
||||
$$invalidate(1, y += 20);
|
||||
},
|
||||
1000
|
||||
);
|
||||
|
||||
$$self.$$.update = () => {
|
||||
if ($$self.$$.dirty & /*x, y*/ 3) {
|
||||
$: $$invalidate(0, x += y);
|
||||
}
|
||||
};
|
||||
|
||||
return [x];
|
||||
}
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
let x = 0;
|
||||
let y = 1;
|
||||
|
||||
x += 1;
|
||||
|
||||
{
|
||||
x += 2;
|
||||
}
|
||||
|
||||
setTimeout(function foo() {
|
||||
x += 10;
|
||||
y += 20;
|
||||
}, 1000);
|
||||
|
||||
$: x += y;
|
||||
</script>
|
||||
|
||||
<p>x: {x}</p>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
error: `potato is not defined`,
|
||||
};
|
||||
@ -0,0 +1,35 @@
|
||||
<script>
|
||||
export let x1;
|
||||
export let x2;
|
||||
export let x3;
|
||||
export let x4;
|
||||
export let x5;
|
||||
export let x6;
|
||||
export let x7;
|
||||
export let x8;
|
||||
export let x9;
|
||||
export let x10;
|
||||
export let x11;
|
||||
export let x12;
|
||||
export let x13;
|
||||
export let x14;
|
||||
export let x15;
|
||||
export let x16;
|
||||
export let x17;
|
||||
export let x18;
|
||||
export let x19;
|
||||
export let x20;
|
||||
export let x21;
|
||||
export let x22;
|
||||
export let x23;
|
||||
export let x24;
|
||||
export let x25;
|
||||
export let x26;
|
||||
export let x27;
|
||||
export let x28;
|
||||
export let x29;
|
||||
export let x30;
|
||||
export let x31;
|
||||
export let x32;
|
||||
</script>
|
||||
<p {...potato}>{x1 + x2 + x3 + x4 + x5 + x6 + x7 + x8 + x9 + x10 + x11 + x12 + x13 + x14 + x15 + x16 + x17 + x18 + x19 + x20 + x21 + x22 + x23 + x24 + x25 + x26 + x27 + x28 + x29 + x30 + x31 + x32}</p>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
error: `A is not defined`,
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
<script>
|
||||
let x1, x2, x3, x4, x5, x6, x7, x8, x9, x10, x11, x12, x13, x14, x15, x16, x17, x18, x19, x20, x21, x22, x23, x24, x25, x26, x27, x28, x29, x30, x31;
|
||||
</script>
|
||||
<A>foo</A>
|
||||
@ -0,0 +1,73 @@
|
||||
<script>
|
||||
export let d1 = 'd1';
|
||||
export let d2 = 'd2';
|
||||
export let d3 = 'd3';
|
||||
export let d4 = 'd4';
|
||||
export let d5 = 'd5';
|
||||
export let d6 = 'd6';
|
||||
export let d7 = 'd7';
|
||||
export let d8 = 'd8';
|
||||
export let d9 = 'd9';
|
||||
export let d10 = 'd10';
|
||||
export let d11 = 'd11';
|
||||
export let d12 = 'd12';
|
||||
export let d13 = 'd13';
|
||||
export let d14 = 'd14';
|
||||
export let d15 = 'd15';
|
||||
export let d16 = 'd16';
|
||||
export let d17 = 'd17';
|
||||
export let d18 = 'd18';
|
||||
export let d19 = 'd19';
|
||||
export let d20 = 'd20';
|
||||
export let d21 = 'd21';
|
||||
export let d22 = 'd22';
|
||||
export let d23 = 'd23';
|
||||
export let d24 = 'd24';
|
||||
export let d25 = 'd25';
|
||||
export let d26 = 'd26';
|
||||
export let d27 = 'd27';
|
||||
export let d28 = 'd28';
|
||||
export let d29 = 'd29';
|
||||
export let d30 = 'd30';
|
||||
export let d31 = 'd31';
|
||||
export let d32 = 'd32';
|
||||
export let d33 = 'd33';
|
||||
|
||||
$: dummy = d32 + ':' + d33;
|
||||
</script>
|
||||
|
||||
<p>{d1}</p>
|
||||
<p>{d2}</p>
|
||||
<p>{d3}</p>
|
||||
<p>{d4}</p>
|
||||
<p>{d5}</p>
|
||||
<p>{d6}</p>
|
||||
<p>{d7}</p>
|
||||
<p>{d8}</p>
|
||||
<p>{d9}</p>
|
||||
<p>{d10}</p>
|
||||
<p>{d11}</p>
|
||||
<p>{d12}</p>
|
||||
<p>{d13}</p>
|
||||
<p>{d14}</p>
|
||||
<p>{d15}</p>
|
||||
<p>{d16}</p>
|
||||
<p>{d17}</p>
|
||||
<p>{d18}</p>
|
||||
<p>{d19}</p>
|
||||
<p>{d20}</p>
|
||||
<p>{d21}</p>
|
||||
<p>{d22}</p>
|
||||
<p>{d23}</p>
|
||||
<p>{d24}</p>
|
||||
<p>{d25}</p>
|
||||
<p>{d26}</p>
|
||||
<p>{d27}</p>
|
||||
<p>{d28}</p>
|
||||
<p>{d29}</p>
|
||||
<p>{d30}</p>
|
||||
<p>{d31}</p>
|
||||
<p>{d32}</p>
|
||||
<p>{d33}</p>
|
||||
|
||||
<slot dummy={dummy}></slot>
|
||||
@ -0,0 +1,96 @@
|
||||
export default {
|
||||
html: `
|
||||
<p>d1</p>
|
||||
<p>d2</p>
|
||||
<p>d3</p>
|
||||
<p>d4</p>
|
||||
<p>d5</p>
|
||||
<p>d6</p>
|
||||
<p>d7</p>
|
||||
<p>d8</p>
|
||||
<p>d9</p>
|
||||
<p>d10</p>
|
||||
<p>d11</p>
|
||||
<p>d12</p>
|
||||
<p>d13</p>
|
||||
<p>d14</p>
|
||||
<p>d15</p>
|
||||
<p>d16</p>
|
||||
<p>d17</p>
|
||||
<p>d18</p>
|
||||
<p>d19</p>
|
||||
<p>d20</p>
|
||||
<p>d21</p>
|
||||
<p>d22</p>
|
||||
<p>d23</p>
|
||||
<p>d24</p>
|
||||
<p>d25</p>
|
||||
<p>d26</p>
|
||||
<p>d27</p>
|
||||
<p>d28</p>
|
||||
<p>d29</p>
|
||||
<p>d30</p>
|
||||
<p>d31</p>
|
||||
<p>2</p>
|
||||
<p>1</p>
|
||||
<p>0:1</p>
|
||||
<p>2:1</p>
|
||||
<p>0</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.reads = {};
|
||||
|
||||
component._0 = 'a';
|
||||
component._1 = 'b';
|
||||
component._2 = 'c';
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>d1</p>
|
||||
<p>d2</p>
|
||||
<p>d3</p>
|
||||
<p>d4</p>
|
||||
<p>d5</p>
|
||||
<p>d6</p>
|
||||
<p>d7</p>
|
||||
<p>d8</p>
|
||||
<p>d9</p>
|
||||
<p>d10</p>
|
||||
<p>d11</p>
|
||||
<p>d12</p>
|
||||
<p>d13</p>
|
||||
<p>d14</p>
|
||||
<p>d15</p>
|
||||
<p>d16</p>
|
||||
<p>d17</p>
|
||||
<p>d18</p>
|
||||
<p>d19</p>
|
||||
<p>d20</p>
|
||||
<p>d21</p>
|
||||
<p>d22</p>
|
||||
<p>d23</p>
|
||||
<p>d24</p>
|
||||
<p>d25</p>
|
||||
<p>d26</p>
|
||||
<p>d27</p>
|
||||
<p>d28</p>
|
||||
<p>d29</p>
|
||||
<p>d30</p>
|
||||
<p>d31</p>
|
||||
<p>c</p>
|
||||
<p>b</p>
|
||||
<p>a:b</p>
|
||||
<p>c:b</p>
|
||||
<p>a</p>
|
||||
<p>b</p>
|
||||
<p>c</p>
|
||||
`);
|
||||
|
||||
assert.deepEqual(component.reads, {
|
||||
_0: 2,
|
||||
_1: 2,
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,30 @@
|
||||
<script>
|
||||
import Echo from './Echo.svelte';
|
||||
|
||||
export let reads = {};
|
||||
|
||||
export let _0 = '0';
|
||||
export let _1 = '1';
|
||||
export let _2 = '2';
|
||||
|
||||
$: bar = read(_0, '_0') + ':' + read(_1, '_1');
|
||||
|
||||
const read = (value, label) => {
|
||||
if (!reads[label]) reads[label] = 0;
|
||||
reads[label] += 1;
|
||||
|
||||
return value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<Echo
|
||||
let:dummy
|
||||
d33={_1}
|
||||
d32={_2}
|
||||
>
|
||||
<p>{bar}</p>
|
||||
<p>{dummy}</p>
|
||||
<p>{_0}</p>
|
||||
<p>{_1}</p>
|
||||
<p>{_2}</p>
|
||||
</Echo>
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export let dummy;
|
||||
</script>
|
||||
|
||||
<slot dummy={dummy}></slot>
|
||||
@ -0,0 +1,124 @@
|
||||
export default {
|
||||
html: `
|
||||
<p>0</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>5</p>
|
||||
<p>6</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>10</p>
|
||||
<p>11</p>
|
||||
<p>12</p>
|
||||
<p>13</p>
|
||||
<p>14</p>
|
||||
<p>15</p>
|
||||
<p>16</p>
|
||||
<p>17</p>
|
||||
<p>18</p>
|
||||
<p>19</p>
|
||||
<p>20</p>
|
||||
<p>21</p>
|
||||
<p>22</p>
|
||||
<p>23</p>
|
||||
<p>24</p>
|
||||
<p>25</p>
|
||||
<p>26</p>
|
||||
<p>27</p>
|
||||
<p>28</p>
|
||||
<p>29</p>
|
||||
<p>30</p>
|
||||
<p>31</p>
|
||||
<p>32</p>
|
||||
<p>33</p>
|
||||
<p>34</p>
|
||||
<p>35</p>
|
||||
<p>36</p>
|
||||
<p>37</p>
|
||||
<p>38</p>
|
||||
<p>39</p>
|
||||
<p>40</p>
|
||||
<p>5:36</p>
|
||||
<p>6:37</p>
|
||||
<p>38</p>
|
||||
<p>0</p>
|
||||
`,
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.reads = {};
|
||||
|
||||
component._0 = 'a';
|
||||
component._30 = 'b';
|
||||
component._31 = 'c';
|
||||
component._32 = 'd';
|
||||
component._40 = 'e';
|
||||
|
||||
component._5 = 'f';
|
||||
component._6 = 'g';
|
||||
component._36 = 'h';
|
||||
component._37 = 'i';
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>a</p>
|
||||
<p>1</p>
|
||||
<p>2</p>
|
||||
<p>3</p>
|
||||
<p>4</p>
|
||||
<p>f</p>
|
||||
<p>g</p>
|
||||
<p>7</p>
|
||||
<p>8</p>
|
||||
<p>9</p>
|
||||
<p>10</p>
|
||||
<p>11</p>
|
||||
<p>12</p>
|
||||
<p>13</p>
|
||||
<p>14</p>
|
||||
<p>15</p>
|
||||
<p>16</p>
|
||||
<p>17</p>
|
||||
<p>18</p>
|
||||
<p>19</p>
|
||||
<p>20</p>
|
||||
<p>21</p>
|
||||
<p>22</p>
|
||||
<p>23</p>
|
||||
<p>24</p>
|
||||
<p>25</p>
|
||||
<p>26</p>
|
||||
<p>27</p>
|
||||
<p>28</p>
|
||||
<p>29</p>
|
||||
<p>b</p>
|
||||
<p>c</p>
|
||||
<p>d</p>
|
||||
<p>33</p>
|
||||
<p>34</p>
|
||||
<p>35</p>
|
||||
<p>h</p>
|
||||
<p>i</p>
|
||||
<p>38</p>
|
||||
<p>39</p>
|
||||
<p>e</p>
|
||||
<p>f:h</p>
|
||||
<p>g:i</p>
|
||||
<p>38</p>
|
||||
<p>a</p>
|
||||
`);
|
||||
|
||||
assert.deepEqual(component.reads, {
|
||||
_0: 1,
|
||||
_5: 3,
|
||||
_6: 3,
|
||||
_30: 1,
|
||||
_31: 1,
|
||||
_32: 1,
|
||||
_36: 3,
|
||||
_37: 3,
|
||||
_40: 1
|
||||
});
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,107 @@
|
||||
<script>
|
||||
import Echo from './Echo.svelte';
|
||||
|
||||
export let reads = {};
|
||||
|
||||
export let _0 = '0';
|
||||
export let _1 = '1';
|
||||
export let _2 = '2';
|
||||
export let _3 = '3';
|
||||
export let _4 = '4';
|
||||
export let _5 = '5';
|
||||
export let _6 = '6';
|
||||
export let _7 = '7';
|
||||
export let _8 = '8';
|
||||
export let _9 = '9';
|
||||
export let _10 = '10';
|
||||
export let _11 = '11';
|
||||
export let _12 = '12';
|
||||
export let _13 = '13';
|
||||
export let _14 = '14';
|
||||
export let _15 = '15';
|
||||
export let _16 = '16';
|
||||
export let _17 = '17';
|
||||
export let _18 = '18';
|
||||
export let _19 = '19';
|
||||
export let _20 = '20';
|
||||
export let _21 = '21';
|
||||
export let _22 = '22';
|
||||
export let _23 = '23';
|
||||
export let _24 = '24';
|
||||
export let _25 = '25';
|
||||
export let _26 = '26';
|
||||
export let _27 = '27';
|
||||
export let _28 = '28';
|
||||
export let _29 = '29';
|
||||
export let _30 = '30';
|
||||
export let _31 = '31';
|
||||
export let _32 = '32';
|
||||
export let _33 = '33';
|
||||
export let _34 = '34';
|
||||
export let _35 = '35';
|
||||
export let _36 = '36';
|
||||
export let _37 = '37';
|
||||
export let _38 = '38';
|
||||
export let _39 = '39';
|
||||
export let _40 = '40';
|
||||
|
||||
$: foo = read(_6, '_6') + ':' + read(_37, '_37');
|
||||
$: bar = read(_38, '_38');
|
||||
|
||||
const read = (value, label) => {
|
||||
if (!reads[label]) reads[label] = 0;
|
||||
reads[label] += 1;
|
||||
|
||||
return value;
|
||||
};
|
||||
</script>
|
||||
|
||||
<Echo dummy={_0} let:dummy>
|
||||
<p>{read(_0, '_0')}</p>
|
||||
<p>{read(_1, '_1')}</p>
|
||||
<p>{read(_2, '_2')}</p>
|
||||
<p>{read(_3, '_3')}</p>
|
||||
<p>{read(_4, '_4')}</p>
|
||||
<p>{read(_5, '_5')}</p>
|
||||
<p>{read(_6, '_6')}</p>
|
||||
<p>{read(_7, '_7')}</p>
|
||||
<p>{read(_8, '_8')}</p>
|
||||
<p>{read(_9, '_9')}</p>
|
||||
<p>{read(_10, '_10')}</p>
|
||||
<p>{read(_11, '_11')}</p>
|
||||
<p>{read(_12, '_12')}</p>
|
||||
<p>{read(_13, '_13')}</p>
|
||||
<p>{read(_14, '_14')}</p>
|
||||
<p>{read(_15, '_15')}</p>
|
||||
<p>{read(_16, '_16')}</p>
|
||||
<p>{read(_17, '_17')}</p>
|
||||
<p>{read(_18, '_18')}</p>
|
||||
<p>{read(_19, '_19')}</p>
|
||||
<p>{read(_20, '_20')}</p>
|
||||
<p>{read(_21, '_21')}</p>
|
||||
<p>{read(_22, '_22')}</p>
|
||||
<p>{read(_23, '_23')}</p>
|
||||
<p>{read(_24, '_24')}</p>
|
||||
<p>{read(_25, '_25')}</p>
|
||||
<p>{read(_26, '_26')}</p>
|
||||
<p>{read(_27, '_27')}</p>
|
||||
<p>{read(_28, '_28')}</p>
|
||||
<p>{read(_29, '_29')}</p>
|
||||
<p>{read(_30, '_30')}</p>
|
||||
<p>{read(_31, '_31')}</p>
|
||||
<p>{read(_32, '_32')}</p>
|
||||
<p>{read(_33, '_33')}</p>
|
||||
<p>{read(_34, '_34')}</p>
|
||||
<p>{read(_35, '_35')}</p>
|
||||
<p>{read(_36, '_36')}</p>
|
||||
<p>{read(_37, '_37')}</p>
|
||||
<p>{read(_38, '_38')}</p>
|
||||
<p>{read(_39, '_39')}</p>
|
||||
<p>{read(_40, '_40')}</p>
|
||||
|
||||
<p>{read(_5, '_5') + ':' + read(_36, '_36')}</p>
|
||||
<p>{foo}</p>
|
||||
<p>{bar}</p>
|
||||
|
||||
<p>{dummy}</p>
|
||||
</Echo>
|
||||
@ -0,0 +1 @@
|
||||
<slot/>
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export let prop
|
||||
</script>
|
||||
|
||||
<slot value={prop} />
|
||||
@ -0,0 +1,12 @@
|
||||
export default {
|
||||
props: {
|
||||
prop: 'a',
|
||||
},
|
||||
|
||||
html: 'a',
|
||||
|
||||
test({ assert, component, target }) {
|
||||
component.prop = 'b';
|
||||
assert.htmlEqual( target.innerHTML, 'b' );
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
import Outer from './Outer.svelte'
|
||||
import Inner from './Inner.svelte'
|
||||
|
||||
export let prop
|
||||
</script>
|
||||
|
||||
<Outer {prop} let:value>
|
||||
<Inner>{value}</Inner>
|
||||
</Outer>
|
||||
@ -0,0 +1,8 @@
|
||||
export default {
|
||||
html: `
|
||||
<p>OK</p>
|
||||
<p>OK</p>
|
||||
<pre>one</pre>
|
||||
<pre>two</pre>
|
||||
`
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
let a = () => true;
|
||||
export let data = [{ foo: [{ foo: [{bar: "one"}, {bar: "two"}] }] }];
|
||||
</script>
|
||||
|
||||
{#each data as datum}
|
||||
{#if datum.foo && a()}
|
||||
<p>OK</p>
|
||||
<svelte:self data={datum.foo}/>
|
||||
{:else}
|
||||
<pre>{datum.bar}</pre>
|
||||
{/if}
|
||||
{/each}
|
||||
@ -0,0 +1 @@
|
||||
<p>OK</p>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
html: '<p>OK</p>',
|
||||
};
|
||||
@ -0,0 +1,12 @@
|
||||
<script>
|
||||
import {writable} from 'svelte/store';
|
||||
import Widget from './Widget.svelte';
|
||||
let a = (writable({}));
|
||||
let b = () => true;
|
||||
</script>
|
||||
<!-- if (reactive && non-reactive) -->
|
||||
{#if $a || b() }
|
||||
<Widget></Widget>
|
||||
{:else}
|
||||
<pre>fail</pre>
|
||||
{/if}
|
||||
@ -0,0 +1,22 @@
|
||||
export default {
|
||||
html: `
|
||||
<input class="input" placeholder="Type here" type="text">
|
||||
Dirty: false
|
||||
Valid: false
|
||||
`,
|
||||
|
||||
async test({ assert, target, window }) {
|
||||
const input = target.querySelector('input');
|
||||
|
||||
input.value = 'foo';
|
||||
const inputEvent = new window.InputEvent('input');
|
||||
|
||||
await input.dispatchEvent(inputEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<input class="input" placeholder="Type here" type="text">
|
||||
Dirty: true
|
||||
Valid: true
|
||||
`);
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { writable } from 'svelte/store';
|
||||
|
||||
export function createValidator() {
|
||||
const { subscribe, set } = writable({ dirty: false, valid: false });
|
||||
|
||||
function action(node, binding) {
|
||||
return {
|
||||
update(value) {
|
||||
set({ dirty: true, valid: value !== '' });
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
return [{ subscribe }, action];
|
||||
}
|
||||
const [validity, validate] = createValidator();
|
||||
let email = null;
|
||||
</script>
|
||||
|
||||
<input class="input"
|
||||
type="text"
|
||||
bind:value={email}
|
||||
placeholder="Type here"
|
||||
use:validate={email}
|
||||
/>
|
||||
|
||||
Dirty: {$validity.dirty}
|
||||
Valid: {$validity.valid}
|
||||
@ -0,0 +1,44 @@
|
||||
export default {
|
||||
html: `
|
||||
<input>
|
||||
<div></div>
|
||||
<div>simple</div>
|
||||
<button>click me</button>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const input = target.querySelector('input');
|
||||
const button = target.querySelector('button');
|
||||
|
||||
const inputEvent = new window.InputEvent('input');
|
||||
const clickEvent = new window.MouseEvent('click');
|
||||
|
||||
input.value = 'foo';
|
||||
await input.dispatchEvent(inputEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<input>
|
||||
<div>foo</div>
|
||||
<div>foo</div>
|
||||
<button>click me</button>
|
||||
`);
|
||||
|
||||
await button.dispatchEvent(clickEvent);
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<input>
|
||||
<div>foo</div>
|
||||
<div>clicked</div>
|
||||
<button>click me</button>
|
||||
`);
|
||||
|
||||
input.value = 'bar';
|
||||
await input.dispatchEvent(inputEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<input>
|
||||
<div>bar</div>
|
||||
<div>bar</div>
|
||||
<button>click me</button>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
import {writable} from 'svelte/store';
|
||||
|
||||
function action(node, binding) {
|
||||
return {
|
||||
update: (value) => s.set(value),
|
||||
}
|
||||
}
|
||||
let s = writable("simple");
|
||||
let v = "";
|
||||
|
||||
function click() {
|
||||
s.set('clicked');
|
||||
}
|
||||
</script>
|
||||
|
||||
<input bind:value={v} use:action={v}>
|
||||
<div>{v}</div>
|
||||
<div>{$s}</div>
|
||||
<button on:click={click}>click me</button>
|
||||
@ -0,0 +1,44 @@
|
||||
export default {
|
||||
html: `
|
||||
<div></div>
|
||||
<div>simple</div>
|
||||
<input>
|
||||
<button>click me</button>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const input = target.querySelector('input');
|
||||
const button = target.querySelector('button');
|
||||
|
||||
const inputEvent = new window.InputEvent('input');
|
||||
const clickEvent = new window.MouseEvent('click');
|
||||
|
||||
input.value = 'foo';
|
||||
await input.dispatchEvent(inputEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>foo</div>
|
||||
<div>foo</div>
|
||||
<input>
|
||||
<button>click me</button>
|
||||
`);
|
||||
|
||||
await button.dispatchEvent(clickEvent);
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>foo</div>
|
||||
<div>clicked</div>
|
||||
<input>
|
||||
<button>click me</button>
|
||||
`);
|
||||
|
||||
input.value = 'bar';
|
||||
await input.dispatchEvent(inputEvent);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>bar</div>
|
||||
<div>bar</div>
|
||||
<input>
|
||||
<button>click me</button>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
import {writable} from 'svelte/store';
|
||||
|
||||
function action(node, binding) {
|
||||
return {
|
||||
update: (value) => s.set(value),
|
||||
}
|
||||
}
|
||||
let s = writable("simple");
|
||||
let v = "";
|
||||
|
||||
function click() {
|
||||
s.set('clicked');
|
||||
}
|
||||
</script>
|
||||
|
||||
<div>{v}</div>
|
||||
<div>{$s}</div>
|
||||
<input bind:value={v} use:action={v}>
|
||||
<button on:click={click}>click me</button>
|
||||
Loading…
Reference in new issue