使用 Gulp Webpack Karma 和 Jasmine 設定測試
我們需要的第一件事是告訴 karma 使用 Webpack 來讀取我們為 webpack 引擎設定的配置。在這裡，我使用的是 babel，因為我在 ES6 中編寫程式碼，你可以將其更改為其他版本，例如 Typescript。或者我使用 Pug（以前的 Jade）模板，你沒有必要。
不過，策略仍然是一樣的。
所以，這是一個 webpack 配置：
const webpack = require("webpack");
let packConfig = {
entry: {},
output: {},
plugins:[
new webpack.DefinePlugin({
ENVIRONMENT: JSON.stringify('test')
})
],
module: {
loaders: [
{
test: /\.js$/,
exclude:/(node_modules|bower_components)/,
loader: "babel",
query:{
presets:["es2015", "angular2"]
}
},
{
test: /\.woff2?$|\.ttf$|\.eot$|\.svg$/,
loader: "file"
},
{
test: /\.scss$/,
loaders: ["style", "css", "sass"]
},
{
test: /\.pug$/,
loader: 'pug-html-loader'
},
]
},
devtool : 'inline-cheap-source-map'
};
module.exports = packConfig;
然後，我們需要一個 karma.config.js 檔案來使用該 webpack 配置：
const packConfig = require("./webpack.config.js");
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
exclude:[],
files: [
{pattern: './karma.shim.js', watched: false}
],
preprocessors: {
"./karma.shim.js":["webpack"]
},
webpack: packConfig,
webpackServer: {noInfo: true},
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
browsers: ['PhantomJS'],
concurrency: Infinity,
autoWatch: false,
singleRun: true
});
};
到目前為止，我們已經告訴 Karma 使用 webpack，我們告訴它從一個名為 karma.shim.js 的檔案開始。這個檔案將作為 webpack 的起點。webpack 將讀取此檔案並使用 import 和 require 語句收集所有依賴項並執行我們的測試。
現在，讓我們看一下 karma.shim.js 檔案：
// Start of ES6 Specific stuff
import "es6-shim";
import "es6-promise";
import "reflect-metadata";
// End of ES6 Specific stuff
import "zone.js/dist/zone";
import "zone.js/dist/long-stack-trace-zone";
import "zone.js/dist/jasmine-patch";
import "zone.js/dist/async-test";
import "zone.js/dist/fake-async-test";
import "zone.js/dist/sync-test";
import "zone.js/dist/proxy-zone";
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/of';
Error.stackTraceLimit = Infinity;
import {TestBed} from "@angular/core/testing";
import { BrowserDynamicTestingModule, platformBrowserDynamicTesting} from "@angular/platform-browser-dynamic/testing";
TestBed.initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting());
let testContext = require.context('../src/app', true, /\.spec\.js/);
testContext.keys().forEach(testContext);
本質上，我們從角度核心測試匯入 TestBed ，並啟動環境，因為它只需要為我們的所有測試啟動一次。然後，我們以遞迴方式瀏覽 src / app 目錄並讀取以 .spec.js 結尾的每個檔案並將它們提供給 testContext，以便它們執行。
我通常會嘗試將我的測試與類放在同一個地方。Personat 味道，它使我更容易匯入依賴和重構測試與類。但是如果你想把你的測試放在其他地方，例如在 src / test 目錄下，這就是你的機會。在 karma.shim.js 檔案中更改最後一行。
完善。剩下什麼？啊，使用我們上面做的 karma.config.js 檔案的 gulp 任務：
gulp.task("karmaTests",function(done){
var Server = require("karma").Server;
new Server({
configFile : "./karma.config.js",
singleRun: true,
autoWatch: false
}, function(result){
return result ? done(new Error(`Karma failed with error code ${result}`)):done();
}).start();
});
我現在使用我們建立的配置檔案啟動伺服器，告訴它執行一次，不要注意更改。我發現這可以讓我更好地適應我，因為測試只有在我準備好執行時才會執行，但當然如果你想要不同，你知道在哪裡可以改變。
作為我的最終程式碼示例，這裡是 Angular 2 教程 Tour of Heroes 的一組測試。
import {
TestBed,
ComponentFixture,
async
} from "@angular/core/testing";
import {AppComponent} from "./app.component";
import {AppModule} from "./app.module";
import Hero from "./hero/hero";
describe("App Component", function () {
beforeEach(()=> {
TestBed.configureTestingModule({
imports: [AppModule]
});
this.fixture = TestBed.createComponent(AppComponent);
this.fixture.detectChanges();
});
it("Should have a title", async(()=> {
this.fixture.whenStable().then(()=> {
expect(this.fixture.componentInstance.title).toEqual("Tour of Heros");
});
}));
it("Should have a hero", async(()=> {
this.fixture.whenStable().then(()=> {
expect(this.fixture.componentInstance.selectedHero).toBeNull();
});
}));
it("Should have an array of heros", async(()=>
this.fixture.whenStable().then(()=> {
const cmp = this.fixture.componentInstance;
expect(cmp.heroes).toBeDefined("component should have a list of heroes");
expect(cmp.heroes.length).toEqual(10, "heroes list should have 10 members");
cmp.heroes.map((h, i)=> {
expect(h instanceof Hero).toBeTruthy(`member ${i} is not a Hero instance. ${h}`)
});
})));
it("Should have one list item per hero", async(()=>
this.fixture.whenStable().then(()=> {
const ul = this.fixture.nativeElement.querySelector("ul.heroes");
const li = Array.prototype.slice.call(
this.fixture.nativeElement.querySelectorAll("ul.heroes>li"));
const cmp = this.fixture.componentInstance;
expect(ul).toBeTruthy("There should be an unnumbered list for heroes");
expect(li.length).toEqual(cmp.heroes.length, "there should be one li for each hero");
li.forEach((li, i)=> {
expect(li.querySelector("span.badge"))
.toBeTruthy(`hero ${i} has to have a span for id`);
expect(li.querySelector("span.badge").textContent.trim())
.toEqual(cmp.heroes[i].id.toString(), `hero ${i} had wrong id displayed`);
expect(li.textContent)
.toMatch(cmp.heroes[i].name, `hero ${i} has wrong name displayed`);
});
})));
it("should have correct styling of hero items", async(()=>
this.fixture.whenStable().then(()=> {
const hero = this.fixture.nativeElement.querySelector("ul.heroes>li");
const win = hero.ownerDocument.defaultView ||hero.ownerDocument.parentWindow;
const styles = win.getComputedStyle(hero);
expect(styles["cursor"]).toEqual("pointer", "cursor should be pointer on hero");
expect(styles["borderRadius"]).toEqual("4px", "borderRadius should be 4px");
})));
it("should have a click handler for hero items",async(()=>
this.fixture.whenStable().then(()=>{
const cmp = this.fixture.componentInstance;
expect(cmp.onSelect)
.toBeDefined("should have a click handler for heros");
expect(this.fixture.nativeElement.querySelector("input.heroName"))
.toBeNull("should not show the hero details when no hero has been selected");
expect(this.fixture.nativeElement.querySelector("ul.heroes li.selected"))
.toBeNull("Should not have any selected heroes at start");
spyOn(cmp,"onSelect").and.callThrough();
this.fixture.nativeElement.querySelectorAll("ul.heroes li")[5].click();
expect(cmp.onSelect)
.toHaveBeenCalledWith(cmp.heroes[5]);
expect(cmp.selectedHero)
.toEqual(cmp.heroes[5], "click on hero should change hero");
})
));
});
值得注意的是，我們如何使用 beforeEach() 配置測試模組並在測試中建立元件，以及我們如何呼叫 detectChanges() 以使角度實際上通過雙重繫結和所有。
請注意，每個測試都是對 async() 的呼叫，它總是在檢查 fixture 之前等待 whenStable 承諾解析。然後，它可以通過 componentInstance 訪問**元件，**並通過 nativeElement 訪問元素。
有一個測試正在檢查正確的樣式。作為教程的一部分，Angular 團隊演示了在元件內部使用樣式。在我們的測試中，我們使用 getComputedStyle() 來檢查樣式是否來自我們指定的位置，但是我們需要 Window 物件，我們可以從測試中看到的元素中獲取它。