5
\$\begingroup\$

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 = $('<a href="" class="js-route-to" data-target="exampleModuleName">some text</a>');

        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 example. I want to learn more about testing.

\$\endgroup\$
3
\$\begingroup\$

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'
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.