diff options
Diffstat (limited to '')
8 files changed, 59 insertions, 10 deletions
diff --git a/test/astro-styles-ssr.test.js b/test/astro-styles-ssr.test.js index 2342fcda4..8293e4996 100644 --- a/test/astro-styles-ssr.test.js +++ b/test/astro-styles-ssr.test.js @@ -34,7 +34,13 @@ StylesSSR.after(async () => { }); 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 MUST_HAVE_LINK_TAGS = [ + '/_astro/components/ReactCSS.css', + '/_astro/components/SvelteScoped.svelte.css', + '/_astro/components/VueCSS.vue.css', + '/_astro/components/VueModules.vue.css', + '/_astro/components/VueScoped.vue.css', + ]; const result = await runtime.load('/'); const $ = doc(result.contents); @@ -46,14 +52,32 @@ StylesSSR('Has <link> tags', async () => { }); 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); + const MUST_HAVE_CLASSES = { + '#react-css': 'react-title', + '#vue-css': 'vue-title', + '#vue-css-modules': '_title_1gi0u_2', // ⚠️ may be flaky + '#vue-scoped': 'vue-title', // also has data-v-* property + '#svelte-scoped': 'svelte-title', // also has additional class + }; + + for (const [selector, className] of Object.entries(MUST_HAVE_CLASSES)) { + const el = $(selector); + assert.ok(el.attr('class').includes(className)); + + // add’l test: Vue Scoped styles should have data-v-* attribute + if (selector === '#vue-scoped') { + const { attribs } = el.get(0); + const scopeId = Object.keys(attribs).find((k) => k.startsWith('data-v-')); + assert.ok(scopeId); + } + + // add’l test: Svelte should have another class + if (selector === '#svelte-title') { + assert.not.equal(el.attr('class'), className); + } } }); diff --git a/test/fixtures/astro-styles-ssr/astro.config.mjs b/test/fixtures/astro-styles-ssr/astro.config.mjs index 30955cef0..c7cbdb435 100644 --- a/test/fixtures/astro-styles-ssr/astro.config.mjs +++ b/test/fixtures/astro-styles-ssr/astro.config.mjs @@ -2,5 +2,4 @@ export default { projectRoot: '.', astroRoot: './astro', dist: './_site', - // No extensions needed, React is the default. }; diff --git a/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx b/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx index edf9eea1f..1f3c42759 100644 --- a/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx +++ b/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx @@ -2,6 +2,10 @@ import React from 'react'; import './ReactCSS.css'; function ReactCSS() { - return <h1 className="react-title">React CSS</h1>; + return ( + <h1 id="react-css" className="react-title"> + React CSS + </h1> + ); } export default ReactCSS; diff --git a/test/fixtures/astro-styles-ssr/astro/components/SvelteScoped.svelte b/test/fixtures/astro-styles-ssr/astro/components/SvelteScoped.svelte index 38d24bf8b..25ed8dce2 100644 --- a/test/fixtures/astro-styles-ssr/astro/components/SvelteScoped.svelte +++ b/test/fixtures/astro-styles-ssr/astro/components/SvelteScoped.svelte @@ -1,4 +1,4 @@ -<h1 class="svelte-title">Svelte Scoped</h1> +<h1 id="svelte-scoped" class="svelte-title">Svelte Scoped</h1> <style> .svelte-title { diff --git a/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue b/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue index 755884354..ec6e7cd97 100644 --- a/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue +++ b/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue @@ -5,5 +5,5 @@ </style> <template> - <h1 class="vue-title">Vue CSS</h1> + <h1 id="vue-css" class="vue-title">Vue CSS Modules</h1> </template> diff --git a/test/fixtures/astro-styles-ssr/astro/components/VueModules.vue b/test/fixtures/astro-styles-ssr/astro/components/VueModules.vue new file mode 100644 index 000000000..9bebf528b --- /dev/null +++ b/test/fixtures/astro-styles-ssr/astro/components/VueModules.vue @@ -0,0 +1,9 @@ +<style module> +.title { + font-family: cursive; +} +</style> + +<template> + <h1 id="vue-css-modules" :class="$style.title">Vue CSS Modules</h1> +</template> diff --git a/test/fixtures/astro-styles-ssr/astro/components/VueScoped.vue b/test/fixtures/astro-styles-ssr/astro/components/VueScoped.vue new file mode 100644 index 000000000..0eee4dff1 --- /dev/null +++ b/test/fixtures/astro-styles-ssr/astro/components/VueScoped.vue @@ -0,0 +1,9 @@ +<style scoped> +.vue-title { + font-family: cursive; +} +</style> + +<template> + <h1 id="vue-scoped" class="vue-title">Vue Scoped CSS</h1> +</template> diff --git a/test/fixtures/astro-styles-ssr/astro/pages/index.astro b/test/fixtures/astro-styles-ssr/astro/pages/index.astro index 7333fac21..ed788e217 100644 --- a/test/fixtures/astro-styles-ssr/astro/pages/index.astro +++ b/test/fixtures/astro-styles-ssr/astro/pages/index.astro @@ -1,6 +1,8 @@ --- import ReactCSS from '../components/ReactCSS.jsx'; import VueCSS from '../components/VueCSS.vue'; +import VueScoped from '../components/VueScoped.vue'; +import VueModules from '../components/VueModules.vue'; import SvelteScoped from '../components/SvelteScoped.svelte'; --- @@ -19,6 +21,8 @@ import SvelteScoped from '../components/SvelteScoped.svelte'; <div class="wrapper"> <ReactCSS /> <VueCSS /> + <VueScoped /> + <VueModules /> <SvelteScoped /> </div> </body> |