Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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
You can’t perform that action at this time.