Spying on a constructor using Jasmine

Question

I am using Jasmine to test if certain objects are created and methods are called on them.

I have a jQuery widget that creates flipcounter objects and calls the setValue method on them. The code for flipcounter is here: https://bitbucket.org/cnanney/apple-style-flip-counter/src/13fd00129a41/js/flipcounter.js

The flipcounters are created using:

var myFlipCounter = new flipCounter("counter", {inc: 23, pace: 500});

I want to test that the flipcounters are created and the setValue method is called on them. My problem is that how do I spy on these objects even before they are created? Do I spy on the constructor and return fake objects? Sample code would really help. Thanks for your help! :)

Update:

I've tried spying on the flipCounter like this:

myStub = jasmine.createSpy('myStub');
spyOn(window, 'flipCounter').andReturn(myStub);

//expectation
expect(window.flipCounter).toHaveBeenCalled();

Then testing for the setValue call by flipCounter:

spyOn(myStub, 'setValue');

//expectation
expect(myStub.setValue).toHaveBeenCalled();

the first test for initializing flipCounter is fine, but for testing the setValue call, all I'm getting is a 'setValue() method does not exist' error. Am I doing this the right way? Thanks!

I want to make sure it that the flipcounter is created and the proper value is set. — gerky, Feb 19 '12 at 08:16

score 50 · Accepted Answer · answered Feb 19 '12 at 09:26

50

flipCounter is just another function, even if it also happens to construct an object. Hence you can do:

var cSpy = spyOn(window, 'flipCounter');

to obtain a spy on it, and do all sorts of inspections on it or say:

var cSpy = spyOn(window, 'flipCounter').andCallThrough();
var counter = flipCounter('foo', options);
expect(cSpy).wasCalled();

However, this seems overkill. It would be enough to do:

var myFlipCounter = new flipCounter("counter", options);
expect(myFlipCounter).toBeDefined();
expect(myFlipCounter.getValue(foo)).toEqual(bar);

answered Feb 19 '12 at 09:26

ggozad

13,105
3
40
49

No spying on a spy like that is not a good idea ;) I would either use the second approach I took above, test and spy separately on setValue to make sure that works too. – ggozad Feb 19 '12 at 15:24
In any case when you do spyOn(window, 'flipCounter').andReturn(myStub); you have replaced your constructor with something that does nothing. You must either callThrough or replicate the constructor while testing it. – ggozad Feb 19 '12 at 15:27
If ALL you want to do is check that setValue was called, don't spy on the constructor. Rather spy (and callThrough()) on setValue. You can then check that it was called, check its arguments, and still have the object. – ggozad Feb 19 '12 at 15:39
3

The syntax in Jasmine 2.0 is spyOn(foo, 'getBar').and.callThrough(); – Vinicius Braz Pinto Aug 19 '14 at 17:48
5

If you are running this code server-side, and there is no window, what can you use to refer to the environment where new flipCounter() is called? – ritmatter Dec 30 '14 at 06:04
I had issues spying on constructors. Even calling through did not result in the expected object, and then resulted in errors further down the code path when something tried to call functions from the object's prototype. – nbering Aug 27 '15 at 04:38
@ritmatter: use `global` instead of `window` if running server-side – Sean Jan 25 '16 at 23:25
1

Hmm - this doesn't quite make sense. The example at the bottom of it is odd. I've certainly wanted to create spies to inject this into other code - ie code that will construct something gets a spy instead so you can manipulate it's behaviour under test. – Danny Staple Jun 19 '16 at 12:40
+1, this approach doesn't seem to work in more complicated scenarios, such as TypeScript classes. There's no class object defined in the global/window scope. How could one work around that? – dan Aug 19 '17 at 22:59

score 16 · Answer 2 · answered Jun 09 '16 at 20:26

16

I would suggest using jasmine.createSpyObj() when you want to mock objects with properties that need to be spied on.

myStub = jasmine.createSpyObj('myStub', ['setValue']);
spyOn(window, 'flipCounter').andReturn(myStub);

This tests interactions with the expected flipCounter interface, without depending on the flipCounter implementation.

answered Jun 09 '16 at 20:26

Jared Deckard

633
6
15

2

I prefer this answer over @ggozad's answer, because it keeps external modules isolated from tests and uses a built-in jasmine utility designed specifically for mocking instance-like objects. – Jared Deckard Jun 09 '16 at 20:32

HolgerJeromin · Answer 3 · 2023-04-19T14:53:24.887

7

My version to test a constructor is to spy on the prototype:

const valueSpy = spyOn(flipCounter.prototype, 'setValue').and.callThrough();
const myFlipCounter = new flipCounter("counter", {inc: 23, pace: 500});
expect(flipCounter.prototype.setValue).toHaveBeenCalledTimes(1);
// or
expect(valueSpy).toHaveBeenCalledTimes(1);

edited Apr 19 '23 at 14:53

answered Sep 20 '17 at 08:35

HolgerJeromin

2,201
20
21

Nice, thanks. This also works perfectly with built-in objects like `XMLHttpRequest` – Daniel Hilgarth Oct 03 '17 at 18:12
For ajax mockup i use this one: https://jasmine.github.io/2.2/ajax.html – HolgerJeromin Dec 01 '17 at 07:20
1

Best answer! Works for me perfectly :) I needed to callFake method in my contructor. – Verri Aug 23 '22 at 13:54
This solution continues to work, where the others have never worked for me. – jake Dec 05 '22 at 12:55

score 5 · Answer 4 · answered Jun 05 '14 at 15:33

The following does not rely on 'window'. Lets say this is the code you want to test -

function startCountingFlips(flipCounter) {
    var myFlipCounter = new flipCounter("counter", {inc: 23, pace: 500});
}

Your test could be -

var initSpy = jasmine.createSpy('initFlipCounter');
var flipCounter = function(id, options) {
    initSpy(id, options);
}
startCountingFlips(flipCounter);
expect(initSpy).toHaveBeenCalledWith("counter", {inc:23, pace:500});

score 4 · Answer 5 · answered Oct 20 '15 at 13:48

You have to implement a fake constructor for flipCounter that sets the setValue property to a spy function. Let's say the function you want to test is this:

function flipIt() {
  var myFlipCounter = new flipCounter("counter", {inc: 23, pace: 500});
  myFlipCounter.setValue(100);
}

Your spec should look like this:

describe('flipIt', function () {
  var setValue;
  beforeEach(function () {
    setValue = jasmine.createSpy('setValue');
    spyOn(window, 'flipCounter').and.callFake(function () {
      this.setValue = setValue;
    });
    flipIt();
  });
  it('should call flipCounter constructor', function () {
    expect(window.flipCounter)
      .toHaveBeenCalledWith("counter", {inc: 23, pace: 500});
  });
  it('should call flipCounter.setValue', function () {
    expect(setValue).toHaveBeenCalledWith(100);
  });
});

ebaxt · Answer 6 · 2012-02-19T09:09:06.790

Don't know how to do this using jasmine mocks, but if you want powerful mocking/spy/stubs I recommend sinon.js, wich works very well with jasmine.

From docs:

A test spy is a function that records arguments, return value, the value of this and exception thrown (if any) for all its calls. A test spy can be an anonymous function or it can wrap an existing function.

Mocks (and mock expectations) are fake methods (like spies) with pre-programmed behavior (like stubs) as well as pre-programmed expectations. A mock will fail your test if it is not used as expected.

With sinon.js you could create a mock of the flipCounter constructor that returns another spy.

Then assert that the constructor was called using constructorMock.calledWithNew(), and assert that the returned spy was called with returnedSpy.calledWith(arg1, arg2...).

No need to use an extra library when Jasmine has capable mocks built in. Sinon.js is useful for other things though — sMoZely, Jan 01 '14 at 17:48

Spying on a constructor using Jasmine

6 Answers6

Linked