如何模拟嵌套方法？

Question

I'm learning more about Jasmine Unit Testing and I've ran into something that I can't figure out. I'm new to both JavaScript and Unit Testing. I've tried to look for examples about nested methods and mocking them, but I'm still unable to have a successful test. I'm making a game with PhaserJS (HTML5 Game Library) and I've written successful tests so far. This is an example of my successful test.

 function createGameScreenBorder(gameState) {
      var border = gameState.game.add.graphics();
    }

This is my test block.

it("create gamescreen background border", function() {
    gameState.game = {
    add: jasmine.createSpyObj('add', ['graphics'])
    };
      createGameScreenBorder(gameState);
      expect(gameState.game.add.graphics).toHaveBeenCalled();
    });

Now the above code works, it doesn't do much. What I want is to draw a rectangle which is a method part of the graphics method.

function createGameScreenBorder(gameState) {
      var border = gameState.game.add.graphics();
          // drawRect: x, y width, length
          border.drawRect(0, 0, 0, 0);
      }

This is my test block.

    it("create gamescreen background border", function() {
          gameState.game = {
            add: {
              graphics: jasmine.createSpyObj('graphics', ['drawRect'])
            }
          }
          createGameScreenBorder(gameState);
          expect(gameState.game.add.graphics).toHaveBeenCalled();
          expect(gameState.game.add.graphics().lineStyle).toHaveBeenCalledWith(0,0,0,0);
        });

I want to be able to make sure that drawRect() is called with my parameters, but I am confused as to how to do it.

Thank you!

Answer 1

The gameState.game.add.graphics() returns an object that has a drawRect() method on it.

First you want to check if the gameState.game.add.graphics() was called - this is already done. Then check if the drawRect() was called on the object returned from this method. To do that, set up your spy to return an object that also has a spy on it.

it("create gamescreen background border", function() {
  let resultObject = {
    drawRect: jasmine.createSpy()
  };

  gameState.game.add = {
    graphics: jasmine.createSpy().and.callFake(() => {
      return resultObject;
    })
  };

  createGameScreenBorder(gameState);

  expect(gameState.game.add.graphics).toHaveBeenCalled();
  expect(resultObject.drawRect).toHaveBeenCalledWith(0, 0, 0, 0);
});