mirror of https://github.com/sveltejs/svelte
Michael Leahy
4 years ago
committed by
GitHub
commit
39fb408c0e
@ -0,0 +1,34 @@
|
||||
import { TemplateLiteral } from 'estree';
|
||||
import { escape_template } from './stringify';
|
||||
|
||||
/**
|
||||
* Collapse string literals together
|
||||
*/
|
||||
export function collapse_template_literal(literal: TemplateLiteral) {
|
||||
if (!literal.quasis.length) return;
|
||||
|
||||
const collapsed_quasis = [];
|
||||
const collapsed_expressions = [];
|
||||
|
||||
let cur_quasi = literal.quasis[0];
|
||||
|
||||
// An expression always follows a quasi and vice versa, ending with a quasi
|
||||
for (let i = 0; i < literal.quasis.length; i++) {
|
||||
const expr = literal.expressions[i];
|
||||
const next_quasi = literal.quasis[i + 1];
|
||||
// If an expression is a simple string literal, combine it with its preceding
|
||||
// and following quasi
|
||||
if (next_quasi && expr && expr.type === 'Literal' && typeof expr.value === 'string') {
|
||||
cur_quasi.value.raw += escape_template(expr.value) + next_quasi.value.raw;
|
||||
} else {
|
||||
if (expr) {
|
||||
collapsed_expressions.push(expr);
|
||||
}
|
||||
collapsed_quasis.push(cur_quasi);
|
||||
cur_quasi = next_quasi;
|
||||
}
|
||||
}
|
||||
|
||||
literal.quasis = collapsed_quasis;
|
||||
literal.expressions = collapsed_expressions;
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,6 @@
|
||||
export default {
|
||||
options: {
|
||||
generate: 'ssr',
|
||||
dev: true
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,25 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import { add_attribute, create_ssr_component, escape } from "svelte/internal";
|
||||
|
||||
const const1 = 1;
|
||||
const const2 = 'const2';
|
||||
|
||||
function foo() {
|
||||
return '';
|
||||
}
|
||||
|
||||
const Component = create_ssr_component(($$result, $$props, $$bindings, slots) => {
|
||||
return `
|
||||
<div class="class1 class2" style="color:red;">-</div>
|
||||
|
||||
|
||||
<div${add_attribute("class", const1, 0)}>-</div>
|
||||
<div${add_attribute("class", const1, 0)}>-</div>
|
||||
|
||||
|
||||
<div class="${"class1 " + escape('class2', true)}">-</div>
|
||||
<div class="${"class1 " + escape(const2, true)}">-</div>
|
||||
<div class="${"class1 " + escape(const2, true)}"${add_attribute("style", foo(), 0)}>-</div>`;
|
||||
});
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,20 @@
|
||||
<script>
|
||||
const const1 = 1;
|
||||
const const2 = 'const2';
|
||||
|
||||
function foo() {
|
||||
return '';
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- canonical case - only markup -->
|
||||
<div class="class1 class2" style="color:red;">-</div>
|
||||
|
||||
<!-- various forms of variable syntax -->
|
||||
<div class="{const1}">-</div>
|
||||
<div class={const1}>-</div>
|
||||
|
||||
<!-- mixed static string + expressions -->
|
||||
<div class="class1 {'class2'}">-</div>
|
||||
<div class="class1 {const2}">-</div>
|
||||
<div class="class1 {const2}" style={foo()}>-</div>
|
||||
@ -0,0 +1,244 @@
|
||||
/* generated by Svelte vX.Y.Z */
|
||||
import {
|
||||
SvelteComponent,
|
||||
assign,
|
||||
detach,
|
||||
element,
|
||||
empty,
|
||||
get_spread_update,
|
||||
init,
|
||||
insert,
|
||||
noop,
|
||||
safe_not_equal,
|
||||
set_dynamic_element_data,
|
||||
space,
|
||||
toggle_class
|
||||
} from "svelte/internal";
|
||||
|
||||
function create_dynamic_element_3(ctx) {
|
||||
let svelte_element;
|
||||
|
||||
return {
|
||||
c() {
|
||||
svelte_element = element(static_value);
|
||||
set_dynamic_element_data(static_value)(svelte_element, { static_value, ...static_obj });
|
||||
toggle_class(svelte_element, "foo", static_value);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, svelte_element, anchor);
|
||||
},
|
||||
p: noop,
|
||||
d(detaching) {
|
||||
if (detaching) detach(svelte_element);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// (10:0) <svelte:element this={dynamic_value} {static_value} {...static_obj} class:foo={static_value} />
|
||||
function create_dynamic_element_2(ctx) {
|
||||
let svelte_element;
|
||||
|
||||
return {
|
||||
c() {
|
||||
svelte_element = element(/*dynamic_value*/ ctx[0]);
|
||||
set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, { static_value, ...static_obj });
|
||||
toggle_class(svelte_element, "foo", static_value);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, svelte_element, anchor);
|
||||
},
|
||||
p: noop,
|
||||
d(detaching) {
|
||||
if (detaching) detach(svelte_element);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// (12:0) <svelte:element this={static_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
|
||||
function create_dynamic_element_1(ctx) {
|
||||
let svelte_element;
|
||||
let svelte_element_levels = [{ dynamic_value: /*dynamic_value*/ ctx[0] }, /*dynamic_obj*/ ctx[1]];
|
||||
let svelte_element_data = {};
|
||||
|
||||
for (let i = 0; i < svelte_element_levels.length; i += 1) {
|
||||
svelte_element_data = assign(svelte_element_data, svelte_element_levels[i]);
|
||||
}
|
||||
|
||||
return {
|
||||
c() {
|
||||
svelte_element = element(static_value);
|
||||
set_dynamic_element_data(static_value)(svelte_element, svelte_element_data);
|
||||
toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, svelte_element, anchor);
|
||||
},
|
||||
p(ctx, dirty) {
|
||||
set_dynamic_element_data(static_value)(svelte_element, svelte_element_data = get_spread_update(svelte_element_levels, [
|
||||
dirty & /*dynamic_value*/ 1 && { dynamic_value: /*dynamic_value*/ ctx[0] },
|
||||
dirty & /*dynamic_obj*/ 2 && /*dynamic_obj*/ ctx[1]
|
||||
]));
|
||||
|
||||
toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]);
|
||||
},
|
||||
d(detaching) {
|
||||
if (detaching) detach(svelte_element);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
// (14:0) <svelte:element this={dynamic_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
|
||||
function create_dynamic_element(ctx) {
|
||||
let svelte_element;
|
||||
let svelte_element_levels = [{ dynamic_value: /*dynamic_value*/ ctx[0] }, /*dynamic_obj*/ ctx[1]];
|
||||
let svelte_element_data = {};
|
||||
|
||||
for (let i = 0; i < svelte_element_levels.length; i += 1) {
|
||||
svelte_element_data = assign(svelte_element_data, svelte_element_levels[i]);
|
||||
}
|
||||
|
||||
return {
|
||||
c() {
|
||||
svelte_element = element(/*dynamic_value*/ ctx[0]);
|
||||
set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, svelte_element_data);
|
||||
toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]);
|
||||
},
|
||||
m(target, anchor) {
|
||||
insert(target, svelte_element, anchor);
|
||||
},
|
||||
p(ctx, dirty) {
|
||||
set_dynamic_element_data(/*dynamic_value*/ ctx[0])(svelte_element, svelte_element_data = get_spread_update(svelte_element_levels, [
|
||||
dirty & /*dynamic_value*/ 1 && { dynamic_value: /*dynamic_value*/ ctx[0] },
|
||||
dirty & /*dynamic_obj*/ 2 && /*dynamic_obj*/ ctx[1]
|
||||
]));
|
||||
|
||||
toggle_class(svelte_element, "foo", /*dynamic_value*/ ctx[0]);
|
||||
},
|
||||
d(detaching) {
|
||||
if (detaching) detach(svelte_element);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function create_fragment(ctx) {
|
||||
let t0;
|
||||
let previous_tag = /*dynamic_value*/ ctx[0];
|
||||
let t1;
|
||||
let t2;
|
||||
let previous_tag_1 = /*dynamic_value*/ ctx[0];
|
||||
let svelte_element3_anchor;
|
||||
let svelte_element0 = static_value && create_dynamic_element_3(ctx);
|
||||
let svelte_element1 = /*dynamic_value*/ ctx[0] && create_dynamic_element_2(ctx);
|
||||
let svelte_element2 = static_value && create_dynamic_element_1(ctx);
|
||||
let svelte_element3 = /*dynamic_value*/ ctx[0] && create_dynamic_element(ctx);
|
||||
|
||||
return {
|
||||
c() {
|
||||
if (svelte_element0) svelte_element0.c();
|
||||
t0 = space();
|
||||
if (svelte_element1) svelte_element1.c();
|
||||
t1 = space();
|
||||
if (svelte_element2) svelte_element2.c();
|
||||
t2 = space();
|
||||
if (svelte_element3) svelte_element3.c();
|
||||
svelte_element3_anchor = empty();
|
||||
},
|
||||
m(target, anchor) {
|
||||
if (svelte_element0) svelte_element0.m(target, anchor);
|
||||
insert(target, t0, anchor);
|
||||
if (svelte_element1) svelte_element1.m(target, anchor);
|
||||
insert(target, t1, anchor);
|
||||
if (svelte_element2) svelte_element2.m(target, anchor);
|
||||
insert(target, t2, anchor);
|
||||
if (svelte_element3) svelte_element3.m(target, anchor);
|
||||
insert(target, svelte_element3_anchor, anchor);
|
||||
},
|
||||
p(ctx, [dirty]) {
|
||||
if (static_value) {
|
||||
svelte_element0.p(ctx, dirty);
|
||||
}
|
||||
|
||||
if (/*dynamic_value*/ ctx[0]) {
|
||||
if (!previous_tag) {
|
||||
svelte_element1 = create_dynamic_element_2(ctx);
|
||||
previous_tag = /*dynamic_value*/ ctx[0];
|
||||
svelte_element1.c();
|
||||
svelte_element1.m(t1.parentNode, t1);
|
||||
} else if (safe_not_equal(previous_tag, /*dynamic_value*/ ctx[0])) {
|
||||
svelte_element1.d(1);
|
||||
svelte_element1 = create_dynamic_element_2(ctx);
|
||||
previous_tag = /*dynamic_value*/ ctx[0];
|
||||
svelte_element1.c();
|
||||
svelte_element1.m(t1.parentNode, t1);
|
||||
} else {
|
||||
svelte_element1.p(ctx, dirty);
|
||||
}
|
||||
} else if (previous_tag) {
|
||||
svelte_element1.d(1);
|
||||
svelte_element1 = null;
|
||||
previous_tag = /*dynamic_value*/ ctx[0];
|
||||
}
|
||||
|
||||
if (static_value) {
|
||||
svelte_element2.p(ctx, dirty);
|
||||
}
|
||||
|
||||
if (/*dynamic_value*/ ctx[0]) {
|
||||
if (!previous_tag_1) {
|
||||
svelte_element3 = create_dynamic_element(ctx);
|
||||
previous_tag_1 = /*dynamic_value*/ ctx[0];
|
||||
svelte_element3.c();
|
||||
svelte_element3.m(svelte_element3_anchor.parentNode, svelte_element3_anchor);
|
||||
} else if (safe_not_equal(previous_tag_1, /*dynamic_value*/ ctx[0])) {
|
||||
svelte_element3.d(1);
|
||||
svelte_element3 = create_dynamic_element(ctx);
|
||||
previous_tag_1 = /*dynamic_value*/ ctx[0];
|
||||
svelte_element3.c();
|
||||
svelte_element3.m(svelte_element3_anchor.parentNode, svelte_element3_anchor);
|
||||
} else {
|
||||
svelte_element3.p(ctx, dirty);
|
||||
}
|
||||
} else if (previous_tag_1) {
|
||||
svelte_element3.d(1);
|
||||
svelte_element3 = null;
|
||||
previous_tag_1 = /*dynamic_value*/ ctx[0];
|
||||
}
|
||||
},
|
||||
i: noop,
|
||||
o: noop,
|
||||
d(detaching) {
|
||||
if (svelte_element0) svelte_element0.d(detaching);
|
||||
if (detaching) detach(t0);
|
||||
if (svelte_element1) svelte_element1.d(detaching);
|
||||
if (detaching) detach(t1);
|
||||
if (svelte_element2) svelte_element2.d(detaching);
|
||||
if (detaching) detach(t2);
|
||||
if (detaching) detach(svelte_element3_anchor);
|
||||
if (svelte_element3) svelte_element3.d(detaching);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
let static_value = 'a';
|
||||
|
||||
function instance($$self, $$props, $$invalidate) {
|
||||
let { dynamic_value } = $$props;
|
||||
let { dynamic_obj } = $$props;
|
||||
let static_obj = {};
|
||||
|
||||
$$self.$$set = $$props => {
|
||||
if ('dynamic_value' in $$props) $$invalidate(0, dynamic_value = $$props.dynamic_value);
|
||||
if ('dynamic_obj' in $$props) $$invalidate(1, dynamic_obj = $$props.dynamic_obj);
|
||||
};
|
||||
|
||||
return [dynamic_value, dynamic_obj, static_obj];
|
||||
}
|
||||
|
||||
class Component extends SvelteComponent {
|
||||
constructor(options) {
|
||||
super();
|
||||
init(this, options, instance, create_fragment, safe_not_equal, { dynamic_value: 0, dynamic_obj: 1 });
|
||||
}
|
||||
}
|
||||
|
||||
export default Component;
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
export let dynamic_value;
|
||||
export let dynamic_obj;
|
||||
let static_value = 'a';
|
||||
let static_obj = {};
|
||||
</script>
|
||||
|
||||
<svelte:element this={static_value} {static_value} {...static_obj} class:foo={static_value} />
|
||||
|
||||
<svelte:element this={dynamic_value} {static_value} {...static_obj} class:foo={static_value} />
|
||||
|
||||
<svelte:element this={static_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
|
||||
|
||||
<svelte:element this={dynamic_value} {dynamic_value} {...dynamic_obj} class:foo={dynamic_value} />
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
html: '<p>2, 1</p>'
|
||||
};
|
||||
@ -0,0 +1,6 @@
|
||||
<script>
|
||||
const arr = [1, 2];
|
||||
[arr[0], arr[1]] = [arr[1], arr[0]];
|
||||
</script>
|
||||
|
||||
<p>{arr[0]}, {arr[1]}</p>
|
||||
@ -0,0 +1,3 @@
|
||||
export default {
|
||||
html: '<p>[{"a":2},100]</p>'
|
||||
};
|
||||
@ -0,0 +1,7 @@
|
||||
<script>
|
||||
const a = 100;
|
||||
const arr = [{ a: 1 }, 2];
|
||||
[arr[0].a, arr[1] = a] = [arr[1]];
|
||||
</script>
|
||||
|
||||
<p>{JSON.stringify(arr)}</p>
|
||||
@ -0,0 +1,11 @@
|
||||
export default {
|
||||
props: {
|
||||
inert: true
|
||||
},
|
||||
test({ assert, target, component }) {
|
||||
const div = target.querySelector('div');
|
||||
assert.ok(div.inert);
|
||||
component.inert = false;
|
||||
assert.ok(!div.inert);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export let inert;
|
||||
</script>
|
||||
|
||||
<div {inert}>some div <button>click</button></div>
|
||||
@ -0,0 +1,11 @@
|
||||
export default {
|
||||
props: {
|
||||
itemscope: true
|
||||
},
|
||||
test({ assert, target, component }) {
|
||||
const div = target.querySelector('div');
|
||||
assert.ok(div.itemscope);
|
||||
component.itemscope = false;
|
||||
assert.ok(!div.itemscope);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,5 @@
|
||||
<script>
|
||||
export let itemscope;
|
||||
</script>
|
||||
|
||||
<div {itemscope} />
|
||||
@ -0,0 +1,52 @@
|
||||
// https://github.com/sveltejs/svelte/issues/7633
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
let inputs = target.querySelectorAll('input');
|
||||
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
component.moveDown(0);
|
||||
component.moveDown(1);
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div class="item">
|
||||
b <label><input name="current" type="radio" value="b"> current</label>
|
||||
</div>
|
||||
<div class="item">
|
||||
c <label><input name="current" type="radio" value="c"> current</label>
|
||||
</div>
|
||||
<div class="item">
|
||||
a <label><input name="current" type="radio" value="a"> current</label>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
// after shifting order, should still keep the correct radio checked
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, false);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, true);
|
||||
|
||||
(component.current = 'b');
|
||||
await Promise.resolve();
|
||||
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
component.moveDown(1);
|
||||
await Promise.resolve();
|
||||
|
||||
// after shifting order, should still keep the correct radio checked
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
<script>
|
||||
export let list = [
|
||||
{ name: "a", text: "This is a test." },
|
||||
{ name: "b", text: "This is another test." },
|
||||
{ name: "c", text: "This is also a test." },
|
||||
];
|
||||
export let current = "a";
|
||||
export function moveUp(i) {
|
||||
list = [
|
||||
...list.slice(0, Math.max(i - 1, 0)),
|
||||
list[i],
|
||||
list[i - 1],
|
||||
...list.slice(i + 1),
|
||||
];
|
||||
}
|
||||
export function moveDown(i) {
|
||||
moveUp(i + 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each list as item (item.name)}
|
||||
<div class="item">
|
||||
{item.name}
|
||||
{#if true}
|
||||
<label
|
||||
><input
|
||||
type="radio"
|
||||
name="current"
|
||||
bind:group={current}
|
||||
value={item.name}
|
||||
/> current</label
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@ -0,0 +1,88 @@
|
||||
// https://github.com/sveltejs/svelte/issues/6112
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
let inputs = target.querySelectorAll('input');
|
||||
|
||||
const check = (set) => {
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
assert.equal(inputs[i].checked, set.has(i));
|
||||
}
|
||||
};
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div>1</div>
|
||||
<div>2
|
||||
<div class="arg">
|
||||
<input type="radio" value="a">
|
||||
<input type="radio" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="radio" value="c">
|
||||
<input type="radio" value="d">
|
||||
</div>
|
||||
</div>
|
||||
<div>3
|
||||
<div class="arg">
|
||||
<input type="radio" value="a">
|
||||
<input type="radio" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="radio" value="c">
|
||||
<input type="radio" value="d">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
check(new Set([0, 2, 5, 6]));
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
// dom to value
|
||||
inputs[3].checked = true;
|
||||
await inputs[3].dispatchEvent(event);
|
||||
|
||||
check(new Set([0, 3, 5, 6]));
|
||||
assert.equal(component.pipelineOperations[1].operation.args[1].value, 'd');
|
||||
|
||||
// remove item
|
||||
component.pipelineOperations = component.pipelineOperations.slice(1);
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div>2
|
||||
<div class="arg">
|
||||
<input type="radio" value="a">
|
||||
<input type="radio" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="radio" value="c">
|
||||
<input type="radio" value="d">
|
||||
</div>
|
||||
</div>
|
||||
<div>3
|
||||
<div class="arg">
|
||||
<input type="radio" value="a">
|
||||
<input type="radio" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="radio" value="c">
|
||||
<input type="radio" value="d">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
inputs = target.querySelectorAll('input');
|
||||
check(new Set([0, 3, 5, 6]));
|
||||
|
||||
inputs[2].checked = true;
|
||||
await inputs[2].dispatchEvent(event);
|
||||
|
||||
check(new Set([0, 2, 5, 6]));
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,60 @@
|
||||
<script>
|
||||
export let pipelineOperations = [
|
||||
{
|
||||
operation: {
|
||||
name: "foo",
|
||||
args: [],
|
||||
},
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
operation: {
|
||||
name: "bar",
|
||||
args: [
|
||||
{
|
||||
name: "bar_1",
|
||||
value: "a",
|
||||
options: [{ value: "a" }, { value: "b" }],
|
||||
},
|
||||
{
|
||||
name: "bar_2",
|
||||
value: "c",
|
||||
options: [{ value: "c" }, { value: "d" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
operation: {
|
||||
name: "baz",
|
||||
args: [
|
||||
{
|
||||
name: "baz_1",
|
||||
value: "b",
|
||||
options: [{ value: "a" }, { value: "b" }],
|
||||
},
|
||||
{
|
||||
name: "baz_2",
|
||||
value: "c",
|
||||
options: [{ value: "c" }, { value: "d" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
id: 3,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
{#each pipelineOperations as { operation, id } (id)}
|
||||
<div>
|
||||
{id}
|
||||
{#each operation.args as arg}
|
||||
<div class="arg">
|
||||
{#each arg.options as { value }}
|
||||
<input type="radio" bind:group={arg.value} {value} />
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -0,0 +1,89 @@
|
||||
// https://github.com/sveltejs/svelte/issues/6112
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
let inputs = target.querySelectorAll('input');
|
||||
|
||||
const check = (set) => {
|
||||
for (let i = 0; i < inputs.length; i++) {
|
||||
assert.equal(inputs[i].checked, set.has(i));
|
||||
}
|
||||
};
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div>1</div>
|
||||
<div>2
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="a">
|
||||
<input type="checkbox" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="c">
|
||||
<input type="checkbox" value="d">
|
||||
</div>
|
||||
</div>
|
||||
<div>3
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="a">
|
||||
<input type="checkbox" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="c">
|
||||
<input type="checkbox" value="d">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
check(new Set([0, 2]));
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
// dom to value
|
||||
inputs[3].checked = true;
|
||||
await inputs[3].dispatchEvent(event);
|
||||
|
||||
check(new Set([0, 2, 3]));
|
||||
assert.deepEqual(component.pipelineOperations[1].operation.args[1].value, ['c', 'd']);
|
||||
|
||||
// remove item
|
||||
component.pipelineOperations = component.pipelineOperations.slice(1);
|
||||
await Promise.resolve();
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div>2
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="a">
|
||||
<input type="checkbox" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="c">
|
||||
<input type="checkbox" value="d">
|
||||
</div>
|
||||
</div>
|
||||
<div>3
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="a">
|
||||
<input type="checkbox" value="b">
|
||||
</div>
|
||||
<div class="arg">
|
||||
<input type="checkbox" value="c">
|
||||
<input type="checkbox" value="d">
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
inputs = target.querySelectorAll('input');
|
||||
check(new Set([0, 2, 3]));
|
||||
|
||||
inputs[5].checked = true;
|
||||
await inputs[5].dispatchEvent(event);
|
||||
|
||||
check(new Set([0, 2, 3, 5]));
|
||||
assert.deepEqual(component.pipelineOperations[1].operation.args[0].value, ['b']);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,60 @@
|
||||
<script>
|
||||
export let pipelineOperations = [
|
||||
{
|
||||
operation: {
|
||||
name: "foo",
|
||||
args: [],
|
||||
},
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
operation: {
|
||||
name: "bar",
|
||||
args: [
|
||||
{
|
||||
name: "bar_1",
|
||||
value: ["a"],
|
||||
options: [{ value: "a" }, { value: "b" }],
|
||||
},
|
||||
{
|
||||
name: "bar_2",
|
||||
value: ["c"],
|
||||
options: [{ value: "c" }, { value: "d" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
id: 2,
|
||||
},
|
||||
{
|
||||
operation: {
|
||||
name: "baz",
|
||||
args: [
|
||||
{
|
||||
name: "baz_1",
|
||||
value: [],
|
||||
options: [{ value: "a" }, { value: "b" }],
|
||||
},
|
||||
{
|
||||
name: "baz_2",
|
||||
value: [],
|
||||
options: [{ value: "c" }, { value: "d" }],
|
||||
},
|
||||
],
|
||||
},
|
||||
id: 3,
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
{#each pipelineOperations as { operation, id } (id)}
|
||||
<div>
|
||||
{id}
|
||||
{#each operation.args as arg}
|
||||
<div class="arg">
|
||||
{#each arg.options as { value }}
|
||||
<input type="checkbox" bind:group={arg.value} {value} />
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/each}
|
||||
@ -0,0 +1,30 @@
|
||||
export default {
|
||||
async test({ assert, target, window }) {
|
||||
const [input1, input2] = target.querySelectorAll('input[type=text]');
|
||||
const radio = target.querySelector('input[type=radio]');
|
||||
|
||||
assert.equal(radio.checked, false);
|
||||
|
||||
const event = new window.Event('input');
|
||||
|
||||
input1.value = 'world';
|
||||
await input1.dispatchEvent(event);
|
||||
assert.equal(radio.checked, true);
|
||||
|
||||
input2.value = 'foo';
|
||||
await input2.dispatchEvent(event);
|
||||
assert.equal(radio.checked, false);
|
||||
|
||||
input1.value = 'foo';
|
||||
await input1.dispatchEvent(event);
|
||||
assert.equal(radio.checked, true);
|
||||
|
||||
input1.value = 'bar';
|
||||
await input1.dispatchEvent(event);
|
||||
assert.equal(radio.checked, false);
|
||||
|
||||
input2.value = 'bar';
|
||||
await input2.dispatchEvent(event);
|
||||
assert.equal(radio.checked, true);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,10 @@
|
||||
<script>
|
||||
let name = 'world';
|
||||
let current = '';
|
||||
</script>
|
||||
|
||||
<input type="radio" name="current" bind:group={current} value={name}>
|
||||
|
||||
<input type="text" bind:value={current} />
|
||||
|
||||
<input type="text" bind:value={name} />
|
||||
@ -0,0 +1,78 @@
|
||||
// https://github.com/sveltejs/svelte/issues/7884
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
let inputs = target.querySelectorAll('input');
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>{"foo":[],"bar":[]}</p>
|
||||
<h2>foo</h2>
|
||||
<ul>
|
||||
<li><label><input name="foo" type="checkbox" value="1"> 1</label></li>
|
||||
<li><label><input name="foo" type="checkbox" value="2"> 2</label></li>
|
||||
<li><label><input name="foo" type="checkbox" value="3"> 3</label></li>
|
||||
</ul>
|
||||
<h2>bar</h2>
|
||||
<ul>
|
||||
<li><label><input name="bar" type="checkbox" value="1"> 1</label></li>
|
||||
<li><label><input name="bar" type="checkbox" value="2"> 2</label></li>
|
||||
<li><label><input name="bar" type="checkbox" value="3"> 3</label></li>
|
||||
</ul>
|
||||
`);
|
||||
|
||||
const event = new window.Event('change');
|
||||
|
||||
inputs[0].checked = true;
|
||||
await inputs[0].dispatchEvent(event);
|
||||
inputs[2].checked = true;
|
||||
await inputs[2].dispatchEvent(event);
|
||||
inputs[3].checked = true;
|
||||
await inputs[3].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>{"foo":[1,3],"bar":[1]}</p>
|
||||
<h2>foo</h2>
|
||||
<ul>
|
||||
<li><label><input name="foo" type="checkbox" value="1"> 1</label></li>
|
||||
<li><label><input name="foo" type="checkbox" value="2"> 2</label></li>
|
||||
<li><label><input name="foo" type="checkbox" value="3"> 3</label></li>
|
||||
</ul>
|
||||
<h2>bar</h2>
|
||||
<ul>
|
||||
<li><label><input name="bar" type="checkbox" value="1"> 1</label></li>
|
||||
<li><label><input name="bar" type="checkbox" value="2"> 2</label></li>
|
||||
<li><label><input name="bar" type="checkbox" value="3"> 3</label></li>
|
||||
</ul>
|
||||
`);
|
||||
|
||||
await component.update();
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>{"foo":[1,3],"bar":[1],"qux":[]}</p>
|
||||
<h2>qux</h2>
|
||||
<ul>
|
||||
<li><label><input name="qux" type="checkbox" value="4"> 4</label></li>
|
||||
<li><label><input name="qux" type="checkbox" value="5"> 5</label></li>
|
||||
<li><label><input name="qux" type="checkbox" value="6"> 6</label></li>
|
||||
</ul>
|
||||
`);
|
||||
|
||||
inputs = target.querySelectorAll('input');
|
||||
inputs[0].checked = true;
|
||||
await inputs[0].dispatchEvent(event);
|
||||
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<p>{"foo":[1,3],"bar":[1],"qux":[4]}</p>
|
||||
<h2>qux</h2>
|
||||
<ul>
|
||||
<li><label><input name="qux" type="checkbox" value="4"> 4</label></li>
|
||||
<li><label><input name="qux" type="checkbox" value="5"> 5</label></li>
|
||||
<li><label><input name="qux" type="checkbox" value="6"> 6</label></li>
|
||||
</ul>
|
||||
`);
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
@ -0,0 +1,36 @@
|
||||
<script>
|
||||
let keys = ["foo", "bar"];
|
||||
let values = [1, 2, 3];
|
||||
|
||||
const object = {};
|
||||
|
||||
$: keys.forEach((key) => {
|
||||
// Make sure Svelte has an array to bind to
|
||||
if (!object[key]) {
|
||||
object[key] = [];
|
||||
}
|
||||
});
|
||||
|
||||
export function update() {
|
||||
keys = ["qux"];
|
||||
values = [4, 5, 6];
|
||||
}
|
||||
</script>
|
||||
|
||||
<p>
|
||||
{JSON.stringify(object)}
|
||||
</p>
|
||||
|
||||
{#each keys as key (key)}
|
||||
<h2>{key}</h2>
|
||||
<ul>
|
||||
{#each values as value (value)}
|
||||
<li>
|
||||
<label>
|
||||
<input type="checkbox" name={key} {value} bind:group={object[key]} />
|
||||
{value}
|
||||
</label>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/each}
|
||||
@ -0,0 +1,49 @@
|
||||
// https://github.com/sveltejs/svelte/issues/7633
|
||||
export default {
|
||||
async test({ assert, target, component, window }) {
|
||||
let inputs = target.querySelectorAll('input');
|
||||
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
await component.moveDown(0);
|
||||
await component.moveDown(1);
|
||||
|
||||
assert.htmlEqual(
|
||||
target.innerHTML,
|
||||
`
|
||||
<div class="item">
|
||||
b <label><input name="current" type="radio" value="b"> current</label>
|
||||
</div>
|
||||
<div class="item">
|
||||
c <label><input name="current" type="radio" value="c"> current</label>
|
||||
</div>
|
||||
<div class="item">
|
||||
a <label><input name="current" type="radio" value="a"> current</label>
|
||||
</div>
|
||||
`
|
||||
);
|
||||
|
||||
// after shifting order, should still keep the correct radio checked
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, false);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, true);
|
||||
|
||||
await (component.current = 'b');
|
||||
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
|
||||
await component.moveDown(1);
|
||||
|
||||
// after shifting order, should still keep the correct radio checked
|
||||
inputs = target.querySelectorAll('input');
|
||||
assert.equal(inputs[0].checked, true);
|
||||
assert.equal(inputs[1].checked, false);
|
||||
assert.equal(inputs[2].checked, false);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,36 @@
|
||||
<script>
|
||||
export let list = [
|
||||
{ name: "a", text: "This is a test." },
|
||||
{ name: "b", text: "This is another test." },
|
||||
{ name: "c", text: "This is also a test." },
|
||||
];
|
||||
export let current = "a";
|
||||
export function moveUp(i) {
|
||||
list = [
|
||||
...list.slice(0, Math.max(i - 1, 0)),
|
||||
list[i],
|
||||
list[i - 1],
|
||||
...list.slice(i + 1),
|
||||
];
|
||||
}
|
||||
export function moveDown(i) {
|
||||
moveUp(i + 1);
|
||||
}
|
||||
</script>
|
||||
|
||||
{#each list as item}
|
||||
<div class="item">
|
||||
{item.name}
|
||||
{#if true}
|
||||
<label
|
||||
><input
|
||||
type="radio"
|
||||
name="current"
|
||||
bind:group={current}
|
||||
value={item.name}
|
||||
/> current</label
|
||||
>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
|
||||
@ -0,0 +1,25 @@
|
||||
export default {
|
||||
|
||||
async test({ assert, target, component, window }) {
|
||||
const [input1, input2, input3] = target.querySelectorAll('input');
|
||||
const event = new window.Event('change');
|
||||
|
||||
function validate_inputs(v1, v2, v3) {
|
||||
assert.equal(input1.checked, v1);
|
||||
assert.equal(input2.checked, v2);
|
||||
assert.equal(input3.checked, v3);
|
||||
}
|
||||
|
||||
assert.deepEqual(component.values.inner, []);
|
||||
validate_inputs(false, false, false);
|
||||
|
||||
component.values = { inner: undefined };
|
||||
assert.deepEqual(component.values.inner, undefined);
|
||||
validate_inputs(false, false, false);
|
||||
|
||||
input1.checked = true;
|
||||
await input1.dispatchEvent(event);
|
||||
assert.deepEqual(component.values.inner, ['first']);
|
||||
validate_inputs(true, false, false);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,15 @@
|
||||
<script>
|
||||
export let values = {
|
||||
inner: []
|
||||
};
|
||||
</script>
|
||||
|
||||
<input type='checkbox' value='first' bind:group={values.inner} />
|
||||
<input type='checkbox' value='second' bind:group={values.inner} />
|
||||
<input type='checkbox' value='third' bind:group={values.inner} />
|
||||
|
||||
<div>
|
||||
{#each ['first', 'second', 'third'] as k}
|
||||
<span>{k}</span>
|
||||
{/each}
|
||||
</div>
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import InnerChild from './InnerChild.svelte';
|
||||
|
||||
export let id = 1;
|
||||
export let count;
|
||||
export let increment;
|
||||
|
||||
let list;
|
||||
$: {
|
||||
list = [];
|
||||
for (let i = 0; i < count; ++i) {
|
||||
list.push(i);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div data-id={id}>
|
||||
{#each list as item (item)}
|
||||
<InnerChild val={item} {increment} />
|
||||
{/each}
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
import { afterUpdate } from 'svelte';
|
||||
|
||||
export let val = 1;
|
||||
export let increment;
|
||||
|
||||
afterUpdate(() => {
|
||||
increment();
|
||||
});
|
||||
</script>
|
||||
|
||||
<inner>
|
||||
{val}
|
||||
</inner>
|
||||
@ -0,0 +1,53 @@
|
||||
export default {
|
||||
html: `
|
||||
<div data-id="1">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
<div data-id="2">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
<div data-id="3">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
`,
|
||||
|
||||
ssrHtml: `
|
||||
<div data-id="1">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
<inner>2</inner>
|
||||
</div>
|
||||
<div data-id="2">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
<inner>2</inner>
|
||||
</div>
|
||||
<div data-id="3">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
<inner>2</inner>
|
||||
</div>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
await component.done;
|
||||
assert.equal(component.getCounter(), 13);
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div data-id="3">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
<div data-id="2">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
<div data-id="1">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,35 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let updateCounter = 0;
|
||||
let promiseResolve;
|
||||
export const done = new Promise(resolve => {
|
||||
promiseResolve = resolve;
|
||||
});
|
||||
export const getCounter = () => {
|
||||
return updateCounter;
|
||||
};
|
||||
|
||||
let vals = [1, 2, 3];
|
||||
const instances = [];
|
||||
let count = 3;
|
||||
|
||||
const increment = () => {
|
||||
++updateCounter;
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
count = 2;
|
||||
|
||||
setTimeout(() => {
|
||||
vals = vals.reverse();
|
||||
|
||||
setTimeout(promiseResolve);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{#each vals as val, index (val)}
|
||||
<Child bind:this={instances[index]} id={val} {count} {increment} />
|
||||
{/each}
|
||||
@ -0,0 +1,21 @@
|
||||
<script>
|
||||
import InnerChild from './InnerChild.svelte';
|
||||
|
||||
export let id = 1;
|
||||
export let count;
|
||||
export let increment;
|
||||
|
||||
let list;
|
||||
$: {
|
||||
list = [];
|
||||
for (let i = 0; i < count; ++i) {
|
||||
list.push(i);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div data-id={id}>
|
||||
{#each list as item}
|
||||
<InnerChild val={item} {increment} />
|
||||
{/each}
|
||||
</div>
|
||||
@ -0,0 +1,14 @@
|
||||
<script>
|
||||
import { afterUpdate } from 'svelte';
|
||||
|
||||
export let val = 1;
|
||||
export let increment;
|
||||
|
||||
afterUpdate(() => {
|
||||
increment();
|
||||
});
|
||||
</script>
|
||||
|
||||
<inner>
|
||||
{val}
|
||||
</inner>
|
||||
@ -0,0 +1,53 @@
|
||||
export default {
|
||||
html: `
|
||||
<div data-id="1">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
<div data-id="2">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
<div data-id="3">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
`,
|
||||
|
||||
ssrHtml: `
|
||||
<div data-id="1">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
<inner>2</inner>
|
||||
</div>
|
||||
<div data-id="2">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
<inner>2</inner>
|
||||
</div>
|
||||
<div data-id="3">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
<inner>2</inner>
|
||||
</div>
|
||||
`,
|
||||
|
||||
async test({ assert, component, target }) {
|
||||
await component.done;
|
||||
assert.equal(component.getCounter(), 13);
|
||||
assert.htmlEqual(target.innerHTML, `
|
||||
<div data-id="3">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
<div data-id="2">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
<div data-id="1">
|
||||
<inner>0</inner>
|
||||
<inner>1</inner>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,35 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
import Child from './Child.svelte';
|
||||
|
||||
let updateCounter = 0;
|
||||
let promiseResolve;
|
||||
export const done = new Promise(resolve => {
|
||||
promiseResolve = resolve;
|
||||
});
|
||||
export const getCounter = () => {
|
||||
return updateCounter;
|
||||
};
|
||||
|
||||
let vals = [1, 2, 3];
|
||||
const instances = [];
|
||||
let count = 3;
|
||||
|
||||
const increment = () => {
|
||||
++updateCounter;
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
count = 2;
|
||||
|
||||
setTimeout(() => {
|
||||
vals = vals.reverse();
|
||||
|
||||
setTimeout(promiseResolve);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
{#each vals as val, index (val)}
|
||||
<Child bind:this={instances[index]} id={val} {count} {increment} />
|
||||
{/each}
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
async test({ assert, target, raf }) {
|
||||
const button = target.querySelector('#button');
|
||||
const container = target.querySelector('#container');
|
||||
|
||||
// Multiple click on button
|
||||
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||
await button.dispatchEvent(new window.MouseEvent('click'));
|
||||
|
||||
assert.equal(container.children.length, 1);
|
||||
raf.tick(501);
|
||||
assert.equal(container.children.length, 0);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
<script>
|
||||
import { slide } from 'svelte/transition';
|
||||
let tag = 'div';
|
||||
function toggle() {
|
||||
tag = (tag) ? null : 'div';
|
||||
}
|
||||
</script>
|
||||
|
||||
<button id="button" on:click={toggle}>toggle</button> TAG={tag}
|
||||
|
||||
<div id="container">
|
||||
<svelte:element this={tag} transition:slide={{duration:500}}>CONTENT</svelte:element>
|
||||
</div>
|
||||
@ -0,0 +1,24 @@
|
||||
const calls = [];
|
||||
export default {
|
||||
props: {
|
||||
calls
|
||||
},
|
||||
|
||||
before_test() {
|
||||
calls.length = 0;
|
||||
},
|
||||
|
||||
async test({ assert, component, target, window }) {
|
||||
const buttons = target.querySelector('button');
|
||||
|
||||
assert.deepEqual(calls.length, 1);
|
||||
|
||||
const event = new window.MouseEvent('click');
|
||||
await buttons.dispatchEvent(event);
|
||||
|
||||
assert.deepEqual(calls.length, 1);
|
||||
|
||||
component.current_path = 'bar';
|
||||
assert.deepEqual(calls.length, 2);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,16 @@
|
||||
<script>
|
||||
export let current_path = 'foo';
|
||||
export let calls;
|
||||
let i = 0;
|
||||
function getComponent(path) {
|
||||
calls.push(path);
|
||||
return null;
|
||||
}
|
||||
function onClick() {
|
||||
i = i + 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:component this={getComponent(current_path)} />
|
||||
<button on:click={onClick}>click me</button>
|
||||
{i}
|
||||
@ -0,0 +1,17 @@
|
||||
export default {
|
||||
async test({ assert, component, target, window }) {
|
||||
const button = target.querySelector('button');
|
||||
const event = new window.MouseEvent('click');
|
||||
|
||||
await button.dispatchEvent(event);
|
||||
assert.deepEqual(component.logs, ['click_1', 'click_2']);
|
||||
|
||||
component.click_2 = () => component.logs.push('22');
|
||||
await button.dispatchEvent(event);
|
||||
assert.deepEqual(component.logs, ['click_1', 'click_2', 'click_1', '22']);
|
||||
|
||||
component.click_1 = () => component.logs.push('11');
|
||||
await button.dispatchEvent(event);
|
||||
assert.deepEqual(component.logs, ['click_1', 'click_2', 'click_1', '22', '11', '22']);
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,22 @@
|
||||
<script>
|
||||
export let logs = [];
|
||||
|
||||
export let click_1 = () => {
|
||||
logs.push('click_1');
|
||||
}
|
||||
|
||||
export let click_2 = () => {
|
||||
logs.push('click_2');
|
||||
}
|
||||
|
||||
export let click_3 = () => {
|
||||
logs.push('click_3');
|
||||
}
|
||||
</script>
|
||||
|
||||
<button
|
||||
on:click={click_1}
|
||||
on:click|stopImmediatePropagation={click_2}
|
||||
on:click={click_3}>
|
||||
click me
|
||||
</button>
|
||||
@ -0,0 +1,19 @@
|
||||
export default {
|
||||
html: `
|
||||
<span data-xxx="&copy=value" style="&copy=value"></span>
|
||||
|
||||
<span data-xxx="&copy=value" style="&copy=value"></span>
|
||||
|
||||
<span data-xxx="©" style="©"></span>
|
||||
|
||||
<span data-xxx="©=value" style="©=value"></span>
|
||||
|
||||
<span data-xxx="&copyotherstring=value" style="&copyotherstring=value"></span>
|
||||
|
||||
<span data-xxx="&copy123=value" style="&copy123=value"></span>
|
||||
|
||||
<span data-xxx="&rect=value" style="&rect=value"></span>
|
||||
|
||||
<span data-xxx="▭=value" style="▭=value"></span>
|
||||
`
|
||||
};
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue