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:
<head>
<title>mytest</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button id="myButton" >Click Me</button>
<p id="myP" >You've pressed the button {{counter}} times.</p>
</template>
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);
Template.hello.helpers({
counter: function () {
return Session.get('counter');
}
});
Template.hello.events({
'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
beforeEach(function(){
});
it('should show how many times the button was pressed', function () {
// Get the text we are testing
// click the button
$("#myButton").click();
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.
