Protractor、TypeScript與Chai

搞定用TypeScript寫Protractor測試,陸續參考一些範例,發現蠻多人偏好使用Chai程式庫。原本Protractor預設的寫法expect(foo).toEqual(5),改用Chai之後變成:

  • expect(foo).to.be.a('string');
  • expect(foo).to.equal('bar');
  • expect(foo).to.have.length(3);
  • expect(tea).to.have.property('flavors') .with.length(3);

寫程式像在講話,幾乎就等同BDD Feature裡Then的口語描述,我猜想這是Chai受歡迎的原因。例如以下的BDD Feature範例:

Scenario:Add two numbers
    Given I have entered 50 into the calculator
    Then I have entered 70 into the calculator
    When I press add
    Then the result should be 120 on the screen

言歸正傳,要在Protractor改用Chai語法,可在conf.js的onPrepare()用require動態載入chai及chai-as-promised模組,將global.expect換掉(細節可參考Paul Li的介紹):

exports.config = {
    seleniumAddress: 'http://localhost:4444/wd/hub',
    specs: ['lab1.spec.js'],
    onPrepare: () => {
        var chai = require('chai');
        var chaiAsPromised = require('chai-as-promised');
        chai.use(chaiAsPromised);
        global["expect"] = chai.expect;
    }
};

回到TypeScript,要讓Visual Studio認得Chai的to.equal()這種語法,就必須載入cha.d.ts及cha-as-promised.d.ts兩個定義檔。老樣子,用Manage NuGet Packages或Package Manager Console安裝chai-as-promised.TypeScript.DefinitelyTyped,它會一併安裝chai.TypeScript.DefinitelyTyped,定義檔就備齊了。

由於chai及chai-as-promised為node.js的外部模組(External Module),應用時跟平常網站TypeScript使用<script src="…">載入的概念有點不同,想深入了解的同學可以參考TypeScript官方文件,這裡只會提到滿足測試撰寫的必要做法。

node.js透過require("…")方式動態載入元件,對應到TypeScript要寫成import chai=require("chai"),由於chai.d.ts只有定義檔不包含實作,故這個import指令目的在匯入chai.d.ts的型別宣告,作用類似宣告/// <reference path="…" />,不會產生實際的JavaScript指令(測試腳本實際上也不需要載入chai,真正的載入及設定動作是在conf.js onPrepare()完成)。

要使用import,專案的TypeScript編譯選項要做些調整,Module System需選擇CommonJS:

接著,我們要宣告declare var expect: Chai.ExpectStatic,將全域變數expect函式定義成Chai版的expect,以便使用Chai的is.equal()串接語法。跟import指令一樣,declare指令不產生JavaScript,只決定TypeScript撰寫階段的變數型別。

還有一個小問題,在Protractor裡,expect()應傳回Promise形式的Assert函式,故得寫成is.eventually.equal()。故一開始的import指令要改成import chaiAsPromised = require("chai-as-promise"),Visual Studio才認得expect().is.eventually.equal()。

完整測試程式碼如下:

import chaiAsPromised = require("chai-as-promised");
declare var expect: Chai.ExpectStatic;
 
describe('Protractor Demo App', function () {
 
    var firstNumber = element(by.model('first'));
    var secondNumber = element(by.model('second'));
    var goButton = element(by.id('gobutton'));
    var latestResult = element(by.binding('latest'));
 
    beforeEach(function () {
        browser.get('http://juliemr.github.io/protractor-demo/');
    });
 
    it('should have a title', function () {
        expect(browser.getTitle()).is.eventually.equal("Super Calculator");
    });
 
    it('should add one and two', function () {
        firstNumber.sendKeys("1");
        secondNumber.sendKeys("2");
        goButton.click();
 
        expect(latestResult.getText()).is.eventually.equal("3");
    });
 
});

總算Visual Studio也認得to.eventual.equal()的chai-as-promise語法,編譯成功,收工!

歡迎推文分享:
Published 24 May 2015 11:18 AM 由 Jeffrey
Filed under: ,
Views: 4,025



意見

沒有意見

你的看法呢?

(必要的) 
(必要的) 
(選擇性的)
(必要的) 
(提醒: 因快取機制,您的留言幾分鐘後才會顯示在網站,請耐心稍候)

5 + 3 =

搜尋

Go

<May 2015>
SunMonTueWedThuFriSat
262728293012
3456789
10111213141516
17181920212223
24252627282930
31123456
 
RSS
創用 CC 授權條款
【廣告】
twMVC

Tags 分類檢視
關於作者

一個醉心技術又酷愛分享的Coding魔人,十年的IT職場生涯,寫過系統、管過專案, 也帶過團隊,最後還是無怨無悔地選擇了技術鑽研這條路,近年來則以做一個"有為的中年人"自許。

文章典藏
其他功能

這個部落格


Syndication