So I wanted to put this out here for others that might want to use this tooling set.
What this is for:
Aurelia CLI Typescript Project
This is my setup for creating a cli project and using WallabyJS, Mocha, Chai, and Sinon.
You can add Jasmine (I assume Jest as well) using the cli options if desired as I haven’t found it interferred with anything.
Result should be:
Ability to run you unit tests live using WallabyJS and run the tests from the command line using ‘npm run test’.
Things to do:
Getting tests to run using ‘au test’
Requirements:
You need to npm install the following modules:
npm i mocha @types/mocha chai @types/chai sinon @types/sinon ts-node -D
Next steps:
You will need to create the following files. These are referenced from your projects base directory. Each files contents will follow:
wallaby.js (can also use wallaby.config.js)
tsconfig.test.json
test/mocha.opts
test/tshook.js
test/unit/app.spec.ts (updated with some simple tests to make sure everything is linked up)
wallaby.js contents
module.exports = function (wallaby)
{
return {
debug: true,
files: [
{ pattern: 'node_modules/chai/chai.js', instrument: false, load: true },
{ pattern: 'node_modules/sinon/pkg/sinon.js', instrument: false, load: true },
{ pattern: 'tsconfig.json' },
{ pattern: 'src/**/*.ts' },
{ pattern: 'src/**/*.html' },
{ pattern: 'test/**/*.ts' },
{ pattern: '!test/unit/**/*.spec.ts' }
],
tests: ['test/unit/**/*.spec.ts'],
env: {
type: 'node',
runner: 'node'
},
testFramework: 'mocha',
compilers: {
'**/*.ts': wallaby.compilers.typeScript({
module: 'commonjs'
})
},
//executed in test framework context
setup: function (wallaby)
{
}
};
};
tsconfig.test.json contents (copy of base tsconfig.json with target and module type changed)
{
"compileOnSave": false,
"compilerOptions": {
"sourceMap": true,
"target": "es6",
"module": "commonjs",
"declaration": false,
"noImplicitAny": false,
"removeComments": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"allowJs": true,
"moduleResolution": "node",
"lib": [
"es2017",
"dom"
],
"baseUrl": "src"
},
"include": [
"./src/**/*.ts",
"./test/**/*.ts",
"./custom_typings/**/*.d.ts"
],
"atom": {
"rewriteTsconfig": false
}
}
test/mocha.opts contents
--require ./test/tshook
--timeout 6000
--slow 1500
--watch-extensions ts
./test/unit/**/*.spec.ts
test/tshook.js contents
require("ts-node").register({
project: "tsconfig.test.json",
});
test/unit/app.spec.ts content
import { App } from '../../src/app';
import { expect } from 'chai';
import { SinonStatic } from 'sinon';
let sinon: SinonStatic = require('sinon');
describe('the app', () =>
{
it('says hello with chai expect', () =>
{
expect(new App().message).to.equal('Hello World!');
});
});
function once(fn)
{
var returnValue, called = false;
return function ()
{
if (!called)
{
called = true;
returnValue = fn.apply(this, arguments);
}
return returnValue;
};
}
describe('sinon accessable test', () =>
{
it('calls the original function', function ()
{
var callback = sinon.fake();
var proxy = once(callback);
proxy();
expect(callback.called).to.equal(true);
});
});
Starting WallabyJS:
I am using VS Code so the instructions are for that environment.
Open the project in code.
Use CTL-SHIFT-P to open the Command Palette and selet ‘wallaby.js: Start’
It might prompt you to select a configuration file, though it should just auto-select it. If not select the wallaby.js file we created earlier.
In the lower right of VS Code you should see the Wallaby activity indicator and eventually the failing and passing test count, which if you used my sample above should display 0 failing, 2 passing.
Using the command line:
Open a command line shell.
Type in ‘npm run test’
The tests will run and display the results showing passing and failing tests.
If you find any errors, or suggestions let me know.
Shoutout to @zewa666 for the mocha setup.