testing: switch to Angular CLI testing infrastructure, generate screenshots in e2e

This commit is contained in:
Jason Dreyzehner 2018-02-09 11:54:15 -05:00
parent c630c5994a
commit dbb87de4ce
18 changed files with 527 additions and 221 deletions

63
.angular-cli.json Normal file
View File

@ -0,0 +1,63 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"project": {
"name": "copay"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": ["assets", "favicon.ico"],
"index": "index.html",
"main": "app/main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "../tsconfig.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "app",
"scripts": [],
"environmentSource": "environments/environment.ts",
"environments": {
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"lint": [
{
"project": "src/tsconfig.app.json",
"exclude": "**/node_modules/**"
},
{
"project": "src/tsconfig.spec.json",
"exclude": "**/node_modules/**"
},
{
"project": "e2e/tsconfig.e2e.json",
"exclude": "**/node_modules/**"
}
],
"test": {
"karma": {
"config": "./karma.conf.js"
},
"codeCoverage": {
"exclude": [
"src/polyfills.ts",
"src/test.ts",
"src/mocks.ts",
"**/*.mock.ts",
"**/node_modules/**"
]
}
},
"defaults": {
"styleExt": "css",
"component": {}
}
}

2
.gitignore vendored
View File

@ -45,10 +45,12 @@ node_modules/
tmp/
temp/
hooks/
junitresults.xml
platforms/
plugins/
plugins/android.json
plugins/ios.json
screenshots/
www/
$RECYCLE.BIN/

1
.prettierignore Normal file
View File

@ -0,0 +1 @@
package.json

14
e2e/app.e2e-spec.ts Normal file
View File

@ -0,0 +1,14 @@
import { browser, element, by } from 'protractor';
import { takeScreenshot } from './screenshots';
describe('Copay', () => {
beforeEach(() => {
browser.get('');
});
it('Should display the logo on the landing view', async () => {
takeScreenshot('landing.png');
const present = await element(by.css('#logo')).isPresent();
expect(present).toEqual(true);
});
});

27
e2e/screenshots.ts Normal file
View File

@ -0,0 +1,27 @@
import { browser } from 'protractor';
import { existsSync, mkdirSync, writeFile } from 'fs';
export async function takeScreenshot(name: string) {
const dir = 'screenshots';
if (!existsSync(dir)) {
mkdirSync(dir);
}
const config = await browser.getProcessedConfig();
const instance = config['capabilities']['chromeOptions'];
const deviceName = instance['mobileEmulation']
? instance['mobileEmulation']['deviceName'].replace(/\s+/g, '')
: await nameFromWindowSize();
const pngData = await browser.takeScreenshot();
const path = `${dir}/${deviceName}_${name}`;
writeFile(path, pngData, { encoding: 'base64' }, () => {
console.log(`File written: ${path}`);
});
}
async function nameFromWindowSize() {
const size = await browser.driver
.manage()
.window()
.getSize();
return `${size.width}x${size.height}`;
}

14
e2e/tsconfig.e2e.json Normal file
View File

@ -0,0 +1,14 @@
{
"extends": "../tsconfig.ng-cli.json",
"compilerOptions": {
"outDir": "../out-tsc/e2e",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}

60
karma.conf.js Normal file
View File

@ -0,0 +1,60 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-junit-reporter'),
require('karma-coverage-istanbul-reporter'),
require('@angular/cli/plugins/karma')
],
client: {
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
files: [{ pattern: './src/test.ts', watched: false }],
preprocessors: {
'./src/test.ts': ['@angular/cli']
},
mime: {
'text/x-typescript': ['ts', 'tsx']
},
coverageIstanbulReporter: {
reports: ['html', 'lcovonly'],
fixWebpackSourcePaths: true
},
angularCli: {
environment: 'dev'
},
reporters:
config.angularCli && config.angularCli.codeCoverage
? ['progress', 'coverage-istanbul']
: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['ChromeNoSandbox'],
// browsers: ['ChromeNoSandboxHeadless'],
singleRun: false,
junitReporter: {
outputDir: process.env.JUNIT_REPORT_PATH,
outputFile: process.env.JUNIT_REPORT_NAME,
useBrowserName: false
},
customLaunchers: {
ChromeNoSandbox: {
base: 'Chrome',
flags: ['--no-sandbox']
},
ChromeNoSandboxHeadless: {
base: 'ChromeHeadless',
flags: ['--no-sandbox']
}
}
});
};

View File

@ -22,7 +22,7 @@
"url": "https://github.com/bitpay/copay/issues"
},
"scripts": {
"postinstall": "sed -i -e \"s/.*require(...\\/...);//g\" node_modules/asn1.js-rfc5280/index.js;",
"postinstall": "sed -i -e \"s/.*require(...\\/...);//g\" node_modules/asn1.js-rfc5280/index.js && npm run e2e-update",
"start": "ionic serve --no-open",
"clean": "trash platforms && trash plugins && trash config.xml",
"prepare:copay": "npm run clean && npm run apply:copay && cordova prepare && npm run fix:fcm",
@ -32,8 +32,12 @@
"lint": "ionic-app-scripts lint",
"ionic:build": "ionic-app-scripts build",
"ionic:serve": "ionic-app-scripts serve",
"test": "karma start ./test-config/karma.conf.js",
"test-ci": "karma start ./test-config/karma.conf.js --single-run",
"test": "ng test",
"test-coverage": "ng test --code-coverage",
"test-ci": "ng test --watch=false --code-coverage --no-progress",
"e2e": "npm run ionic:build && npm run e2e-test",
"e2e-test": "protractor",
"e2e-update": "webdriver-manager update --gecko false",
"extract": "ngx-translate-extract --input ./src --output ./src/assets/i18n/app.pot --clean --sort --format pot",
"start:ios": "npm run build:ios && npm run open:ios",
"start:android": "npm run run:android",
@ -85,16 +89,17 @@
"bitcore-wallet-client": "^6.5.0",
"bitauth": "git@github.com:matiu/bitauth.git",
"buffer-compare": "^1.1.1",
"cordova": "^8.0.0",
"cordova-android": "7.0.0",
"cordova-clipboard": "^1.1.1",
"cordova-custom-config": "^5.0.2",
"cordova-ios": "4.5.4",
"cordova-plugin-android-fingerprint-auth": "^1.4.2",
"cordova-plugin-compat": "^1.2.0",
"cordova-plugin-customurlscheme": "https://github.com/cmgustavo/Custom-URL-scheme.git#v4.0",
"cordova-plugin-customurlscheme": "git+https://github.com/cmgustavo/Custom-URL-scheme.git#v4.0",
"cordova-plugin-device": "^2.0.1",
"cordova-plugin-dialogs": "^2.0.1",
"cordova-plugin-fcm": "https://github.com/cmgustavo/cordova-plugin-fcm.git#v4.0",
"cordova-plugin-fcm": "git+https://github.com/cmgustavo/cordova-plugin-fcm.git#v4.0",
"cordova-plugin-file": "^6.0.1",
"cordova-plugin-globalization": "^1.0.9",
"cordova-plugin-inappbrowser": "^2.0.2",
@ -110,7 +115,7 @@
"cordova-plugin-whitelist": "^1.3.3",
"cordova-plugin-x-socialsharing": "^5.2.1",
"cordova-plugin-x-toast": "^2.6.0",
"es6-promise-plugin": "^4.2.2",
"es6-promise-plugin": "^4.1.0",
"ionic-angular": "^3.9.2",
"ionic-plugin-keyboard": "^2.2.1",
"ionicons": "^3.0.0",
@ -125,24 +130,31 @@
"zone.js": "^0.8.19"
},
"devDependencies": {
"@angular/cli": "^1.6.3",
"@angular/cli": "^1.6.8",
"@biesbjerg/ngx-translate-extract": "^2.3.4",
"@ionic/app-scripts": "^3.1.7",
"@types/chrome": "^0.0.57",
"@types/cordova-plugin-qrscanner": "^1.0.31",
"@types/jasmine": "^2.8.3",
"@types/jasmine": "^2.8.6",
"@types/jasminewd2": "^2.0.3",
"@types/lodash": "^4.14.92",
"angular2-template-loader": "^0.6.2",
"codecov": "^3.0.0",
"connect": "^3.6.5",
"fs-extra": "^4.0.3",
"html-loader": "^0.5.4",
"ionic": "3.19.1",
"jasmine-core": "^2.8.0",
"ionic-mocks": "^1.2.1",
"jasmine-core": "^2.99.1",
"jasmine-reporters": "^2.3.0",
"jasmine-spec-reporter": "^4.2.1",
"karma": "^2.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^1.4.1",
"karma-jasmine": "^1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"karma-junit-reporter": "^1.2.0",
"karma-mocha-reporter": "^2.2.5",
"karma-phantomjs-launcher": "^1.0.4",
"karma-remap-istanbul": "^0.6.0",
@ -151,14 +163,15 @@
"null-loader": "^0.1.1",
"path": "^0.12.7",
"plist": "^2.1.0",
"protractor": "^5.3.0",
"serve-static": "^1.13.2",
"shelljs": "^0.3.0",
"trash-cli": "^1.4.0",
"ts-loader": "^3.2.0",
"ts-node": "^4.1.0",
"tslint": "^5.8.0",
"tslint-eslint-rules": "^4.1.1",
"typescript": "^2.4.2",
"webpack": "^3.10.0"
"typescript": "^2.4.2"
},
"cordova": {
"plugins": {

128
protractor.conf.js Normal file
View File

@ -0,0 +1,128 @@
exports.config = {
allScriptsTimeout: 11000,
specs: ['./e2e/**/*.e2e-spec.ts'],
// Available deviceNames for mobileEmulation: https://chromium.googlesource.com/chromium/src/+/master/third_party/WebKit/Source/devtools/front_end/emulated_devices/module.json
multiCapabilities: [
{
browserName: 'chrome',
chromeOptions: {
args: [
'--headless',
'--high-dpi-support=1',
'--force-device-scale-factor=2',
'--window-size=1024,720'
]
}
},
{
browserName: 'chrome',
chromeOptions: {
args: [
'--headless',
'--high-dpi-support=1',
'--force-device-scale-factor=2',
'--window-size=800,600'
]
}
},
{
browserName: 'chrome',
chromeOptions: {
args: [
'--headless',
'--high-dpi-support=1',
'--force-device-scale-factor=2',
'--window-size=1920,1080'
]
}
},
{
browserName: 'chrome',
chromeOptions: {
mobileEmulation: {
deviceName: 'iPhone X'
},
args: ['--headless']
}
},
{
browserName: 'chrome',
chromeOptions: {
mobileEmulation: {
deviceName: 'iPhone 8'
},
args: ['--headless']
}
},
{
browserName: 'chrome',
chromeOptions: {
mobileEmulation: {
deviceName: 'iPad'
},
args: ['--headless']
}
},
{
browserName: 'chrome',
chromeOptions: {
mobileEmulation: {
deviceName: 'iPad Pro'
},
args: ['--headless']
}
},
{
browserName: 'chrome',
chromeOptions: {
mobileEmulation: {
deviceName: 'Nexus 6P'
},
args: ['--headless']
}
},
{
browserName: 'chrome',
chromeOptions: {
mobileEmulation: {
deviceName: 'Nexus 5X'
},
args: ['--headless']
}
}
],
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
useAllAngular2AppRoots: true,
beforeLaunch: function() {
require('connect')()
.use(require('serve-static')('www'))
.listen(4200);
},
onPrepare() {
require('ts-node').register({
project: 'e2e/tsconfig.e2e.json'
});
var jasmineReporters = require('jasmine-reporters');
jasmine.getEnv().addReporter(
new jasmineReporters.TerminalReporter({
verbosity: 3,
color: true,
showStack: true
})
);
jasmine.getEnv().addReporter(
new jasmineReporters.JUnitXmlReporter({
savePath: process.env.JUNIT_REPORT_PATH,
outputFile: process.env.JUNIT_REPORT_NAME,
consolidateAll: true
})
);
}
};

78
src/polyfills.ts Normal file
View File

@ -0,0 +1,78 @@
/* tslint:disable */
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
* Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
*
* Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import 'core-js/es6/symbol';
// import 'core-js/es6/object';
// import 'core-js/es6/function';
// import 'core-js/es6/parse-int';
// import 'core-js/es6/parse-float';
// import 'core-js/es6/number';
// import 'core-js/es6/math';
// import 'core-js/es6/string';
// import 'core-js/es6/date';
// import 'core-js/es6/array';
// import 'core-js/es6/regexp';
// import 'core-js/es6/map';
// import 'core-js/es6/weak-map';
// import 'core-js/es6/set';
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.
/** IE10 and IE11 requires the following for the Reflect API. */
// import 'core-js/es6/reflect';
/** Evergreen browsers require these. **/
// Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
import 'core-js/es7/reflect';
/**
* Required to support Web Animations `@angular/platform-browser/animations`.
* Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
**/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
/***************************************************************************************************
* Zone JS is required by Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/
/**
* Date, currency, decimal and percent pipes.
* Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
*/
// import 'intl'; // Run `npm install --save intl`.
/**
* Need to import at least one locale-data with intl.
*/
// import 'intl/locale-data/jsonp/en';

View File

@ -1,21 +1,12 @@
import { TestBed, inject } from '@angular/core/testing';
import { DerivationPathHelperProvider } from './derivation-path-helper';
describe('Derivation Path Helper Provider', () => {
let service: DerivationPathHelperProvider;
beforeEach(() => {
TestBed.configureTestingModule({
providers: [
DerivationPathHelperProvider
]
});
service = new DerivationPathHelperProvider();
});
beforeEach(inject([DerivationPathHelperProvider], (pathHelper: DerivationPathHelperProvider) => {
service = pathHelper;
}));
/* default paths */
it('should get successfully the default derivation paths for livenet and testnet networks', () => {
const livenet = service.default;

88
src/test.ts Normal file
View File

@ -0,0 +1,88 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy.js';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { getTestBed, TestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
import { TranslateModule, TranslateService } from '@ngx-translate/core';
import {
App,
Config,
DeepLinker,
Form,
IonicModule,
Keyboard,
DomController,
MenuController,
NavController,
Platform
} from 'ionic-angular';
import { ConfigMock, PlatformMock } from 'ionic-mocks';
declare const require: any;
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context: any = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
export class TestUtils {
public static beforeEachCompiler(
components: Array<any>
): Promise<{ fixture: any; instance: any }> {
return TestUtils.configureIonicTestingModule(components)
.compileComponents()
.then(() => {
let fixture: any = TestBed.createComponent(components[0]);
return {
fixture: fixture,
instance: fixture.debugElement.componentInstance
};
});
}
public static configureIonicTestingModule(
components: Array<any>
): typeof TestBed {
return TestBed.configureTestingModule({
declarations: [...components],
providers: [
App,
Form,
Keyboard,
DomController,
MenuController,
NavController,
{ provide: Platform, useFactory: () => PlatformMock.instance() },
{ provide: Config, useFactory: () => ConfigMock.instance() },
{ provide: DeepLinker, useFactory: () => ConfigMock.instance() }
],
imports: [FormsModule, IonicModule, ReactiveFormsModule, TranslateModule]
});
}
// http://stackoverflow.com/questions/2705583/how-to-simulate-a-click-with-javascript
public static eventFire(el: any, etype: string): void {
if (el.fireEvent) {
el.fireEvent('on' + etype);
} else {
let evObj: any = document.createEvent('Events');
evObj.initEvent(etype, true, false);
el.dispatchEvent(evObj);
}
}
}

20
src/tsconfig.spec.json Normal file
View File

@ -0,0 +1,20 @@
{
"extends": "../tsconfig.ng-cli.json",
"compilerOptions": {
"outDir": "../out-tsc/spec",
"baseUrl": "./",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"node"
]
},
"files": [
"test.ts"
],
"include": [
"**/*.spec.ts",
"**/*.d.ts"
]
}

View File

@ -1,21 +0,0 @@
Error.stackTraceLimit = Infinity;
require('core-js/es6');
require('core-js/es7/reflect');
require('zone.js/dist/zone');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/jasmine-patch');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');
var appContext = require.context('../src', true, /\.spec\.ts/);
appContext.keys().forEach(appContext);
var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');
testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());

View File

@ -1,48 +0,0 @@
var webpackConfig = require('./webpack.test.js');
module.exports = function(config) {
var _config = {
basePath: '',
frameworks: ['jasmine'],
files: [{
pattern: './karma-test-shim.js',
watched: true
}],
preprocessors: {
'./karma-test-shim.js': ['webpack', 'sourcemap']
},
mime: {
'text/x-typescript': ['ts','tsx']
},
webpack: webpackConfig,
webpackMiddleware: {
stats: 'errors-only'
},
webpackServer: {
noInfo: true
},
browserConsoleLogOptions: {
level: 'log',
format: '%b %T: %m',
terminal: true
},
reporters: ['mocha', 'kjhtml', 'dots'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['PhantomJS'],
singleRun: false
};
config.set(_config);
};

View File

@ -1,79 +0,0 @@
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
export class PlatformMock {
public ready(): Promise<{String}> {
return new Promise((resolve) => {
resolve('READY');
});
}
public getQueryParam() {
return true;
}
public registerBackButtonAction(fn: Function, priority?: number): Function {
return (() => true);
}
public hasFocus(ele: HTMLElement): boolean {
return true;
}
public doc(): HTMLDocument {
return document;
}
public is(): boolean {
return true;
}
public getElementComputedStyle(container: any): any {
return {
paddingLeft: '10',
paddingTop: '10',
paddingRight: '10',
paddingBottom: '10',
};
}
public onResize(callback: any) {
return callback;
}
public registerListener(ele: any, eventName: string, callback: any): Function {
return (() => true);
}
public win(): Window {
return window;
}
public raf(callback: any): number {
return 1;
}
public timeout(callback: any, timer: number): any {
return setTimeout(callback, timer);
}
public cancelTimeout(id: any) {
// do nothing
}
public getActiveElement(): any {
return document['activeElement'];
}
}
export class StatusBarMock extends StatusBar {
styleDefault() {
return;
}
}
export class SplashScreenMock extends SplashScreen {
hide() {
return;
}
}

View File

@ -1,41 +0,0 @@
var webpack = require('webpack');
var path = require('path');
module.exports = {
devtool: 'inline-source-map',
resolve: {
extensions: ['.ts', '.js']
},
module: {
rules: [{
test: /\.ts$/,
loaders: [{
loader: 'ts-loader'
}, 'angular2-template-loader']
},
{
test: /\.html$/,
loader: 'html-loader?attrs=false'
},
{
test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null-loader'
}
]
},
plugins: [
new webpack.ContextReplacementPlugin(
// The (\\|\/) piece accounts for path separators in *nix and Windows
/(ionic-angular)|(angular(\\|\/)core(\\|\/)@angular)/,
root('./src'), // location of your src
{} // a map of your routes
)
]
};
function root(localPath) {
return path.resolve(__dirname, localPath);
}

View File

@ -1,18 +1,14 @@
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "",
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
]
"typeRoots": ["node_modules/@types"],
"lib": ["es2017", "dom"]
}
}
}