Unit testing of the meteor default example with Jasmine - Update problem

Hi all,

I just started with Meteor and web programming with Javascript the last week.
Since two days I was just playing around with the unit test tool Jasmine and I got stuck with writing a simple automated test.

Basically my problem is when I just create the standard meteor application by typing “meteor create [appName]” I get a html and a js file with the following code:

HTML file:


  <h1>Welcome to Meteor!</h1>

  {{> hello}}

<template name="hello">
  <button id="myButton" >Click Me</button>
  <p id="myP" >You've pressed the button {{counter}} times.</p>

In the standard example the button and the p element don’t have an id. I added them to access the elements in the unit test.

Javascript File:

if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault('counter', 0);

    counter: function () {
      return Session.get('counter');

    'click button': function () {
      // increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup

After reading some tutorials related to testing with Jasmine I think the unit test should more or less look like that:

describe('clicking the button', function () {  
  // reset the counter before each test

  it('should show how many times the button was pressed', function () {
    // Get the text we are testing

    // click the button
    var text = $('#myP').text();
    //text = Session.get('counter');

    // assert that we see 'You've pressed the button times.'
    expect(text).toEqual("You've pressed the button 1 times.");


So basically this unit test should increase the counter from the standard example by one, which should then update the text in the “p” element. This should be the correct result.

However the problem is that the button gets klicked, but the text in the “p” element doesn’t get updated.
And the returned text from $(’#myP’).text(); is still "You’ve pressed the button {{counter}} times.“
I can confirm that the button click works by activating the line " //text = Session.get(‘counter’);” again. This will print the state of the counter after the click and prints “1”. So this works.

But I have no idea why the text in the “p” element doesn’t get updated.

Hi there,

sorry for pushing that, but I am still looking for a propper solution for that.

The underlying problem was: How can I unit test a meteor package which has got html input elements.
Is there a common way to do that?

Rather than click the button and immediately check for the text, you need to wait for the text to update.

Have a look at this way to wait for a condition.

You’ll need to use the done function as you’re doing an async test. See here

I think that it is as far from unit test as it could be :smiley:

@Sam: Thanks for your help.

I could do it with that:

describe(‘clicking the button’, function () {
beforeEach(function(done) {
setTimeout(function() {
done(); } ,10);

No problem

@shock is right, the test you have is more of a UI integration test than a unit test. However, keep going and learning, it’s great that you’re testing! :slight_smile: