simplify tests

pull/680/head
Rich Harris 8 years ago
parent 6f01d5f62f
commit 2c9fb31a9e

@ -47,7 +47,7 @@ describe("css", () => {
css: read(`test/css/samples/${dir}/expected.css`) css: read(`test/css/samples/${dir}/expected.css`)
}; };
assert.equal(dom.css.trim(), expected.css.trim()); assert.equal(dom.css.replace(/svelte-\d+/g, 'svelte-xyz').trim(), expected.css.trim());
// verify that the right elements have scoping selectors // verify that the right elements have scoping selectors
if (expected.html !== null) { if (expected.html !== null) {
@ -62,7 +62,7 @@ describe("css", () => {
// dom // dom
assert.equal( assert.equal(
normalizeHtml(window, html), normalizeHtml(window, html).replace(/svelte-\d+/g, 'svelte-xyz'),
normalizeHtml(window, expected.html) normalizeHtml(window, expected.html)
); );
@ -70,7 +70,7 @@ describe("css", () => {
const component = eval(`(function () { ${ssr.code}; return SvelteComponent; }())`); const component = eval(`(function () { ${ssr.code}; return SvelteComponent; }())`);
assert.equal( assert.equal(
normalizeHtml(window, component.render(config.data)), normalizeHtml(window, component.render(config.data)).replace(/svelte-\d+/g, 'svelte-xyz'),
normalizeHtml(window, expected.html) normalizeHtml(window, expected.html)
); );
}); });

@ -1,4 +1,4 @@
div[svelte-2278551596], [svelte-2278551596] div { div[svelte-xyz], [svelte-xyz] div {
color: red; color: red;
} }

@ -4,10 +4,10 @@
100% { color: blue; } 100% { color: blue; }
} }
.animated[svelte-90785995] { .animated[svelte-xyz] {
animation: why 2s; animation: why 2s;
} }
.also-animated[svelte-90785995] { .also-animated[svelte-xyz] {
animation: not-defined-here 2s; animation: not-defined-here 2s;
} }

@ -6,7 +6,7 @@
color: red; color: red;
} }
:global(div.foo) { :global(div).foo {
color: blue; color: blue;
} }

@ -1,13 +1,13 @@
@keyframes svelte-1647166666-why { @keyframes svelte-xyz-why {
0% { color: red; } 0% { color: red; }
100% { color: blue; } 100% { color: blue; }
} }
.animated[svelte-1647166666] { .animated[svelte-xyz] {
animation: svelte-1647166666-why 2s; animation: svelte-xyz-why 2s;
} }
.also-animated[svelte-1647166666] { .also-animated[svelte-xyz] {
animation: not-defined-here 2s; animation: not-defined-here 2s;
} }

@ -1,12 +1,12 @@
span[svelte-2146001331]::after { span[svelte-xyz]::after {
content: 'i am a pseudo-element'; content: 'i am a pseudo-element';
} }
span[svelte-2146001331]:first-child { span[svelte-xyz]:first-child {
color: red; color: red;
} }
span[svelte-2146001331]:last-child::after { span[svelte-xyz]:last-child::after {
color: blue; color: blue;
} }

@ -1,4 +1,4 @@
[svelte-2950902288] { [svelte-xyz] {
color: red; color: red;
} }

@ -1 +1 @@
<div svelte-2950902288=""></div> <div svelte-xyz=""></div>

@ -1,12 +1,12 @@
div[svelte-781920915] { div[svelte-xyz] {
color: red; color: red;
} }
div.foo[svelte-781920915] { div.foo[svelte-xyz] {
color: blue; color: blue;
} }
.foo[svelte-781920915] { .foo[svelte-xyz] {
font-weight: bold; font-weight: bold;
} }

@ -1,9 +1,9 @@
@keyframes svelte-2931302006-why { @keyframes svelte-xyz-why {
0% { color: red; } 0% { color: red; }
100% { color: blue; } 100% { color: blue; }
} }
[svelte-2931302006].animated, [svelte-2931302006] .animated { [svelte-xyz].animated, [svelte-xyz] .animated {
animation: svelte-2931302006-why 2s; animation: svelte-xyz-why 2s;
} }

@ -1,6 +1,6 @@
@media (min-width: 400px) { @media (min-width: 400px) {
[svelte-411199634].large-screen, [svelte-411199634] .large-screen { [svelte-xyz].large-screen, [svelte-xyz] .large-screen {
display: block; display: block;
} }
} }

@ -1,4 +1,4 @@
[data-foo*='bar'][svelte-4224841812] { [data-foo*='bar'][svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<div><p svelte-4224841812="" data-foo="foobarbaz">this is styled</p> <div><p svelte-xyz="" data-foo="foobarbaz">this is styled</p>
<p data-foo="fooBARbaz">this is unstyled</p></div> <p data-foo="fooBARbaz">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo='bar' i][svelte-4191913977] { [data-foo='bar' i][svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<div><p svelte-4191913977="" data-foo="BAR">this is styled</p> <div><p svelte-xyz="" data-foo="BAR">this is styled</p>
<p data-foo="BAZ">this is unstyled</p></div> <p data-foo="BAZ">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo='bar'][svelte-1339732946] { [data-foo='bar'][svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<div><p svelte-1339732946="" data-foo="whatever">this is styled</p> <div><p svelte-xyz="" data-foo="whatever">this is styled</p>
<p data-foo="baz">this is unstyled</p></div> <p data-foo="baz">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo='bar'][svelte-2543760126] { [data-foo='bar'][svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<div><p svelte-2543760126="" data-foo="bar">this is styled</p> <div><p svelte-xyz="" data-foo="bar">this is styled</p>
<p data-foo="baz">this is unstyled</p></div> <p data-foo="baz">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo|='bar'][svelte-1225676040] { [data-foo|='bar'][svelte-xyz] {
color: red; color: red;
} }

@ -1,3 +1,3 @@
<div><p svelte-1225676040="" data-foo="bar">this is styled</p> <div><p svelte-xyz="" data-foo="bar">this is styled</p>
<p svelte-1225676040="" data-foo="bar-baz">this is styled</p> <p svelte-xyz="" data-foo="bar-baz">this is styled</p>
<p data-foo="baz-bar">this is unstyled</p></div> <p data-foo="baz-bar">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo^='bar'][svelte-3106767242] { [data-foo^='bar'][svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<div><p svelte-3106767242="" data-foo="barbaz">this is styled</p> <div><p svelte-xyz="" data-foo="barbaz">this is styled</p>
<p data-foo="bazbar">this is unstyled</p></div> <p data-foo="bazbar">this is unstyled</p></div>

@ -1,4 +1,4 @@
[data-foo$='bar'][svelte-207782622] { [data-foo$='bar'][svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<div><p data-foo="barbaz">this is unstyled</p> <div><p data-foo="barbaz">this is unstyled</p>
<p svelte-207782622="" data-foo="bazbar">this is styled</p></div> <p svelte-xyz="" data-foo="bazbar">this is styled</p></div>

@ -1,4 +1,4 @@
[data-foo~='bar'][svelte-1786044856] { [data-foo~='bar'][svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<div><p svelte-1786044856="" data-foo="qux bar">this is styled</p> <div><p svelte-xyz="" data-foo="qux bar">this is styled</p>
<p data-foo="qux baz">this is unstyled</p></div> <p data-foo="qux baz">this is unstyled</p></div>

@ -1,4 +1,4 @@
[autoplay][svelte-240005720] { [autoplay][svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<div><video svelte-240005720 autoplay></video> <div><video svelte-xyz autoplay></video>
<video></video></div> <video></video></div>

@ -1,4 +1,4 @@
.foo[svelte-2643270928] { .foo[svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<p svelte-2643270928="" class="whatever">this is styled</p> <p svelte-xyz="" class="whatever">this is styled</p>
<p class="bar">this is unstyled</p> <p class="bar">this is unstyled</p>

@ -1,4 +1,4 @@
.foo[svelte-633959357] { .foo[svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<p svelte-633959357="" class="foo">this is styled</p> <p svelte-xyz="" class="foo">this is styled</p>
<p class="bar">this is unstyled</p> <p class="bar">this is unstyled</p>

@ -1,4 +1,4 @@
.foo[svelte-2122726581] .bar { .foo[svelte-xyz] .bar {
color: red; color: red;
} }

@ -1 +1 @@
<div svelte-2122726581="" class="foo"></div> <div svelte-xyz="" class="foo"></div>

@ -1,4 +1,4 @@
div[svelte-3386191472] > p > em { div[svelte-xyz] > p > em {
color: red; color: red;
} }

@ -1 +1 @@
<div svelte-3386191472=""></div> <div svelte-xyz=""></div>

@ -1,4 +1,4 @@
div[svelte-3744486606] > p { div[svelte-xyz] > p {
color: red; color: red;
} }

@ -1 +1 @@
<div svelte-3744486606=""></div> <div svelte-xyz=""></div>

@ -1,4 +1,4 @@
div > section > p[svelte-3390623146] { div > section > p[svelte-xyz] {
color: red; color: red;
} }

@ -1 +1 @@
<p svelte-3390623146="">this may or may not be styled</p> <p svelte-xyz="">this may or may not be styled</p>

@ -1,4 +1,4 @@
div > p[svelte-794545435] { div > p[svelte-xyz] {
color: red; color: red;
} }

@ -1 +1 @@
<p svelte-794545435="">this may or may not be styled</p> <p svelte-xyz="">this may or may not be styled</p>

@ -1,4 +1,4 @@
div[svelte-2557028325] > p[svelte-2557028325] { div[svelte-xyz] > p[svelte-xyz] {
color: red; color: red;
} }

@ -1,4 +1,4 @@
#foo[svelte-2727164615] { #foo[svelte-xyz] {
color: red; color: red;
} }

@ -1,2 +1,2 @@
<div svelte-2727164615="" id="foo"></div> <div svelte-xyz="" id="foo"></div>
<div id="bar"></div> <div id="bar"></div>

@ -1,4 +1,4 @@
div[svelte-4032668709] section p[svelte-4032668709] { div[svelte-xyz] section p[svelte-xyz] {
color: red; color: red;
} }

@ -1 +1 @@
<div svelte-4032668709=""><section><p svelte-4032668709="">this is styled</p></section></div> <div svelte-xyz=""><section><p svelte-xyz="">this is styled</p></section></div>

@ -1,4 +1,4 @@
div[svelte-4240344240] p[svelte-4240344240] { div[svelte-xyz] p[svelte-xyz] {
color: red; color: red;
} }

@ -1 +1 @@
<div svelte-4240344240=""><section><p svelte-4240344240="">this is styled</p></section></div> <div svelte-xyz=""><section><p svelte-xyz="">this is styled</p></section></div>

@ -1,4 +1,4 @@
p[svelte-1997768937] { p[svelte-xyz] {
color: red; color: red;
} }

@ -1 +1 @@
<div><p svelte-1997768937="">this is styled</p></div> <div><p svelte-xyz="">this is styled</p></div>

@ -1,4 +1,4 @@
[svelte-2950902288], [svelte-2950902288] * { [svelte-xyz], [svelte-xyz] * {
color: red; color: red;
} }

@ -1,8 +1,8 @@
[{ [{
"message": ":global(...) cannot be mixed with non-global selectors", "message": ":global(...) must be the first element in a compound selector",
"loc": { "loc": {
"line": 2, "line": 2,
"column": 1 "column": 5
}, },
"pos": 9 "pos": 13
}] }]

@ -1,5 +1,5 @@
<style> <style>
:global(.foo).bar { .foo:global(.bar) {
color: red; color: red;
} }
</style> </style>
Loading…
Cancel
Save