BLD-1121: Create new group configurations page.

cms/static/js/spec/models/group_configuration_spec.js

@@ -1,9 +1,8 @@
 define([
-    'backbone', 'js/models/group_configuration',
-    'js/collections/group_configuration', 'js/models/group',
-    'js/collections/group', 'coffee/src/main'
+    'backbone', 'coffee/src/main', 'js/models/group_configuration',
+    'js/models/group', 'js/collections/group'
 ], function(
-    Backbone, GroupConfiguration, GroupConfigurationSet, Group, GroupSet, main
+    Backbone, main, GroupConfigurationModel, GroupModel, GroupCollection
 ) {
     'use strict';
     beforeEach(function() {
@@ -14,10 +13,10 @@ define([
       });
     });
 
-    describe('GroupConfiguration model', function() {
+    describe('GroupConfigurationModel', function() {
         beforeEach(function() {
             main();
-            this.model = new GroupConfiguration();
+            this.model = new GroupConfigurationModel();
         });
 
         describe('Basic', function() {
@@ -33,16 +32,10 @@ define([
                 expect(this.model.get('showGroups')).toBeFalsy();
             });
 
-            it('should have a GroupSet with two groups by default', function() {
+            it('should be empty by default', function() {
                 var groups = this.model.get('groups');
 
-                expect(groups).toBeInstanceOf(GroupSet);
-                expect(groups.length).toEqual(2);
-                expect(groups.at(0).isEmpty()).toBeTruthy();
-                expect(groups.at(1).isEmpty()).toBeTruthy();
-            });
-
-            it('should be empty by default', function() {
+                expect(groups).toBeInstanceOf(GroupCollection);
                 expect(this.model.isEmpty()).toBeTruthy();
             });
 
@@ -53,21 +46,23 @@ define([
                 expect(this.model.get('name')).toEqual('');
             });
 
-            it('should not be dirty by default', function() {
-                expect(this.model.isDirty()).toBeFalsy();
-            });
-
             it('should be dirty after it\'s been changed', function() {
                 this.model.set('name', 'foobar');
 
                 expect(this.model.isDirty()).toBeTruthy();
             });
 
-            it('should not be dirty after calling setOriginalAttributes', function() {
-                this.model.set('name', 'foobar');
-                this.model.setOriginalAttributes();
+            describe('should not be dirty', function () {
+                it('by default', function() {
+                    expect(this.model.isDirty()).toBeFalsy();
+                });
 
-                expect(this.model.isDirty()).toBeFalsy();
+                it('after calling setOriginalAttributes', function() {
+                    this.model.set('name', 'foobar');
+                    this.model.setOriginalAttributes();
+
+                    expect(this.model.isDirty()).toBeFalsy();
+                });
             });
         });
 
@@ -96,7 +91,7 @@ define([
             it('should match server model to client model', function() {
                 var serverModelSpec = {
                       'id': 10,
-                      'name': 'My GroupConfiguration',
+                      'name': 'My Group Configuration',
                       'description': 'Some description',
                       'groups': [
                         {
@@ -108,9 +103,10 @@ define([
                     },
                     clientModelSpec = {
                       'id': 10,
-                      'name': 'My GroupConfiguration',
+                      'name': 'My Group Configuration',
                       'description': 'Some description',
                       'showGroups': false,
+                      'editing': false,
                       'groups': [
                         {
                           'name': 'Group 1'
@@ -119,7 +115,7 @@ define([
                         }
                       ]
                     },
-                    model = new GroupConfiguration(serverModelSpec);
+                    model = new GroupConfigurationModel(serverModelSpec);
 
                 expect(deepAttributes(model)).toEqual(clientModelSpec);
                 expect(model.toJSON()).toEqual(serverModelSpec);
@@ -128,55 +124,22 @@ define([
 
         describe('Validation', function() {
             it('requires a name', function() {
-                var model = new GroupConfiguration({ name: '' });
-
-                expect(model.isValid()).toBeFalsy();
-            });
-
-            it('requires at least one group', function() {
-                var model = new GroupConfiguration({ name: 'foo' });
-                model.get('groups').reset();
-
-                expect(model.isValid()).toBeFalsy();
-            });
-
-            it('requires a valid group', function() {
-                var group = new Group(),
-                    model = new GroupConfiguration({ name: 'foo' });
-
-                group.isValid = function() { return false; };
-                model.get('groups').reset([group]);
-
-                expect(model.isValid()).toBeFalsy();
-            });
-
-            it('requires all groups to be valid', function() {
-                var group1 = new Group(),
-                    group2 = new Group(),
-                    model = new GroupConfiguration({ name: 'foo' });
-
-                group1.isValid = function() { return true; };
-                group2.isValid = function() { return false; };
-                model.get('groups').reset([group1, group2]);
+                var model = new GroupConfigurationModel({ name: '' });
 
                 expect(model.isValid()).toBeFalsy();
             });
 
             it('can pass validation', function() {
-                var group = new Group(),
-                    model = new GroupConfiguration({ name: 'foo' });
-
-                group.isValid = function() { return true; };
-                model.get('groups').reset([group]);
+                var model = new GroupConfigurationModel({ name: 'foo' });
 
                 expect(model.isValid()).toBeTruthy();
             });
         });
     });
 
-    describe('Group model', function() {
+    describe('GroupModel', function() {
         beforeEach(function() {
-            this.model = new Group();
+            this.model = new GroupModel();
         });
 
         describe('Basic', function() {
@@ -191,22 +154,22 @@ define([
 
         describe('Validation', function() {
             it('requires a name', function() {
-                var model = new Group({ name: '' });
+                var model = new GroupModel({ name: '' });
 
                 expect(model.isValid()).toBeFalsy();
             });
 
             it('can pass validation', function() {
-                var model = new Group({ name: 'a' });
+                var model = new GroupModel({ name: 'a' });
 
                 expect(model.isValid()).toBeTruthy();
             });
         });
     });
 
-    describe('Group collection', function() {
+    describe('GroupCollection', function() {
         beforeEach(function() {
-            this.collection = new GroupSet();
+            this.collection = new GroupCollection();
         });
 
         it('is empty by default', function() {

cms/static/js/spec/views/group_configuration_spec.js

@@ -1,12 +1,31 @@
 define([
-    'js/models/group_configuration', 'js/models/course',
-    'js/collections/group_configuration', 'js/views/group_configuration_details',
-    'js/views/group_configurations_list', 'jasmine-stealth'
+    'js/models/course', 'js/models/group_configuration',
+    'js/collections/group_configuration',
+    'js/views/group_configuration_details',
+    'js/views/group_configurations_list', 'js/views/group_configuration_edit',
+    'js/views/group_configuration_item', 'js/views/feedback_notification',
+    'js/spec_helpers/create_sinon', 'js/spec_helpers/edit_helpers',
+    'jasmine-stealth'
 ], function(
-    GroupConfigurationModel, Course, GroupConfigurationSet,
-    GroupConfigurationDetails, GroupConfigurationsList
+    Course, GroupConfigurationModel, GroupConfigurationCollection,
+    GroupConfigurationDetails, GroupConfigurationsList, GroupConfigurationEdit,
+    GroupConfigurationItem, Notification, create_sinon, view_helpers
 ) {
     'use strict';
+    var SELECTORS = {
+        detailsView: '.group-configuration-details',
+        editView: '.group-configuration-edit',
+        itemView: '.group-configurations-list-item',
+        group: '.group',
+        name: '.group-configuration-name',
+        description: '.group-configuration-description',
+        groupsCount: '.group-configuration-groups-count',
+        groupsAllocation: '.group-allocation',
+        errorMessage: '.group-configuration-edit-error',
+        inputName: '.group-configuration-name-input',
+        inputDescription: '.group-configuration-description-input'
+    };
+
     beforeEach(function() {
         window.course = new Course({
             id: '5',
@@ -26,6 +45,20 @@ define([
                 } else {
                     return trimmedText.indexOf(text) !== -1;
                 }
+            },
+            toBeCorrectValuesInInputs: function (values) {
+                var expected = {
+                    name: this.actual.$(SELECTORS.inputName).val(),
+                    description: this.actual
+                        .$(SELECTORS.inputDescription).val()
+                };
+
+                return _.isEqual(values, expected);
+            },
+            toBeCorrectValuesInModel: function (values) {
+                return _.every(values, function (value, key) {
+                    return this.actual.get(key) === value;
+                }.bind(this));
             }
         });
     });
@@ -35,13 +68,8 @@ define([
     });
 
     describe('GroupConfigurationDetails', function() {
-        var tpl = readFixtures('group-configuration-details.underscore');
-
         beforeEach(function() {
-            setFixtures($('<script>', {
-                id: 'group-configuration-details-tpl',
-                type: 'text/template'
-            }).text(tpl));
+            view_helpers.installTemplate('group-configuration-details', true);
 
             this.model = new GroupConfigurationModel({
                 name: 'Configuration',
@@ -49,97 +77,221 @@ define([
                 id: 0
             });
 
-            spyOn(this.model, 'destroy').andCallThrough();
-            this.collection = new GroupConfigurationSet([ this.model ]);
+            this.collection = new GroupConfigurationCollection([ this.model ]);
             this.view = new GroupConfigurationDetails({
                 model: this.model
             });
+            appendSetFixtures(this.view.render().el);
         });
 
-        describe('Basic', function() {
-            it('should render properly', function() {
-                this.view.render();
+        it('should render properly', function() {
+            expect(this.view.$el).toContainText('Configuration');
+            expect(this.view.$el).toContainText('ID: 0');
+        });
 
-                expect(this.view.$el).toContainText('Configuration');
-                expect(this.view.$el).toContainText('ID: 0');
+        it('should show groups appropriately', function() {
+            this.model.get('groups').add([{}, {}, {}]);
+            this.model.set('showGroups', false);
+            this.view.$('.show-groups').click();
+
+            expect(this.model.get('showGroups')).toBeTruthy();
+            expect(this.view.$(SELECTORS.group).length).toBe(3);
+            expect(this.view.$(SELECTORS.groupsCount)).not.toExist();
+            expect(this.view.$(SELECTORS.description))
+                .toContainText('Configuration Description');
+            expect(this.view.$(SELECTORS.groupsAllocation))
+                .toContainText('33%');
+        });
+
+        it('should hide groups appropriately', function() {
+            this.model.get('groups').add([{}, {}, {}]);
+            this.model.set('showGroups', true);
+            this.view.$('.hide-groups').click();
+
+            expect(this.model.get('showGroups')).toBeFalsy();
+            expect(this.view.$(SELECTORS.group)).not.toExist();
+            expect(this.view.$(SELECTORS.groupsCount))
+                .toContainText('Contains 3 groups');
+            expect(this.view.$(SELECTORS.description)).not.toExist();
+            expect(this.view.$(SELECTORS.groupsAllocation)).not.toExist();
+        });
+    });
+
+    describe('GroupConfigurationEdit', function() {
+
+        var setValuesToInputs = function (view, values) {
+            _.each(values, function (value, selector) {
+                if (SELECTORS[selector]) {
+                    view.$(SELECTORS[selector]).val(value);
+                }
+            });
+        };
+
+        beforeEach(function() {
+            view_helpers.installViewTemplates();
+            view_helpers.installTemplate('group-configuration-edit');
+
+            this.model = new GroupConfigurationModel({
+                name: 'Configuration',
+                description: 'Configuration Description',
+                id: 0,
+                editing: true
+            });
+            this.collection = new GroupConfigurationCollection([this.model]);
+            this.collection.url = '/group_configurations';
+            this.view = new GroupConfigurationEdit({
+                model: this.model
+            });
+            appendSetFixtures(this.view.render().el);
+        });
+
+        it('should render properly', function() {
+            expect(this.view).toBeCorrectValuesInInputs({
+                name: 'Configuration',
+                description: 'Configuration Description'
+            });
+        });
+
+        it('should save properly', function() {
+            var requests = create_sinon.requests(this),
+                notificationSpy = view_helpers.createNotificationSpy();
+
+            setValuesToInputs(this.view, {
+                inputName: 'New Configuration',
+                inputDescription: 'New Description'
             });
 
-            it('should show groups appropriately', function() {
-                this.model.get('groups').add([{}, {}, {}]);
-                this.model.set('showGroups', false);
-                this.view.render().$('.show-groups').click();
+            this.view.$('form').submit();
+            view_helpers.verifyNotificationShowing(notificationSpy, /Saving/);
+            requests[0].respond(200);
+            view_helpers.verifyNotificationHidden(notificationSpy);
 
-                expect(this.model.get('showGroups')).toBeTruthy();
-                expect(this.view.$el.find('.group').length).toBe(5);
-                expect(this.view.$el.find('.group-configuration-groups-count'))
-                    .not.toExist();
-                expect(this.view.$el.find('.group-configuration-description'))
-                    .toContainText('Configuration Description');
-                expect(this.view.$el.find('.group-allocation'))
-                    .toContainText('20%');
+            expect(this.model).toBeCorrectValuesInModel({
+                name: 'New Configuration',
+                description: 'New Description'
             });
+            expect(this.view.$el).not.toExist();
+        });
 
-            it('should hide groups appropriately', function() {
-                this.model.get('groups').add([{}, {}, {}]);
-                this.model.set('showGroups', true);
-                this.view.render().$('.hide-groups').click();
+        it('does not hide saving message if failure', function() {
+            var requests = create_sinon.requests(this),
+                notificationSpy = view_helpers.createNotificationSpy();
 
-                expect(this.model.get('showGroups')).toBeFalsy();
-                expect(this.view.$el.find('.group').length).toBe(0);
-                expect(this.view.$el.find('.group-configuration-groups-count'))
-                    .toContainText('Contains 5 groups');
-                expect(this.view.$el.find('.group-configuration-description'))
-                    .not.toExist();
-                expect(this.view.$el.find('.group-allocation'))
-                    .not.toExist();
+            setValuesToInputs(this.view, { inputName: 'New Configuration' });
+            this.view.$('form').submit();
+            view_helpers.verifyNotificationShowing(notificationSpy, /Saving/);
+            create_sinon.respondWithError(requests);
+            view_helpers.verifyNotificationShowing(notificationSpy, /Saving/);
+        });
+
+        it('does not save on cancel', function() {
+            setValuesToInputs(this.view, {
+                inputName: 'New Configuration',
+                inputDescription: 'New Description'
             });
+            this.view.$('.action-cancel').click();
+            expect(this.model).toBeCorrectValuesInModel({
+                name: 'Configuration',
+                description: 'Configuration Description'
+            });
+            // Model is still exist in the collection
+            expect(this.collection.indexOf(this.model)).toBeGreaterThan(-1);
+            expect(this.collection.length).toBe(1);
+        });
+
+        it('should be removed on cancel if it is a new item', function() {
+            spyOn(this.model, 'isNew').andReturn(true);
+            setValuesToInputs(this.view, {
+                inputName: 'New Configuration',
+                inputDescription: 'New Description'
+            });
+            this.view.$('.action-cancel').click();
+            // Model is removed from the collection
+            expect(this.collection.length).toBe(0);
+        });
+
+        it('should be possible to correct validation errors', function() {
+            var requests = create_sinon.requests(this);
+
+            // Set incorrect value
+            setValuesToInputs(this.view, { inputName: '' });
+            // Try to save
+            this.view.$('form').submit();
+            // See error message
+            expect(this.view.$(SELECTORS.errorMessage)).toContainText(
+                'Group Configuration name is required'
+            );
+            // No request
+            expect(requests.length).toBe(0);
+            // Set correct value
+            setValuesToInputs(this.view, { inputName: 'New Configuration' });
+            // Try to save
+            this.view.$('form').submit();
+            requests[0].respond(200);
+            // Model is updated
+            expect(this.model).toBeCorrectValuesInModel({
+                name: 'New Configuration'
+            });
+            // Error message disappear
+            expect(this.view.$(SELECTORS.errorMessage)).not.toExist();
+            expect(requests.length).toBe(1);
         });
     });
 
     describe('GroupConfigurationsList', function() {
-        var noGroupConfigurationsTpl = readFixtures(
-            'no-group-configurations.underscore'
-        );
-
         beforeEach(function() {
-            var showEl = $('<li>');
+            view_helpers.installTemplate('no-group-configurations', true);
 
-            setFixtures($('<script>', {
-                id: 'no-group-configurations-tpl',
-                type: 'text/template'
-            }).text(noGroupConfigurationsTpl));
-
-            this.showSpies = spyOnConstructor(
-                window, 'GroupConfigurationDetails', [ 'render' ]
-            );
-            this.showSpies.render.andReturn(this.showSpies);
-            this.showSpies.$el = showEl;
-            this.showSpies.el = showEl.get(0);
-            this.collection = new GroupConfigurationSet();
+            this.collection = new GroupConfigurationCollection();
             this.view = new GroupConfigurationsList({
                 collection: this.collection
             });
-            this.view.render();
+            appendSetFixtures(this.view.render().el);
         });
 
-        var message = 'should render the empty template if there are no group ' +
-                      'configurations';
-        it(message, function() {
-            expect(this.view.$el).toContainText(
-                'You haven\'t created any group configurations yet.'
-            );
-            expect(this.view.$el).not.toContain('.new-button');
-            expect(this.showSpies.constructor).not.toHaveBeenCalled();
+        describe('empty template', function () {
+            it('should be rendered if no group configurations', function() {
+                expect(this.view.$el).toContainText(
+                    'You haven\'t created any group configurations yet.'
+                );
+                expect(this.view.$el).toContain('.new-button');
+                expect(this.view.$(SELECTORS.itemView)).not.toExist();
+            });
+
+            it('should disappear if group configuration is added', function() {
+                var emptyMessage = 'You haven\'t created any group ' +
+                    'configurations yet.';
+
+                expect(this.view.$el).toContainText(emptyMessage);
+                expect(this.view.$(SELECTORS.itemView)).not.toExist();
+                this.collection.add([{}]);
+                expect(this.view.$el).not.toContainText(emptyMessage);
+                expect(this.view.$(SELECTORS.itemView)).toExist();
+            });
+        });
+    });
+
+    describe('GroupConfigurationItem', function() {
+        beforeEach(function() {
+            this.model = new GroupConfigurationModel({ });
+            this.collection = new GroupConfigurationCollection([ this.model ]);
+            this.view = new GroupConfigurationItem({
+                model: this.model
+            });
+            appendSetFixtures(this.view.render().el);
         });
 
-        it('should render GroupConfigurationDetails views by default', function() {
-            this.collection.add([{}, {}, {}]);
-            this.view.render();
-
-            expect(this.view.$el).not.toContainText(
-                'You haven\'t created any group configurations yet.'
-            );
-            expect(this.view.$el.find('.group-configuration').length).toBe(3);
+        it('should render properly', function() {
+            // Details view by default
+            expect(this.view.$(SELECTORS.detailsView)).toExist();
+            this.model.set('editing', true);
+            expect(this.view.$(SELECTORS.editView)).toExist();
+            expect(this.view.$(SELECTORS.detailsView)).not.toExist();
+            this.model.set('editing', false);
+            expect(this.view.$(SELECTORS.detailsView)).toExist();
+            expect(this.view.$(SELECTORS.editView)).not.toExist();
         });
     });
 });
+
+

cms/static/js/spec/views/pages/group_configurations_spec.js

@@ -9,19 +9,32 @@ define([
             ),
             noGroupConfigurationsTpl = readFixtures(
                 'no-group-configurations.underscore'
-            ), view;
+            ),
+            groupConfigurationEditTpl = readFixtures(
+                'group-configuration-edit.underscore'
+            );
 
         var initializePage = function (disableSpy) {
-            view = new GroupConfigurationsPage({
-                el: $('.content-primary'),
+            var view = new GroupConfigurationsPage({
+                el: $('#content'),
                 collection: new GroupConfigurationCollection({
                     name: 'Configuration 1'
                 })
             });
 
             if (!disableSpy) {
-                spyOn(view, 'addGlobalActions');
+                spyOn(view, 'addWindowActions');
             }
+
+            return view;
+        };
+
+        var renderPage = function () {
+            return initializePage().render();
+        };
+
+        var  clickNewConfiguration = function (view) {
+            view.$('.nav-actions .new-button').click();
         };
 
         beforeEach(function () {
@@ -29,12 +42,18 @@ define([
                 id: 'no-group-configurations-tpl',
                 type: 'text/template'
             }).text(noGroupConfigurationsTpl));
+
+            appendSetFixtures($('<script>', {
+                id: 'group-configuration-edit-tpl',
+                type: 'text/template'
+            }).text(groupConfigurationEditTpl));
+
             appendSetFixtures(mockGroupConfigurationsPage);
         });
 
         describe('Initial display', function() {
             it('can render itself', function() {
-                initializePage();
+                var view = initializePage();
                 expect(view.$('.ui-loading')).toBeVisible();
                 view.render();
                 expect(view.$('.no-group-configurations-content')).toBeTruthy();
@@ -45,9 +64,9 @@ define([
         describe('on page close/change', function() {
             it('I see notification message if the model is changed',
             function() {
-                var message;
+                var view = initializePage(true),
+                    message;
 
-                initializePage(true);
                 view.render();
                 message = view.onBeforeUnload();
                 expect(message).toBeUndefined();
@@ -56,16 +75,23 @@ define([
             it('I do not see notification message if the model is not changed',
             function() {
                 var expectedMessage = [
-                    'You have unsaved changes. Do you really want to ',
-                    'leave this page?'
-                ].join(''), message;
+                        'You have unsaved changes. Do you really want to ',
+                        'leave this page?'
+                    ].join(''),
+                        view = renderPage(),
+                        message;
 
-                initializePage();
-                view.render();
                 view.collection.at(0).set('name', 'Configuration 2');
                 message = view.onBeforeUnload();
                 expect(message).toBe(expectedMessage);
             });
         });
+
+        it('create new group configuration', function () {
+            var view = renderPage();
+
+            clickNewConfiguration(view);
+            expect($('.group-configuration-edit').length).toBeGreaterThan(0);
+        });
     });
 });