mirror of https://github.com/sveltejs/svelte
Michael Leahy
4 years ago
committed by
GitHub
commit
15fa8ad0cc
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
let selection = '';
|
||||
|
||||
const handleSelectionChange = (e) => selection = document.getSelection();
|
||||
</script>
|
||||
|
||||
<svelte:document on:selectionchange={handleSelectionChange} />
|
||||
|
||||
<p>Select this text to fire events</p>
|
||||
<p>Selection: {selection}</p>
|
||||
@ -0,0 +1,3 @@
|
||||
{
|
||||
"title": "<svelte:document>"
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
---
|
||||
title: <svelte:body>
|
||||
---
|
||||
|
||||
Similar to `<svelte:window>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
|
||||
|
||||
Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
|
||||
|
||||
```html
|
||||
<svelte:body
|
||||
on:mouseenter={handleMouseenter}
|
||||
on:mouseleave={handleMouseleave}
|
||||
/>
|
||||
```
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
let selection = '';
|
||||
|
||||
const handleSelectionChange = (e) => selection = document.getSelection();
|
||||
</script>
|
||||
|
||||
<svelte:body />
|
||||
|
||||
<p>Select this text to fire events</p>
|
||||
<p>Selection: {selection}</p>
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
let selection = '';
|
||||
|
||||
const handleSelectionChange = (e) => selection = document.getSelection();
|
||||
</script>
|
||||
|
||||
<svelte:document on:selectionchange={handleSelectionChange} />
|
||||
|
||||
<p>Select this text to fire events</p>
|
||||
<p>Selection: {selection}</p>
|
||||
@ -0,0 +1,13 @@
|
||||
---
|
||||
title: <svelte:document>
|
||||
---
|
||||
|
||||
Similar to `<svelte:window>`, the `<svelte:document>` element allows you to listen for events that fire on `document`. This is useful with events like `selectionchange`, which doesn't fire on `window`.
|
||||
|
||||
Add the `selectionchange` handler to the `<svelte:document>` tag:
|
||||
|
||||
```html
|
||||
<svelte:document on:selectionchange={handleSelectionChange} />
|
||||
```
|
||||
|
||||
> Avoid `mouseenter` and `mouseleave` handlers on this element, these events are not fired on `document` in all browsers. Use `<svelte:body>` for this instead.
|
||||
@ -0,0 +1,14 @@
|
||||
---
|
||||
title: <svelte:body>
|
||||
---
|
||||
|
||||
Similar to `<svelte:window>` and `<svelte:document>`, the `<svelte:body>` element allows you to listen for events that fire on `document.body`. This is useful with the `mouseenter` and `mouseleave` events, which don't fire on `window`.
|
||||
|
||||
Add the `mouseenter` and `mouseleave` handlers to the `<svelte:body>` tag:
|
||||
|
||||
```html
|
||||
<svelte:body
|
||||
on:mouseenter={handleMouseenter}
|
||||
on:mouseleave={handleMouseleave}
|
||||
/>
|
||||
```
|
||||
@ -0,0 +1,41 @@
|
||||
import Node from './shared/Node';
|
||||
import EventHandler from './EventHandler';
|
||||
import Action from './Action';
|
||||
import Component from '../Component';
|
||||
import TemplateScope from './shared/TemplateScope';
|
||||
import { Element } from '../../interfaces';
|
||||
import compiler_warnings from '../compiler_warnings';
|
||||
|
||||
export default class Document extends Node {
|
||||
type: 'Document';
|
||||
handlers: EventHandler[] = [];
|
||||
actions: Action[] = [];
|
||||
|
||||
constructor(component: Component, parent: Node, scope: TemplateScope, info: Element) {
|
||||
super(component, parent, scope, info);
|
||||
|
||||
info.attributes.forEach((node) => {
|
||||
if (node.type === 'EventHandler') {
|
||||
this.handlers.push(new EventHandler(component, this, scope, node));
|
||||
} else if (node.type === 'Action') {
|
||||
this.actions.push(new Action(component, this, scope, node));
|
||||
} else {
|
||||
// TODO there shouldn't be anything else here...
|
||||
}
|
||||
});
|
||||
|
||||
this.validate();
|
||||
}
|
||||
|
||||
private validate() {
|
||||
const handlers_map = new Set();
|
||||
|
||||
this.handlers.forEach(handler => (
|
||||
handlers_map.add(handler.name)
|
||||
));
|
||||
|
||||
if (handlers_map.has('mouseenter') || handlers_map.has('mouseleave')) {
|
||||
this.component.warn(this, compiler_warnings.avoid_mouse_events_on_document);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import Block from '../Block';
|
||||
import Wrapper from './shared/Wrapper';
|
||||
import { x } from 'code-red';
|
||||
import Document from '../../nodes/Document';
|
||||
import { Identifier } from 'estree';
|
||||
import EventHandler from './Element/EventHandler';
|
||||
import add_event_handlers from './shared/add_event_handlers';
|
||||
import { TemplateNode } from '../../../interfaces';
|
||||
import Renderer from '../Renderer';
|
||||
import add_actions from './shared/add_actions';
|
||||
|
||||
export default class DocumentWrapper extends Wrapper {
|
||||
node: Document;
|
||||
handlers: EventHandler[];
|
||||
|
||||
constructor(renderer: Renderer, block: Block, parent: Wrapper, node: TemplateNode) {
|
||||
super(renderer, block, parent, node);
|
||||
this.handlers = this.node.handlers.map(handler => new EventHandler(handler, this));
|
||||
}
|
||||
|
||||
render(block: Block, _parent_node: Identifier, _parent_nodes: Identifier) {
|
||||
add_event_handlers(block, x`@_document`, this.handlers);
|
||||
add_actions(block, x`@_document`, this.node.actions);
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,57 @@
|
||||
// Utilities for managing contenteditable nodes
|
||||
import Attribute from '../nodes/Attribute';
|
||||
import Element from '../nodes/Element';
|
||||
|
||||
export const CONTENTEDITABLE_BINDINGS = [
|
||||
'textContent',
|
||||
'innerHTML',
|
||||
'innerText'
|
||||
];
|
||||
|
||||
/**
|
||||
* Returns true if node is an 'input' or 'textarea'.
|
||||
* @param {Element} node The element to be checked
|
||||
*/
|
||||
function is_input_or_textarea(node: Element): boolean {
|
||||
return node.name === 'textarea' || node.name === 'input';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if a given attribute is 'contenteditable'.
|
||||
* @param {Attribute} attribute A node.attribute
|
||||
*/
|
||||
function is_attr_contenteditable(attribute: Attribute): boolean {
|
||||
return attribute.name === 'contenteditable';
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if any of a node's attributes are 'contentenditable'.
|
||||
* @param {Element} node The element to be checked
|
||||
*/
|
||||
export function has_contenteditable_attr(node: Element): boolean {
|
||||
return node.attributes.some(is_attr_contenteditable);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if node is not textarea or input, but has 'contenteditable' attribute.
|
||||
* @param {Element} node The element to be tested
|
||||
*/
|
||||
export function is_contenteditable(node: Element): boolean {
|
||||
return !is_input_or_textarea(node) && has_contenteditable_attr(node);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns true if a given binding/node is contenteditable.
|
||||
* @param {string} name A binding or node name to be checked
|
||||
*/
|
||||
export function is_name_contenteditable(name: string): boolean {
|
||||
return CONTENTEDITABLE_BINDINGS.includes(name);
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the contenteditable attribute from the node (if it exists).
|
||||
* @param {Element} node The element to get the attribute from
|
||||
*/
|
||||
export function get_contenteditable_attr(node: Element): Attribute | undefined {
|
||||
return node.attributes.find(is_attr_contenteditable);
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import {
|
||||
SvelteComponent,
|
||||
detach,
|
||||
element,
|
||||
init,
|
||||
insert,
|
||||
noop,
|
||||
safe_not_equal,
|
||||
set_data,
|
||||
space,
|
||||
text
|
||||
} from "svelte/internal";
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let h1;
|
||||
let t3;
|
||||
let t4;
|
||||
|
||||
return {
|
||||
c() {
|
||||
h1 = element("h1");
|
||||
h1.textContent = `Hello ${name}!`;
|
||||
t3 = space();
|
||||
t4 = text(/*foo*/ ctx[0]);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, h1, anchor);
|
||||
insert(target, t3, anchor);
|
||||
insert(target, t4, anchor);
|
||||
},
|
||||
p(ctx, [dirty]) {
|
||||
if (dirty & /*foo*/ 1) set_data(t4, /*foo*/ ctx[0]);
|
||||
},
|
||||
i: noop,
|
||||
o: noop,
|
||||
d(detaching) {
|
||||
if (detaching) detach(h1);
|
||||
if (detaching) detach(t3);
|
||||
if (detaching) detach(t4);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
let name = 'world';
|
||||
|
||||
function instance($$self) {
|
||||
let foo;
|
||||
$: foo = name + name;
|
||||
return [foo];
|
||||
}
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, instance, create_fragment, safe_not_equal, {});
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
@ -1,7 +0,0 @@
|
||||
<script>
|
||||
let name = 'world';
|
||||
$: foo = name + name;
|
||||
</script>
|
||||
|
||||
<h1>Hello {name}!</h1>
|
||||
{foo}
|
||||
@ -0,0 +1,24 @@
|
||||
export default {
|
||||
html: `
|
||||
<p style="font-size: 32px; color: red; background-color: green; border-color: green;"></p>
|
||||
`,
|
||||
|
||||
test({ assert, target, window, component }) {
|
||||
const p = target.querySelector('p');
|
||||
const styles = window.getComputedStyle(p);
|
||||
assert.equal(styles.color, 'rgb(255, 0, 0)');
|
||||
assert.equal(styles.fontSize, '32px');
|
||||
assert.equal(styles.backgroundColor, 'rgb(0, 128, 0)');
|
||||
assert.equal(styles.borderColor, 'rgb(0, 128, 0)');
|
||||
|
||||
component.foo = 'font-size: 50px; color: green;'; // Update style attribute
|
||||
{
|
||||
const p = target.querySelector('p');
|
||||
const styles = window.getComputedStyle(p);
|
||||
assert.equal(styles.color, 'rgb(255, 0, 0)');
|
||||
assert.equal(styles.fontSize, '32px');
|
||||
assert.equal(styles.backgroundColor, 'rgb(0, 128, 0)');
|
||||
assert.equal(styles.borderColor, 'rgb(0, 128, 0)');
|
||||
}
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let foo = "font-size: 20px; color: blue;";
|
||||
let baz = "red"; // static value
|
||||
let bar = "32"; // static value interpolated
|
||||
export let bg = "gre"; // dynamic value interpolated/cached
|
||||
export let borderColor = "green"; // dynamic value non-cached
|
||||
</script>
|
||||
|
||||
<p
|
||||
style:font-size="{bar}px"
|
||||
style:color={baz}
|
||||
style="{foo}"
|
||||
style:background-color="{bg}en"
|
||||
style:border-color={borderColor}
|
||||
/>
|
||||
@ -0,0 +1,14 @@
|
||||
export default {
|
||||
html: '<div></div>',
|
||||
|
||||
async test({ assert, target, window }) {
|
||||
const visibility = new window.Event('visibilitychange');
|
||||
|
||||
await window.document.dispatchEvent(visibility);
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div>
|
||||
<div class="tooltip">Perform an Action</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,24 @@
|
||||
<script>
|
||||
let container;
|
||||
function tooltip(node, text) {
|
||||
let tooltip = null;
|
||||
|
||||
function onVisibilityChange() {
|
||||
tooltip = document.createElement('div');
|
||||
tooltip.classList.add('tooltip');
|
||||
tooltip.textContent = text;
|
||||
container.appendChild(tooltip);
|
||||
}
|
||||
|
||||
node.addEventListener('visibilitychange', onVisibilityChange);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
node.removeEventListener('visibilitychange', onVisibilityChange);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:document use:tooltip="{'Perform an Action'}" />
|
||||
<div bind:this={container} />
|
||||
@ -0,0 +1,32 @@
|
||||
export default {
|
||||
async test({ assert, component, target }) {
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>propA: 3</p>
|
||||
<p>propB: 7</p>
|
||||
<p>num: 3</p>
|
||||
<p>rest: {"prop3":{"prop9":9,"prop10":10}}</p>
|
||||
<p>propZ: 5</p>
|
||||
<p>propY: 6</p>
|
||||
<p>rest: {"propX":7,"propW":8}</p>
|
||||
`
|
||||
);
|
||||
|
||||
await (component.object = Promise.resolve({ prop1: 'one', prop2: 'two', prop3: { prop7: 'seven' }, prop4: { prop10: 'ten' }}));
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>propA: seven</p>
|
||||
<p>propB: ten</p>
|
||||
<p>num: 5</p>
|
||||
<p>rest: {"prop1":"one","prop2":"two"}</p>
|
||||
<p>propZ: 5</p>
|
||||
<p>propY: 6</p>
|
||||
<p>rest: {"propX":7,"propW":8}</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,23 @@
|
||||
<script>
|
||||
export let object = Promise.resolve({ prop1: { prop4: 2, prop5: 3 }, prop2: { prop6: 5, prop7: 6, prop8: 7 }, prop3: { prop9: 9, prop10: 10 } });
|
||||
const objectReject = Promise.reject({ propZ: 5, propY: 6, propX: 7, propW: 8 });
|
||||
|
||||
let num = 1;
|
||||
const prop = 'prop';
|
||||
</script>
|
||||
|
||||
{#await object then { [`prop${num++}`]: { [`prop${num + 3}`]: propA }, [`prop${num++}`]: { [`prop${num + 5}`]: propB }, ...rest }}
|
||||
<p>propA: {propA}</p>
|
||||
<p>propB: {propB}</p>
|
||||
<p>num: {num}</p>
|
||||
<p>rest: {JSON.stringify(rest)}</p>
|
||||
{/await}
|
||||
|
||||
{#await objectReject then value}
|
||||
resolved
|
||||
{:catch { [`${prop}Z`]: propZ, [`${prop}Y`]: propY, ...rest }}
|
||||
<p>propZ: {propZ}</p>
|
||||
<p>propY: {propY}</p>
|
||||
<p>rest: {JSON.stringify(rest)}</p>
|
||||
{/await}
|
||||
|
||||
@ -0,0 +1,63 @@
|
||||
export default {
|
||||
props: {
|
||||
thePromise: new Promise(_ => {})
|
||||
},
|
||||
|
||||
html: `
|
||||
loading...
|
||||
`,
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
await (component.thePromise = Promise.resolve([10, 11, 12, 13, 14, 15]));
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>[1] 11</p>
|
||||
<p>[3] 13</p>
|
||||
<p>[4] 14</p>
|
||||
`
|
||||
);
|
||||
|
||||
await (component.thePromise = Promise.resolve({ 1: 21, 3: 23, 4: 24 }));
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>[1] 21</p>
|
||||
<p>[3] 23</p>
|
||||
<p>[4] 24</p>
|
||||
`
|
||||
);
|
||||
|
||||
try {
|
||||
await (component.thePromise = Promise.reject([30, 31, 32, 33, 34, 35]));
|
||||
} catch (e) {
|
||||
// do nothing
|
||||
}
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>[0] 30</p>
|
||||
<p>[2] 32</p>
|
||||
<p>[5] 35</p>
|
||||
`
|
||||
);
|
||||
|
||||
try {
|
||||
await (component.thePromise = Promise.reject({ 0: 40, 2: 42, 5: 45 }));
|
||||
} catch (e) {
|
||||
// do nothing
|
||||
}
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>[0] 40</p>
|
||||
<p>[2] 42</p>
|
||||
<p>[5] 45</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let thePromise;
|
||||
</script>
|
||||
|
||||
{#await thePromise}
|
||||
loading...
|
||||
{:then { 1: a, 3: b, 4: c }}
|
||||
<p>[1] {a}</p>
|
||||
<p>[3] {b}</p>
|
||||
<p>[4] {c}</p>
|
||||
{:catch { 0: d, 2: e, 5: f }}
|
||||
<p>[0] {d}</p>
|
||||
<p>[2] {e}</p>
|
||||
<p>[5] {f}</p>
|
||||
{/await}
|
||||
@ -0,0 +1,17 @@
|
||||
export default {
|
||||
async test({ assert, target }) {
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<p>prop-1: 1</p>
|
||||
<p>prop4: 4</p>
|
||||
<p>rest: {"prop2":2,"prop-3":3}</p>
|
||||
<p>prop-7: 7</p>
|
||||
<p>prop6: 6</p>
|
||||
<p>rest: {"prop-5":5,"prop8":8}</p>
|
||||
`
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
const object = Promise.resolve({ 'prop-1': 1, 'prop2': 2, 'prop-3': 3, 'prop4': 4 });
|
||||
const objectReject = Promise.reject({ 'prop-5': 5, 'prop6': 6, 'prop-7': 7, 'prop8': 8 });
|
||||
</script>
|
||||
|
||||
{#await object then { 'prop-1': prop1, 'prop4': fourthProp, ...rest }}
|
||||
<p>prop-1: {prop1}</p>
|
||||
<p>prop4: {fourthProp}</p>
|
||||
<p>rest: {JSON.stringify(rest)}</p>
|
||||
{/await}
|
||||
|
||||
{#await objectReject then value}
|
||||
resolved
|
||||
{:catch { 'prop-7': prop7, 'prop6': sixthProp, ...rest }}
|
||||
<p>prop-7: {prop7}</p>
|
||||
<p>prop6: {sixthProp}</p>
|
||||
<p>rest: {JSON.stringify(rest)}</p>
|
||||
{/await}
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
export default {
|
||||
props: {
|
||||
name: 'world'
|
||||
},
|
||||
|
||||
ssrHtml: `
|
||||
<editor contenteditable="true">world</editor>
|
||||
<p>hello world</p>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
// JSDom doesn't support innerText yet, so the test is not ideal
|
||||
// https://github.com/jsdom/jsdom/issues/1245
|
||||
const el = target.querySelector('editor');
|
||||
assert.equal(el.innerText, 'world');
|
||||
|
||||
const event = new window.Event('input');
|
||||
el.innerText = 'everybody';
|
||||
await el.dispatchEvent(event);
|
||||
assert.equal(component.name, 'everybody');
|
||||
|
||||
component.name = 'goodbye';
|
||||
assert.equal(el.innerText, 'goodbye');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
export let name;
|
||||
</script>
|
||||
|
||||
<editor contenteditable="true" bind:innerText={name} />
|
||||
<p>hello {name}</p>
|
||||
@ -0,0 +1,40 @@
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const clickEvent = new window.Event('click');
|
||||
const changeEvent = new window.Event('change');
|
||||
|
||||
const [input1, input2] = target.querySelectorAll('input[type="checkbox"]');
|
||||
function validate_inputs(v1, v2) {
|
||||
assert.equal(input1.checked, v1);
|
||||
assert.equal(input2.checked, v2);
|
||||
}
|
||||
|
||||
assert.deepEqual(component.test, []);
|
||||
validate_inputs(false, false);
|
||||
|
||||
component.test = ['a', 'b'];
|
||||
validate_inputs(true, true);
|
||||
|
||||
input1.checked = false;
|
||||
await input1.dispatchEvent(changeEvent);
|
||||
assert.deepEqual(component.test, ['b']);
|
||||
|
||||
input2.checked = false;
|
||||
await input2.dispatchEvent(changeEvent);
|
||||
assert.deepEqual(component.test, []);
|
||||
|
||||
input1.checked = true;
|
||||
input2.checked = true;
|
||||
await input1.dispatchEvent(changeEvent);
|
||||
await input2.dispatchEvent(changeEvent);
|
||||
assert.deepEqual(component.test, ['b', 'a']);
|
||||
|
||||
await button.dispatchEvent(clickEvent);
|
||||
assert.deepEqual(component.test, ['b', 'a']); // should it be ['a'] only? valid arguments for both outcomes
|
||||
|
||||
input1.checked = false;
|
||||
await input1.dispatchEvent(changeEvent);
|
||||
assert.deepEqual(component.test, []);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
export let test = [];
|
||||
let hidden = false
|
||||
</script>
|
||||
|
||||
<button on:click={() => hidden = !hidden}>
|
||||
{hidden ? "show" : "hide"} b
|
||||
</button>
|
||||
|
||||
<label>a <input type="checkbox" bind:group={test} value="a" /></label>
|
||||
{#if !hidden}
|
||||
<label>b <input type="checkbox" bind:group={test} value="b" /></label>
|
||||
{/if}
|
||||
<label>c <input value="just here, so b is not the last input" /></label>
|
||||
@ -0,0 +1,34 @@
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const clickEvent = new window.Event('click');
|
||||
const changeEvent = new window.Event('change');
|
||||
|
||||
const [input1, input2] = target.querySelectorAll('input[type="radio"]');
|
||||
function validate_inputs(v1, v2) {
|
||||
assert.equal(input1.checked, v1);
|
||||
assert.equal(input2.checked, v2);
|
||||
}
|
||||
|
||||
component.test = 'a';
|
||||
validate_inputs(true, false);
|
||||
|
||||
component.test = 'b';
|
||||
validate_inputs(false, true);
|
||||
|
||||
input1.checked = true;
|
||||
await input1.dispatchEvent(changeEvent);
|
||||
assert.deepEqual(component.test, 'a');
|
||||
|
||||
input2.checked = true;
|
||||
await input2.dispatchEvent(changeEvent);
|
||||
assert.deepEqual(component.test, 'b');
|
||||
|
||||
await button.dispatchEvent(clickEvent);
|
||||
assert.deepEqual(component.test, 'b'); // should it be undefined? valid arguments for both outcomes
|
||||
|
||||
input1.checked = true;
|
||||
await input1.dispatchEvent(changeEvent);
|
||||
assert.deepEqual(component.test, 'a');
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
export let test;
|
||||
let hidden = false
|
||||
</script>
|
||||
|
||||
<button on:click={() => hidden = !hidden}>
|
||||
{hidden ? "show" : "hide"} b
|
||||
</button>
|
||||
|
||||
<label>a <input type="radio" bind:group={test} value="a" /></label>
|
||||
{#if !hidden}
|
||||
<label>b <input type="radio" bind:group={test} value="b" /></label>
|
||||
{/if}
|
||||
<label>c <input value="just here, so b is not the last input" /></label>
|
||||
@ -0,0 +1,20 @@
|
||||
export default {
|
||||
html: `
|
||||
<p>4, 12, 60</p>
|
||||
`,
|
||||
|
||||
async test({ component, target, assert }) {
|
||||
component.permutation = [2, 3, 1];
|
||||
await (component.promise1 = Promise.resolve({length: 1, width: 2, height: 3}));
|
||||
try {
|
||||
await (component.promise2 = Promise.reject({length: 97, width: 98, height: 99}));
|
||||
} catch (e) {
|
||||
// nothing
|
||||
}
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>2, 11, 2</p>
|
||||
<p>9506, 28811, 98</p>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,25 @@
|
||||
<script>
|
||||
export let promise1 = {length: 5, width: 3, height: 4};
|
||||
export let promise2 = {length: 12, width: 5, height: 13};
|
||||
export let permutation = [1, 2, 3];
|
||||
|
||||
function calculate(length, width, height) {
|
||||
return {
|
||||
'1-Dimensions': [length, width, height],
|
||||
'2-Dimensions': [length * width, width * height, length * height],
|
||||
'3-Dimensions': [length * width * height, length + width + height, length * width + width * height + length * height]
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
{#await promise1 then { length, width, height }}
|
||||
{@const [a, b, c] = permutation}
|
||||
{@const { [`${a}-Dimensions`]: { [c - 1]: first }, [`${b}-Dimensions`]: { [b - 1]: second }, [`${c}-Dimensions`]: { [a - 1]: third } } = calculate(length, width, height) }
|
||||
<p>{first}, {second}, {third}</p>
|
||||
{/await}
|
||||
|
||||
{#await promise2 catch { length, width, height }}
|
||||
{@const [a, b, c] = permutation}
|
||||
{@const { [`${a}-Dimensions`]: { [c - 1]: first }, [`${b}-Dimensions`]: { [b - 1]: second }, [`${c}-Dimensions`]: { [a - 1]: third } } = calculate(length, width, height) }
|
||||
<p>{first}, {second}, {third}</p>
|
||||
{/await}
|
||||
@ -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,15 @@
|
||||
export default {
|
||||
html: `
|
||||
<button>6, 12, 8, 24</button>
|
||||
<button>45, 35, 63, 315</button>
|
||||
<button>60, 48, 80, 480</button>
|
||||
`,
|
||||
|
||||
async test({ component, target, assert }) {
|
||||
component.boxes = [{ length: 10, width: 20, height: 30 }];
|
||||
|
||||
assert.htmlEqual(target.innerHTML,
|
||||
'<button>200, 600, 300, 6000</button>'
|
||||
);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,42 @@
|
||||
<script>
|
||||
export let boxes = [
|
||||
{length: 2, width: 3, height: 4},
|
||||
{length: 9, width: 5, height: 7},
|
||||
{length: 10, width: 6, height: 8}
|
||||
];
|
||||
|
||||
function calculate(length, width, height) {
|
||||
return {
|
||||
twoDimensions: {
|
||||
bottomArea: length * width,
|
||||
sideArea1: width * height,
|
||||
sideArea2: length * height
|
||||
},
|
||||
threeDimensions: {
|
||||
volume: length * width * height
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export let dimension = 'Dimensions';
|
||||
function changeDimension() {
|
||||
dimension = 'DIMENSIONS';
|
||||
}
|
||||
|
||||
let area = 'Area';
|
||||
</script>
|
||||
|
||||
{#each boxes as { length, width, height }}
|
||||
{@const {
|
||||
[`two${dimension}`]: {
|
||||
i = 1,
|
||||
[`bottom${area}`]: bottom,
|
||||
[`side${area}${i++}`]: sideone,
|
||||
[`side${area}${i++}`]: sidetwo
|
||||
},
|
||||
[`three${dimension}`]: {
|
||||
volume
|
||||
}
|
||||
} = calculate(length, width, height)}
|
||||
<button on:click={changeDimension}>{bottom}, {sideone}, {sidetwo}, {volume}</button>
|
||||
{/each}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue