todoItemView-mochajs.js

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);
            });
        });
    });
});