Angular中單元測(cè)試的示例分析

這篇文章給大家分享的是有關(guān)Angular中單元測(cè)試的示例分析的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

10年的臨安網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對(duì)設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對(duì)一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。營(yíng)銷型網(wǎng)站建設(shè)的優(yōu)勢(shì)是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動(dòng)調(diào)整臨安建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)從事“臨安網(wǎng)站設(shè)計(jì)”,“臨安網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。

第一個(gè)測(cè)試用例

當(dāng)創(chuàng)建Angular應(yīng)用后，在package.json文件中已經(jīng)添加了Karma和Jasmine的依賴性：

"karma": "~1.7.1",  
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",

做過后端測(cè)試的同行，估計(jì)已經(jīng)知道這些組件的分工了：

• karma：Karma核心組件

• karma-chrome-launcher：Chrome發(fā)射器，測(cè)試會(huì)在Chrome上執(zhí)行

• karma-coverage-istanbul-reporter：coverage報(bào)告

• karma-jasmine：Jasmine核心組件

• karma-jasmine-html-reporter：Html測(cè)試報(bào)告

在src目錄下會(huì)看到名為：karma.conf.js、test.ts的兩個(gè)文件。

karma.conf.js：Karma的配置文件，其中需要重點(diǎn)關(guān)注的配置有：

• frameworks：使用的測(cè)試框架，這里使用Jasmine

• port：測(cè)試使用的端口

• autoWatch：是否自動(dòng)監(jiān)測(cè)測(cè)試代碼的改變，自動(dòng)執(zhí)行測(cè)試

• plugins：測(cè)試使用到的插件，與package.json文件保持一致

• browsers：測(cè)試運(yùn)行使用的瀏覽器，這里使用Chrome，如果你需要使用其他瀏覽器，需要通過npm安裝瀏覽器發(fā)射器，并在plugins和這里設(shè)置，例如使用Safari：

  npm install karma-safari-launcher --save-dev
  
  plugins: [
      require('karma-safari-launcher')
  ]
  browsers: ['Safari'],

test.ts：測(cè)試入口文件，其中初始化了測(cè)試環(huán)境以及指定所有測(cè)試文件

在app目錄下，還會(huì)找到一個(gè)名為app.component.spec.ts的文件，這就是一個(gè)Jasmine的測(cè)試，內(nèi)容如下：

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
//測(cè)試入口，參數(shù)為測(cè)試名、方法
describe('AppComponent', () => {
  //每個(gè)測(cè)試用的Setup
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent  
      ],
    }).compileComponents();
  }));

  //測(cè)試用例
  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

  it(`should have as title 'test-demo'`, async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    const app = fixture.debugElement.componentInstance;
    //斷言，期望值是否滿足要求
    expect(app.title).toEqual('test-demo');
  }));

  it('should render title in a h2 tag', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    fixture.detectChanges();
    const compiled = fixture.debugElement.nativeElement;
    //通過querySelector獲取頁面元素
    expect(compiled.querySelector('h2').textContent).toContain('Welcome to test-demo!');
  }));

  //每個(gè)測(cè)試用例的TearDown
  afterEach(function() {
    //清除測(cè)試數(shù)據(jù)
  });
});

上述代碼使用了Jasmine的語法，關(guān)于Jasmine的更詳細(xì)介紹，參見JavaScript 單元測(cè)試框架：Jasmine 初探。這里不贅述。

執(zhí)行: ng test，就會(huì)看到上述文件的測(cè)試報(bào)告：

另外在測(cè)試報(bào)告中還可單擊某個(gè)測(cè)試單獨(dú)執(zhí)行，報(bào)告如下：

填坑

對(duì)于Pipe、Service、Router等組件的測(cè)試，可參見Angular文檔，這里重點(diǎn)講述下在測(cè)試中遇到的各種坑。

No provider ***

測(cè)試時(shí)，如果被測(cè)組件需要其他第三方組件、servcie或pipe，沒有被引入，就會(huì)出現(xiàn)No provider 的錯(cuò)誤，解決方法很簡(jiǎn)單，在beforeEach中使用imports或provider引入即可：

beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        //這里聲明
      ],
      imports: [
        //這里引入
      ],
      providers: [
        //這里引入
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    })
      .compileComponents();
  }));

請(qǐng)求超時(shí)

在開發(fā)時(shí)，異步請(qǐng)求由于網(wǎng)絡(luò)原因常會(huì)出現(xiàn)TimeOut的錯(cuò)誤，通常的解決方法是設(shè)置TimeOut時(shí)間的上限，并對(duì)TimeOut錯(cuò)誤作出人性化的提示。在測(cè)試時(shí)也同樣會(huì)發(fā)生TimeOut的錯(cuò)誤：

解決辦法是可以在某個(gè)測(cè)試用例中設(shè)置TimeOut的時(shí)間：

it('#loadBalance for BCT should return real value', async () => {
  jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;
  ...
})

或者在BeforeEach中統(tǒng)一設(shè)置TimeOut時(shí)間：

describe("my async specs", function() {
    var originalTimeout;
    beforeEach(function() {
      originalTimeout = jasmine.DEFAULT_TIMEOUT_INTERVAL;
      jasmine.DEFAULT_TIMEOUT_INTERVAL = 1000000;
    });

    ...

    afterEach(function() {
      jasmine.DEFAULT_TIMEOUT_INTERVAL = originalTimeout;
    });
  });

定義測(cè)試Environment

Angular缺省針對(duì)開發(fā)和產(chǎn)品提供了不同的Environment，對(duì)于測(cè)試，我們同樣可以設(shè)置Enviroment。

在src/environment下創(chuàng)建environment.test.ts，并修改angular.json內(nèi)容：

"architect":{
    "test":{
        ...
        "configurations": {
            "test": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.test.ts"
                }
              ]
            }
          }
    }
}

修改package.json文件：

"scripts": {
  "test": "ng test --configuration=test",
}

這樣執(zhí)行如下命令：

npm test
//或者
ng test --configuration=test

執(zhí)行測(cè)試時(shí)，使用的就是environment.test.ts文件中配置的內(nèi)容。

測(cè)試數(shù)據(jù)回滾

做過Grails開發(fā)的伙計(jì)應(yīng)該知道，單元測(cè)試、集成測(cè)試后，數(shù)據(jù)庫(kù)中的測(cè)試數(shù)據(jù)會(huì)通過配置文件清除掉。在前端測(cè)試中，測(cè)試數(shù)據(jù)需要自行調(diào)用清除代碼，對(duì)于使用LocalStorage、SessionStorage保持的數(shù)據(jù)亦是如此，方法很簡(jiǎn)單，在afterEach添加清除代碼：

describe("my async specs", function() {
  
  afterEach(function() {
    //在這里清除測(cè)試數(shù)據(jù)
  });
});

與StoryBook的配合

先前我發(fā)布了一篇題為《StoryBook實(shí)戰(zhàn)》的文章，StoryBook也是用來測(cè)試組件的，它與Karma+Jasmine有什么區(qū)別呢？

二者都能測(cè)試的：

• Pipe

• Servcie

• Component

StoryBook不能測(cè)、Karma + Jasmine可測(cè)試的：

• Router

• Component的界面元素屬性、Input、Output

Karma + Jasmine不能做的，StoryBook能做的：

• Component交互測(cè)試

• 組件管理

• 編寫組件文檔

從上面可以看出，Storybook進(jìn)行的是黑盒測(cè)試，Karma + Jasmine則注重白盒測(cè)試，二者側(cè)重點(diǎn)不同，沒有誰強(qiáng)誰弱之分，只有揚(yáng)長(zhǎng)避短，利用好各自的優(yōu)點(diǎn)，方可讓前端測(cè)試更完美，將前端bug扼殺在開發(fā)階段。

一些前端測(cè)試感悟

雖然前端開發(fā)的工作比較繁瑣，也是客戶Challenge最多的地方，但是不代表前端只有頁面，沒有架構(gòu)。以前之所以覺得Angular的單元測(cè)試難做，就是覺得都是頁面的東西怎么測(cè)？其實(shí)，終其原因，還是沒有架構(gòu)，所有的代碼都集中在Component中，為了趕進(jìn)度，通過拷貝、粘貼，怎么快怎么來。結(jié)果，悲劇了，后期代碼維護(hù)困難，一點(diǎn)改動(dòng)就需要人肉測(cè)試。

費(fèi)時(shí)不說，開發(fā)人員也沒有成長(zhǎng)。接觸Angular前端測(cè)試后，我的腦海里又出現(xiàn)了“測(cè)試驅(qū)動(dòng)開發(fā)”。一段好代碼，前提是要易于測(cè)試，不管這段代碼是用于前端還是后端。 前端開發(fā)人員不僅僅要關(guān)注頁面的易用性、美觀性，同樣需要關(guān)注前端的架構(gòu)，一個(gè)易于測(cè)試的架構(gòu)才是最好的“武器”。

感謝各位的閱讀！關(guān)于“Angular中單元測(cè)試的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！

新聞標(biāo)題：Angular中單元測(cè)試的示例分析
URL網(wǎng)址：http://muchs.cn/article48/ihjiep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供移動(dòng)網(wǎng)站建設(shè)、網(wǎng)站營(yíng)銷、面包屑導(dǎo)航、網(wǎng)站建設(shè)、域名注冊(cè)、微信公眾號(hào)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)