unit testing : http call in controller inside directive

Question

describe("File Upload directive", function() {
      var elm, scope,httpBackend , controller , isolateScope;

     beforeEach(angular.mock.module("fileApp"));


     beforeEach(angular.mock.inject(function($rootScope, $compile , $httpBackend) {
          elm = angular.element("<div file-upload base-upload-url='files/' ></div>");
          httpBackend = $httpBackend;
          scope = $rootScope;
          httpBackend.whenGET("fileUploadTemplate.html").respond(true);
          $compile(elm)(scope);
          controller = elm.controller;

          scope.$digest();
    }));

    it("should upload selected file",function(){
      httpBackend.flush();
      isolateScope = elm.isolateScope();
      expect(isolateScope).toBeDefined();

      isolateScope.selectedFiles=[{"webkitRelativePath":"","lastModifiedDate":"2014-05-26T11:15:55.000Z","name":"a.csv","type":"text/csv","size":131}];
      var index = 0;
      httpBackend.expectPOST("files/").respond({"fileId":67603});

      expect(isolateScope.uploadResult.length).toBe(1);
      //httpBackend.flush();
     });
    });

Now, here I have situations:

1. If I comment out httpBackend.flush() at the start of it block , isolateScope is undefined.
2. If I comment out httpBackend.flush() at the end of it block , the isolateScope.uploadResult.length = 0 which suggests httpPOST didn't execute correctly as expected (httpBackend.flush is never called after the http call).

3.If I keep both httpBackend.flush() (which is not supposed to be done) , I get error as expected : Error: No pending request to flush !.

Can anyone please guide me ? I am a newbie to karma.

Thanks in advance.

Answer 1

Try adding these lines too in describe block.

 afterEach(function() {
         $httpBackend.verifyNoOutstandingExpectation();
         $httpBackend.verifyNoOutstandingRequest();
       });

or you might have not called the function in directive that instantiated the post call, otherwise it should work.