@ember/app-blueprint 0.0.0 → 0.1.1

package/tests/default.test.mjs

@@ -0,0 +1,145 @@
+import { describe, it, expect } from 'vitest';
+import { join } from 'path';
+import { existsSync, writeFileSync } from 'fs';
+import stripAnsi from 'strip-ansi';
+import { newProjectWithFixtures } from './helpers.mjs';
+
+const SCENARIOS = [
+  {
+    flags: [
+      /* none, default */
+    ],
+    fixturePath: join(import.meta.dirname, 'fixture'),
+  },
+  {
+    flags: ['--typescript'],
+    fixturePath: join(import.meta.dirname, 'fixture-ts'),
+  },
+];
+
+describe('basic functionality', function () {
+  for (let { flags, fixturePath } of SCENARIOS) {
+    describe(`with flags: '${flags.join(' ')}'`, function () {
+      let project = newProjectWithFixtures({
+        fixturePath,
+        flags,
+      });
+
+      it('verify files', async function () {
+        expect(
+          !existsSync(join(project.dir(), 'app/index.html')),
+          'the app index.html has been removed',
+        );
+        expect(
+          existsSync(join(project.dir(), 'index.html')),
+          'the root index.html has been added',
+        );
+      });
+
+      it('successfully lints', async function () {
+        let result = await project.execa('pnpm', ['lint']);
+
+        console.log(result.stdout);
+      });
+
+      it('successfully builds', async function () {
+        let result = await project.execa('pnpm', ['build']);
+
+        console.log(result.stdout);
+      });
+
+      it('successfully runs tests', async function () {
+        let result;
+
+        try {
+          result = await project.execa('pnpm', ['test:ember']);
+        } catch (err) {
+          console.log(err.stdout, err.stderr);
+          throw 'Failed to successfully run test:ember';
+        }
+
+        // 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);
+      });
+
+      it('successfully runs tests in dev mode', async function () {
+        await project.$`pnpm install --save-dev testem http-proxy`;
+        let appURL;
+
+        let server;
+
+        try {
+          server = project.execa('pnpm', ['start']);
+
+          await new Promise((resolve) => {
+            server.stdout.on('data', (line) => {
+              let result = /Local:\s+(https?:\/\/.*)\//g.exec(
+                stripAnsi(line.toString()),
+              );
+
+              if (result) {
+                appURL = result[1];
+                resolve();
+              }
+            });
+          });
+
+          writeFileSync(
+            join(project.dir(), 'testem-dev.js'),
+            `module.exports = {
+  test_page: 'tests/index.html?hidepassed',
+  disable_watching: true,
+  launch_in_ci: ['Chrome'],
+  launch_in_dev: ['Chrome'],
+  browser_start_timeout: 120,
+  browser_args: {
+    Chrome: {
+      ci: [
+        // --no-sandbox is needed when running Chrome inside a container
+        process.env.CI ? '--no-sandbox' : null,
+        '--headless',
+        '--disable-dev-shm-usage',
+        '--disable-software-rasterizer',
+        '--mute-audio',
+        '--remote-debugging-port=0',
+        '--window-size=1440,900',
+      ].filter(Boolean),
+    },
+  },
+  middleware: [
+    require(__dirname + '/testem-proxy.js')('${appURL}')
+  ],
+};
+`,
+          );
+
+          let testResult = await project.execa('pnpm', [
+            'testem',
+            '--file',
+            'testem-dev.js',
+            'ci',
+          ]);
+          expect(testResult.exitCode).to.eq(0, testResult.output);
+        } finally {
+          server?.kill('SIGINT');
+        }
+      });
+
+      it('successfully optimizes deps', function () {
+        return project.execa('pnpm', ['vite', 'optimize', '--force']);
+      });
+
+      it('can run generators', function () {
+        return project.execa('pnpm', ['ember', 'g', 'route', 'fancy']);
+      });
+    });
+  }
+});

package/tests/fixture/app/components/custom-component.hbs

@@ -0,0 +1,3 @@
+<div id="custom-component">
+    I am a custom component
+</div>

package/tests/fixture/app/initializers/test-init.js

@@ -0,0 +1,6 @@
+export default {
+  name: 'test-init',
+  initialize(application) {
+    application.__test_init = 'coming from the initializer';
+  },
+};

package/tests/fixture/app/instance-initializers/test-instance-init.js

@@ -0,0 +1,6 @@
+export default {
+  name: 'test-instance-initializers',
+  initialize(instance) {
+    instance.__instance_test_init = 'set in the instance initializer';
+  },
+};

package/tests/fixture/app/router.js

@@ -0,0 +1,12 @@
+import EmberRouter from '@ember/routing/router';
+import config from 'test-app/config/environment';
+
+export default class Router extends EmberRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
+
+Router.map(function () {
+  this.route('styles');
+  this.route('custom-component');
+});

package/tests/fixture/app/routes/styles.js

@@ -0,0 +1,6 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+export default class StylesRoute extends Route {
+  @service router;
+}

package/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;
+}

package/tests/fixture/app/templates/application.hbs

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

package/tests/fixture/app/templates/custom-component.hbs

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

package/tests/fixture/app/templates/index.hbs

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

package/tests/fixture/app/templates/styles.hbs

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

package/tests/fixture/testem-proxy.js

@@ -0,0 +1,35 @@
+const httpProxy = require('http-proxy');
+
+/*
+  This can be installed as a testem middleware to make testem run against an
+  arbitrary real webserver at targetURL.
+
+  It allows testem to handle the well-known testem-specific paths and proxies
+  everything else, while rewriting the testem-added prefix out of your
+  "/tests/index.html" URL.
+*/
+
+module.exports = function testemProxy(targetURL) {
+  return function testemProxyHandler(app) {
+    const proxy = httpProxy.createProxyServer({
+      changeOrigin: true,
+      ignorePath: true,
+    });
+
+    proxy.on('error', (err, _req, res) => {
+      res && res.status && res.status(500).json(err);
+    });
+
+    app.all('*', (req, res, next) => {
+      let url = req.url;
+      if (url === '/testem.js' || url.startsWith('/testem/')) {
+        return next();
+      }
+      let m = /^(\/\d+)\/tests\/index.html/.exec(url);
+      if (m) {
+        url = url.slice(m[1].length);
+      }
+      proxy.web(req, res, { target: targetURL + url });
+    });
+  };
+}

package/tests/fixture/tests/acceptance/app-init-test.js

@@ -0,0 +1,13 @@
+import { module, test } from 'qunit';
+import { getApplication } from '@ember/test-helpers';
+import { setupApplicationTest } from 'test-app/tests/helpers';
+
+module('Acceptance | app route', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('loaded initializers /', async function (assert) {
+    const app = getApplication();
+    assert.strictEqual([...app._applicationInstances][0].__instance_test_init, 'set in the instance initializer');
+    assert.strictEqual(app.__test_init, 'coming from the initializer');
+  });
+});

package/tests/fixture/tests/acceptance/custom-component-test.js

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'test-app/tests/helpers';
+
+module('Acceptance | custom-component page', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /custom-component', async function (assert) {
+    await visit('/custom-component');
+
+    assert.strictEqual(currentURL(), '/custom-component');
+    assert.dom('#custom-component').containsText('I am a custom component');
+  });
+})

package/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 'test-app/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',
+    );
+  });
+});

package/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 'test-app/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!');
+  });
+});

package/tests/fixture-ts/app/initializers/test-init.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type Application from '@ember/application';
+
+export default {
+  name: 'test-init',
+  initialize(application: Application) {
+    (application as any).__test_init = 'coming from the initializer';
+  },
+};

package/tests/fixture-ts/app/instance-initializers/test-instance-init.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import type ApplicationInstance from '@ember/application/instance';
+
+export default {
+  name: 'test-instance-initializers',
+  initialize(instance: ApplicationInstance) {
+    (instance as any).__instance_test_init = 'set in the instance initializer';
+  },
+};

package/tests/fixture-ts/app/router.ts

@@ -0,0 +1,12 @@
+import EmberRouter from '@ember/routing/router';
+import config from 'test-app/config/environment';
+
+export default class Router extends EmberRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
+
+Router.map(function () {
+  this.route('styles');
+  this.route('custom-component');
+});

package/tests/fixture-ts/app/routes/styles.ts

@@ -0,0 +1,8 @@
+import Route from '@ember/routing/route';
+import { service } from '@ember/service';
+
+import type RouterService from '@ember/routing/router-service';
+
+export default class StylesRoute extends Route {
+  @service declare router: RouterService;
+}

package/tests/fixture-ts/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;
+}

package/tests/fixture-ts/app/templates/components/custom.gts

@@ -0,0 +1,5 @@
+<template>
+  <div id="custom-component">
+      I am a custom component
+  </div>
+</template>

package/tests/fixture-ts/app/templates/custom-component.gts

@@ -0,0 +1,5 @@
+import Custom from './components/custom';
+
+<template>
+  <Custom />
+</template>

package/tests/fixture-ts/app/templates/index.gts

@@ -0,0 +1,5 @@
+import { WelcomePage } from 'ember-welcome-page';
+
+<template>
+  <WelcomePage />
+</template>

package/tests/fixture-ts/app/templates/styles.gts

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

package/tests/fixture-ts/testem-proxy.js

@@ -0,0 +1,36 @@
+/* eslint-disable */
+const httpProxy = require('http-proxy');
+
+/*
+  This can be installed as a testem middleware to make testem run against an
+  arbitrary real webserver at targetURL.
+
+  It allows testem to handle the well-known testem-specific paths and proxies
+  everything else, while rewriting the testem-added prefix out of your
+  "/tests/index.html" URL.
+*/
+
+module.exports = function testemProxy(targetURL) {
+  return function testemProxyHandler(app) {
+    const proxy = httpProxy.createProxyServer({
+      changeOrigin: true,
+      ignorePath: true,
+    });
+
+    proxy.on('error', (err, _req, res) => {
+      res && res.status && res.status(500).json(err);
+    });
+
+    app.all('*', (req, res, next) => {
+      let url = req.url;
+      if (url === '/testem.js' || url.startsWith('/testem/')) {
+        return next();
+      }
+      let m = /^(\/\d+)\/tests\/index.html/.exec(url);
+      if (m) {
+        url = url.slice(m[1].length);
+      }
+      proxy.web(req, res, { target: targetURL + url });
+    });
+  };
+};

package/tests/fixture-ts/tests/acceptance/app-init-test.ts

@@ -0,0 +1,22 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { module, test } from 'qunit';
+import { getApplication } from '@ember/test-helpers';
+import { assert as debugAssert } from '@ember/debug';
+import { setupApplicationTest } from 'test-app/tests/helpers';
+
+module('Acceptance | app route', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('loaded initializers /', function (assert) {
+    const app = getApplication();
+
+    debugAssert(`App failed to initialize`, app);
+
+    assert.strictEqual(
+      ([...app._applicationInstances][0] as any).__instance_test_init,
+      'set in the instance initializer',
+    );
+    assert.strictEqual((app as any).__test_init, 'coming from the initializer');
+  });
+});

package/tests/fixture-ts/tests/acceptance/custom-component-test.ts

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'test-app/tests/helpers';
+
+module('Acceptance | custom-component page', function (hooks) {
+  setupApplicationTest(hooks);
+
+  test('visiting /custom-component', async function (assert) {
+    await visit('/custom-component');
+
+    assert.strictEqual(currentURL(), '/custom-component');
+    assert.dom('#custom-component').containsText('I am a custom component');
+  });
+})

package/tests/fixture-ts/tests/acceptance/styles-test.ts

@@ -0,0 +1,18 @@
+import { module, test } from 'qunit';
+import { visit } from '@ember/test-helpers';
+import { setupApplicationTest } from 'test-app/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',
+    );
+  });
+});

package/tests/fixture-ts/tests/acceptance/welcome-page-test.ts

@@ -0,0 +1,14 @@
+import { module, test } from 'qunit';
+import { visit, currentURL } from '@ember/test-helpers';
+import { setupApplicationTest } from 'test-app/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!');
+  });
+});

package/tests/helpers.mjs

@@ -0,0 +1,57 @@
+import assert from 'node:assert';
+
+import { beforeAll } from 'vitest';
+import { sync as resolveBinSync } from 'resolve-bin';
+import { execa } from 'execa';
+import tmp from 'tmp-promise';
+import { join } from 'path';
+import fixturify from 'fixturify';
+
+let localEmberCli = require.resolve('ember-cli/bin/ember');
+const blueprintPath = join(__dirname, '..');
+
+function findEmber() {
+  return resolveBinSync('ember-cli', { executable: 'ember' });
+}
+
+export const emberCli = findEmber();
+
+const appName = 'test-app';
+
+export function newProjectWithFixtures({
+  flags = [],
+  fixturePath,
+  name = appName,
+} = {}) {
+  let dir;
+
+  assert(fixturePath, `a fixturePath is required`);
+
+  beforeAll(async () => {
+    const tmpDir = (await tmp.dir()).path;
+    dir = join(tmpDir, name);
+    await execa({cwd: tmpDir})`${localEmberCli} new ${name} -b ${blueprintPath} --skip-git --pnpm ${flags}`;
+
+    let addonFixture = fixturify.readSync(fixturePath);
+    fixturify.writeSync(dir, addonFixture);
+
+    // Sync the lints for the fixtures with the project's config
+    await execa(`pnpm`, ['lint:fix'], {
+      cwd: dir,
+    });
+  });
+
+
+
+  return {
+    appName: () => name,
+    dir: () => dir,
+    $: (...args) => execa({ cwd: dir })(...args),
+    execa: (program, args, options = {}) => {
+      return execa(program, args, {
+        cwd: dir,
+        ...options,
+      });
+    },
+  };
+}

package/tests/typescript.test.mjs

@@ -0,0 +1,24 @@
+import { describe, it, expect } from 'vitest';
+import { join } from 'path';
+import { existsSync } from 'fs';
+import { newProjectWithFixtures } from './helpers.mjs';
+
+describe('typescript', function () {
+  let project = newProjectWithFixtures({
+    fixturePath: join(__dirname, 'fixture-ts'),
+    flags: ['--typescript'],
+  });
+
+  it('verify files', async function () {
+    expect(
+      existsSync(join(project.dir(), 'tsconfig.json')),
+      'the root tsconfig.json has been added',
+    );
+  });
+
+  it('glint passes', async function () {
+    let result = await project.execa('pnpm', ['glint']);
+
+    console.log(result.stdout);
+  });
+});

package/vitest.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vitest/config';
+
+const ONE_SECOND = 1_000;
+
+export default defineConfig({
+  test: {
+    testTimeout: 100 * ONE_SECOND,
+    hookTimeout: 150 * ONE_SECOND,
+  },
+});