mirror of https://github.com/sveltejs/svelte
parent
91a1561a8a
commit
dd434b62e5
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
html: '<div>12 120 70, 30+4=34</div>',
|
||||
async test({ component, target, assert }) {
|
||||
component.promise1 = Promise.resolve({width: 5, height: 6});
|
||||
component.promise2 = Promise.reject({width: 6, height: 7});
|
||||
|
||||
await Promise.resolve();
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>30 300 110, 50+6=56</div>
|
||||
<div>42 420 130, 60+7=67</div>
|
||||
`);
|
||||
|
||||
component.constant = 20;
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>30 600 220, 100+6=106</div>
|
||||
<div>42 840 260, 120+7=127</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
export let promise1 = {width: 3, height: 4};
|
||||
export let promise2 = {width: 5, height: 7};
|
||||
export let constant = 10;
|
||||
|
||||
function calculate(width, height, constant) {
|
||||
return { 'the-area': width * height, 'the-volume': width * height * constant };
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await promise1 then { width, height }}
|
||||
{@const {'the-area': area, 'the-volume': volume} = calculate(width, height, constant)}
|
||||
{@const perimeter = (width + height) * constant}
|
||||
{@const { 0: _width, 1: _height, 2: sum } = [width * constant, height, width * constant + height]}
|
||||
<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
|
||||
{/await}
|
||||
|
||||
{#await promise2 catch { width, height }}
|
||||
{@const {'the-area': area, 'the-volume': volume} = calculate(width, height, constant)}
|
||||
{@const perimeter = (width + height) * constant}
|
||||
{@const { 0: _width, 1: _height, 2: sum } = [width * constant, height, width * constant + height]}
|
||||
<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
|
||||
{/await}
|
||||
@ -0,0 +1,30 @@
|
||||
export default {
|
||||
html: `
|
||||
<div>12 120 70, 30+4=34</div>
|
||||
<div>35 350 120, 50+7=57</div>
|
||||
<div>48 480 140, 60+8=68</div>
|
||||
`,
|
||||
async test({ component, target, assert }) {
|
||||
component.constant = 20;
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>12 240 140, 60+4=64</div>
|
||||
<div>35 700 240, 100+7=107</div>
|
||||
<div>48 960 280, 120+8=128</div>
|
||||
`);
|
||||
|
||||
component.boxes = [
|
||||
{width: 3, height: 4},
|
||||
{width: 4, height: 5},
|
||||
{width: 5, height: 6},
|
||||
{width: 6, height: 7}
|
||||
];
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>12 240 140, 60+4=64</div>
|
||||
<div>20 400 180, 80+5=85</div>
|
||||
<div>30 600 220, 100+6=106</div>
|
||||
<div>42 840 260, 120+7=127</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
export let boxes = [
|
||||
{width: 3, height: 4},
|
||||
{width: 5, height: 7},
|
||||
{width: 6, height: 8},
|
||||
];
|
||||
export let constant = 10;
|
||||
|
||||
function calculate(width, height, constant) {
|
||||
return { 'the-area': width * height, 'the-volume': width * height * constant };
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each boxes as { width, height }}
|
||||
{@const { 'the-area': area, 'the-volume': volume } = calculate(width, height, constant)}
|
||||
{@const perimeter = (width + height) * constant}
|
||||
{@const { 2: sum, 0: _width, 1: _height } = [width * constant, height, width * constant + height]}
|
||||
<div>{area} {volume} {perimeter}, {_width}+{_height}={sum}</div>
|
||||
{/each}
|
||||
Loading…
Reference in new issue