From 97fc3825c9c9fee201b61345320457739469c986 Mon Sep 17 00:00:00 2001 From: Marine Dunstetter <bluecut.official@gmail.com> Date: Wed, 24 Apr 2024 15:05:07 +0200 Subject: [PATCH 1/3] test(virtual test-support): add a test to check this script is correclty served and emitted --- .../compat-addon-classic-features-test.ts | 30 +++++++++++-------- 1 file changed, 17 insertions(+), 13 deletions(-) diff --git a/tests/scenarios/compat-addon-classic-features-test.ts b/tests/scenarios/compat-addon-classic-features-test.ts index ecdd6170d..620edfdd4 100644 --- a/tests/scenarios/compat-addon-classic-features-test.ts +++ b/tests/scenarios/compat-addon-classic-features-test.ts @@ -135,29 +135,25 @@ appScenarios appScenarios .map('compat-addon-classic-features-virtual-scripts', () => {}) .forEachScenario(scenario => { - let app: PreparedApp; - - Qmodule(`${scenario.name} - build mode`, function (hooks) { - hooks.before(async assert => { + Qmodule(scenario.name, function (hooks) { + let app: PreparedApp; + hooks.before(async () => { app = await scenario.prepare(); + }); + + test('virtual scripts are emitted in the build', async function (assert) { let result = await app.execute('pnpm build'); assert.equal(result.exitCode, 0, result.output); - }); - test('vendor.js script is emitted in the build', async function (assert) { assert.true(lstatSync(`${app.dir}/dist/@embroider/core/vendor.js`).isFile()); - }); - }); - - Qmodule(`${scenario.name} - dev mode`, function (hooks) { - hooks.before(async () => { - app = await scenario.prepare(); + assert.true(lstatSync(`${app.dir}/dist/@embroider/core/test-support.js`).isFile()); }); - test('vendor.js script is served', async function (assert) { + test('virtual scripts contents 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.js`); assert.strictEqual(response.status, 200); // checking the response status 200 is not enough to assert vendor.js is served, @@ -165,6 +161,14 @@ appScenarios // and has a 200 status (for index.html being returned correctly) let text = await response.text(); assert.true(!text.includes('<!DOCTYPE html>')); + + response = await fetch(`${url}/@embroider/core/test-support.js`); + assert.strictEqual(response.status, 200); + // checking the response status 200 is not enough to assert test-support.js is served, + // because when the URL is not recognized, the response contains the index.html + // and has a 200 status (for index.html being returned correctly) + text = await response.text(); + assert.true(!text.includes('<!DOCTYPE html>')); } finally { await server.shutdown(); } 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 2/3] 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(); + } + }); + }); + }); From 70035aa150c1175174d6659aba7cc0b6ae73a519 Mon Sep 17 00:00:00 2001 From: Marine Dunstetter <bluecut.official@gmail.com> Date: Thu, 25 Apr 2024 14:27:38 +0200 Subject: [PATCH 3/3] test(virtual styles): make the build test able to find the CSS without hardcoding any filename --- .../compat-addon-classic-features-test.ts | 30 ++++++++++++------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/tests/scenarios/compat-addon-classic-features-test.ts b/tests/scenarios/compat-addon-classic-features-test.ts index f7b383291..80c789584 100644 --- a/tests/scenarios/compat-addon-classic-features-test.ts +++ b/tests/scenarios/compat-addon-classic-features-test.ts @@ -1,5 +1,6 @@ import { throwOnWarnings } from '@embroider/core'; import { lstatSync, readFileSync } from 'fs'; +import { readFile } from 'fs/promises'; import { merge } from 'lodash'; import QUnit from 'qunit'; import type { PreparedApp } from 'scenario-tester'; @@ -204,22 +205,31 @@ appScenarios 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}')); + // TODO: replace with an Audit when it's ready to take any given dist + let styles = await globby('dist/**/*.css', { cwd: app.dir }); + let readResult = await Promise.all( + styles.map(async styleFile => { + let content = await readFile(join(app.dir, styleFile)); + return content.toString().includes('.my-addon-p{color:#00f}'); + }) + ); + assert.true(readResult.includes(true)); }); 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')); + // TODO: replace with an Audit when it's ready to take any given dist + let styles = await globby('dist/**/*.css', { cwd: app.dir }); + let readResult = await Promise.all( + styles.map(async styleFile => { + let content = await readFile(join(app.dir, styleFile)); + return content.toString(); + }) + ); + assert.true(readResult.some(content => content.includes('.my-addon-p{color:#00f}'))); + assert.true(readResult.some(content => content.includes('#qunit-tests'))); }); test('virtual styles are served in dev mode', async function (assert) {