Merge pull request #17 from embroider-build/smoke-tests

Add smoke tests and fix the app-name.css link in index.html

eslint.config.mjs

@@ -3,8 +3,14 @@ import pluginJs from '@eslint/js';
 import eslintPluginPrettierRecommended from 'eslint-plugin-prettier/recommended';
 
 export default [
-  { files: ['**/*.js'], languageOptions: { sourceType: 'commonjs' } },
+  {
+    files: ['**/*.js'],
+    languageOptions: { sourceType: 'commonjs' },
+  },
   { languageOptions: { globals: globals.node } },
   pluginJs.configs.recommended,
   eslintPluginPrettierRecommended,
+  {
+    ignores: ['tests/fixture/*'],
+  },
 ];

files-override/app/index.html

@@ -9,7 +9,7 @@
     {{content-for "head"}}
 
     <link integrity="" rel="stylesheet" href="/@embroider/core/vendor.css">
-    <link integrity="" rel="stylesheet" href="/assets/app-template.css">
+    <link integrity="" rel="stylesheet" href="/assets/<%= name %>.css">
 
     {{content-for "head-footer"}}
   </head>

files-override/tests/index.html

@@ -9,7 +9,7 @@
     {{content-for "head"}} {{content-for "test-head"}}
 
     <link rel="stylesheet" href="/@embroider/core/vendor.css" />
-    <link rel="stylesheet" href="/assets/app-template.css" />
+    <link rel="stylesheet" href="/assets/<%= name %>.css" />
     <link rel="stylesheet" href="/@embroider/core/test-support.css" />
 
     {{content-for "head-footer"}} {{content-for "test-head-footer"}}

index.js

@@ -1,7 +1,8 @@
 const Blueprint = require('ember-cli/lib/models/blueprint');
-const fs = require('fs-extra');
+const fs = require('fs');
 const { join } = require('path');
 const emberCliUpdate = require('./lib/ember-cli-update');
+const copyWithTemplate = require('./lib/copy-with-template');
 
 const appBlueprint = Blueprint.lookup('app');
 
@@ -57,12 +58,14 @@ module.exports = {
   async afterInstall(options) {
     // there doesn't seem to be a way to tell ember-cli to not prompt to override files that were added in the beforeInstall
     // so I'm just copying a few over at this stage
-    await fs.copy(join(__dirname, 'files-override'), options.target, {
-      overwrite: true,
-    });
+    copyWithTemplate(
+      join(__dirname, 'files-override'),
+      options.target,
+      options,
+    );
 
     let packageJson = join(options.target, 'package.json');
-    let json = await fs.readJSON(packageJson);
+    let json = JSON.parse(fs.readFileSync(packageJson));
 
     json.scripts = {
       ...json.scripts,
@@ -71,7 +74,7 @@ module.exports = {
       'test:ember': 'vite build --mode test && ember test --path dist',
     };
 
-    await fs.writeFile(packageJson, JSON.stringify(json, null, 2));
+    fs.writeFileSync(packageJson, JSON.stringify(json, null, 2));
 
     await emberCliUpdate({
       projectDir: options.target,

lib/copy-with-template.js

@@ -0,0 +1,21 @@
+const walkSync = require('walk-sync');
+const fs = require('fs');
+const _ = require('lodash');
+const { join, dirname } = require('path');
+
+module.exports = function copyWithTemplate(
+  sourceFolder,
+  destinationFolder,
+  templateContext,
+) {
+  const files = walkSync(sourceFolder, { directories: false });
+
+  for (let file of files) {
+    let content = _.template(
+      fs.readFileSync(join(sourceFolder, file), 'utf-8'),
+    )(templateContext);
+    let destinationFile = join(destinationFolder, file);
+    fs.mkdirSync(dirname(destinationFile), { recursive: true });
+    fs.writeFileSync(destinationFile, content);
+  }
+};

lib/ember-cli-update.js

@@ -1,4 +1,4 @@
-const fs = require('fs-extra');
+const fs = require('fs');
 const { join } = require('path');
 
 module.exports = async function ({
@@ -7,28 +7,29 @@ module.exports = async function ({
   version,
   options = [],
 } = {}) {
-  fs.writeJSON(
+  fs.writeFileSync(
     join(projectDir, 'config', 'ember-cli-update.json'),
-    {
-      schemaVersion: '1.0.0',
-      projectName,
-      packages: [
-        {
-          name: '@embroider/app-blueprint',
-          version,
-          blueprints: [
-            {
-              name: '@embroider/app-blueprint',
-              isBaseBlueprint: true,
-              // TODO pass more of the original options through
-              options: [`--package-manager ${options.packageManager}`],
-            },
-          ],
-        },
-      ],
-    },
-    {
-      spaces: 2,
-    },
+    JSON.stringify(
+      {
+        schemaVersion: '1.0.0',
+        projectName,
+        packages: [
+          {
+            name: '@embroider/app-blueprint',
+            version,
+            blueprints: [
+              {
+                name: '@embroider/app-blueprint',
+                isBaseBlueprint: true,
+                // TODO pass more of the original options through
+                options: [`--package-manager ${options.packageManager}`],
+              },
+            ],
+          },
+        ],
+      },
+      null,
+      { spaces: 2 },
+    ),
   );
 };

package.json

@@ -18,7 +18,8 @@
   },
   "dependencies": {
     "ember-cli": "^5.8.1",
-    "fs-extra": "^11.2.0"
+    "lodash": "^4.17.21",
+    "walk-sync": "^3.0.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.3.0",

tests/default.test.mjs

@@ -1,7 +1,8 @@
-import { describe, it, beforeAll, afterAll } from 'vitest';
+import { describe, it, beforeAll, afterAll, expect } from 'vitest';
 import { join } from 'path';
 import tmp from 'tmp-promise';
 import { execa } from 'execa';
+import copyWithTemplate from '../lib/copy-with-template';
 
 const blueprintPath = join(__dirname, '..');
 const appName = 'fancy-app-in-test';
@@ -25,6 +26,11 @@ describe('basic functionality', function () {
       cwd: tmpDir.path,
       preferLocal: true,
     });
+
+    // apply the fixture on top of the generated app
+    copyWithTemplate(join(__dirname, 'fixture'), join(tmpDir.path, appName), {
+      name: appName,
+    });
   });
 
   afterAll(async () => {
@@ -40,9 +46,23 @@ describe('basic functionality', function () {
   });
 
   it('successfully runs tests', async function () {
-    let result = await execa('pnpm', ['test'], {
-      cwd: join(tmpDir.path, appName),
-    });
+    let result;
+
+    try {
+      result = await execa('pnpm', ['test'], {
+        cwd: join(tmpDir.path, appName),
+      });
+    } catch (err) {
+      console.log(err.stdout, err.stderr);
+      throw err;
+    }
+
+    // make sure that each of the tests that we expect actually show up
+    // alternatively we can change this to search for `pass 3`
+    expect(result.stdout).to.contain(
+      'Acceptance | welcome page: visiting /index shows the welcome page',
+    );
+    expect(result.stdout).to.contain('Acceptance | styles: visiting /styles');
 
     console.log(result.stdout);
   });

tests/fixture/app/router.js

@@ -0,0 +1,11 @@
+import EmberRouter from '@ember/routing/router';
+import config from '<%= name %>/config/environment';
+
+export default class Router extends EmberRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
+
+Router.map(function () {
+  this.route('styles');
+});

tests/fixture/app/styles/app.css

@@ -0,0 +1,5 @@
+/* Ember supports plain CSS out of the box. More info: https://cli.emberjs.com/release/advanced-use/stylesheets/ */
+
+.styles-test {
+  background-color: blue;
+}

tests/fixture/app/templates/application.hbs

@@ -0,0 +1,3 @@
+{{page-title "FancyApp"}}
+
+{{outlet}}

tests/fixture/app/templates/index.hbs

@@ -0,0 +1 @@
+<WelcomePage />

tests/fixture/app/templates/styles.hbs

@@ -0,0 +1,5 @@
+<h1>Styles test</h1>
+
+<p class="styles-test">
+  I expect to be blue
+</p>

tests/fixture/tests/acceptance/styles-test.js

@@ -0,0 +1,18 @@
+import { module, test } from 'qunit';
+import { visit } from '@ember/test-helpers';
+import { setupApplicationTest } from '<%= name %>/tests/helpers';
+
+module('Acceptance | styles', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /styles', async function (assert) {
+    await visit('/styles');
+
+    assert.dom('.styles-test').hasStyle(
+      {
+        'background-color': 'rgb(0, 0, 255)',
+      },
+      'The background should be blue if the app styles are working correctly',
+    );
+  });
+});

tests/fixture/tests/acceptance/welcome-page-test.js

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from '<%= name %>/tests/helpers';
+
+module('Acceptance | welcome page', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /index shows the welcome page', async function (assert) {
+    await visit('/');
+
+    assert.strictEqual(currentURL(), '/');
+    assert.dom('h1').containsText('Congratulations, you made it!');
+  });
+});