Proper method for integration testing with sanjo:jasmine and Blaze.render in

Question

I am using sanjo:jasmine to do testing of my app. I am trying to do a simple check to see if a link element is present in my header template using a client-side integration test and Blaze.render. I am using alanning:roles for managing the roles.

In my template I something like this (minimized for simplicity sake):

<template name="header">
    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-top navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only fa fa-bars"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a id="homelink" class="navbar-brand {{isActiveRoute regex='home' className='active'}}" href="/">AppName</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li class="{{isActiveRoute regex='dashboard' className='active'}}"><a id="daskboardlink" href="{{pathFor 'dashboard'}}">Dashboard</a></li>
                    {{#if isInRole 'ADMIN'}}
                        <li class="{{isActiveRoute regex='admin' className='active'}}"><a id="adminlink" href="{{pathFor 'admin'}}">Administration</a></li>
                    {{/if}}
                </ul>
                <ul class="nav navbar-nav navbar-right">
                  {{#if currentUser}}
                    <a href="/signout">Sign Out</a>
                  {{else}}
                  <a href="/signin">Sign In</a>
                  {{/if}}
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</template>

And in my test I do:

describe("Header template - NO MOCKS", function() {
  it("should not show Admin for anonymous users", function() {
    var div = document.createElement("DIV");
    Blaze.render(Template.header, div);

    expect($(div).find("#adminlink")[0]).not.toBeDefined();
  });

  it("should show home for anonymous users", function() {
    var div = document.createElement("DIV");
    Blaze.render(Template.header, div);

    expect($(div).find("#homelink")[0]).toBeDefined();
  });


  ////////////////////////
  // Admin user header tests
  it("should be able to login an admin user", function() {
    Meteor.loginWithPassword('admin', 'admin', function (err) {
      expect(err).toBeUndefined();
      done();
    });
  });

  it("should show Forms for admin users", function() {
    var div = document.createElement("DIV");
    Blaze.render(Template.header, div);

    expect($(div).find("#adminlink")[0]).toBeDefined();
  });

  it("should be able to logout an admin user", function (done) {
    Meteor.logout(function (err) {
      expect(err).toBeUndefined();
      done();
    });
  });
});

The first set of tests for anonymous users passes fine, as does the login and logout for the Admin. However, the test to see if the #adminlink is present fails. This seems to be the correct way to test if an element is present from within a test, but it seems like maybe the template isn't fully rendered yet.

Answer 1

add in the helper as described here then add beforeEach at the top of your spec, as here:

describe("Header template - NO MOCKS", function() {
    beforeEach(function (done) {
        Router.go('/');
        Tracker.afterFlush(done);
    });

    beforeEach(waitForRouter);

    ...rest of your code
}