Failed attempts at getting an aurelia component tested

Relates to webcomponents#50

libraries/aurelia/.babelrc

@@ -0,0 +1,5 @@
+{
+    "presets": [
+      "./.babelrc.js"
+    ]
+  }

libraries/aurelia/.babelrc.js

@@ -0,0 +1,7 @@
+// this file will be used by default by babel@7 once it is released
+module.exports = {
+  "plugins": [
+    "transform-decorators-legacy",
+    "transform-class-properties"
+  ]
+}

libraries/aurelia/karma.conf.js

@@ -17,10 +17,15 @@
 
 var webpack = require('webpack');
 var path = require('path');
+const { AureliaPlugin } = require('aurelia-webpack-plugin');
 
 module.exports = function(config) {
   config.set({
+    // entry: {
+    //   app: ['aurelia-bootstrapper']
+    // },
     plugins: [
+      new AureliaPlugin(),
       'karma-chrome-launcher',
       'karma-firefox-launcher',
       require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-mocha')),
@@ -29,7 +34,10 @@ module.exports = function(config) {
       require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-html-reporter')),
       require(path.resolve(__dirname, '../__shared__/karma-plugins/karma-custom-json-reporter'))
     ],
-    browsers: ['ChromeHeadless', 'FirefoxHeadless'], // run in Chrome and Firefox
+    browsers: [
+      'ChromeHeadless',
+      //'FirefoxHeadless'
+    ], // run in Chrome and Firefox
     customLaunchers: {
       FirefoxHeadless: {
         base: 'Firefox',
@@ -73,7 +81,13 @@ module.exports = function(config) {
             use: {
               loader: 'babel-loader'
             }
-          }
+          },
+          {
+            test: /\.html$/,
+            use: {
+              loader: 'html-loader'
+            }
+          },
         ]
       }
     },

libraries/aurelia/package.json

@@ -6,8 +6,11 @@
   "devDependencies": {
     "@types/mocha": "2.2.45",
     "@types/node": "8.0.55",
+    "aurelia-webpack-plugin": "^2.0.0-rc.5",
     "babel-core": "6.26.0",
     "babel-loader": "7.1.2",
+    "babel-plugin-transform-class-properties": "^6.24.1",
+    "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-preset-es2015": "6.24.1",
     "cross-env": "5.1.3",
     "expect": "1.20.2",
@@ -20,7 +23,11 @@
   },
   "dependencies": {
     "@webcomponents/webcomponentsjs": "1.0.19",
+    "aurelia-bootstrapper": "^2.1.1",
+    "aurelia-bootstrapper-webpack": "^1.1.0",
     "aurelia-framework": "1.1.5",
+    "aurelia-loader-webpack": "^2.1.0",
+    "aurelia-testing": "^1.0.0-beta.4.0.0",
     "core-js": "2.5.3",
     "reflect-metadata": "0.1.10"
   }

libraries/aurelia/src/basic-tests.js

@@ -1,10 +1,23 @@
+//import 'aurelia-loader-webpack';
 import expect from "expect";
+import { bootstrap } from 'aurelia-bootstrapper';
+import { StageComponent } from 'aurelia-testing';
 
-describe("basic support", function() {
-  describe("no children", function() {
-    it("can display a Custom Element with no children", function() {
-      this.weight = 3;
-      expect(true).toBe(true);
-    });
+describe('MyComponent', function() {
+  this.timeout(15000);
+
+  it('should render first name', function(done) {
+    let component = StageComponent
+      .withResources('src/my-component')
+      .inView('<my-component first-name.bind="firstName"></my-component>')
+      .boundTo({ firstName: 'Bob' });
+
+    component.create(bootstrap)
+      .then(() => {
+        const nameElement = document.querySelector('.firstName');
+        expect(nameElement.innerHTML).toBe('Bob');
+        done();
+      })
+      .catch(e => { console.log(e.toString()) });
   });
 });

libraries/aurelia/src/my-component.html

@@ -0,0 +1,3 @@
+<template>
+  <div class="firstName">${firstName}</div>
+</template>

libraries/aurelia/src/my-component.js

@@ -0,0 +1,5 @@
+import {bindable} from 'aurelia-framework';
+
+export class MyComponent {
+  @bindable firstName;
+}

libraries/aurelia/tests.webpack.js

@@ -17,4 +17,4 @@
 
 // Run basic and advanced tests through Karma
 require('./src/basic-tests.js');
-require('./src/advanced-tests.js');
+//require('./src/advanced-tests.js');