HiveBrain v1.2.0
Get Started
← Back to all entries
patternjavascriptMinor

spyOn click events and check call function

Submitted by: @import:stackexchange-codereview··
0
Viewed 0 times
clickeventsspyonfunctioncallandcheck

Problem

I'm trying to write Jasmine tests and I need a review and some advice on spying on events and their behavior.

// my example source code
;(function () {
  var app = {

    exampleModuleName: {
      navigateTo: function () { /* do something */ }
    },

    navigation: {
      init: function () {
        this.routeHandler = this.handleRouteTo.bind(this);

        // bind all events
        this.bind();
      },
      bind: function () {            
        $(document).on('click', '.js-route-to', this.routeHandler);
      },
      teardown: function () {
        $(document).off('click', this.routeHandler);
      },

      handleRouteTo: function (event) {
        event.preventDefault();
        this.routeTo($(event.currentTarget).data('target'));
      },

      routeTo: function (target) {
        var module = app[target];
        if (module && $.isFunction(module.navigateTo)) {
            module.navigateTo();
        }
      },
    }
  };
}());


And that is my uncompleted spec file.

// my test code
describe('App Navigation', function () {

  describe('initiation the navigation module', function() {

    it ('spy on behavior', function () {
        var spy = spyOn(app.navigation, 'init');
        app.navigation.init();
        expect(spy).toHaveBeenCalled();
    });

    // which tests are missing to be sure about well tested properties and methodes?
   });

  describe('test routeTo handler', function() {
    var nav = app.navigation;

    beforeEach(function () {
        this.routeHandler = nav.handleRouteTo.bind(this);
    });

    it ('should be defined', function () {
        expect(this.routeHandler).toBeDefined();
    });

    it ('click at a link', function () {
        var node = $('some text');

        expect(node.length).toBe(1);

        spyOn(nav, 'handleRouteTo');
        node.click();

        // why is it failed?
        expect(nav.handleRouteTo).toHaveBeenCalled();
    });

  });
});


Please take a look and let us talk about this e

Solution

From a once over:

-
I would drop this test, you are testing Jasmine and/or the test, but not the results of calling app.navigation.init()

it ('spy on behavior', function () {
    var spy = spyOn(app.navigation, 'init');
    app.navigation.init();
    expect(spy).toHaveBeenCalled();
});


  • Be aware that Function.bind() which you use in navigation.init() creates a brand new function, so this.routeHandler never calls this.hanldeRouteTo



  • Also be aware that you are not calling app.navigation.bind() as far as I can tell, so the binding of the event is not happening



  • Perhaps you are not a native English native speaker, but your describe calls are not up to snuff. It hampers my reading flow of the code. Example: 'initiation the navigation module'

Code Snippets

it ('spy on behavior', function () {
    var spy = spyOn(app.navigation, 'init');
    app.navigation.init();
    expect(spy).toHaveBeenCalled();
});

Context

StackExchange Code Review Q#32573, answer score: 3

Revisions (0)

No revisions yet.