-
-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add test * support --style-props for <svelte:component> * refactor * add more test * support switching instance * add test with svelte:self * merge duplicated if statement * slight refactor * remove unnecessary anchor * reorder insertion Co-authored-by: tanhauhau <lhtan93@gmail.com>
- Loading branch information
1 parent
75a7c3e
commit e2538c5
Showing
23 changed files
with
808 additions
and
65 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/Slider.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <script> | ||
| export let id; | ||
| </script> | ||
|
|
||
| <div {id}> | ||
| <p>Slider</p> | ||
| <span>Track</span> | ||
| </div> | ||
|
|
||
| <style> | ||
| p { | ||
| color: var(--rail-color); | ||
| } | ||
| span { | ||
| color: var(--track-color); | ||
| } | ||
| </style> |
41 changes: 41 additions & 0 deletions
41
test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/_config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| export default { | ||
| props: { | ||
| railColor1: 'black', | ||
| trackColor1: 'red', | ||
| railColor2: 'green', | ||
| trackColor2: 'blue' | ||
| }, | ||
| 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> | ||
| <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> | ||
| `, | ||
| test({ component, assert, target }) { | ||
| component.railColor1 = 'yellow'; | ||
| component.trackColor2 = 'orange'; | ||
|
|
||
| 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> | ||
| <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> | ||
| `); | ||
| } | ||
| }; |
25 changes: 25 additions & 0 deletions
25
test/runtime-puppeteer/samples/svelte-component-css-custom-properties-dynamic/main.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| <script> | ||
| import Slider from './Slider.svelte'; | ||
| export let railColor1; | ||
| export let railColor2; | ||
| export let trackColor1; | ||
| export let trackColor2; | ||
| function identity(color) { | ||
| return color; | ||
| } | ||
| </script> | ||
|
|
||
| <svelte:component | ||
| this={Slider} | ||
| id="slider-1" | ||
| --rail-color={railColor1} | ||
| --track-color={trackColor1} | ||
| /> | ||
|
|
||
| <svelte:component | ||
| this={Slider} | ||
| id="slider-2" | ||
| --rail-color={railColor2} | ||
| --track-color={identity(trackColor2)} | ||
| /> |
17 changes: 17 additions & 0 deletions
17
test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider1.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <script> | ||
| export let id; | ||
| </script> | ||
|
|
||
| <div {id}> | ||
| <p>Slider1</p> | ||
| <span>Track</span> | ||
| </div> | ||
|
|
||
| <style> | ||
| p { | ||
| color: var(--rail-color); | ||
| } | ||
| span { | ||
| color: var(--track-color); | ||
| } | ||
| </style> |
17 changes: 17 additions & 0 deletions
17
test/runtime-puppeteer/samples/svelte-component-css-custom-properties/Slider2.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <script> | ||
| export let id; | ||
| </script> | ||
|
|
||
| <div {id}> | ||
| <p>Slider2</p> | ||
| <span>Track</span> | ||
| </div> | ||
|
|
||
| <style> | ||
| p { | ||
| color: var(--rail-color); | ||
| } | ||
| span { | ||
| color: var(--track-color); | ||
| } | ||
| </style> |
57 changes: 57 additions & 0 deletions
57
test/runtime-puppeteer/samples/svelte-component-css-custom-properties/_config.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| 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-17ay6rc">Slider1</p> | ||
| <span class="svelte-17ay6rc">Track</span> | ||
| </div> | ||
| </div> | ||
| <div style="display: contents; --rail-color:rgb(0, 255, 0); --track-color:rgb(0, 0, 255);"> | ||
| <div id="component2"> | ||
| <p class="svelte-17ay6rc">Slider1</p> | ||
| <span class="svelte-17ay6rc">Track</span> | ||
| </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'); | ||
|
|
||
| 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(railColor1.textContent, 'Slider1'); | ||
| assert.equal(railColor2.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'); | ||
|
|
||
| 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(railColor1.textContent, 'Slider2'); | ||
| assert.equal(railColor2.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(); | ||
| } | ||
| }; |
Oops, something went wrong.