Initial commit

lib/assets/test/spec/builder/components/infobox/infobox-collection.spec.js

@@ -0,0 +1,35 @@
+var InfoboxCollection = require('builder/components/infobox/infobox-collection');
+
+describe('components/infobox/infobox-collection', function () {
+  beforeEach(function () {
+    this.collection = new InfoboxCollection([
+      {
+        state: 'idle',
+        createContentView: function () {
+          return 'foo';
+        }
+      },
+      {
+        state: 'error',
+        createContentView: function () {
+          return 'bar';
+        }
+      }
+    ]);
+  });
+
+  it('should return the first if none selected', function () {
+    var selected = this.collection.getSelected();
+    var createContentView = selected.get('createContentView');
+    expect(createContentView()).toBe('foo');
+    expect(this.collection.at(0).get('selected')).toBe(true);
+  });
+
+  it('should have only one selected', function () {
+    this.collection.at(1).set('selected', true);
+    expect(this.collection.where({ selected: true }).length).toBe(1);
+    this.collection.at(0).set('selected', true);
+    expect(this.collection.where({ selected: true }).length).toBe(1);
+    expect(this.collection.at(1).get('selected')).toBeFalsy();
+  });
+});

lib/assets/test/spec/builder/components/infobox/infobox-factory.spec.js

@@ -0,0 +1,48 @@
+var Infobox = require('builder/components/infobox/infobox-factory');
+
+describe('components/infobox/infobox-factory', function () {
+  var view;
+
+  describe('createInfo', function () {
+    it('no closable', function () {
+      view = Infobox.createInfo({
+        title: 'Info',
+        body: 'Lorem ipsum dolor sit amet.',
+        closable: false
+      });
+      view.render();
+
+      expect(view.$('button').length).toBe(0);
+    });
+
+    it('closable', function () {
+      view = Infobox.createInfo({
+        title: 'Info',
+        body: 'Lorem ipsum dolor sit amet.'
+      });
+      view.render();
+
+      expect(view.$('button').length).toBe(1);
+      expect(view.$('button').eq(0).html()).toContain('editor.messages.common.cancel');
+    });
+  });
+
+  describe('createWithActions', function () {
+    it('main action', function () {
+      view = Infobox.createWithAction({
+        title: 'Info',
+        body: 'Lorem ipsum dolor sit amet.',
+        closable: false,
+        action: {
+          label: 'Confirm'
+        }
+      });
+
+      view.render();
+
+      expect(view.$('.Infobox')).toBeDefined();
+      expect(view.$('button').length).toBe(1);
+      expect(view.$('button').text()).toContain('Confirm');
+    });
+  });
+});

lib/assets/test/spec/builder/components/infobox/infobox-item-view.spec.js

@@ -0,0 +1,96 @@
+var InfoboxView = require('builder/components/infobox/infobox-item-view');
+
+describe('components/infobox/infobox-item-view', function () {
+  var view;
+
+  beforeEach(function () {
+    view = new InfoboxView({
+      type: 'error',
+      title: 'Info',
+      body: 'Lorem ipsum dolor sit amet.',
+      action: {
+        label: 'Proceed'
+      },
+      closable: true
+    });
+
+    view.render();
+  });
+
+  it('should render properly', function () {
+    expect(view.$('h2').text()).toBe('Info');
+    expect(view.$('div').text()).toContain('Lorem ipsum');
+    expect(view.$('.Infobox-buttons button').length).toBe(2);
+    expect(view.$('.Infobox-buttons button').eq(0).html()).toContain('editor.messages.common.cancel');
+    expect(view.$('.Infobox-buttons button').eq(1).html()).toContain('Proceed');
+  });
+
+  it('should have className when it is defined', function () {
+    var className = 'fs-class-name';
+
+    var view = new InfoboxView({
+      type: 'alert',
+      title: 'Info',
+      body: 'Lorem ipsum dolor sit amet.',
+      klass: className
+    });
+
+    view.render();
+
+    expect(view.$el.hasClass(className)).toBe(true);
+  });
+
+  it('should render loading when it is defined', function () {
+    var view = new InfoboxView({
+      type: 'alert',
+      title: 'Info',
+      body: 'Lorem ipsum dolor sit amet.',
+      loading: true
+    });
+
+    view.render();
+    expect(view.$('.CDB-LoaderIcon').length).toBe(1);
+  });
+
+  it('should render quota when needed', function () {
+    var view = new InfoboxView({
+      type: 'alert',
+      title: 'Info',
+      body: 'Lorem ipsum dolor sit amet.',
+      quota: {
+        usedQuota: 10,
+        totalQuota: 100
+      },
+      action: {
+        label: 'Proceed'
+      }
+    });
+
+    view.render();
+    expect(view.$('.js-quota').length).toBe(1);
+    expect(view.$('.Infobox-quotaBar').length).toBe(1);
+  });
+
+  it('should trigger events properly', function () {
+    var callback = {
+      main: function () {},
+      close: function () {}
+    };
+
+    spyOn(callback, 'main');
+    spyOn(callback, 'close');
+
+    view.on('action:main', callback.main);
+    view.on('action:close', callback.close);
+
+    view.$('button').eq(0).trigger('click');
+    view.$('button').eq(1).trigger('click');
+
+    expect(callback.main.calls.count()).toEqual(1);
+    expect(callback.close.calls.count()).toEqual(1);
+  });
+
+  it('should not have any leaks', function () {
+    expect(view).toHaveNoLeaks();
+  });
+});

lib/assets/test/spec/builder/components/infobox/infobox-view.spec.js

@@ -0,0 +1,97 @@
+var Infobox = require('builder/components/infobox/infobox-factory');
+var InfoboxView = require('builder/components/infobox/infobox-view');
+var InfoboxModel = require('builder/components/infobox/infobox-model');
+var InfoboxCollection = require('builder/components/infobox/infobox-collection');
+
+describe('components/infobox/infobox-view', function () {
+  beforeEach(function () {
+    var states = [
+      {
+        state: 'ready',
+        createContentView: function () {
+          return Infobox.createInfo({
+            title: 'Info',
+            body: 'Lorem ipsum dolor sit amet.',
+            closable: false
+          });
+        }
+      },
+      {
+        state: 'error',
+        createContentView: function () {
+          return Infobox.createWithAction({
+            title: 'Error',
+            body: 'Lorem ipsum dolor sit amet.',
+            action: {
+              label: 'Confirm'
+            }
+          });
+        },
+        onAction: function () {},
+        onClose: function () {}
+      },
+      {
+        state: 'wadus',
+        createContentView: function () {
+          return Infobox.createWithAction({
+            title: 'Wadus',
+            body: 'Lorem ipsum dolor sit amet.',
+            action: {
+              label: 'Confirm'
+            }
+          });
+        },
+        onAction: function () {}
+      }
+    ];
+
+    this.model = new InfoboxModel({
+      state: 'ready',
+      visible: true
+    });
+
+    this.view = new InfoboxView({
+      infoboxModel: this.model,
+      infoboxCollection: new InfoboxCollection(states)
+    });
+
+    this.view.render();
+  });
+
+  it('should render properly', function () {
+    expect(this.view.infoboxView).toBeDefined();
+    expect(this.view.$('.Infobox').length).toBe(1);
+    expect(this.view.$('h2').text()).toBe('Info');
+    expect(this.view.$('.js-close').length).toBe(0);
+
+    this.model.set({state: 'error'});
+
+    expect(this.view.$('h2').text()).toBe('Error');
+    expect(this.view.$('.js-close').length).toBe(1);
+    expect(this.view.$('.Infobox-buttons button').length).toBe(2);
+  });
+
+  it('should bind actions properly', function () {
+    var model = this.view._infoboxCollection.at(1);
+    spyOn(model.attributes, 'onAction');
+    spyOn(model.attributes, 'onClose');
+
+    this.model.set({state: 'error'});
+    this.view.$('.Infobox-buttons button').trigger('click');
+
+    expect(model.attributes.onAction).toHaveBeenCalled();
+
+    this.view.$('.js-close').trigger('click');
+    expect(model.attributes.onClose).toHaveBeenCalled();
+  });
+
+  it('should close the infobox', function () {
+    this.model.set({state: 'wadus'});
+    this.view.$('.js-close').trigger('click');
+    expect(this.view.$el.html()).toBe('');
+  });
+
+  it('should not have any leaks', function () {
+    expect(this.view).toHaveNoLeaks();
+  });
+});