Initial commit

lib/assets/test/spec/builder/embed/embed-overlay-view.spec.js

@@ -0,0 +1,115 @@
+var _ = require('underscore');
+var EmbedOverlayView = require('builder/embed/embed-overlay-view');
+
+describe('embed/embed-overlay-view', function () {
+  var TITLE = 'Awesome Embed Map';
+  var DESCRIPTION = '';
+  var view;
+
+  var viewOptions = {
+    title: TITLE,
+    description: DESCRIPTION,
+    showMenu: true
+  };
+
+  var createViewFn = function (options) {
+    return new EmbedOverlayView(_.extend({}, viewOptions, options));
+  };
+
+  it('should initialize properly', function () {
+    view = createViewFn();
+
+    expect(view.model.get('collapsed')).toBe(false);
+  });
+
+  describe('.render', function () {
+    it('should render properly', function () {
+      view = createViewFn();
+      spyOn(view, '_renderOverlay');
+
+      view.render();
+
+      expect(view._renderOverlay).toHaveBeenCalled();
+    });
+  });
+
+  describe('.initBinds', function () {
+    it('should call ._toggleCollapsed when collapsed changes', function () {
+      view = createViewFn();
+      spyOn(view, '_toggleCollapsed');
+
+      view._initBinds();
+      view.model.set('collapsed', true);
+
+      expect(view._toggleCollapsed).toHaveBeenCalled();
+    });
+  });
+
+  describe('._renderOverlay', function () {
+    it('should render overlay template', function () {
+      view = createViewFn();
+
+      var options = {
+        title: TITLE,
+        description: DESCRIPTION,
+        legends: true,
+        showMenu: true
+      };
+
+      expect(view._renderOverlay(options)).toContain(TITLE);
+      expect(view._renderOverlay(options)).toContain('<button class="CDB-Shape js-toggle u-lSpace">');
+      expect(view._renderOverlay(options)).toContain('<div class="CDB-Overlay-inner is-active">');
+    });
+  });
+
+  describe('._toggleCollapsed', function () {
+    it('should toggle collapsed state', function () {
+      view = createViewFn();
+
+      view.render();
+
+      expect(view.$('.CDB-ArrowToogle').hasClass('is-down')).toBe(true);
+      expect(view.$('.CDB-Overlay-inner').hasClass('is-active')).toBe(true);
+
+      view._toggle();
+
+      expect(view.$('.CDB-ArrowToogle').hasClass('is-down')).toBe(false);
+      expect(view.$('.CDB-Overlay-inner').hasClass('is-active')).toBe(false);
+    });
+  });
+
+  describe('has description', function () {
+    var description = 'Awesome description';
+
+    beforeEach(function () {
+      view = createViewFn({
+        description: description
+      });
+    });
+
+    describe('._renderOverlay', function () {
+      it('should render overlay template', function () {
+        var options = {
+          title: TITLE,
+          description: description,
+          legends: true,
+          showMenu: true
+        };
+
+        expect(view._renderOverlay(options)).toContain(description);
+        expect(view._renderOverlay(options)).toContain('<button class="CDB-Shape js-toggle u-lSpace">');
+        expect(view._renderOverlay(options)).toContain('<div class="CDB-Overlay-inner is-active">');
+      });
+    });
+
+    describe('._toggle', function () {
+      it('should toggle collapsed', function () {
+        expect(view.model.get('collapsed')).toBe(false);
+
+        view._toggle();
+
+        expect(view.model.get('collapsed')).toBe(true);
+      });
+    });
+  });
+});

lib/assets/test/spec/builder/embed/embed-view.spec.js

@@ -0,0 +1,276 @@
+var $ = require('jquery');
+var _ = require('underscore');
+var EmbedView = require('builder/embed/embed-view');
+
+describe('embed/embed-view', function () {
+  var TITLE = 'Awesome Embed Map';
+  var view;
+  var onSelectedTabChangedSpy;
+
+  var viewOptions = {
+    title: TITLE,
+    description: '',
+    showMenu: true,
+    showLegends: true,
+    showLayerSelector: false,
+    showBanner: false
+  };
+
+  var createViewFn = function (options) {
+    return new EmbedView(_.extend({}, viewOptions, options));
+  };
+
+  beforeEach(function () {
+    onSelectedTabChangedSpy = spyOn(EmbedView.prototype, '_onSelectedTabChanged');
+  });
+
+  it('should have Tabs Model', function () {
+    view = createViewFn();
+    expect(view._tabsModel).toBeDefined();
+  });
+
+  describe('.initialize', function () {
+    describe('_showLegends and _onlyLayerSelector', function () {
+      it('should be true and false respectively if showLegends is true and showLayerSelector is false', function () {
+        view = createViewFn({
+          showLegends: true,
+          showLayerSelector: false
+        });
+
+        expect(view._showLegends).toBe(true);
+        expect(view._showLayerSelector).toBe(false);
+      });
+
+      it('should be both true if showLegends is false and showLayerSelector is true', function () {
+        view = createViewFn({
+          showLegends: false,
+          showLayerSelector: true
+        });
+
+        expect(view._showLegends).toBe(true);
+        expect(view._showLayerSelector).toBe(true);
+      });
+
+      it('should be both false if showLegends and showLayerSelector is false', function () {
+        view = createViewFn({
+          showLegends: false,
+          showLayerSelector: false
+        });
+
+        expect(view._showLegends).toBe(false);
+        expect(view._showLayerSelector).toBe(false);
+      });
+    });
+  });
+
+  describe('.render', function () {
+    beforeEach(function () {
+      view = createViewFn();
+      view.render();
+    });
+
+    it('should render properly', function () {
+      view = createViewFn();
+      view.render();
+
+      expect(view.el.innerHTML).toContain(TITLE);
+      expect(view.$('.js-tabs').length).toBe(1);
+      expect(view.$('.js-embed-map').length).toBe(1);
+      expect(view.$('.js-embed-legends').length).toBe(1);
+      expect(view.$('.js-embed-banner').length).toBe(0);
+      expect(_.size(view._subviews)).toBe(1); // [TabsView]
+    });
+
+    it('should configure tabs correctly if there are legends', function () {
+      view = createViewFn();
+      view.render();
+
+      expect(_.size(view._subviews)).toBe(1);
+      var tabView = view._subviews[Object.keys(view._subviews)[0]];
+      expect(tabView.options.tabs[0]).toEqual({
+        name: 'map',
+        title: 'map',
+        isSelected: true
+      });
+      expect(tabView.options.tabs[1]).toEqual({
+        name: 'legends',
+        title: 'legends'
+      });
+    });
+
+    it('should configure tabs correctly if only there is layer selector', function () {
+      view = createViewFn({
+        showLegends: false,
+        showLayerSelector: true,
+        showBanner: false
+      });
+      view.render();
+
+      expect(_.size(view._subviews)).toBe(1);
+      var tabView = view._subviews[Object.keys(view._subviews)[0]];
+      expect(tabView.options.tabs[0]).toEqual({
+        name: 'map',
+        title: 'map',
+        isSelected: true
+      });
+      expect(tabView.options.tabs[1]).toEqual({
+        name: 'legends',
+        title: 'layers'
+      });
+    });
+
+    it('should render banner if showBanner is true', function () {
+      window.ownerData = {
+        base_url: 'http://userbaseurl.com',
+        account_type: 'FREE'
+      };
+
+      window.vizJSON = {
+        id: 'XX'
+      };
+
+      view = createViewFn({
+        showLegends: false,
+        showLayerSelector: true,
+        showBanner: true
+      });
+      view.render();
+
+      expect(view.$('.js-embed-banner').length).toBe(1);
+    });
+  });
+
+  describe('.initBinds', function () {
+    beforeEach(function () {
+      view = createViewFn();
+    });
+
+    it('should call _onSelectedTabChanged when selected tab changes', function () {
+      view._tabsModel.set({ selected: 'legends' });
+      expect(view._onSelectedTabChanged).toHaveBeenCalled();
+    });
+  });
+
+  describe('._onSelectedTabChanged', function () {
+    beforeEach(function () {
+      onSelectedTabChangedSpy.and.callThrough();
+      view = createViewFn();
+      view.render();
+    });
+
+    it('should change selected tab', function () {
+      expect(view.$('.js-embed-map').hasClass('is-active')).toBe(true);
+      expect(view.$('.js-embed-legends').hasClass('is-active')).toBe(false);
+
+      view._tabsModel.set({ selected: 'legends' }, { silent: true });
+      view._onSelectedTabChanged();
+
+      expect(view.$('.js-embed-map').hasClass('is-active')).toBe(false);
+      expect(view.$('.js-embed-legends').hasClass('is-active')).toBe(true);
+    });
+  });
+
+  describe('has description', function () {
+    var description = 'Awesome description';
+
+    beforeEach(function () {
+      view = createViewFn({
+        description: description
+      });
+      view.render();
+    });
+
+    describe('.render', function () {
+      it('should render properly', function () {
+        expect(view.el.innerHTML).toContain(description);
+      });
+    });
+  });
+
+  describe('when showMenu is false', function () {
+    describe('.render', function () {
+      beforeEach(function () {
+        view = createViewFn({ showMenu: false });
+        view.render();
+      });
+
+      it('should render properly', function () {
+        expect(view.el.innerHTML).not.toContain(TITLE);
+      });
+    });
+  });
+
+  describe('when showLegends is false', function () {
+    beforeEach(function () {
+      view = createViewFn({ showLegends: false });
+      view.render();
+    });
+
+    it('should not have Tabs Model', function () {
+      expect(view._tabsModel).not.toBeDefined();
+    });
+
+    describe('.render', function () {
+      it('should render properly', function () {
+        expect(view.$('.js-tabs').length).toBe(0);
+        expect(view.$('.js-embed-legends').length).toBe(0);
+        expect(_.size(view._subviews)).toBe(0);
+      });
+    });
+  });
+
+  describe('.injectTitle', function () {
+    var $el;
+    var $legendsEl;
+
+    beforeEach(function () {
+      $legendsEl = $('<div class="CDB-Legends-canvasInner"><div class="CDB-LayerLegends"></div></div>');
+      $el = $('<div><div class="CDB-Overlay-inner"></div></div>').append($legendsEl);
+      $('body').append($el);
+
+      view = createViewFn();
+      view.render();
+    });
+
+    afterEach(function () {
+      $el.remove();
+    });
+
+    describe('.render', function () {
+      it('should render properly if legends are visible', function () {
+        $legendsEl.show();
+
+        view.injectTitle($el);
+
+        expect(_.size(view._subviews)).toBe(2);
+        expect(view.el.innerHTML).toContain(TITLE);
+      });
+
+      it('should render properly if legends are hidden', function () {
+        $legendsEl.hide();
+
+        view.injectTitle($el);
+
+        expect(_.size(view._subviews)).toBe(2);
+        expect(view.el.innerHTML).toContain(TITLE);
+      });
+    });
+
+    describe('has description', function () {
+      var description = 'Awesome description';
+
+      beforeEach(function () {
+        view = createViewFn({
+          description: description
+        });
+        view.render();
+      });
+
+      describe('.render', function () {
+        it('should render properly', function () {
+          expect(view.el.innerHTML).toContain(description);
+        });
+      });
+    });
+  });
+});

lib/assets/test/spec/builder/embed/tabs-view/tabs-view.spec.js

@@ -0,0 +1,85 @@
+var _ = require('underscore');
+var Backbone = require('backbone');
+var TabsView = require('builder/embed/tabs/tabs-view');
+
+describe('embed/tabs/tabs-view', function () {
+  var view;
+  var viewOptions = {
+    model: new Backbone.Model(),
+    tabs: [
+      { name: 'map', isSelected: true },
+      { name: 'legends' }
+    ]
+  };
+
+  var createViewFn = function (options) {
+    return new TabsView(_.extend({}, viewOptions, options));
+  };
+
+  afterEach(function () {
+    view.clean();
+  });
+
+  describe('.render', function () {
+    it('should render properly when there is no title in tabs', function () {
+      view = createViewFn();
+      view.render();
+
+      expect(view.$('.js-tabs-container').length).toBe(1);
+      expect(view.$('.js-tab').length).toBe(2);
+
+      var tabsMarkup = view.$('.js-tabs-container').html();
+      expect(tabsMarkup).toContain('data-tab="' + viewOptions.tabs[0].name);
+      expect(tabsMarkup).toContain(viewOptions.tabs[0].name + '</button>');
+      expect(tabsMarkup).toContain('data-tab="' + viewOptions.tabs[1].name);
+      expect(tabsMarkup).toContain(viewOptions.tabs[1].name + '</button>');
+      expect(view.$('.js-tab.is-selected[data-tab="' + viewOptions.tabs[0].name + '"]').length).toBe(1);
+    });
+
+    it('should render properly when there is title in tabs', function () {
+      var options = {
+        tabs: [
+          { name: 'map', title: 'mapTitle', isSelected: true },
+          { name: 'legends', title: 'layers' }
+        ]
+      };
+      view = createViewFn(options);
+      view.render();
+
+      expect(view.$('.js-tabs-container').length).toBe(1);
+      expect(view.$('.js-tab').length).toBe(2);
+
+      var tabsMarkup = view.$('.js-tabs-container').html();
+      expect(tabsMarkup).toContain('data-tab="' + options.tabs[0].name);
+      expect(tabsMarkup).toContain(options.tabs[0].title + '</button>');
+      expect(tabsMarkup).toContain('data-tab="' + options.tabs[1].name);
+      expect(tabsMarkup).toContain(options.tabs[1].title + '</button>');
+    });
+  });
+
+  describe('.initBinds', function () {
+    beforeEach(function () {
+      spyOn(TabsView.prototype, '_onSelectedTabChanged');
+      view = createViewFn();
+    });
+
+    it('should call _onSelectedTabChanged when selected tab changes', function () {
+      view.model.set({ selected: 'legends' });
+      expect(view._onSelectedTabChanged).toHaveBeenCalled();
+    });
+  });
+
+  describe('._onTabClicked', function () {
+    beforeEach(function () {
+      view = createViewFn();
+      view.render();
+    });
+
+    it('should call _onSelectedTabChanged when selected tab changes', function () {
+      var legendsTab = view.$('.js-tab[data-tab="legends"]');
+      legendsTab.click();
+
+      expect(view.model.get('selected')).toBe('legends');
+    });
+  });
+});