Проводя некоторые исследования по тестированию компонентов AngularJS, я прочитал о Просмотреть модульное тестирование , как описано здесь . Я пробовал это так:
компонент
angular.module("recipeDetail").component("recipeSummary", {
templateUrl:
"modules/recipe-detail/recipe-summary/recipe-summary.template.html",
bindings: { recipe: "<" },
controller: function RecipeSummaryController() {}
});
шаблон
<h1 id="recipe-title">{{ $ctrl.recipe.title }}</h1>
<p>
Steps:
</p>
<ul>
<li ng-repeat="step in $ctrl.recipe.steps" class="recipe-summary-step">
{{ step.text }}
</li>
</ul>
тест
describe("recipeSummary ViewUnitTest", () => {
let scope;
let $compile;
beforeEach(module("recipeDetail"));
beforeEach(inject(($rootScope, _$compile_) => {
scope = $rootScope.$new();
$compile = _$compile_;
}));
it("should display the steps", () => {
scope.recipe = recipe;
let el = angular.element('<recipe-summary recipe="recipe"/>');
el = $compile(el)(scope);
scope.$digest();
expect(el[0].querySelectorAll("p").length).toBe(1); // to make sure this whole thing is working
expect(el[0].querySelectorAll(".recipe-summary-step").length).toBe(3);
});
});
Оба утверждения терпят неудачу - и первое (p
), которое проверяет, что я правильно выполняю тест, и второе (.recipe-summary-step
), которое проверяет фактическую функцию компонента.
UPDATE
Ну, разве я не чувствую себя глупым? Джордж указал, что я на самом деле не звонил scope.$digest()
.
Итак, после этого у меня появляется новая ошибка / сбой:
Chrome 74.0.3729 (Mac OS X 10.14.4) recipeSummary ViewUnitTest should display the steps FAILED
Error: Unexpected request: GET modules/recipe-detail/recipe-summary/recipe-summary.template.html
No more request expected
error properties: Object({ $$passToExceptionHandler: true })
at createFatalError (/Users/TuzsNewMacBook/Development/code/AngularJS/recipe-angular-from-phonecat/node_modules/angular-mocks/angular-mocks.js:1569:19)
at $httpBackend (/Users/TuzsNewMacBook/Development/code/AngularJS/recipe-angular-from-phonecat/node_modules/angular-mocks/angular-mocks.js:1616:11)
at sendReq (lib/angular/angular.js:13257:9)
at serverRequest (lib/angular/angular.js:12998:16)
at processQueue (lib/angular/angular.js:17914:37)
at lib/angular/angular.js:17962:27
at ChildScope.$digest (lib/angular/angular.js:19075:15)
at UserContext.<anonymous> (modules/recipe-detail/recipe-summary/recipe-summary.component.spec.js:32:11)
at <Jasmine>
Очевидно, templateUrl
разрешается с помощью фактического запроса get
, и, очевидно, это фатальная ошибка. Итак, как мне использовать эту технику?