diff options
Diffstat (limited to 'test/astro-styles-ssr.test.js')
-rw-r--r-- | test/astro-styles-ssr.test.js | 104 |
1 files changed, 0 insertions, 104 deletions
diff --git a/test/astro-styles-ssr.test.js b/test/astro-styles-ssr.test.js deleted file mode 100644 index 2fd87b37a..000000000 --- a/test/astro-styles-ssr.test.js +++ /dev/null @@ -1,104 +0,0 @@ -import { suite } from 'uvu'; -import * as assert from 'uvu/assert'; -import { doc } from './test-utils.js'; -import { setup } from './helpers.js'; - -const StylesSSR = suite('Styles SSR'); - -/** Basic CSS minification; removes some flakiness in testing CSS */ -function cssMinify(css) { - return css - .trim() // remove whitespace - .replace(/\n\s*/g, '') // collapse lines - .replace(/\s*\{/g, '{') // collapse selectors - .replace(/:\s*/g, ':') // collapse attributes - .replace(/;}/g, '}'); // collapse block -} - -setup(StylesSSR, './fixtures/astro-styles-ssr'); - -StylesSSR('Has <link> tags', async ({ runtime }) => { - const MUST_HAVE_LINK_TAGS = [ - '/_astro/components/ReactCSS.css', - '/_astro/components/ReactModules.module.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); - - for (const href of MUST_HAVE_LINK_TAGS) { - const el = $(`link[href="${href}"]`); - assert.equal(el.length, 1); - } -}); - -StylesSSR('Has correct CSS classes', async ({ runtime }) => { - // TODO: remove this (temporary CI patch) - if (process.version.startsWith('v14.')) { - return; - } - - const result = await runtime.load('/'); - const $ = doc(result.contents); - - const MUST_HAVE_CLASSES = { - '#react-css': 'react-title', - '#react-modules': 'title', // ⚠️ this should be transformed - '#vue-css': 'vue-title', - '#vue-modules': 'title', // ⚠️ this should also be transformed - '#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); - if (selector === '#react-modules' || selector === '#vue-modules') { - // this will generate differently on Unix vs Windows. Here we simply test that it has transformed - assert.match(el.attr('class'), new RegExp(`^_${className}_[A-Za-z0-9-_]+`)); // className should be transformed, surrounded by underscores and other stuff - } else { - // if this is not a CSS module, it should remain as expected - 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); - } - } -}); - -StylesSSR('CSS Module support in .astro', async ({ runtime }) => { - const result = await runtime.load('/'); - const $ = doc(result.contents); - - let scopedClass; - - // test 1: <style> tag in <head> is transformed - const css = cssMinify( - $('style') - .html() - .replace(/\.astro-[A-Za-z0-9-]+/, (match) => { - scopedClass = match; // get class hash from result - return match; - }) - ); - - assert.match(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(); |