[日记]Angular Unit Test(mocha&chai&sinon)

主要参考这篇博客,配置了mocha,对文中废弃的写法进行了修改,并用一个demo做了component的单元测试,包含input、button的相关行为,写法其实与Angular自带的jasmine+Karma一样,只是换了一个测试框架。

install:

  • mocha (test runner)
  • mocha-webpack (build the tests with Webpack before running them)
  • chai (assertion library)
  • @types/chai (TypeScript definitions for chai)
  • sinon (mocking library)
  • @types/sinon (TypeScript definitions for sinon)
  • webpack-node-externals (exclude server-side node modules from the build)
  • jsdom (provides stubs for DOM API required by Angular - HTMLElement, XMLHttpRequest)
npm install --save-dev mocha mocha-webpack chai @types/chai sinon @types/sinon webpack-node-externals jsdom

目前mocha-webpack只支持mocha5以下,所以可能会提示:

npm WARN mocha-webpack@1.1.0 requires a peer of mocha@>=2.4.5 <=5 but none is installed. You must install peer dependencies yourself.
npm WARN mocha-webpack@1.1.0 requires a peer of webpack@^2.0.0 || ^3.0.0 but none is installed. You must install peer dependencies yourself.

手动把设mocha-webpack与mocha的版本为:

 "mocha": "5.0.0",
 "mocha-webpack": "2.0.0-beta.0",

config

  1. 在项目目录中添加config文件夹,与src同级,创建下面四个文件:
  • helpers.js
  • mocha-test-shim.js
  • webpack-mocha.js
  • webpack-test.js
  1. helpers.js:
var path = require('path');
var _root = path.resolve(__dirname, '..');
function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [_root].concat(args));
}
exports.root = root;

  1. mocha-test-shim.js
    这个文件改动较大。改动如下:
  • 注意顺序,require一定要放在最前面,zone的顺序最好不要乱,否则可能报错,而且测试中不能用async,否则会报ProxZone之类的错,所以对于async的测试怎么办还需要想办法;
  • 原来的require('zone.js/dist/zone')需要换成require('zone.js/dist/zone-node'),否则会报Zone 的reference error;
  • jsdom的写法改变了,测试文件中用的document、node、event等全部要在这里设定,通过global.xxx = window.xxx的方式,否则会出现xxx is not defined的错误。
    改动后的内容为:
require('core-js/es6');
require('core-js/es7/reflect');

require('zone.js/dist/zone-node');
require('zone.js/dist/long-stack-trace-zone');
require('zone.js/dist/proxy');
require('zone.js/dist/sync-test');
require('zone.js/dist/async-test');
require('zone.js/dist/fake-async-test');

var jsdom = require('jsdom')
const { JSDOM } = jsdom;
var document = new JSDOM('<!doctype html><html><body></body></html>');

global.window = document.window;
global.document = document.window.document;
global.HTMLElement = window.HTMLElement;
global.XMLHttpRequest = window.XMLHttpRequest;
global.Node = window.Node;
global.Event = window.Event;
// global.Text = window.Text;
// global.DOMTokenList = window.DOMTokenList;

var testing = require('@angular/core/testing');
var browser = require('@angular/platform-browser-dynamic/testing');

testing.TestBed.initTestEnvironment(browser.BrowserDynamicTestingModule, browser.platformBrowserDynamicTesting());
  1. webpack-test.js
    这个文件也有改动:
  • loaders换成rules;
  • 所有的loader都要写全称,并且用npm进行安装;
    npm install --save awesome-typescript-loader angular2-template-loader html-loader null-loader raw-loade
    改动后的内容如下:
var helpers = require('./helpers');

module.exports = {
  devtool: 'cheap-module-source-map',

  resolve: {
    extensions: ['*', '.ts', '.js']
  },

  module: {
    rules: [
      {
        test: /\.ts$/,
        loader: ['awesome-typescript-loader', 'angular2-template-loader']
      },
      {
        test: /\.html$/,
        loader: 'html-loader'
      },
      {
        test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
        loader: 'null-loader'
      },
      {
        test: /\.css$/,
        exclude: helpers.root('src', 'app'),
        loader: 'null-loader'
      },
      {
        test: /\.css$/,
        include: helpers.root('src', 'app'),
        loader: 'raw-loader'
      }
    ]
  }
}

  1. 在与src同级的目录中新建mocha-webpack.opts文件,主要用来设置webpack的,这样就不需要每次在命令行里输入所传的参数。文件内容如下:
--webpack-config config/webpack.mocha.js webpack --mode=development
--require config/mocha-test-shim.js
src/**/*.spec.ts

在scripts中加入:

"scripts": {
    ...
    "test": "mocha-webpack",
    ...
  },

demo

使用与Angular Form中相同的demo,在其基础上添加测试,这里主要抽象出对于input以及button等控件的测试,具体代码可以到repo来看。

设置TestBed,需要把用到的Module写到imports中

beforeEach((() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [
        ReactiveFormsModule,
        FormsModule,
      ],
    }).compileComponents();
  }));

  afterEach(() => {
    getTestBed().resetTestingModule();
  });

获取fixture以及component

也可以写在before里,复用,根据需求来。

const fixture = TestBed.createComponent(AppComponent);
const component = fixture.componentInstance;

获取html的dom元素:

querySelector中获取元素的方式与css一样,css的selector都可以用。

 const nameInput = fixture.nativeElement.querySelector('#nameInput');
 const zodiacSignInput = fixture.nativeElement.querySelector('#zodiacSignInput');

每次对内容进行修改后,记得fixture.detectChanges

有时候测试挂掉是因为没有detectChanges或者detectChanges的位置没有放对。

...
component.editMode = true;
fixture.detectChanges();
...

写断言

这里用的chai。

 expect(showNameInput.value).to.equal('Kate');

创建Event来模拟用户输入

注意,如果这里有Event,就要在mocha-test-shim.js中加global.Event=window.Event

...
const event = new Event('input');
nameInput.value = 'Kate';
zodiacSignInput.value = 'Cancer';
nameInput.dispatchEvent(event);
zodiacSignInput.dispatchEvent(event);
fixture.detectChanges();
...

常见Error:

  1. "before each" hook for "xxx":
    ** Error: Expected to be running in 'ProxyZone', but it was not found.**


    ProxZone problem

    解决:检查test中是否有async,如果有,删掉。

  2. Zone.__load_patch('ZoneAwarePromise', function (global, Zone, api) {
    ^
    ReferenceError: Zone is not defined
    解决:将mocha-test-shim.js文件中所有require的移动到最上边,zone换成zone-node
  3. ReferenceError: Event is not defined

​ at Context.<anonymous> (.tmp/mocha-webpack/1552397596789/webpack:/src/app/app.component.spec.ts:92:1)
解决:在mocha-test-shim.js中加global.Event=window.Event

repo:https://github.com/LiuKaixinHappy/angular-form-demo


好的mock store的博客:

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,511评论 1 330
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,495评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,595评论 0 225
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,558评论 0 190
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,715评论 3 270
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,672评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,112评论 2 291
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,837评论 0 181
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,417评论 0 228
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,928评论 2 232
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,316评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,773评论 2 234
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,253评论 3 220
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,827评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,440评论 0 180
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,523评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,583评论 2 249