Combining Jasmine 2.0's async done() with angular-mocks inject() in a single test case

Question

Combining Jasmine 2.0's async done() with angular-mocks inject() in a single test case

Typically, my test cases are structured like this:

it("should send get request", inject(function(someServices) {
     //some test
}));

However, for Jasmine 2.0 async tests, the format changes to:

it("should send get request", function(done) {
     someAsync.then(function(){
         done();
     });
});

Is it possible to incorporate both 'done' and 'inject' in a single test?

javascript angularjs unit-testing mocking jasmine

Answer 1

Answer №1

I encountered a similar issue after updating to Jasmine 2.0, but I managed to resolve it with the following solution.

it("should perform a get request", function(done) {
    inject(function(someServices) {
        //performing an asynchronous test here
        done();
    })(); // remember to invoke the function returned by 'inject'
});

Answer 2

I encountered a similar issue after updating to Jasmine 2.0, but I managed to resolve it with the following solution.

it("should perform a get request", function(done) {
    inject(function(someServices) {
        //performing an asynchronous test here
        done();
    })(); // remember to invoke the function returned by 'inject'
});

Answer 3

Answer №2

A crucial point to note is the inclusion of brackets after the inject function call. For example:

inject(function(someServices) {
   //some asynchronous test
   done();
})();  <-- these brackets are important here.

If you examine the type of inject:

export declare function inject(tokens: any[], fn: Function): () => any;

You can see that it returns a function, which explains why there was no output - because you forgot to invoke the function!!

When you think about it, it makes sense that it returns a function since it expects a function!

Therefore, adding extra parentheses should resolve all issues!

Example in Action:

  it('should allow you to observe for changes', function(done) {
    inject([GlobalStateService], (globalStateService: GlobalStateService) => {
      globalStateService.observe("user", storageType.InMemoryStorage, (user: string) => {
        expect(user).toBe("bla");
        done();
      });

      globalStateService.write({ user: "bla"}, storageType.InMemoryStorage);
    })();
  });

Answer 4

A crucial point to note is the inclusion of brackets after the inject function call. For example:

inject(function(someServices) {
   //some asynchronous test
   done();
})();  <-- these brackets are important here.

If you examine the type of inject:

export declare function inject(tokens: any[], fn: Function): () => any;

You can see that it returns a function, which explains why there was no output - because you forgot to invoke the function!!

When you think about it, it makes sense that it returns a function since it expects a function!

Therefore, adding extra parentheses should resolve all issues!

Example in Action:

  it('should allow you to observe for changes', function(done) {
    inject([GlobalStateService], (globalStateService: GlobalStateService) => {
      globalStateService.observe("user", storageType.InMemoryStorage, (user: string) => {
        expect(user).toBe("bla");
        done();
      });

      globalStateService.write({ user: "bla"}, storageType.InMemoryStorage);
    })();
  });

Answer 5

Answer №3

In response to @Scott Boring's answer and @WhiteAngel's comment highlighting that the code within inject was not executed.

I found a solution that worked for me:

it("should execute get request", function(done) {
    inject(function(someServices) {
       //performing asynchronous test
       done();
    })();
});

Answer 6

In response to @Scott Boring's answer and @WhiteAngel's comment highlighting that the code within inject was not executed.

I found a solution that worked for me:

it("should execute get request", function(done) {
    inject(function(someServices) {
       //performing asynchronous test
       done();
    })();
});

Answer 7

Answer №4

Here is an example of how the test could be written:

describe("Testing a service'", function () {    
    var myService;
    var testData;

    beforeEach(function (done) {   
        module('myApp');

        inject(function (someService) {
            myService = someService;
        });

        myService
            .getTestData()
            .then(function(result) {
                testData = result;
                done();
            });
    }); 

    it('should have test data available', function () {  
        expect(testData).toBeDefined();
    }); 
}

Answer 8

Here is an example of how the test could be written:

describe("Testing a service'", function () {    
    var myService;
    var testData;

    beforeEach(function (done) {   
        module('myApp');

        inject(function (someService) {
            myService = someService;
        });

        myService
            .getTestData()
            .then(function(result) {
                testData = result;
                done();
            });
    }); 

    it('should have test data available', function () {  
        expect(testData).toBeDefined();
    }); 
}

Answer 9

Answer №5

I encountered an issue with @scott-boring's method in Angular 5.2.0 which led me to try a different approach. I found success by utilizing TestBed.get() instead of inject() when accessing services, as detailed in the official documentation:

describe('TooltipComponent', () => {
  let component: TooltipComponent;
  let fixture: ComponentFixture<TooltipComponent>;
  let myService: MyService;

  beforeEach(async(() => {
    const myServiceSpy = jasmine.createSpyObj('MyService', ['calc']);

    TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      providers: [
        {provide: MyService, useValue: myServiceSpy}
      ]
    })
    .compileComponents();

    myService = TestBed.get(MyService);
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should render correctly', (done) => {
    component.render();

    setTimeout(() => {
      expect(myService.calc).toHaveBeenCalled();
      done();
    }, 1000);
  });

Answer 10

I encountered an issue with @scott-boring's method in Angular 5.2.0 which led me to try a different approach. I found success by utilizing TestBed.get() instead of inject() when accessing services, as detailed in the official documentation:

describe('TooltipComponent', () => {
  let component: TooltipComponent;
  let fixture: ComponentFixture<TooltipComponent>;
  let myService: MyService;

  beforeEach(async(() => {
    const myServiceSpy = jasmine.createSpyObj('MyService', ['calc']);

    TestBed.configureTestingModule({
      declarations: [ MyComponent ],
      providers: [
        {provide: MyService, useValue: myServiceSpy}
      ]
    })
    .compileComponents();

    myService = TestBed.get(MyService);
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  it('should render correctly', (done) => {
    component.render();

    setTimeout(() => {
      expect(myService.calc).toHaveBeenCalled();
      done();
    }, 1000);
  });

Combining Jasmine 2.0's async done() with angular-mocks inject() in a single test case

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Issue with THREE.SpriteCanvasMaterial functionality

Utilizing the filter function iteratively within an Angular factory component

Is there a way to combine multiple images into one PDF document using Html2Canvas and JsPDF?

Unable to simulate the Enter key press event for a text area using Angular 7

The attribute on the label fails to trigger any action on the linked input upon clicking, due to the binding of the id and for

Determine which scroll bar is currently in use

Is the initial carousel element failing to set height to 100% upon loading?

Executing a function by click event using the onclick attribute from a file located in the public directory of my project (Next

What is the best approach for managing Create/Edit pages in Next.js - should I fetch the product data in ServerSideProps or directly in the component?

Blurring images with a combination of jQuery Backstretch and Blurjs

Code for jQuery function

Exploring the interactive doughnut graph using SVG and Vue.js

Determining object types based on sibling properties in Typescript

Removing a child element in ReactJS that was dynamically created based on a count

Update an array by breaking it into smaller chunks, while maintaining the original index positions

What could be the reason for my Flask-SocketIO server failing to properly transmit messages to the client-side JavaScript?

Could you lend a hand in figuring out the root cause of why this Express server is constantly serving up error

What could be causing the Javascript Dynamic HTML5 Table to not display on the page?

Filtering with multiple attributes in Angular using GroupBy

Attach a click event to images that are dynamically loaded through AJAX