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