diff options
author | 2021-04-30 16:33:35 -0500 | |
---|---|---|
committer | 2021-04-30 16:33:35 -0500 | |
commit | 4df1347156cf2632ea2f3475d3a5f8f08d197cc3 (patch) | |
tree | 9d50de89dfe62827c32a8a4046120af4ab61dc0c /test/astro-styles-ssr.test.js | |
parent | 1d498facc8f78a3ffbfecd05cc6ecd45e8a4a1ae (diff) | |
download | astro-4df1347156cf2632ea2f3475d3a5f8f08d197cc3.tar.gz astro-4df1347156cf2632ea2f3475d3a5f8f08d197cc3.tar.zst astro-4df1347156cf2632ea2f3475d3a5f8f08d197cc3.zip |
Migrate to `yarn` monorepo (#157)
* chore: use monorepo
* chore: scaffold astro-scripts
* chore: move tests inside packages/astro
* chore: refactor tests, add scripts
* chore: move parser to own module
* chore: move runtime to packages/astro
* fix: move parser to own package
* test: fix prettier-plugin-astro tests
* fix: tests
* chore: update package-lock
* chore: add changesets
* fix: cleanup examples
* fix: starter example
* chore: update changeset config
* chore: update changeset config
* chore: setup changeset release workflow
* chore: bump lockfiles
* chore: prism => astro-prism
* fix: tsc --emitDeclarationOnly
* chore: final cleanup, switch to yarn
* chore: add lerna
* chore: update workflows to yarn
* chore: update workflows
* chore: remove lint workflow
* chore: add astro-dev script
* chore: add symlinked README
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(); |