Initial commit

lib/assets/test/spec/builder/editor/components/modals/export-map/modal-export-map-view.spec.js

@@ -0,0 +1,101 @@
+var Backbone = require('backbone');
+var ConfigModel = require('builder/data/config-model');
+var VisDefinitionModel = require('builder/data/vis-definition-model');
+var ExportMapModel = require('builder/data/export-map-definition-model');
+var ExportView = require('builder/editor/components/modals/export-map/modal-export-map-view');
+var templateExportMapDownload = require('builder/editor/components/modals/export-map/export-map-download.tpl');
+
+describe('editor/components/modals/export-map/modal-export-map-view', function () {
+  beforeEach(function () {
+    var configModel = new ConfigModel({
+      base_url: '/u/pepe'
+    });
+
+    this.visDefinitionModel = new VisDefinitionModel({
+      name: 'Patatas Bravas',
+      id: 'v-123'
+    }, {
+      configModel: configModel
+    });
+
+    this.exportMapModel = new ExportMapModel({
+      visualization_id: this.visDefinitionModel.get('id')
+    }, {
+      configModel: configModel
+    });
+
+    this.view = new ExportView({
+      modalModel: new Backbone.Model(),
+      exportMapModel: this.exportMapModel,
+      renderOpts: {
+        name: this.visDefinitionModel.get('name')
+      }
+    });
+
+    spyOn(this.view, '_renderCompleteView').and.callFake(function () {
+      this.$el.html(templateExportMapDownload());
+    });
+
+    this.view.render();
+  });
+
+  describe('render', function () {
+    it('should render confirmation view if state is undefined', function () {
+      expect(this.view.$el.html()).toContain(_t('editor.maps.export.confirmation.title', {
+        name: this.visDefinitionModel.get('name')
+      }));
+      expect(this.view.$el.html()).toContain(_t('editor.maps.export.confirmation.desc'));
+      expect(this.view.$el.html()).toContain(_t('editor.maps.export.confirmation.cancel'));
+      expect(this.view.$el.html()).toContain(_t('editor.maps.export.confirmation.confirm'));
+    });
+
+    it('should render pending view when pending state', function () {
+      var state = 'pending';
+
+      this.exportMapModel.set('state', state);
+      this.view.render();
+
+      expect(this.view.$el.html()).toContain(state.charAt(0).toUpperCase() + state.slice(1) + ' ...');
+    });
+
+    it('should render uploading view when uploading', function () {
+      var state = 'uploading';
+
+      this.exportMapModel.set('state', state);
+      this.view.render();
+
+      expect(this.view.$el.html()).toContain(state.charAt(0).toUpperCase() + state.slice(1) + ' ...');
+    });
+
+    it('should render exporting view when exporting', function () {
+      var state = 'exporting';
+
+      this.exportMapModel.set('state', state);
+      this.view.render();
+
+      expect(this.view.$el.html()).toContain(state.charAt(0).toUpperCase() + state.slice(1) + ' ...');
+    });
+
+    it('should render complete view when complete', function () {
+      this.exportMapModel.set('state', 'complete');
+      this.view.render();
+
+      expect(this.view.$el.html()).toContain(_t('editor.maps.export.download.title'));
+      expect(this.view.$el.html()).toContain(_t('editor.maps.export.download.tip'));
+      expect(this.view.$el.html()).toContain(_t('editor.maps.export.download.desc'));
+      expect(this.view.$el.html()).toContain(_t('editor.maps.export.download.confirm'));
+    });
+
+    it('should render error view when failure', function () {
+      this.exportMapModel.set('state', 'failure');
+      this.view.render();
+
+      expect(this.view.$el.html()).toContain(_t('editor.maps.export.error.title'));
+      expect(this.view.$el.html()).toContain(_t('editor.maps.export.error.desc'));
+    });
+  });
+
+  afterEach(function () {
+    this.view.clean();
+  });
+});

lib/assets/test/spec/builder/editor/components/toggler/toggler-view.spec.js

@@ -0,0 +1,102 @@
+var Backbone = require('backbone');
+var _ = require('underscore');
+var Toggler = require('builder/components/toggler/toggler-view.js');
+
+describe('components/toggler/toggler', function () {
+  beforeEach(function () {
+    this.togglerModel = new Backbone.Model({
+      labels: ['foo', 'bar'],
+      active: false,
+      disabled: false,
+      isDisableable: true,
+      onChange: function () {}
+    });
+
+    this.view = new Toggler({
+      model: this.togglerModel
+    });
+  });
+
+  describe('.render', function () {
+    it('should render properly', function () {
+      this.view.render();
+
+      expect(this.view.$('.js-input').length).toBe(1);
+      expect(this.view.$('.js-input').prop('checked')).toBe(false);
+      expect(this.view.$('label').length).toBe(2);
+    });
+
+    it('should be active toggleModel.active is true', function () {
+      this.view.model.set('active', true, { silent: true });
+      this.view.render();
+
+      expect(this.view.$('.js-input').prop('checked')).toBe(true);
+    });
+
+    it('should be disabled if is disableable', function () {
+      this.view.model.set('disabled', true, { silent: true });
+      this.view.render();
+
+      expect(this.view.$('.js-input').prop('disabled')).toBe(true);
+    });
+
+    it('should not be disabled if is not disableable', function () {
+      this.view.model.set({
+        disabled: true,
+        isDisableable: false
+      }, { silent: true });
+      this.view.render();
+
+      expect(this.view.$('.js-input').prop('disabled')).toBe(false);
+    });
+
+    it('should render the correct labels', function () {
+      this.view.render();
+
+      expect(this.view.$('label')[0].innerHTML).toEqual('foo');
+      expect(this.view.$('label')[1].innerHTML).toEqual('bar');
+    });
+  });
+
+  describe('._initBinds', function () {
+    beforeEach(function () {
+      spyOn(this.view, 'render');
+      this.view._initBinds();
+    });
+
+    it('should re render on change:active', function () {
+      this.view.model.trigger('change:active');
+      expect(this.view.render).toHaveBeenCalled();
+    });
+
+    it('should re render on change:disabled', function () {
+      this.view.model.trigger('change:disabled');
+      expect(this.view.render).toHaveBeenCalled();
+    });
+  });
+
+  describe('._initViews', function () {
+    it('should add a tooltip if model has tooltip', function () {
+      this.togglerModel.set('tooltip', 'This is a tooltip');
+      this.view.render();
+
+      expect(_.size(this.view._subviews)).toBe(1);
+    });
+  });
+
+  describe('._onClick', function () {
+    it('should toggle the property active in the model', function () {
+      expect(this.view.model.get('active')).toBe(false);
+
+      this.view._onClick();
+      expect(this.view.model.get('active')).toBe(true);
+
+      this.view._onClick();
+      expect(this.view.model.get('active')).toBe(false);
+    });
+  });
+
+  it('should have no leaks', function () {
+    expect(this.view).toHaveNoLeaks();
+  });
+});

lib/assets/test/spec/builder/editor/components/undo-redo/undo-redo-view.spec.js

@@ -0,0 +1,275 @@
+var Backbone = require('backbone');
+var _ = require('underscore');
+var UndoRedo = require('builder/components/undo-redo/undo-redo-view');
+var EditorModel = require('builder/data/editor-model');
+var StyleModel = require('builder/editor/style/style-definition-model');
+
+describe('components/undo-redo/undo-redo-view', function () {
+  beforeEach(function () {
+    this.editorModel = new EditorModel({
+      edition: false
+    });
+
+    this.view = new UndoRedo({
+      editorModel: new EditorModel({
+        edition: false
+      }),
+      trackModel: new StyleModel()
+    });
+
+    this.view.render();
+  });
+
+  describe('.render', function () {
+    it('should render properly', function () {
+      expect(this.view.$('button').length).toBe(2);
+    });
+
+    it('should render apply button properly', function () {
+      this.view._editorModel.set({ edition: true });
+      this.view.options.applyButton = true;
+      this.view.render();
+      expect(this.view.$('button').length).toBe(3);
+    });
+
+    it('should render clear button properly', function () {
+      var view = new UndoRedo({
+        applyButton: true,
+        clearButton: true,
+        clearModel: new Backbone.Model({
+          visible: true
+        }),
+        editorModel: new EditorModel({
+          edition: false
+        }),
+        trackModel: new StyleModel()
+      });
+
+      view._editorModel.set({ edition: true });
+      view.render();
+      expect(view.$('button').length).toBe(4);
+    });
+
+    it('should show the apply button as not loading by default', function () {
+      expect(this.view.$el.find('.js-apply.is-loading').length).toBe(0);
+      expect(this.view.$el.find('.js-apply.is-disabled').length).toBe(0);
+    });
+
+    it('should show the apply button as loading if applyStatusModel changes', function () {
+      var view = new UndoRedo({
+        applyButton: true,
+        applyStatusModel: new Backbone.Model({
+          loading: false
+        }),
+        editorModel: new EditorModel({
+          edition: true
+        }),
+        trackModel: new StyleModel()
+      });
+      view.render();
+
+      expect(view.$el.find('.js-apply.is-loading').length).toBe(0);
+      expect(view.$el.find('.js-apply.is-disabled').length).toBe(0);
+
+      view._applyStatusModel.set('loading', true);
+
+      expect(view.$el.find('.js-apply.is-loading').length).toBe(1);
+      expect(view.$el.find('.js-apply.is-disabled').length).toBe(1);
+    });
+  });
+
+  describe('when .canUndo and .canRedo are true', function () {
+    beforeEach(function () {
+      spyOn(this.view, '_canUndo').and.returnValue(true);
+      spyOn(this.view, '_canRedo').and.returnValue(true);
+
+      this.view.render();
+    });
+
+    describe('.render', function () {
+      it('should render properly', function () {
+        expect(this.view.$('button').length).toBe(2);
+        expect(_.size(this.view._subviews)).toBe(2); // [undoTooltip, redoTooltip]
+      });
+    });
+  });
+
+  describe('.initBinds', function () {
+    it('should call ._checkButtonsStyle when _editorModel:edition changes', function () {
+      spyOn(this.view, '_checkButtonsStyle');
+
+      this.view._initBinds();
+      this.view._editorModel.trigger('change:edition');
+
+      expect(this.view._checkButtonsStyle).toHaveBeenCalled();
+    });
+
+    it('should call .render when _trackModel triggers unredoChanged', function () {
+      spyOn(this.view, 'render');
+
+      this.view._initBinds();
+      this.view._trackModel.trigger('unredoChanged');
+
+      expect(this.view.render).toHaveBeenCalled();
+    });
+
+    it('should call .render when _trackModel triggers undo', function () {
+      spyOn(this.view, 'render');
+
+      this.view._initBinds();
+      this.view._trackModel.trigger('undo');
+
+      expect(this.view.render).toHaveBeenCalled();
+    });
+
+    it('should call .render when _trackModel triggers redo', function () {
+      spyOn(this.view, 'render');
+
+      this.view._initBinds();
+      this.view._trackModel.trigger('redo');
+
+      expect(this.view.render).toHaveBeenCalled();
+    });
+
+    it('should call .render when _clearModel changes', function () {
+      this.view._clearModel = new Backbone.Model();
+      spyOn(this.view, 'render');
+
+      this.view._initBinds();
+      this.view._clearModel.trigger('change');
+
+      expect(this.view.render).toHaveBeenCalled();
+    });
+
+    it('should call ._applyStatusChanged when _applyStatusModel:loading changes', function () {
+      this.view._applyStatusModel = new Backbone.Model();
+      spyOn(this.view, '_applyStatusChanged');
+
+      this.view._initBinds();
+      this.view._applyStatusModel.trigger('change:loading');
+
+      expect(this.view._applyStatusChanged).toHaveBeenCalled();
+    });
+  });
+
+  describe('._isDisabled', function () {
+    it('should be true if overlay model is visible', function () {
+      this.view._overlayModel = new Backbone.Model({ visible: false });
+      expect(this.view._isDisabled()).toBe(false);
+
+      this.view._overlayModel.set({ visible: true });
+      expect(this.view._isDisabled()).toBe(true);
+    });
+  });
+
+  describe('._canRedo', function () {
+    it('should return true if _trackModel.canRedo and is not disabled', function () {
+      spyOn(this.view._trackModel, 'canRedo').and.returnValue(true);
+      spyOn(this.view, '_isDisabled').and.returnValue(false);
+
+      expect(this.view._canRedo()).toBe(true);
+    });
+  });
+
+  describe('._canUndo', function () {
+    it('should return true if _trackModel.canRedo and is not disabled', function () {
+      spyOn(this.view._trackModel, 'canUndo').and.returnValue(true);
+      spyOn(this.view, '_isDisabled').and.returnValue(false);
+
+      expect(this.view._canUndo()).toBe(true);
+    });
+  });
+
+  describe('._onUndoClick', function () {
+    it('should call _trackModel.undo if _trackModel.canUndo is true', function () {
+      spyOn(this.view._trackModel, 'undo');
+      var canUndoSpy = spyOn(this.view._trackModel, 'canUndo');
+
+      canUndoSpy.and.returnValue(false);
+      this.view._onUndoClick();
+      expect(this.view._trackModel.undo).not.toHaveBeenCalled();
+
+      canUndoSpy.and.returnValue(true);
+      this.view._onUndoClick();
+      expect(this.view._trackModel.undo).toHaveBeenCalled();
+    });
+  });
+
+  describe('._onRedoClick', function () {
+    it('should call _trackModel.undo if _trackModel.canRedo is true', function () {
+      spyOn(this.view._trackModel, 'redo');
+      var canRedoSpy = spyOn(this.view._trackModel, 'canRedo');
+
+      canRedoSpy.and.returnValue(false);
+      this.view._onRedoClick();
+      expect(this.view._trackModel.redo).not.toHaveBeenCalled();
+
+      canRedoSpy.and.returnValue(true);
+      this.view._onRedoClick();
+      expect(this.view._trackModel.redo).toHaveBeenCalled();
+    });
+  });
+
+  describe('._onApplyClick', function () {
+    it('should call options.onApplyClick method if applyButton is true and button is not disabled', function () {
+      var view = new UndoRedo({
+        editorModel: new EditorModel({
+          edition: false
+        }),
+        trackModel: new StyleModel(),
+        onApplyClick: jasmine.createSpy('onApplyClick'),
+        applyButton: true
+      });
+
+      var isDisabled = spyOn(view, '_isDisabled');
+
+      isDisabled.and.returnValue(true);
+      view._onApplyClick();
+      expect(view.options.onApplyClick).not.toHaveBeenCalled();
+
+      isDisabled.and.returnValue(false);
+      view._onApplyClick();
+      expect(view.options.onApplyClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('._onClearClick', function () {
+    it('should call options._onClearClick method if clearButton is true', function () {
+      var view = new UndoRedo({
+        editorModel: new EditorModel({
+          edition: false
+        }),
+        trackModel: new StyleModel(),
+        onClearClick: jasmine.createSpy('onClearClick'),
+        clearButton: true
+      });
+
+      view._onClearClick();
+      expect(view.options.onClearClick).toHaveBeenCalled();
+    });
+  });
+
+  describe('._applyStatusChanged', function () {
+    it('should call render', function () {
+      spyOn(this.view, 'render');
+
+      this.view._applyStatusChanged();
+
+      expect(this.view.render).toHaveBeenCalled();
+    });
+  });
+
+  describe('._checkButtonsStyle', function () {
+    it('should apply u-actionTextColor class if not editing', function () {
+      expect(this.view._getIcons().hasClass('u-actionTextColor')).toBe(true);
+    });
+  });
+
+  it('should have no leaks', function () {
+    expect(this.view).toHaveNoLeaks();
+  });
+
+  afterEach(function () {
+    this.view.clean();
+  });
+});

lib/assets/test/spec/builder/editor/components/view-options/panel-with-options-view.spec.js

@@ -0,0 +1,54 @@
+var CoreView = require('backbone/core-view');
+var PanelWithOptions = require('builder/components/view-options/panel-with-options-view.js');
+var EditorModel = require('builder/data/editor-model');
+
+describe('components/view-options/panel-with-options-view', function () {
+  beforeEach(function () {
+    var Dummy = CoreView.extend({
+      render: function () {
+        this.$el.html(this.options.content);
+        return this;
+      }
+    });
+
+    this.view = new PanelWithOptions({
+      editorModel: new EditorModel(),
+      createContentView: function () {
+        return new Dummy({
+          content: 'Content'
+        });
+      },
+      createControlView: function () {
+        return new Dummy({
+          content: 'Toogle'
+        });
+      },
+      createActionView: function () {
+        return new Dummy({
+          content: 'Undo'
+        });
+      }
+    });
+
+    this.view.render();
+  });
+
+  it('should render properly and have `js-optionsBar` selector for onboarding', function () {
+    expect(this.view.$('.js-content').length).toBe(1);
+    expect(this.view.$('.Options-bar.js-optionsBar').length).toBe(1);
+  });
+
+  it('should have no leaks', function () {
+    expect(this.view).toHaveNoLeaks();
+  });
+
+  it('should switch views properly', function () {
+    expect(this.view.$('.js-content').html()).toContain('Content');
+    expect(this.view.$('.js-actions').html()).toContain('Undo');
+    expect(this.view.$('.js-controls').html()).toContain('Toogle');
+  });
+
+  afterEach(function () {
+    this.view.clean();
+  });
+});