For the life of me I can't seem to get my view to render HTML within a Jasmine test. I have been following all the tutorials I can find but nothing is working.
require(['../js/app', '../js/views/demand/match'], function(App, Match) {
App.initialize();
beforeEach(function() {
this.view = new Match();
});
describe("Instantiation", function() {
it("returns the view object", function() {
expect(this.view.render()).toEqual(this.view);
});
it("produces the correct HTML", function() {
this.view.render();
var expectedHtml = '<h2>MatchLinkTitle</h2>';
expect(this.view.el.innerHTML).toEqual(expectedHtml);
});
});
});
The above code always has a blank innerHTML property. The HTML associated to the match.js (match.html) file isn't showing up at all. Anyone have any ideas?
Related
I am trying to write a unit test for an Angular component that opens a dialog, but am unable to do so because I cannot trigger the closing of the dialog.
How can I cause the md dialog to resolve from the test case?
I have created a repository with a basic example where the problem can be reproduced, and copied the central bits below. There is an index.html to manually verify that the code is working, a test case that displays the problem and an example of how the tests are written in the md code.
Repository - https://github.com/gseabrook/md-dialog-test-issue
The component is extremely basic
angular
.module('test', ['ngMaterial'])
.component('dialogTest', {
template: '<button ng-click="showDialog()">Show Dialog</button>',
controller: function($scope, $mdDialog) {
var self = this;
$scope.showDialog = function() {
self.dialogOpen = true;
var confirm = $mdDialog.confirm()
.title('Dialog title')
.ok('OK')
.cancel('Cancel');
$mdDialog.show(confirm).then(function(result) {
self.dialogOpen = false;
}, function() {
self.dialogOpen = false;
});
}
}
});
And the test is also very simple
it("should open then close the dialog", function() {
var controller = element.controller("dialogTest");
expect(controller.dialogOpen).toEqual(undefined);
expect(element.find('button').length).toEqual(1);
element.find('button').triggerHandler('click');
expect(controller.dialogOpen).toBeTruthy();
rootScope.$apply();
material.flushInterimElement();
element.find('button').eq(2).triggerHandler('click');
rootScope.$apply();
material.flushInterimElement();
expect(controller.dialogOpen).toBeFalsy();
});
I managed to resolve the issue by setting the root element as the problem seemed to be related to element being compiled in the test being unconnected with the root element that angular-material appended the dialog too.
I've updated the github repository with the full code, but the important bits are
beforeEach(module(function($provide) {
rootElem = angular.element("<div></div>")
$provide.value('$rootElement', rootElem);
}));
beforeEach(inject(function(_$rootScope_, _$compile_, $mdDialog, _$material_) {
...
element = getCompiledElement();
angular.element(window.document.body).append(rootElem);
angular.element(rootElem).append(element);
}));
I'm currently developing a Backbone.js application which uses the Mocha, Chai, and Sinon libraries for testing. I'm struggling to code the following test: When a user clicks a button it should redirect the user to home.
Here's how the view looks like:
events: {
'click #navigate-home': 'goHome'
},
initialize: function(options) {
this.router = options.router;
},
goHome: function(event) {
event.preventDefault();
this.router.navigate('home', { trigger: true });
}
And here's the test:
beforeEach(function() {
this.router = new Backbone.Router();
this.myView = new MyView({
router: this.router
});
this.myView.render();
});
afterEach(function() {
this.router = null;
this.myView = null;
});
it('redirects to home', sinon.test(function() {
var spy = sinon.spy();
this.router.on({
'home': spy
});
this.myView.$el.find('#navigate-home').trigger('click');
expect(spy.called).to.be.true;
}));
The code works as expected on the browser, but I can't get the test to pass. I would highly appreciate any help.
Based on my limited experience with Backbone and Unit Testing, I consider this kind of test as an invalid test case.
What you are trying to test in not actually your code but you are trying to add a test case for Backbone library. Similar test cases should actually be part of your Automation (Read about Selenium).
I think the correct way to write a Unit Test in your case would be:
it('should redirect to home', sinon.test(function() {
var spy = sinon.spy();
this.router.on({
'home': spy
});
// This is the difference
this.myView.goHome({preventDefault: function() { } });
expect(spy.called).to.be.true;
});
I have simple filter which depends of moment.js:
app.filter('fromNow', function() {
return function(date) {
return moment(date).fromNow();
}
});
Have can i write unit test of this in jasmine ?
EDIT:
now i have
ReferenceError: moment is not defined
when write like that:
describe("fromNow filter", function(){
var moment;
beforeEach(function(){
module('reports');
moment = jasmine.createSpy();
});
it("should output string when input string",
inject(function(fromNowFilter) {
fromNowFilter("string");
}));
})
You need to add moment.js to the testing framework.
I had the same problem and fixed adding the following line to my karma.conf.js
...files: [
....
'app/bower_components/moment/moment.js',
....
],
.....
Here is what i am doing
My Test Script
requirejs(['jquery', 'application'], function($, app){
describe('View Products List', function(){
// All test in this test suite fails
it('Products list should be present', function(done) {
$('.productlist').length.should.equal(1);
return done();
});
it('product list should be have a checkbox for product selection', function(done) {
$('.productlist td:first input[type=checkbox]').length.should.equal(1);
return done();
});
it('product name should be anchor which could be clickable', function(done) {
$('.productlist td:first a').length.should.equal(1);
return done();enter code here
});
it('Should show product details on click of product name', function(done) {
$('.productlist td:first a').click();
$('.editproduct').length.should.equal(1);
return done();
});
});
});
Backbone View
var Products = new Backbone.View.extend({
tagName : 'div'
template : productsTemplate
render: function() {
$(this.el).html(this.template());
}
initialize: function() {
// some code
}
});
Description
When i run my test script and load the url #products the products view is rendered to the html body. I want the test case to check for the DOM elements produced by the view. It seems like the tests runs first i.e before the view renders the dom elements hence it fails. how can we make sure that the view has rendered completely before my test run ?
In Mocha async code should be included in a beforeEach section to be sure it is executed before the tests.
In your case try to re-render the view in this section :
beforeEach(function() {
productListView.render();
});
describe('View Products List', function(){
it("...
...
You can see this post for more details : http://lostechies.com/derickbailey/2012/08/17/asynchronous-unit-tests-with-mocha-promises-and-winjs/
I'm a backbone newbie, so I'm sort of fumbling on getting an app set up. I'm using the backbone-boilerplate (https://github.com/tbranyen/backbone-boilerplate) and github-viewer (https://github.com/tbranyen/github-viewer) as a reference, though when running I seem to be getting a "this.model is undefined".
Here is my current router.js:
define([
// Application.
"app",
//Modules
"modules/homepage"
],
function (app, Homepage) {
"use strict";
// Defining the application router, you can attach sub routers here.
var Router = Backbone.Router.extend({
initialize: function(){
var collections = {
homepage: new Homepage.Collection()
};
_.extend(this, collections);
app.useLayout("main-frame").setViews({
".homepage": new Homepage.Views.Index(collections)
}).render();
},
routes:{
"":"index"
},
index: function () {
this.reset();
this.homepage.fetch();
},
// Shortcut for building a url.
go: function() {
return this.navigate(_.toArray(arguments).join("/"), true);
},
reset: function() {
// Reset collections to initial state.
if (this.homepage.length) {
this.homepage.reset();
}
// Reset active model.
app.active = false;
}
});
return Router;
}
);
And my homepage.js module:
define([
"app"
],
function(app){
"use strict";
var Homepage = app.module();
Homepage.Model = Backbone.Model.extend({
defaults: function(){
return {
homepage: {}
};
}
});
Homepage.Collection = Backbone.Collection.extend({
model: Homepage.Model,
cache: true,
url: '/app/json/test.json',
initialize: function(models, options){
if (options) {
this.homepage = options.homepage;
}
}
});
Homepage.Views.Index = Backbone.View.extend({
template: "homepage",
el: '#mainContent',
render: function(){
var tmpl = _.template(this.template);
$(this.el).html(tmpl(this.model.toJSON()));
return this;
},
initialize: function(){
this.listenTo(this.options.homepage, {
"reset": function(){
this.render();
},
"fetch": function() {
$(this.el).html("Loading...");
}
});
}
});
return Homepage;
});
Thanks in advance for the help!
Update: After much googling (you should see how many tabs I have open), I think I made a little bit of headway, but still no luck. I updated my router to have the following:
app.useLayout("main-frame").setViews({
".homepage": new Homepage.Views.Index()
}).render();
I made a number of modifications to my homepage.js module to now look like this:
define([
"app",
["localStorage"]
],
function(app){
"use strict";
var Homepage = app.module();
Homepage.Model = Backbone.Model.extend({
defaults: function(){
return {
homepage: {}
};
}
});
Homepage.Collection = Backbone.Collection.extend({
//localStorage: new Backbone.LocalStorage("Homepage.Collection"),
refreshFromServer: function() {
return Backbone.ajaxSync('read', this).done( function(data){
console.log(data);
//save the data somehow?
});
},
model: Homepage.Model,
cache: true,
url: '/app/json/test.json',
initialize: function(options){
if (options) {
this.homepage = options.homepage;
}else{
//this.refreshFromServer();
}
}
});
Homepage.Views.Index = Backbone.View.extend({
template: "homepage",
el: '#mainContent',
initialize: function(){
var self = this;
this.collection = new Homepage.Collection();
this.collection.fetch().done( function(){
self.render();
});
},
render: function(){
var data = this.collection;
if (typeof(data) === "undefined") {
$(this.el).html("Loading...");
} else {
$(this.el).html(_.template(this.template, data.toJSON()));
}
return this;
}
});
return Homepage;
});
As you can see, I have localStorage code but commented out for now because I just want to get everything working first. The ultimate goal is to have an initial call that loads data from a JSON file, then continues afterwards using localStorage. The app will later submit data after the user does a number of interactions with my app.
I am getting the main view to load, though the homepage module isn't populating the #mainContent container in the main view.
I did all of the googling that I could but frustrated that it's just not sinking in for me. Thanks again for looking at this and any feedback is appreciated!
I think your class hierarchy is a bit wonky here. Your instance of Homepage.Collection is actually assigning a homepage property out of options, for instance. Then you pass an instance of Homepage.Collection into Homepage.Views.Index as the homepage option... It's a bit hard to follow.
That said, it seems to me your problem is simply that you aren't supply a model option when you construct your Homepage.Views.Index:
new Homepage.Views.Index(collections)
collections doesn't have a model property, and thus I don't see how this.model.toJSON() later on in the view can have a model to access. Basically, you seem to want Homepage.Views.Index to handle a collection of models, not just one. So you probably need a loop in your render function that goes over this.collection (and you should change your construction of the view to have a collection option instead of homepage option).
If I'm missing something here or I'm unclear it's because of this data model oddness I mentioned earlier. Feel free to clarify how you've got it reasoned out and we can try again :)
This example code you have is a little bit confusing to me, but I think the problem lies in the following two lines of code:
".homepage": new Homepage.Views.Index(collections)
$(this.el).html(tmpl(this.model.toJSON()));
It looks like you pass a collection to the view, but in the view you use this.model, hence the error "this.model is undefined", since it is indeed undefined.
If you aren't in any rush, may I suggest that you start over. It seems you are trying too much too quickly. I see that you have backbone, requirejs (or some other module loader), and the boilerplate, which is a lot to take in for someone new to backbone. Trust me, I know, because I am relatively new, too. Maybe start with some hello world stuff and slowly work your way up. Otherwise, hacking your way through bits of code from various projects can get confusing.