feat(test): proper test setup

closes #11

Author: 3cp

app-min/test/my-app.spec.ext

@@ -7,32 +7,23 @@ import test from 'tape';
 // @if mocha
 import { expect } from 'chai';
 // @endif
-import Aurelia, { CustomElement } from 'aurelia';
+import { TestContext, TestConfiguration } from '@aurelia/testing';
+import Aurelia/* @if shadow-dom */, { CustomElement }/* @endif */ from 'aurelia';
 import { MyApp } from '../src/my-app';
 
-// @if babel
-function createAu(template, ...deps) {
-// @endif
-// @if typescript
-function createAu(template: string, ...deps: readonly unknown[]) {
-// @endif
-  const wrapper = CustomElement.define({name: 'wrapper', template});
-  document.body.appendChild(document.createElement('wrapper'));
-  return Aurelia.register(deps).app(wrapper);
-}
-
-function cleanup() {
-  const wrapper = document.querySelector('wrapper');
-  if (wrapper) {
-    wrapper.remove();
-  }
-}
-
 // @if ava || tape
 test('my-app: should render message', async t => {
-  const au = createAu('<my-app></my-app>', MyApp);
+  const ctx = TestContext.createHTMLTestContext();
+  const { container } = ctx;
+  const node = ctx.createElement('my-app');
+
+  const au = new Aurelia(container)
+    .register(TestConfiguration)
+    .app({ host: node, component: MyApp });
+
+  // const component = au.root.controller.bindingContext;
   await au.start().wait();
-  const node = document.querySelector('my-app');
+
   // @if shadow-dom
   // In Shadow DOM open mode, shadowRoot is also accessible through DOM API
   //   node.shadowRoot
@@ -55,22 +46,25 @@ test('my-app: should render message', async t => {
   t.equal(text.trim(), 'Hello World!');
   // @endif
   await au.stop().wait();
-  cleanup();
   // @if tape
   t.end();
   // @endif
 });
 // @endif
 // @if jasmine || jest || mocha
 describe('my-app', () => {
-  afterEach(() => {
-    cleanup();
-  });
-
   it('should render message', async () => {
-    const au = createAu('<my-app></my-app>', MyApp);
+    const ctx = TestContext.createHTMLTestContext();
+    const { container } = ctx;
+    const node = ctx.createElement('my-app');
+
+    const au = new Aurelia(container)
+      .register(TestConfiguration)
+      .app({ host: node, component: MyApp });
+
+    // const component = au.root.controller.bindingContext;
     await au.start().wait();
-    const node = document.querySelector('my-app');
+
     // @if shadow-dom
     // In Shadow DOM open mode, shadowRoot is also accessible through DOM API
     //   node.shadowRoot
@@ -93,7 +87,6 @@ describe('my-app', () => {
     expect(text.trim()).to.equal('Hello World!');
     // @endif
     await au.stop().wait();
-    cleanup();
   });
 });
 // @endif

common/package.json

@@ -14,6 +14,9 @@
     // @endif
   },
   "devDependencies": {
+    // @if !no-unit-tests
+    "@aurelia/testing": "dev",
+    // @endif
     "htmlhint": "^0.11.0",
     // @if less
     "lesshint": "^6.0.0",

common/test__if_not_no-unit-tests/setup.js

@@ -0,0 +1,44 @@
+import {
+  HTMLTestContext,
+  TestContext,
+} from '@aurelia/testing';
+import {
+  JitHtmlBrowserConfiguration
+} from '@aurelia/jit-html-browser';
+import {
+  BrowserScheduler
+} from '@aurelia/runtime-html-browser';
+import {
+  Reporter,
+  LogLevel,
+} from '@aurelia/kernel';
+
+Reporter.level = LogLevel.error;
+
+function createBrowserTestContext()/* @if typescript */: HTMLTestContext/* @endif */ {
+  return HTMLTestContext.create(
+    JitHtmlBrowserConfiguration,
+    window,
+    BrowserScheduler,
+    UIEvent,
+    Event,
+    CustomEvent,
+    Node,
+    Element,
+    HTMLElement,
+    HTMLDivElement,
+    Text,
+    Comment,
+    DOMParser,
+    CSSStyleSheet,
+    ShadowRoot
+  );
+}
+
+function initializeBrowserTestContext()/* @if typescript */: void/* @endif */ {
+  TestContext.createHTMLTestContext = createBrowserTestContext;
+  // Just trigger the HTMLDOM to be resolved once so it sets the DOM globals
+  TestContext.createHTMLTestContext().dom.createElement('div');
+}
+
+initializeBrowserTestContext();

dumber/gulpfile.js

@@ -64,7 +64,7 @@ const dr = dumber({
     // Kick off all test files.
     // Note dumber-module-loader requirejs call accepts regex which loads all matched module ids!
     // Note all module ids are relative to dumber option "src" (default to 'src') folder.
-    isTest && "requirejs([/^\\.\\.\\/test\\/.+\\.spec$/]);"
+    isTest && "requirejs(['../test/setup', /^\\.\\.\\/test\\/.+\\.spec$/]);"
   ],
   // @endif
 

webpack/test__if_jasmine_or_mocha_or_tape/all-spec.js

@@ -1,3 +1,3 @@
+require('./setup.js');
 const requireAll = (requireContext) => { requireContext.keys().map(requireContext); };
-
 requireAll(require.context('./', true, /spec\.(js|ts)$/));