0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2024-12-23 21:53:55 -05:00
astro/test/astro-styles-ssr.test.js
Drew Powers ee6ef81cf3
Convert CSS Modules to scoped styles (#38)
* Convert CSS Modules to scoped styles

* Update README

* Move class scoping into HTML walker

* Fix SSR styles test

* Fix mustache tags

* Update PostCSS plugin name

* Add JSDoc comment

* Update test
2021-03-30 10:11:21 -06:00

70 lines
2.1 KiB
JavaScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import { suite } from 'uvu';
import * as assert from 'uvu/assert';
import { createRuntime } from '../lib/runtime.js';
import { loadConfig } from '../lib/config.js';
import { doc } from './test-utils.js';
const StylesSSR = suite('Styles SSR');
let runtime;
StylesSSR.before(async () => {
const astroConfig = await loadConfig(new URL('./fixtures/astro-styles-ssr', import.meta.url).pathname);
const logging = {
level: 'error',
dest: process.stderr,
};
runtime = await createRuntime(astroConfig, { logging });
});
StylesSSR.after(async () => {
(await runtime) && runtime.shutdown();
});
StylesSSR('Has <link> tags', async () => {
const MUST_HAVE_LINK_TAGS = ['/_astro/components/SvelteScoped.svelte.css', '/_astro/components/VueCSS.vue.css', '/_astro/components/ReactCSS.css'];
const result = await runtime.load('/');
const $ = doc(result.contents);
for (const href of MUST_HAVE_LINK_TAGS) {
const el = $(`link[href="${href}"]`);
assert.equal(el.length, 1);
}
});
StylesSSR('Has correct CSS classes', async () => {
const MUST_HAVE_CSS_CLASSES = ['react-title', 'vue-title', 'svelte-title'];
const result = await runtime.load('/');
const $ = doc(result.contents);
for (const className of MUST_HAVE_CSS_CLASSES) {
const el = $(`.${className}`);
assert.equal(el.length, 1);
}
});
StylesSSR('CSS Module support in .astro', async () => {
const result = await runtime.load('/');
const $ = doc(result.contents);
let scopedClass;
// test 1: <style> tag in <head> is transformed
const css = $('style')
.html()
.replace(/\.astro-[A-Za-z0-9-]+/, (match) => {
scopedClass = match;
return match;
}); // remove class hash (should be deterministic / the same every time, but even still dont cause this test to flake)
assert.equal(css, `.wrapper${scopedClass}{margin-left:auto;margin-right:auto;max-width:1200px}`);
// test 2: element received .astro-XXXXXX class (this selector will succeed if transformed correctly)
const wrapper = $(`.wrapper${scopedClass}`);
assert.equal(wrapper.length, 1);
});
StylesSSR.run();