What's Web Component Tester
A browser-based unit testing environment that for web components
一個(gè)針對(duì)web組件（比如Polymer工程下的各個(gè)web組件），基于瀏覽器的Javascript單元測(cè)試環(huán)境。
Step 1
First of All, in your local PC,please check if there are:
首先，在你的機(jī)器中，請(qǐng)檢查是否已安裝：
1.Java
2.Visible Browser(Chrome, etc.)
3.Nodejs
4.Npm
One of workable combinations:Java@8+Node@6+npm@3+chrome@58
其中一個(gè)成功搭建的版本組合:Java@8+Node@6+npm@3+chrome@58
Step 2
Please check if your git is installed and correctly configured
請(qǐng)檢查git是否已安裝且正確配置。
Step 3
Under the root or your project directory, run:
在你的項(xiàng)目根目錄下， 執(zhí)行：
npm install --save-dev web-component-tester
Note that it will take a little long time.
請(qǐng)注意這一步需要一些時(shí)間。
Step 4
Once installed, run:
安裝成功后，請(qǐng)執(zhí)行：
wct or node_modules/web-component-tester/bin/wct
During this process, below issues may come up:
在這期間，可能會(huì)出現(xiàn)以下問(wèn)題:
- 'express.use module not found'
It may be a problem because of the version of tester, you can try web-component-tester@4.0.3
這個(gè)問(wèn)題可以是由于tester的版本， 可以嘗試4.0.3。 - 'unable to connect to selenium'
Generally, it's a problem because of proxy, so you can try to delete all proxy statements, such as HTTPS_PROXY, HTTP_PROXY in .npmrc, HTTP_PROXY in env variables
一般來(lái)說(shuō)，這是代理問(wèn)題，請(qǐng)刪除當(dāng)前環(huán)境下的代理，比如用戶根目錄下.npmrc中的代理聲明，以及環(huán)境變量中的代理聲明。
Note that you need to add them back when you have to install something by npm. - Drivers of browsers missing
Please download them from website into the given path in the error log. Note that name of the driver file should be same as given in the error log and the extension of the driver is not .tar, .jar or .exe.
請(qǐng)根據(jù)提示下載缺失的driver， 注意driver的擴(kuò)展名也要與提示保持一致。
Step 5
npm install --save-dev web-component-tester-istanbul
It’s a plugin which can work together with web component tester to generate code coverage report.
這是一個(gè)可以生成代碼覆蓋率報(bào)告的插件。
Step 6
Create a wct.conf.json under the root of your project, and add below content into it:
在項(xiàng)目根目錄下，創(chuàng)建wct.conf.json, 然后添加如下內(nèi)容：
{
"verbose": true,
"persistent": false,
"plugins": {
"local": {
"browsers": ["chrome"],
"skipSeleniumInstall": true
},
"istanbul": {
"dir": "./coverage",
"reporters": ["text-summary", "lcov", "json"],
"include": ["/test/*/*.html"],
"exclude": []
}
}
}
Note that files in "include" should be files whose code coverage you want to calculate and files in "exclude" should be files in "include" whose code coverage you don’t want to calculate.
請(qǐng)注意include中保存的是需要計(jì)算代碼覆蓋率的文件范圍， exclude中保存的是include中不需要計(jì)算代碼覆蓋率的文件。
Step 7
Run wct following step 3# again
根據(jù)第三步再次執(zhí)行wct
Step 8
If you succeed in running wct, you will find that it takes a little long time.
如果你成功的執(zhí)行wct， 你會(huì)發(fā)現(xiàn)這要花費(fèi)較長(zhǎng)時(shí)間。
In many cases , we just want to run our test cases, not caring about the coverage report.
在很多情況下，我們只是想跑單元測(cè)試用例， 并不關(guān)心代碼覆蓋率。
Or you just fail in running wct after following step 1# to step 7#.
或者你在第1到7步之后，還沒(méi)有成功執(zhí)行wct。
Don’t worry, there is an alternative way for you to run your test cases effectively.
必?fù)?dān)心， 還有一個(gè)可以讓你高效執(zhí)行測(cè)試用例的方法。
1.Run:
npm install Polymer/web-component-tester--save
2.Run:
npm install puer --save-dev
3.Run:
puer
4.Open your test file in the browser, test cases in the file will be run automatically.
在puer給出的網(wǎng)址中，打開(kāi)你的測(cè)試文件，就可以自動(dòng)執(zhí)行測(cè)試用例。
For details, please refer to run WCT tests directly in a browser via a web server of your choosing
更多詳細(xì)內(nèi)容， 請(qǐng)參考通過(guò)WCT直接在任一Web Server上進(jìn)行單元測(cè)試
Tips
After running wct successfully, you will find that the browser always closes itself once all test cases run, and no time for you to check which one fails if there is. There is one option of use, you can run:
如果你成功執(zhí)行了wct,你會(huì)發(fā)現(xiàn)所有測(cè)試用例結(jié)束后，瀏覽器總是立即關(guān)閉， 來(lái)不及檢查測(cè)試用例的執(zhí)行情況（哪些成功，哪些失敗，以及失敗的原因），這時(shí) ，你可以在執(zhí)行的時(shí)候加一個(gè)參數(shù)：
wct -p
Any question or better practice will be appreciated if you can leave it here.
如有任何問(wèn)題或者更好的經(jīng)驗(yàn)請(qǐng)留言。
