michael/astro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add scoped styles test (#223)

Browse source
This commit is contained in:
Drew Powers 2021-05-21 12:45:49 -06:00 committed by GitHub
parent 5c1f949953
commit 69d693b77c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 42 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/astro/test/astro-styles-ssr.test.js
View file

@ -101,4 +101,26 @@ StylesSSR('CSS Module support in .astro', async ({ runtime }) => {
assert.equal(wrapper.length, 1);
});
StylesSSR('Astro scoped styles', async ({ runtime }) => {
const result = await runtime.load('/');
const $ = doc(result.contents);
const el1 = $('#dynamic-class');
const el2 = $('#dynamic-vis');
let scopedClass;
$('#class')
.attr('class')
.replace(/astro-[A-Za-z0-9-]+/, (match) => {
scopedClass = match;
return match;
});
if (!scopedClass) throw new Error(`Astro component missing scoped class`);
assert.match(el1.attr('class'), `blue ${scopedClass}`);
assert.match(el2.attr('class'), `visible ${scopedClass}`);
});
StylesSSR.run();

18
packages/astro/test/fixtures/astro-styles-ssr/src/components/Astro.astro vendored Normal file
View file

@ -0,0 +1,18 @@
---
let blue = true;
let visible = true;
---
<style>
.blue {
color: powderblue;
}
.visible {
display: block;
}
</style>
<div id="class">I’m just used to get the Scoped class</div>
<div id="dynamic-class" class={blue ? 'blue' : 'notblue'}>I change colors</div>
{visible && <div id="dynamic-vis" class="visible">I disappear</div>}

2
packages/astro/test/fixtures/astro-styles-ssr/src/pages/index.astro vendored
View file

@ -1,4 +1,5 @@
---
import AstroComponent from '../components/Astro.astro';
import ReactCSS from '../components/ReactCSS.jsx';
import ReactModules from '../components/ReactModules.jsx';
import VueCSS from '../components/VueCSS.vue';
@ -20,6 +21,7 @@ import SvelteScoped from '../components/SvelteScoped.svelte';
</head>
<body>
<div class="wrapper">
<AstroComponent />
<ReactCSS />
<ReactModules />
<VueCSS />