From 567d933ba9da3574e2d33679e53c59de9a4a4b0c Mon Sep 17 00:00:00 2001
From: Marine Dunstetter <bluecut.official@gmail.com>
Date: Wed, 24 Apr 2024 15:31:13 +0200
Subject: [PATCH] test(virtual styles): add a test to check vendor.css and
 test-support.css are served and built

---
 .../compat-addon-classic-features-test.ts     | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)

diff --git a/tests/scenarios/compat-addon-classic-features-test.ts b/tests/scenarios/compat-addon-classic-features-test.ts
index 620edfdd4..f7b383291 100644
--- a/tests/scenarios/compat-addon-classic-features-test.ts
+++ b/tests/scenarios/compat-addon-classic-features-test.ts
@@ -4,6 +4,8 @@ import { merge } from 'lodash';
 import QUnit from 'qunit';
 import type { PreparedApp } from 'scenario-tester';
 import fetch from 'node-fetch';
+import globby from 'globby';
+import { join } from 'path';
 
 import { appScenarios, baseAddon } from './scenarios';
 import CommandWatcher from './helpers/command-watcher';
@@ -175,3 +177,66 @@ appScenarios
       });
     });
   });
+
+appScenarios
+  .map('compat-addon-classic-features-virtual-styles', project => {
+    let myAddon = baseAddon();
+    myAddon.pkg.name = 'my-addon';
+    merge(myAddon.files, {
+      addon: {
+        styles: {
+          'addon.css': `
+            .my-addon-p { color: blue; }
+          `,
+        },
+      },
+    });
+    project.addDependency(myAddon);
+  })
+  .forEachScenario(scenario => {
+    Qmodule(scenario.name, function (hooks) {
+      let app: PreparedApp;
+      hooks.before(async () => {
+        app = await scenario.prepare();
+      });
+
+      test('virtual styles are included in the CSS of the production build', async function (assert) {
+        let result = await app.execute('pnpm build');
+        assert.equal(result.exitCode, 0, result.output);
+
+        let [mainStyles] = await globby('dist/assets/main-*.css', { cwd: app.dir });
+        let content = readFileSync(join(app.dir, mainStyles)).toString();
+        assert.true(content.includes('.my-addon-p{color:#00f}'));
+      });
+
+      test('virtual styles are included in the CSS of the test build', async function (assert) {
+        let result = await app.execute('pnpm test');
+        assert.equal(result.exitCode, 0, result.output);
+
+        let [mainStyles] = await globby('dist/assets/app-template-*.css', { cwd: app.dir });
+        let content = readFileSync(join(app.dir, mainStyles)).toString();
+        assert.true(content.includes('.my-addon-p{color:#00f}'));
+
+        let [testStyles] = await globby('dist/assets/tests-*.css', { cwd: app.dir });
+        content = readFileSync(join(app.dir, testStyles)).toString();
+        assert.true(content.includes('#qunit-tests'));
+      });
+
+      test('virtual styles are served in dev mode', async function (assert) {
+        const server = CommandWatcher.launch('vite', ['--clearScreen', 'false'], { cwd: app.dir });
+        try {
+          const [, url] = await server.waitFor(/Local:\s+(https?:\/\/.*)\//g);
+
+          let response = await fetch(`${url}/@embroider/core/vendor.css?direct`);
+          let text = await response.text();
+          assert.true(text.includes('.my-addon-p { color: blue; }'));
+
+          response = await fetch(`${url}/@embroider/core/test-support.css?direct`);
+          text = await response.text();
+          assert.true(text.includes('#qunit-tests'));
+        } finally {
+          await server.shutdown();
+        }
+      });
+    });
+  });