Trouble with View Unit Testing in AngularJS

In doing some research on AngularJS component testing I’ve read about View Unit Testing, as described here. I’ve tried it this way:

component

angular.module("recipeDetail").component("recipeSummary", {
  templateUrl:
    "modules/recipe-detail/recipe-summary/recipe-summary.template.html",
  bindings: { recipe: "<" },
  controller: function RecipeSummaryController() {}
});

template

<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>

test

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);
  });
});

Both assertions fail – both the first (p) that checks that I’m implementing the test correctly, and the second (.recipe-summary-step) which tests the actual function of the component.

UPDATE

Well don’t I feel dumb. George pointed out that I didn’t actually call scope.$digest().

So after doing that I have a new error/failure:

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>

Apparently a templateUrl is resolved with an actual get request and apparently that’s a fatal error. So how do I use this technique?

Source: AngularJS