(function (define) {
    'use strict';

    define(['jquery',
            'underscore',
            'js/components/header/views/header',
            'js/components/header/models/header'
           ],
           function($, _, HeaderView, HeaderModel) {

               describe('header component view', function () {
                   var model, view;

                   var testBreadcrumbs = function (breadcrumbs) {
                       model.set('breadcrumbs', breadcrumbs);
                       expect(view.$el.html()).toContain('<nav class="breadcrumbs">');
                       _.each(view.$('.nav-item'), function (el, index) {
                           expect($(el).attr('href')).toEqual(breadcrumbs[index].url);
                           expect($(el).text()).toEqual(breadcrumbs[index].title);
                       });
                   };

                   beforeEach(function () {
                       model = new HeaderModel({
                           title: 'Test title',
                           description: 'Test description'
                       });
                       view = new HeaderView({
                           model: model
                       });
                   });

                   it('can render itself', function () {
                       expect(view.$el.text()).toContain('Test title');
                       expect(view.$el.text()).toContain('Test description');
                   });

                   it('does not show breadcrumbs by default', function () {
                       expect(view.$el.html()).not.toContain('<nav class="breadcrumbs">');
                   });

                   it('shows breadcrumbs if they are supplied', function () {
                       testBreadcrumbs([
                           {url: 'url1', title: 'Crumb 1'},
                           {url: 'url2', title: 'Crumb 2'}
                       ]);
                       testBreadcrumbs([{url: 'url1', title: 'Crumb 1'}]);
                   });

                   it('renders itself when its model changes', function () {
                       expect(view.$el.text()).toContain('Test title');
                       model.set('title', 'Changed title');
                       expect(view.$el.text()).toContain('Changed title');
                   });
               });
           }
          );
}).call(this, define || RequireJS.define);