I'm new to both canJS and FuncUnit and am trying to develop a demo app using TDD. I have used Jasmine in the past so I decided to continue to try it here.
The app is very similar to the todo sample app. It's a list of comments with a small form to add a new comment when the user clicks a button. The app itself runs fine, I can add, delete, edit comments etc... it's only the testing of these actions that I can't get to work.
I am able to get FuncUnit to run, pop open the app, count the preloaded comments (a test I removed here for simplicity) but when the test fills in the two inputs and clicks the button, you can visually see the button click but the component's handler is never called.
Here is the component code:
- can.Component.extend({
- tag: "comments",
- scope:{
- comments: new Comment.List({}),
- makeComment: function(){
- console.log("Button Handler in action");
- var self = this;
- new Comment({
- comment_title: $('#inputTitle').val(),
- comment_text: $('#textComment').val()
- }).save(function(){
- // reset form fields to empty
- $('#inputTitle').val('');
- $('#textComment').val('');
- // repopulate the list
- var comList = new Comment.List({});
- self.attr('comments',comList ); // assign back to list var
- });
- }
- }
- });
<comments>
<div class="main">
<h2>Comments</h2>
<form class="form-horizontal comment-form" onsubmit="return false;" >
<div class="form-group">
<label for="inputTitle" class="col-sm-2 control-label">Title</label>
<div class="col-sm-8">
<input type="title" class="form-control" id="inputTitle" placeholder="Title">
</div>
</div>
<div class="form-group">
<label for="textComment" class="col-sm-2 control-label">Comment</label>
<div class="col-sm-8">
<textarea class="form-control" id="textComment" placeholder="Enter comment here"></textarea>
</div>
</div>
<div class="form-group ">
<div class="col-sm-8 pull-right">
<button id="addBtn" class="btn btn-success" type="button" can-click="makeComment">Add Comment</button>
</div>
</div>
</form>
</div>
<comment-list comments="comments"></comment-list>
</comments>
I am using a jasmine test-runner.html that I borrowed from the FuncUnit examples .zipfile for the todos except I pulled out the use of the iFrame and am simply popping open the app from my test script as follows:
- F.speed = 100;
- beforeEach(function () {
- F.open('app.html');
- });
- describe("A Comments Component", function () {
- it("Button cLick should add comment to list", function () {
- // add a new item
- var newTitle = F('#inputTitle');
- newTitle.type('Super Comment');
- var newComment = F('#textComment');
- newComment.type('This is a very, very long comment about very interesting things');
- F('#addBtn').click(function () {
- console.log('clicked button');
- });
- F.wait(2000, function () {
- console.log('looking at list');
- var currentListElements = F("#comments").find('li').length;
- expect(currentListElements).toBe(4);
- });
- });
- });
When I run the test-runner, the app opens, the text fields are filled in, the button clicks but the can-click function (makeComment) does not run so the comment is not added and the test fails.
I have tried using an event listener ("#addBtn click": function...) instead of the can-click and got the same result - app runs but test doesn't.
Any help or suggestions would be appreciated.
Thanks.