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(); + } + }); + }); + });