Add SSR Styles test (#35)

7 files changed, 100 insertions, 0 deletions

diff --git a/test/astro-styles-ssr.test.js b/test/astro-styles-ssr.test.js
new file mode 100644
index 000000000..69fa68353
--- /dev/null
+++ b/test/astro-styles-ssr.test.js
@@ -0,0 +1,50 @@
+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.run();
diff --git a/test/fixtures/astro-styles-ssr/astro.config.mjs b/test/fixtures/astro-styles-ssr/astro.config.mjs
new file mode 100644
index 000000000..30955cef0
--- /dev/null
+++ b/test/fixtures/astro-styles-ssr/astro.config.mjs
@@ -0,0 +1,6 @@
+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.css b/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.css
new file mode 100644
index 000000000..a29595b86
--- /dev/null
+++ b/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.css
@@ -0,0 +1,3 @@
+.react-title {
+  font-family: fantasy;
+}
diff --git a/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx b/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx
new file mode 100644
index 000000000..edf9eea1f
--- /dev/null
+++ b/test/fixtures/astro-styles-ssr/astro/components/ReactCSS.jsx
@@ -0,0 +1,7 @@
+import React from 'react';
+import './ReactCSS.css';
+
+function ReactCSS() {
+  return <h1 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
new file mode 100644
index 000000000..38d24bf8b
--- /dev/null
+++ b/test/fixtures/astro-styles-ssr/astro/components/SvelteScoped.svelte
@@ -0,0 +1,7 @@
+<h1 class="svelte-title">Svelte Scoped</h1>
+
+<style>
+  .svelte-title {
+    font-family: 'Comic Sans MS', sans-serif;
+  }
+</style>
diff --git a/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue b/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue
new file mode 100644
index 000000000..755884354
--- /dev/null
+++ b/test/fixtures/astro-styles-ssr/astro/components/VueCSS.vue
@@ -0,0 +1,9 @@
+<style>
+.vue-title {
+  font-family: cursive;
+}
+</style>
+
+<template>
+  <h1 class="vue-title">Vue 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
new file mode 100644
index 000000000..30591da72
--- /dev/null
+++ b/test/fixtures/astro-styles-ssr/astro/pages/index.astro
@@ -0,0 +1,18 @@
+---
+import ReactCSS from '../components/ReactCSS.jsx';
+import VueCSS from '../components/VueCSS.vue';
+import SvelteScoped from '../components/SvelteScoped.svelte';
+---
+
+<html>
+  <head>
+    <meta charset="UTF-8" />
+  </head>
+  <body>
+    <div>
+      <ReactCSS />
+      <VueCSS />
+      <SvelteScoped />
+    </div>
+  </body>
+</html>