關(guān)鍵要點(diǎn)

• AngularJS 中的指令對(duì)於 DOM 操作至關(guān)重要，在單元測(cè)試中不容忽視，因?yàn)樗鼈儠?huì)顯著影響應(yīng)用程序的可用性。
• 指令測(cè)試涉及設(shè)置一個(gè)測(cè)試環(huán)境，在該環(huán)境中手動(dòng)編譯指令，並模擬必要的對(duì)象和服務(wù)以隔離指令的功能。
• 指令中的 link 函數(shù)負(fù)責(zé)核心邏輯實(shí)現(xiàn)，例如 DOM 操作和事件處理，應(yīng)使用 AngularJS 的測(cè)試實(shí)用程序進(jìn)行徹底測(cè)試。
• 通過(guò)在測(cè)試期間將指令使用的模板整合到 $templateCache 中，可以測(cè)試模板中必要元素的正確應(yīng)用和集成，從而簡(jiǎn)化測(cè)試過(guò)程。
• 測(cè)試使用隔離作用域的指令時(shí)，確保作用域的屬性正確綁定並按預(yù)期運(yùn)行，這對(duì)指令在應(yīng)用程序中的預(yù)期功能至關(guān)重要。

單元測(cè)試是軟件開(kāi)發(fā)中不可或缺的一部分，它有助於減少代碼錯(cuò)誤。測(cè)試是提高代碼質(zhì)量的幾項(xiàng)任務(wù)之一。 AngularJS 考慮到測(cè)試性而創(chuàng)建，因此在框架之上編寫的任何代碼都可以輕鬆測(cè)試。在我上一篇關(guān)於測(cè)試的文章中，我介紹了單元測(cè)試控制器、服務(wù)和提供程序。本文繼續(xù)討論指令測(cè)試。指令與其他組件不同，因?yàn)樗鼈儾皇窃?JavaScript 代碼中用作對(duì)象，而是在應(yīng)用程序的 HTML 模板中使用。我們編寫指令來(lái)執(zhí)行 DOM 操作，並且在單元測(cè)試中不能忽略它們，因?yàn)樗鼈兤鹬匾淖饔?。此外，它們直接影響?yīng)用程序的可用性。我建議您查看以前關(guān)於在 AngularJS 測(cè)試中模擬依賴項(xiàng)的文章，因?yàn)槲覀儗⒃诒疚闹惺褂迷撐恼轮械囊恍┘夹g(shù)。如果您想試用本教程中開(kāi)發(fā)的代碼，可以查看我為您設(shè)置的 GitHub 存儲(chǔ)庫(kù)。

指令測(cè)試

指令是 AngularJS 中最重要和最複雜的組件。指令測(cè)試很棘手，因?yàn)樗鼈儾幌窈瘮?shù)那樣被調(diào)用。在應(yīng)用程序中，指令在 HTML 模板上聲明性地應(yīng)用。當(dāng)模板被編譯並且用戶與指令交互時(shí)，它們的 action 就會(huì)被執(zhí)行。執(zhí)行單元測(cè)試時(shí)，我們需要自動(dòng)化用戶操作並手動(dòng)編譯 HTML 以測(cè)試指令的功能。

設(shè)置測(cè)試指令的對(duì)象

就像測(cè)試任何語(yǔ)言或使用任何框架中的任何邏輯片段一樣，我們需要在開(kāi)始測(cè)試指令之前獲取所需對(duì)象的引用。此處要?jiǎng)?chuàng)建的關(guān)鍵對(duì)像是一個(gè)包含要測(cè)試的指令的元素。我們需要編譯一個(gè)指定了指令的 HTML 片段才能使指令生效。例如，考慮以下指令：

angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});

指令的生命週期將啟動(dòng)，並且將執(zhí)行編譯和鏈接函數(shù)。我們可以使用 $compile 服務(wù)手動(dòng)編譯任何 HTML 模板。以下 beforeEach 塊編譯上述指令：

angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});

編譯後，指令的生命週期將啟動(dòng)。在下一個(gè) digest 週期之後，指令對(duì)象將處?kù)杜c頁(yè)面上顯示相同的狀態(tài)。如果指令依賴於任何服務(wù)來(lái)實(shí)現(xiàn)其功能，則必須在編譯指令之前模擬這些服務(wù)，以便可以在測(cè)試中檢查對(duì)任何服務(wù)方法的調(diào)用。我們將在下一節(jié)中看到一個(gè)示例。

測(cè)試鏈接函數(shù)

link 函數(shù)是指令定義對(duì)象 (DDO) 中最常用的屬性。它包含指令的大部分核心邏輯。此邏輯包括簡(jiǎn)單的 DOM 操作、偵聽(tīng)發(fā)布/訂閱事件、監(jiān)視對(duì)像或?qū)傩缘淖兓?、調(diào)用服務(wù)、處理 UI 事件等等。我們將嘗試涵蓋大多數(shù)這些場(chǎng)景。

DOM 操作

讓我們從上一節(jié)中定義的指令的案例開(kāi)始。此指令將一個(gè) span 元素添加到應(yīng)用指令的元素的內(nèi)容中?？梢酝ㄟ^(guò)在指令內(nèi)查找 span 來(lái)測(cè)試它。以下測(cè)試用例斷言此行為：

var compile, scope, directiveElem;

beforeEach(function(){
  module('sampleDirectives');

  inject(function($compile, $rootScope){
    compile = $compile;
    scope = $rootScope.$new();
  });

  directiveElem = getCompiledElement();
});

function getCompiledElement(){
  var element = angular.element('<div first-directive=""></div>');
  var compiledElement = compile(element)(scope);
  scope.$digest();
  return compiledElement;
}

觀察者

由於指令作用於作用域的當(dāng)前狀態(tài)，因此它們應(yīng)該具有觀察者，以便在作用域的狀態(tài)發(fā)生變化時(shí)更新指令。觀察者的單元測(cè)試必須操作數(shù)據(jù)並通過(guò)調(diào)用 $digest 來(lái)強(qiáng)制觀察者運(yùn)行，並且必須在 digest 週期之後檢查指令的狀態(tài)。以下代碼是上述指令的略微修改版本。它使用作用域上的字段來(lái)綁定 span 內(nèi)的文本：

it('should have span element', function () {
  var spanElement = directiveElem.find('span');
  expect(spanElement).toBeDefined();
  expect(spanElement.text()).toEqual('This span is appended from directive.');
});

測(cè)試此指令類似於第一個(gè)指令；除了它應(yīng)該針對(duì)作用域上的數(shù)據(jù)進(jìn)行驗(yàn)證，並且應(yīng)該檢查更新。以下測(cè)試用例驗(yàn)證指令的狀態(tài)是否發(fā)生變化：

angular.module('sampleDirectives').directive('secondDirective', function(){
  return function(scope, elem){
    var spanElement = angular.element('' + scope.text + '');
    elem.append(spanElement);

    scope.$watch('text', function(newVal, oldVal){
      spanElement.text(newVal);
    });
  };
});

相同的技術(shù)也可以用於測(cè)試屬性上的觀察者。

(後續(xù)內(nèi)容由於篇幅限制，將簡(jiǎn)化並概括，保留核心測(cè)試方法和思路)

DOM 事件 可以使用 jqLite 的 triggerHandler 模擬點(diǎn)擊事件並驗(yàn)證結(jié)果。

指令模板測(cè)試 使用 $templateCache 預(yù)加載模板，簡(jiǎn)化測(cè)試。

指令作用域測(cè)試 針對(duì)隔離作用域，驗(yàn)證屬性綁定和方法調(diào)用。

require 測(cè)試 驗(yàn)證指令依賴關(guān)係，包括嚴(yán)格依賴和可選依賴。

replace 測(cè)試 檢查指令元素是否被替換。

transclude 測(cè)試 驗(yàn)證指令是否正確處理 transcluded 內(nèi)容。

總結(jié)

如本文所示，與 AngularJS 中的其他概念相比，指令更難測(cè)試。同時(shí)，它們也不能被忽略，因?yàn)樗鼈兛刂浦鴳?yīng)用程序的一些重要部分。 AngularJS 的測(cè)試生態(tài)系統(tǒng)使我們更容易測(cè)試項(xiàng)目的任何部分。我希望通過(guò)本教程，您現(xiàn)在對(duì)測(cè)試指令更有信心。請(qǐng)?jiān)谠u(píng)論部分告訴我您的想法。如果您想試用本教程中開(kāi)發(fā)的代碼，可以查看我為您設(shè)置的 GitHub 存儲(chǔ)庫(kù)。

(FAQs 部分由於篇幅過(guò)長(zhǎng)，此處省略。核心內(nèi)容已在上文涵蓋。)

以上是AngularJS測(cè)試提示：測(cè)試指令的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！