Yosuke Kurami Quramy

Performance of unit testing Angular app

I'm loving Angular, but running unit tests on Karma gets my nerves. It's too slow for me.

In this post, I explain mechanics under Angular's testing module and how to improve the performance.

To evaluate Angular unit testing performance I captured the CPU profiling with running Karma.

I want a tsssercmd to extract a selected identifier (function, const, class, type, etc...) to other new file.

{
  command: "extractAndCreateFile",
  file: "./main.js",
  location: {
    line: 2, col: 10
  },
 toFile: "./sum.js"

実際にBFFの開発向けUIは、開発者以外に使ってもらってどのようなコメントがありましたか？

「便利」と言ってもらえたのがやはり一番うれしかったですね。別の事例だと、社外のシステムへの外接部分について、必ずしもテスト環境から接続可能とは限らないケースで、API呼び出しをフックできる機能としても使えた、というのが好評でした。

フロントエンドが使いやすいように API を定義することで、バックエンド側の実装に影響を与えてしまうことはありましたか？

BFFの存在意義の１つに「マイクロサービスを開発しやすく」がある以上、なるべくそういうケースとならないように注意はしていますが、満足にできているかはわからないですね。。。もしかしたら、より良いAPI粒度が存在するのに、バックエンドがある程度我慢してくれている部分もあるかもしれませんね。。。

	var path = require("path");
	var loadChildrenRegex = /loadChildren\s:(.)$/gm;
	var ngfactoryRegex = /\.ngfactory(\.\|$)/;
	var stringRegex = /(['"])((?:[^\\]\\\1\|.)*?)\1/g;

	function replacePath(str, addSuffix) {
	return str.replace(stringRegex, function(match, quote, pathAndFragment) {
	var tmp = pathAndFragment.split("#");
	var fpath = addSuffix ? tmp[0] + ".ngfactory" : tmp[0];
	var moduleName;

	import * as ts from 'typescript/lib/tsserverlibrary';

	const { buildClientSchema } = require('graphql');
	const { getAutocompleteSuggestions } = require('graphql-language-service-interface');

	// TODO replace the result by introspection query
	const introspectionJson = require('../schema.json');
	const schema = buildClientSchema(introspectionJson.data);

	function findNode(sourceFile: ts.SourceFile, position: number): ts.Node \| undefined {

	import { SchemaClassFactory } from '@ngtools/json-schema';

	// Input JSON schema json file
	const factory = SchemaClassFactory<any>(require('@angular/cli/lib/config/schema.json'));

	const schemaClass = new factory(null);

	// Output .d.ts
	console.log(schemaClass.$$serialize('text/x.dts'));

	type RT<F> = F extends (...args: any[]) => infer R ? R : never;

	interface Proxy<T, K extends keyof T> {
	returnValue(value: RT<T[K]>): this;
	}
	declare function spyOn<T, K extends keyof T>(obj: T, methodName: K): {
	and: Proxy<T, K>;
	};

	const serviceToTest = {

	interface Observable<T> {
	subscribe(cb: (v: T) => void): void;
	}

	type StreamValue<S> = S extends Observable<infer T> ? T : never;

	type Unwrap<S> = { [P in keyof S]: StreamValue<S[P]> };

	declare function combineLatest<U extends Observable<any>[]>(...streams: U): Observable<Unwrap<U>>;

	require('babel-polyfill');
	const { createStore, applyMiddleware, bindActionCreators, compose } = require('redux');
	const { enableBatching, batchActions, batchDispatchMiddleware, BATCH } = require('redux-batched-actions');
	const thunk = require('redux-thunk').default;
	const { fork, createMiddleware } = require('redux-spork');

	function main() {

	// reducer
	const count = (prev = 0, action) => {