title: How can I test that debug.error() function has been called, in AngularJS?
body: <p>I have the following AngularJS code:</p>
  
  <pre><code>(function() {
      "use strict";
  
      /**
       * @ngdoc directive
       * @name beckon.flint.pageHeader:pageHeader
       * @scope
       * @section pageLayout
       *
       * @restrict E
       *
       * @description
       * A complete page header. The header transcludes additional content such as buttons into the header row.
       *
       * &lt;h4&gt;Source&lt;/h4&gt;
       * &lt;pre&gt;
       * No controller setup needed.
       * &lt;/pre&gt;
       *
       * &lt;h4&gt;Template&lt;/h4&gt;
       * &lt;pre&gt;
       * &lt;page-header header="Available Dashboards" subheader="Reports"&gt;
       *      &lt;flat-button ng-click="createSomething()" text="Create New Something"&gt;&lt;/flat-button&gt;
       * &lt;/page-header&gt;
       * &lt;/pre&gt;
       *
       * @param {string} header - The header title.
       * @param {string} subheader - The sub-header title.
       * @param {string} helpPage - Link to documentation
       */
  
      angular
          .module("beckon.flint.pageHeader", ["beckon.tinder.documentation.documentationLinks"])
          .directive("pageHeader", function() {
              return {
                  templateUrl: "pageHeader",
                  replace: true,
                  transclude: true,
                  scope: {
                      header: "@",
                      subheader: "@",
                      helpPage: "@",
                      backState: "@?",
                  },
                  restrict: "E",
                  controller: function($scope, documentationLinks, svg) {
                      $scope.icon = svg.ARROW_LEFT;
                      const documentationLink = $scope.helpPage
                          ? documentationLinks.helpPages[$scope.helpPage]
                          : null;
                      if ($scope.helpPage &amp;&amp; !documentationLink) {
                          debug.error("Invalid help-page specified:" + $scope.helpPage);
                      }
  
                      $scope.helpUrl = documentationLink ? documentationLink.url : null;
                      $scope.helpText = documentationLink
                          ? documentationLink.displayInfo.explanation
                          : null;
                  },
                  link: function($scope, $element, attrs, controller, transcludeFn) {
                      debug.log(transcludeFn);
                  },
              };
          });
  })();
  
  </code></pre>
  
  <p>So far I've written the following tests and it has 90% code coverage:</p>
  
  <pre><code>fdescribe("pageHeader", () =&gt; {
      "use strict";
  
      let $scope;
      let $compile;
      let $rootScope;
  
      let svg;
      let documentationLinks;
  
      const getIsolatedScope = (element) =&gt; element.isolateScope() || element.scope();
  
      beforeEach(() =&gt; {
          module("beckon.flint.pageHeader");
  
          module(($provide) =&gt; {
              svg = jasmine.createSpy();
              documentationLinks = {
                  helpPages: {
                      MyHelpPage: {
                          url: "dummypage.com",
                          displayInfo: {
                              explanation: "A dummy page",
                          },
                      },
                  },
              };
  
              $provide.value("svg", svg);
              $provide.value("documentationLinks", documentationLinks);
          });
  
          inject((_$rootScope_, _$compile_) =&gt; {
              $compile = _$compile_;
              $rootScope = _$rootScope_;
              $scope = $rootScope.$new(true);
          });
      });
  
      it("should initialize correctly", () =&gt; {
          // Arrange
          const element = angular.element(
              "&lt;page-header header='My header' subheader='My sub header' backState='My BackState'&gt;Here goes the template&lt;/page-header&gt;"
          );
  
          // Act
          $compile(element)($scope);
          $scope.$digest();
          const isolatedScope = getIsolatedScope(element);
          isolatedScope.helpPage = {};
          spyOn(debug, "error");
  
          // Assert
          expect(isolatedScope.helpUrl).toBe(null);
          expect(isolatedScope.helpText).toBe(null);
          expect(debug.error).toHaveBeenCalled();
      });
  });
  
  </code></pre>
  
  <p>This condition:</p>
  
  <pre><code>if ($scope.helpPage &amp;&amp; !documentationLink) {
      debug.error("Invalid help-page specified:" + $scope.helpPage);
  }
  </code></pre>
  
  <p>seems to be the only untested part of the code and I can't seem to reach it. I have tried <code>spyOn(debug,"error")</code> and <code>expect(debug.error).toHaveBeenCalled();</code> as shown in the second snippet but that particular test fails. </p>
  
  <p>Is there a way to test that that particular debug.error function works correctly without modifying the main code?</p>