This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
describe('TodoView', function() { | |
var Todo = requirejs('models/todo'); | |
var TodoView = requirejs('views/todoView'); | |
var Common = requirejs('common'); | |
var $ = requirejs('jquery'); | |
var todo, todoView; | |
beforeEach(function() { | |
todo = new Todo(); | |
todoView = new TodoView({model:todo}); | |
}); | |
afterEach(function() { | |
todoView.remove(); | |
}); | |
it('tagName should equal li', function() { | |
expect(todoView.tagName).to.equal('li'); | |
}); | |
it('render view', function() { | |
var view = new TodoView({model: new Todo({title: 'todo1', completed: true})}); | |
view.render(); | |
expect(view.$input.val()).to.equal('todo1'); | |
expect(view.$el.hasClass('completed')).to.be.true; | |
}); | |
describe('listeners', function() { | |
it('when model title change then render view', function() { | |
todo.set('title','title updated'); | |
expect(todoView.$input.val()).to.equal('title updated'); | |
}); | |
it('when model destroy then remove view', function() { | |
var spy = sinon.spy(todoView,'remove'); | |
todoView.initialize(); | |
todo.destroy(); | |
expect(spy).have.been.called; | |
}); | |
it('when model trigger visible then view has class hidden', function() { | |
Common.TodoFilter = 'completed'; | |
todo.trigger('visible'); | |
expect(todoView.$el.hasClass('hidden')).to.be.true; | |
}); | |
}); | |
describe('events', function() { | |
var createEvent = function(eventName, keyCode) { | |
var e = $.Event(eventName); | |
e.which = keyCode; | |
return e; | |
}; | |
var setupOnEditModeWithValue = function(val) { | |
todo.set('title',val); | |
todoView.$el.find('label').dblclick(); | |
}; | |
describe('when click', function() { | |
beforeEach(function() { | |
todoView.render(); | |
}); | |
it('class toggle then model completed', function() { | |
var spy = sinon.stub(todo,'save'); | |
todoView.$el.find('.toggle').click(); | |
expect(todo.get('completed')).to.be.true; | |
expect(spy).have.callCount(1); | |
}); | |
it('class destroy then destroy model', function() { | |
var spy = sinon.spy(todo,'destroy'); | |
todoView.$el.find('.destroy').click(); | |
expect(spy).have.callCount(1); | |
}); | |
}); | |
it('when double click label then switch to edit mode', function() { | |
todo.set('title','todo1'); | |
todoView.$el.find('label').dblclick(); | |
expect(todoView.$el.hasClass('editing')).to.be.true; | |
expect(todoView.$el.find('.edit:focus')).to.have.length(1); | |
}); | |
describe('when keypress class edit', function() { | |
it('on enter then save', function() { | |
var spy = sinon.stub(todo,'save'); | |
setupOnEditModeWithValue('todo1'); | |
todoView.$el.find('.edit').trigger(createEvent('keypress', Common.ENTER_KEY)); | |
expect(todoView.$el.hasClass('editing')).to.be.false; | |
expect(spy).have.callCount(1); | |
}); | |
describe('but not save', function() { | |
var spy; | |
beforeEach(function() { | |
spy = sinon.spy(todo,'save'); | |
}); | |
[{value: '', description: 'empty'}, | |
{value: ' ', description: 'with space'}] | |
.forEach(function(test) { | |
it('when enter and title '+ test.description, function() { | |
setupOnEditModeWithValue(test.value); | |
todoView.$el.find('.edit').trigger(createEvent('keypress', Common.ENTER_KEY)); | |
expect(todoView.$el.hasClass('editing')).to.be.false; | |
}); | |
}); | |
it('when not press enter', function() { | |
setupOnEditModeWithValue('todo1'); | |
todoView.$el.find('.edit').trigger(createEvent('keypress', 65)); | |
expect(todoView.$el.hasClass('editing')).to.be.true; | |
}); | |
afterEach(function() { | |
expect(spy).have.callCount(0); | |
}); | |
}); | |
}); | |
it('when blur class edit then save', function() { | |
var spy = sinon.stub(todo,'save'); | |
setupOnEditModeWithValue('todo1'); | |
todoView.$input.focusout(); | |
expect(todoView.$el.hasClass('editing')).to.be.false; | |
expect(spy).have.callCount(1); | |
}); | |
describe('when keydown class edit', function() { | |
beforeEach(function() { | |
setupOnEditModeWithValue('todo1'); | |
todoView.$input.val('todo1 updated'); | |
}); | |
it('on escape key then revert title', function() { | |
todoView.$el.find('.edit').trigger(createEvent('keydown', Common.ESC_KEY)); | |
expect(todoView.$input.val()).to.equal('todo1'); | |
expect(todoView.$el.hasClass('editing')).to.be.false; | |
}); | |
it('but no escape key fire no changes', function() { | |
todoView.$el.find('.edit').trigger(createEvent('keydown', 65)); | |
expect(todoView.$input.val()).to.equal('todo1 updated'); | |
expect(todoView.$el.hasClass('editing')).to.be.true; | |
}); | |
}); | |
}); | |
describe('is hidden', function() { | |
var tests = [ | |
{filter: 'completed', completed: false, hidden: true}, | |
{filter: 'completed', completed: true, hidden: false}, | |
{filter: 'pending', completed: false, hidden: false}, | |
{filter: 'pending', completed: true, hidden: true}, | |
{filter: '', completed: false, hidden: false}, | |
{filter: '', completed: true, hidden: false}, | |
]; | |
tests.forEach(function(test) { | |
it('when filter '+ (test.filter===''?'empty':test.filter)+' and todo '+(test.completed?'':'not ')+'completed then hidden '+test.hidden, function() { | |
Common.TodoFilter = test.filter; | |
todo.set('completed',test.completed); | |
expect(todoView.isHidden()).to.equal(test.hidden); | |
}); | |
}); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment