Jasmine:
在上一章節我們有大致介紹了一下Jasmine這個用來 Behaviour Driven Development (BDD)的Library,一般來說BDD會用比較喜歡口語的描述來撰寫測試,一來比容易閱讀,二來就算是非技術人員也能容易了解『這個測試在測什麼!』
下方是我們要測試的function
function helloWorld() {
return 'Hello World';
}
接著是我們的測試程式碼:
describe('Hello World', () => {
it('show hello world', () => {
expect(helloWorld()).toEqual('Hello World');
});
});
- 從測試程式碼中可以看到 describe(string, function); 這個開頭。 後方的 function 這是Test Suite 裡面會有許多我們的關於 string (Hello World)的獨立單元測試,所以可說function是單元測試的集合。
- it(string, function) 這個定義了我們每一個獨立的單元測試,這會包含一個或是多個的Expectation(期望)。
- expect(actual) 這個描述我們稱之為 Expectation (期望)後方會接著呼應的結果(Matcher)來描述我們這個測試『期望的結果』是如何,通常這個matcher(expected)的描述就是我們說的呼應結果(Matcher)其值為boolean。
- 期待值(expected)與實際值(actual value)被丟到expect這個function內做比較,如果出來的值為false就代表這個測試失敗。
所以上述的那段測試碼就是說:這一段是做 Hello World的相關測試,然後 show hello world 這個單元測試就是~期望(expect)helloWorld()這個function 會等於(toEqual) 'Hello World'這個字串。
我們把這些程式碼寫在 Angular 的一個新專案的 app.component.spec.ts 的內,但是在最下方並且 angular 內寫的 describe() 之外,最後執行在 ng cli 下執行 # ng test 來看看測試結果。
我們可以看到第二個小標題 " Hello World "就是我們 describe( string, function) 的string說明內容。而內容的show hello world就是我們寫在 it(string, function) 的string 說明。
現在我們故意把 expect(helloWorld()).toEqual('Hello World') 改成 expect(helloWorld()).toEqual('angular') 存檔之後 ng cli的測試會自動重新跑一次測試,這時候就會看到失敗的資訊了。
從程式碼中我們期待要等於"angular"這個字串,但是實際結果卻是失敗。因此會看到頁面顯示4個測試中(specs 包含angular 建立專案時自動幫你寫好的測試內容) 有 1 個 failure。
至於expect 後方的Matchers 除了目前看到的 toEqual() 之外 Jasmine 提供了許多 Matchers給我們,以下是我大概列舉的。更多的請上Jasmine官網參考。
- toContain(number)
- toThrow(string)
- toBe(instance)
- toBeFalsy()
- toBeTruthy()
- toEqual(mixed)
- toMatch(pattern)
- toBeGreaterThan(number);
- toBeNaN();
有時候在測試某些功能時我們會預先建立一些物件、服務之類的或是在單元測試結束後要求清除一些檔案或是變數因此Jasmine提供了下列幾個特殊Function供我們測試時做『預處理』或是『後處理』。
beforeAll
這個function只會在describe()內的所有測試之前被呼叫一次。afterAll
這個function會在所有的 describe() 都做完之後被呼叫一次。beforeEach
這個function會在每一個 it function執行之前被執行。afterEach
這個function會在每一個單元測試後被呼叫。我們來看一下 Angular 建立專案時幫我們事先寫好的測試碼
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [
RouterTestingModule
],
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); });
it('should create the app', () => { const fixture = TestBed.createComponent(AppComponent); const app = fixture.debugElement.componentInstance; expect(app).toBeTruthy(); });
上方第2行的 beforeEach() 這段就會在下方每個 it(function) 執行之前被呼叫。
這邊就大概講解Jasmine 測試程式的邏輯架構。------ 待續
留言
張貼留言