msb-public
/
svelte
mirror of https://github.com/sveltejs/svelte
1
0
Code Issues Projects Releases Wiki Activity

add test with svelte:self

Browse Source
pull/7468/head
baseballyama 4 years ago committed by Yuichiro Yamashita
parent 4975d6d7a3
commit 6b229da58b
11 changed files with 407 additions and 0 deletions
Show Stats Download Patch File Download Diff File

29
test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/Slider.svelte
Unescape View File

@ -0,0 +1,29 @@
<script>
export let id;
export let count = 0;
export let railColor1;
export let trackColor1;
</script>
<div {id}>
<p>Slider</p>
<span>Track</span>
</div>
{#if count === 0}
<svelte:self
id="nest-{id}"
count="{count + 1}"
--rail-color={railColor1}
--track-color={trackColor1}
/>
{/if}
<style>
p {
color: var(--rail-color);
}
span {
color: var(--track-color);
}
</style>

71
test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/_config.js
Unescape View File

@ -0,0 +1,71 @@
export default {
props: {
railColor1: 'black',
trackColor1: 'red',
railColor2: 'green',
trackColor2: 'blue',
nestRailColor1: 'white',
nestTrackColor1: 'gray',
nestRailColor2: 'aqua',
nestTrackColor2: 'pink'
},
html: `
<div style="display: contents; --rail-color:black; --track-color:red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color:white; --track-color:gray;">
<div id="nest-slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
<div style="display: contents; --rail-color:green; --track-color:blue;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color:aqua; --track-color:pink;">
<div id="nest-slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
`,
test({ component, assert, target }) {
component.railColor1 = 'yellow';
component.trackColor2 = 'orange';
component.nestRailColor1 = 'lime';
component.nestTrackColor2 = 'gold';
assert.htmlEqual(target.innerHTML, `
<div style="display: contents; --rail-color:yellow; --track-color:red;">
<div id="slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color:lime; --track-color:gray;">
<div id="nest-slider-1">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
<div style="display: contents; --rail-color:green; --track-color:orange;">
<div id="slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
<div style="display: contents; --rail-color:aqua; --track-color:gold;">
<div id="nest-slider-2">
<p class="svelte-17ay6rc">Slider</p>
<span class="svelte-17ay6rc">Track</span>
</div>
</div>
</div>
`);
}
};

32
test/runtime-puppeteer/samples/svelte-self-css-custom-properties-dynamic/main.svelte
Unescape View File

@ -0,0 +1,32 @@
<script>
import Slider from './Slider.svelte';
export let railColor1;
export let railColor2;
export let trackColor1;
export let trackColor2;
export let nestRailColor1;
export let nestRailColor2;
export let nestTrackColor1;
export let nestTrackColor2;
function identity(color) {
return color;
}
</script>
<Slider
id="slider-1"
--rail-color={railColor1}
--track-color={trackColor1}
railColor1={nestRailColor1}
trackColor1={nestTrackColor1}
/>
<svelte:component
this={Slider}
id="slider-2"
--rail-color={railColor2}
--track-color={identity(trackColor2)}
railColor1={nestRailColor2}
trackColor1={nestTrackColor2}
/>

27
test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider1.svelte
Unescape View File

@ -0,0 +1,27 @@
<script>
export let id;
export let count = 0;
</script>
<div {id}>
<p>Slider1</p>
<span>Track</span>
</div>
{#if count === 0}
<svelte:self
id="nest-{id}"
count={1}
--rail-color="rgb(255, 255, 0)"
--track-color="rgb(255, 0, 255)"
/>
{/if}
<style>
p {
color: var(--rail-color);
}
span {
color: var(--track-color);
}
</style>

27
test/runtime-puppeteer/samples/svelte-self-css-custom-properties/Slider2.svelte
Unescape View File

@ -0,0 +1,27 @@
<script>
export let id;
export let count = 0;
</script>
<div {id}>
<p>Slider2</p>
<span>Track</span>
</div>
{#if count === 0}
<svelte:self
id="nest-{id}"
count={1}
--rail-color="rgb(0, 255, 255)"
--track-color="rgb(255, 255, 255)"
/>
{/if}
<style>
p {
color: var(--rail-color);
}
span {
color: var(--track-color);
}
</style>

47
test/runtime-puppeteer/samples/svelte-self-css-custom-properties/_config.js
Unescape View File

@ -0,0 +1,47 @@
export default {
props: {},
html: `
<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
<div id="component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color:rgb(255, 255, 0); --track-color:rgb(255, 0, 255);">
<div id="nest-component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
</div>
</div>
<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
<div id="component2">
<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color:rgb(0, 255, 255); --track-color:rgb(255, 255, 255);">
<div id="nest-component2">
<p class="svelte-q538ga">Slider2</p><span class="svelte-q538ga">Track</span>
</div>
</div>
</div>
`,
test({ target, window, assert }) {
const railColor1 = target.querySelector('#component1 p');
const trackColor1 = target.querySelector('#component1 span');
const railColor2 = target.querySelector('#component2 p');
const trackColor2 = target.querySelector('#component2 span');
const nestRailColor1 = target.querySelector('#nest-component1 p');
const nestTrackColor1 = target.querySelector('#nest-component1 span');
const nestRailColor2 = target.querySelector('#nest-component2 p');
const nestTrackColor2 = target.querySelector('#nest-component2 span');
assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(255, 255, 0)');
assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 0, 255)');
assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(0, 255, 255)');
assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 255, 255)');
assert.equal(railColor1.textContent, 'Slider1');
assert.equal(railColor2.textContent, 'Slider2');
assert.equal(nestRailColor1.textContent, 'Slider1');
assert.equal(nestRailColor2.textContent, 'Slider2');
}
};

16
test/runtime-puppeteer/samples/svelte-self-css-custom-properties/main.svelte
Unescape View File

@ -0,0 +1,16 @@
<script>
import Slider1 from './Slider1.svelte';
import Slider2 from './Slider2.svelte';
</script>
<Slider1
id="component1"
--rail-color="rgb(0, 0, 0)"
--track-color="rgb(255, 0, 0)"
/>
<Slider2
id="component2"
--rail-color="rgb(0, 255, 0)"
--track-color="rgb(0, 0, 255)"
/>

27
test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider1.svelte
Unescape View File

@ -0,0 +1,27 @@
<script>
export let id;
export let count = 0;
</script>
<div {id}>
<p>Slider1</p>
<span>Track</span>
</div>
{#if count === 0}
<svelte:self
id="nest-{id}"
count={1}
--rail-color="rgb(255, 255, 0)"
--track-color="rgb(255, 0, 255)"
/>
{/if}
<style>
p {
color: var(--rail-color);
}
span {
color: var(--track-color);
}
</style>

27
test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/Slider2.svelte
Unescape View File

@ -0,0 +1,27 @@
<script>
export let id;
export let count = 0;
</script>
<div {id}>
<p>Slider2</p>
<span>Track</span>
</div>
{#if count === 0}
<svelte:self
id="nest-{id}"
count={1}
--rail-color="rgb(0, 255, 255)"
--track-color="rgb(255, 255, 255)"
/>
{/if}
<style>
p {
color: var(--rail-color);
}
span {
color: var(--track-color);
}
</style>

84
test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/_config.js
Unescape View File

@ -0,0 +1,84 @@
export default {
props: {
componentName: 'Slider1'
},
html: `
<div style="display: contents; --rail-color:rgb(0, 0, 0); --track-color:rgb(255, 0, 0);">
<div id="component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color:rgb(255, 255, 0); --track-color:rgb(255, 0, 255);">
<div id="nest-component1">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span></div>
</div>
</div>
<div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);">
<div id="component2">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
<div style="display: contents; --rail-color:rgb(255, 255, 0); --track-color:rgb(255, 0, 255);">
<div id="nest-component2">
<p class="svelte-q538ga">Slider1</p><span class="svelte-q538ga">Track</span>
</div>
</div>
</div>
`,
test({ target, window, assert, component }) {
function assert_slider_1() {
const railColor1 = target.querySelector('#component1 p');
const trackColor1 = target.querySelector('#component1 span');
const railColor2 = target.querySelector('#component2 p');
const trackColor2 = target.querySelector('#component2 span');
const nestRailColor1 = target.querySelector('#nest-component1 p');
const nestTrackColor1 = target.querySelector('#nest-component1 span');
const nestRailColor2 = target.querySelector('#nest-component2 p');
const nestTrackColor2 = target.querySelector('#nest-component2 span');
assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(255, 255, 0)');
assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 0, 255)');
assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(255, 255, 0)');
assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 0, 255)');
assert.equal(railColor1.textContent, 'Slider1');
assert.equal(railColor2.textContent, 'Slider1');
assert.equal(nestRailColor1.textContent, 'Slider1');
assert.equal(nestRailColor2.textContent, 'Slider1');
}
function assert_slider_2() {
const railColor1 = target.querySelector('#component1 p');
const trackColor1 = target.querySelector('#component1 span');
const railColor2 = target.querySelector('#component2 p');
const trackColor2 = target.querySelector('#component2 span');
const nestRailColor1 = target.querySelector('#nest-component1 p');
const nestTrackColor1 = target.querySelector('#nest-component1 span');
const nestRailColor2 = target.querySelector('#nest-component2 p');
const nestTrackColor2 = target.querySelector('#nest-component2 span');
assert.equal(window.getComputedStyle(railColor1).color, 'rgb(0, 0, 0)');
assert.equal(window.getComputedStyle(trackColor1).color, 'rgb(255, 0, 0)');
assert.equal(window.getComputedStyle(railColor2).color, 'rgb(0, 255, 0)');
assert.equal(window.getComputedStyle(trackColor2).color, 'rgb(0, 0, 255)');
assert.equal(window.getComputedStyle(nestRailColor1).color, 'rgb(0, 255, 255)');
assert.equal(window.getComputedStyle(nestTrackColor1).color, 'rgb(255, 255, 255)');
assert.equal(window.getComputedStyle(nestRailColor2).color, 'rgb(0, 255, 255)');
assert.equal(window.getComputedStyle(nestTrackColor2).color, 'rgb(255, 255, 255)');
assert.equal(railColor1.textContent, 'Slider2');
assert.equal(railColor2.textContent, 'Slider2');
assert.equal(nestRailColor1.textContent, 'Slider2');
assert.equal(nestRailColor2.textContent, 'Slider2');
}
assert_slider_1();
component.componentName = 'Slider2';
assert_slider_2();
component.componentName = undefined;
assert.equal(window.document.querySelector('div'), null);
component.componentName = 'Slider1';
assert_slider_1();
}
};

20
test/runtime-puppeteer/samples/svelte-self-css-custom-properties2/main.svelte
Unescape View File

@ -0,0 +1,20 @@
<script>
import Slider1 from './Slider1.svelte';
import Slider2 from './Slider2.svelte';
export let componentName = 'Slider1';
$: slider = componentName === 'Slider1' ? Slider1 : componentName === 'Slider2' ? Slider2 : undefined;
</script>
<svelte:component
this={slider}
id="component1"
--rail-color="rgb(0, 0, 0)"
--track-color="rgb(255, 0, 0)"
/>
<svelte:component
this={slider}
id="component2"
--rail-color="rgb(0, 255, 0)"
--track-color="rgb(0, 0, 255)"
/>
Write Preview
Loading…
Cancel
Save