Tests finished

Gruntfile.js

@@ -268,9 +268,11 @@
 
     grunt.registerTask('js', ['cdb', 'pre_client', 'browserify', 'concat:js', 'jst']);
     grunt.registerTask('pre_default', ['clean', 'config', 'js']);
-    grunt.registerTask('test',
-      '(CI env) Re-build JS files and run all tests. For manual testing use `grunt jasmine` directly', [
-        'pre_default', 'npm-test', 'jasmine', 'lint'
+    grunt.registerTask('test', '(CI env) Re-build JS files and run all tests. For manual testing use `grunt jasmine` directly', [
+        'pre_default',
+        'npm-test',
+        'jasmine',
+        'lint'
       ]);
     grunt.registerTask('editor3', [
       'browserify:vendor_editor3',
@@ -298,8 +300,12 @@
         return ['jasmine', name, 'build'].join(':');
       })
       .value());
-    grunt.registerTask('dev', 'Typical task for frontend development (watch JS/CSS changes)',
-      ['setConfig:env.browserify_watch:true', 'browserify', 'build-jasmine-specrunners', 'connect', 'watch']);
+    grunt.registerTask('dev', 'Typical task for frontend development (watch JS/CSS changes)', [
+      'setConfig:env.browserify_watch:true',
+      'browserify',
+      'build-jasmine-specrunners',
+      'connect',
+      'watch']);
     grunt.registerTask('sourcemaps',
       'generate sourcemaps, to be used w/ trackjs.com for bughunting', [
         'setConfig:assets_dir:./tmp/sourcemaps',

lib/assets/core/javascripts/cartodb3/components/onboardings/layers/data-onboarding/data-onboarding-view.js

@@ -11,13 +11,13 @@ module.exports = OnboardingView.extend({
       modifier: '--data'
     }));
     if (opts.numberOfWidgets === void 0) {
-      throw new Error('numberOfWidgets is required.');
+      throw new Error('numberOfWidgets is required');
     }
     if (opts.hasTimeSeries === void 0) {
-      throw new Error('hasTimeSeries is required.');
+      throw new Error('hasTimeSeries is required');
     }
     if (opts.hasAnimatedTimeSeries === void 0) {
-      throw new Error('hasAnimatedTimeSeries is required.');
+      throw new Error('hasAnimatedTimeSeries is required');
     }
     this._hasTimeSeries = opts.hasTimeSeries;
     this._hasAnimatedTimeSeries = opts.hasAnimatedTimeSeries;

lib/assets/core/javascripts/cartodb3/components/onboardings/layers/style-onboarding/style-onboarding-view.js

@@ -12,8 +12,6 @@ module.exports = OnboardingView.extend({
       throw new Error('type is required');
     }
 
-    console.log('Type: ' + opts.type);
-
     var template = defaultTemplate;
     var steps = 2;
     var modifier = '--style';

lib/assets/core/test/spec/cartodb3/components/onboardings/layers/analysis-onboarding/analysis-onboarding-view.spec.js

@@ -1,5 +1,53 @@
+var Backbone = require('backbone');
+var $ = require('jquery');
+var View = require('../../../../../../..//javascripts/cartodb3/components/onboardings/layers/analysis-onboarding/analysis-onboarding-view');
+
 describe('components/onboardings/layers/analysis-onboarding/analysis-onboarding-view', function () {
-  it('should be implemented', function () {
-    expect(true).toBe(false);
+  beforeEach(function () {
+    this.view = new View({
+      onboardingNotification: {},
+      editorModel: new Backbone.Model({}),
+      notificationKey: 'analysis-key'
+    });
+  });
+
+  it('should get proper initialization', function () {
+    expect(this.view.events()['click .js-add-analysis']).toBe('_onAddAnalysisClicked');
+    expect(this.view._numberOfSteps).toBe(1);
+    expect(this.view._modifier).toBe('--analysis');
+  });
+
+  it('_onAddAnalysisClicked should clean this view and click on global addAnalysis button', function () {
+    var addAnalysisClicked = false;
+    $('body').append('<div class="js-add-analysis"></div>');
+    $('.js-add-analysis').on('click', function () {
+      addAnalysisClicked = true;
+    });
+    spyOn(this.view, 'clean');
+
+    this.view._onAddAnalysisClicked();
+
+    expect(this.view.clean).toHaveBeenCalled();
+    expect(addAnalysisClicked).toBe(true);
+
+    $('.js-add-analysis').remove();
+  });
+
+  it('render', function () {
+    this.view.render();
+
+    var html = this.view.$el.html();
+    expect(this.view.$('.LayerOnboarding-contentWrapper').hasClass('is-step0')).toBe(true);
+    expect(this.view.$('.LayerOnboarding-contentBody').hasClass('is-step0')).toBe(true);
+    expect(this.view.$('.LayerOnboarding-contentWrapper').hasClass('js-step')).toBe(true);
+    expect(this.view.$('.LayerOnboarding-contentBody').hasClass('js-step')).toBe(true);
+    expect(html.indexOf('analysis-onboarding.title') > -1).toBe(true);
+    expect(html.indexOf('analysis-onboarding.description') > -1).toBe(true);
+    expect(html.indexOf('analysis-onboarding.description-list.item1') > -1).toBe(true);
+    expect(html.indexOf('analysis-onboarding.description-list.item2') > -1).toBe(true);
+    expect(html.indexOf('analysis-onboarding.description-list.item3') > -1).toBe(true);
+    expect(html.indexOf('analysis-onboarding.description-list.item4') > -1).toBe(true);
+    expect(html.indexOf('analysis-onboarding.done') > -1).toBe(true);
+    expect(html.indexOf('analysis-onboarding.add-analysis') > -1).toBe(true);
   });
 });

lib/assets/core/test/spec/cartodb3/components/onboardings/layers/data-onboarding/data-onboarding-view.spec.js

@@ -1,5 +1,131 @@
+var Backbone = require('backbone');
+var _ = require('underscore');
+var View = require('../../../../../../..//javascripts/cartodb3/components/onboardings/layers/data-onboarding/data-onboarding-view');
+
 describe('components/onboardings/layers/data-onboarding/data-onboarding-view', function () {
-  it('should be implemented', function () {
-    expect(true).toBe(false);
+  describe('initialize', function () {
+    function testConstructorFn (opts) {
+      var self = this;
+      return function wrappedConstructor () {
+        self.view = new View(opts);
+      };
+    }
+
+    it('should get proper initialization', function () {
+      var testConstructor = testConstructorFn.bind(this);
+      var options = {
+        onboardingNotification: {},
+        editorModel: new Backbone.Model({}),
+        notificationKey: 'data-key'
+      };
+
+      var constructor = testConstructor(options);
+      expect(constructor).toThrowError('numberOfWidgets is required');
+
+      constructor = testConstructor(options = _.extend(options, {
+        numberOfWidgets: 0
+      }));
+      expect(constructor).toThrowError('hasTimeSeries is required');
+
+      constructor = testConstructor(options = _.extend(options, {
+        hasTimeSeries: false
+      }));
+      expect(constructor).toThrowError('hasAnimatedTimeSeries is required');
+
+      testConstructor(options = _.extend(options, {
+        hasAnimatedTimeSeries: false
+      }))();
+      expect(this.view._hasTimeSeries).toBe(false);
+      expect(this.view._hasAnimatedTimeSeries).toBe(false);
+      expect(this.view._numberOfSteps).toBe(4);
+      expect(this.view._modifier).toEqual('--data');
+
+      testConstructor(options = _.extend(options, {
+        numberOfWidgets: 2,
+        hasTimeSeries: true
+      }))();
+      expect(this.view._hasSidebarWidgets).toBe(true);
+
+      testConstructor(options = _.extend(options, {
+        numberOfWidgets: 1,
+        hasTimeSeries: false
+      }))();
+      expect(this.view._hasSidebarWidgets).toBe(true);
+
+      testConstructor(options = _.extend(options, {
+        numberOfWidgets: 0,
+        hasTimeSeries: false
+      }))();
+      expect(this.view._hasSidebarWidgets).toBe(false);
+    });
+  });
+
+  describe('render', function () {
+    function assertTextFn (view, selector, expectedText) {
+      var text = view.$(selector).text().trim();
+      if (text !== expectedText) {
+        throw new Error('Expected "' + selector + '" to have text "' + expectedText + '"');
+      }
+    }
+
+    function assertClassesFn (view, selector, expectedClasses) {
+      _.each(expectedClasses, function (expectedClass) {
+        if (!view.$(selector).hasClass(expectedClass)) {
+          throw new Error('Expected "' + selector + '" to have class "' + expectedClass + '"');
+        }
+      });
+    }
+
+    it('should get the proper template', function () {
+      var options = {
+        onboardingNotification: {},
+        editorModel: new Backbone.Model({}),
+        notificationKey: 'data-key',
+        numberOfWidgets: 2,
+        hasTimeSeries: true,
+        hasAnimatedTimeSeries: true
+      };
+      this.view = new View(options);
+      var assertClasses = assertClassesFn.bind(this, this.view);
+      var assertText = assertTextFn.bind(this, this.view);
+
+      this.view.render();
+
+      assertClasses('.LayerOnboarding-body', ['is-step0', 'js-step']);
+      assertText('.LayerOnboarding-step.is-step1 .LayerOnboarding-headerText', 'data-onboarding.layer-options.title');
+      assertText('.LayerOnboarding-step.is-step1 .LayerOnboarding-description', 'data-onboarding.layer-options.description');
+      assertText('.LayerOnboarding-step.is-step2 .LayerOnboarding-headerText', 'data-onboarding.data-tab.title');
+      assertText('.LayerOnboarding-step.is-step2 .LayerOnboarding-description', 'data-onboarding.data-tab.description');
+      assertText('.LayerOnboarding-step.is-step3 .LayerOnboarding-headerText', 'data-onboarding.sql-editor.title');
+      assertText('.LayerOnboarding-step.is-step3 .LayerOnboarding-description', 'data-onboarding.sql-editor.description');
+      assertClasses('.LayerOnboarding-body .LayerOnboarding-footer', ['is-step1', 'is-step2', 'is-step3']);
+      assertText('.LayerOnboarding-pads--left .js-close span', 'data-onboarding.exit');
+      assertText('.LayerOnboarding-pads--left .js-next span', 'data-onboarding.next');
+
+      // Content wrapper
+      assertClasses('.LayerOnboarding-contentWrapper', ['is-step0', 'js-step']);
+      assertClasses('.LayerOnboarding-contentWrapper .LayerOnboarding-contentBody', ['is-step0', 'js-step']);
+      assertClasses('.LayerOnboarding-contentWrapper .LayerOnboarding-header', ['is-step0']);
+      assertText('.LayerOnboarding-contentWrapper .LayerOnboarding-headerTitle', 'data-onboarding.title');
+      assertText('.LayerOnboarding-contentWrapper .LayerOnboarding-footerButtons .js-start span', 'data-onboarding.take-tour');
+      assertText('.LayerOnboarding-contentWrapper .LayerOnboarding-footerButtons .js-close span', 'data-onboarding.edit-layer');
+      assertClasses('.LayerOnboarding-contentWrapper .LayerOnboarding-footer', ['is-step0']);
+      assertClasses('.LayerOnboarding-contentWrapper .LayerOnboarding-footer .u-iBlock', ['is-step1']);
+      expect(this.view.$('.LayerOnboarding-contentWrapper .LayerOnboarding-footer input').length).toBe(1);
+      assertText('.LayerOnboarding-contentWrapper .LayerOnboarding-footer .u-iBlock label', 'style-onboarding.never-show-message');
+
+      // Pads on the right
+      assertClasses('.LayerOnboarding-pads--right', ['is-step0', 'js-step']);
+      assertClasses('.LayerOnboarding-pads--right .LayerOnboarding-padTop', ['has-timeSeries', 'has-timeSeries--animated', 'has-widgets']);
+      assertClasses('.LayerOnboarding-pads--right .LayerOnboarding-padMiddle .LayerOnboarding-step', ['is-step4']);
+      assertText('.LayerOnboarding-pads--right .LayerOnboarding-padMiddle .LayerOnboarding-step .LayerOnboarding-headerText', 'data-onboarding.add-geometry.title');
+      assertText('.LayerOnboarding-pads--right .LayerOnboarding-padMiddle .LayerOnboarding-step .LayerOnboarding-description', 'data-onboarding.add-geometry.description');
+      assertClasses('.LayerOnboarding-pads--right .LayerOnboarding-padMiddle .LayerOnboarding-footer', ['is-step4']);
+      assertText('.LayerOnboarding-pads--right .LayerOnboarding-padMiddle .LayerOnboarding-footer .js-close span', 'data-onboarding.add-geometry.edit-layer');
+      assertClasses('.LayerOnboarding-pads--right .LayerOnboarding-padBottom', ['has-timeSeries', 'has-timeSeries--animated', 'has-widgets']);
+
+      // Widgets overlay
+      assertClasses('.LayerOnboarding-widgetsOverlay', ['js-step', 'has-widgets']);
+    });
   });
 });

lib/assets/core/test/spec/cartodb3/components/onboardings/layers/style-onboarding/style-onboarding-view.spec.js

@@ -1,5 +1,155 @@
+var Backbone = require('backbone');
+var _ = require('underscore');
+var View = require('../../../../../../../javascripts/cartodb3/components/onboardings/layers/style-onboarding/style-onboarding-view');
+
 describe('components/onboardings/layers/style-onboarding/style-onboarding-view', function () {
-  it('should be implemented', function () {
-    expect(true).toBe(false);
+  describe('initialize', function () {
+    function testConstructorFn (opts) {
+      var self = this;
+      return function wrappedConstructor () {
+        self.view = new View(opts);
+      };
+    }
+
+    it('should get proper initialization', function () {
+      var testConstructor = testConstructorFn.bind(this);
+      var options = {
+        onboardingNotification: {},
+        editorModel: new Backbone.Model({}),
+        notificationKey: 'style-key'
+      };
+
+      var constructor = testConstructor(options);
+      expect(constructor).toThrowError('geom is required');
+
+      constructor = testConstructor(options = _.extend(options, {
+        geom: 'point'
+      }));
+      expect(constructor).toThrowError('type is required');
+
+      testConstructor(options = _.extend(options, {
+        type: 'simple'
+      }))();
+
+      // Number of steps
+      // Points
+      expect(this.view._numberOfSteps).toBe(3);
+
+      // Polygon
+      testConstructor(options = _.extend(options, { geom: 'polygon' }))();
+      expect(this.view._numberOfSteps).toBe(2);
+
+      // Type of aggregation
+      testConstructor(options = _.extend(options, { geom: 'point', type: 'simple' }))();
+      expect(this.view._modifier).toEqual('--stylePointsSimpleAggregation');
+
+      testConstructor(options = _.extend(options, { type: 'heatmap' }))();
+      expect(this.view._modifier).toEqual('--stylePointsSimpleAggregation');
+
+      testConstructor(options = _.extend(options, { type: 'animation' }))();
+      expect(this.view._modifier).toEqual('--stylePointsSimpleAggregation');
+
+      testConstructor(options = _.extend(options, { type: 'squares' }))();
+      expect(this.view._modifier).toEqual('--stylePointsDoubleAggregation');
+
+      testConstructor(options = _.extend(options, { type: 'hexabins' }))();
+      expect(this.view._modifier).toEqual('--stylePointsDoubleAggregation');
+
+      testConstructor(options = _.extend(options, { type: 'regions' }))();
+      expect(this.view._modifier).toEqual('--stylePointsDoubleAggregation');
+    });
+  });
+
+  describe('templates', function () {
+    function assertTextFn (view, selector, expectedText) {
+      var text = view.$(selector).text().trim();
+      if (text !== expectedText) {
+        throw new Error('Expected "' + selector + '" to have text "' + expectedText + '"');
+      }
+    }
+
+    function assertClassesFn (view, selector, expectedClasses) {
+      _.each(expectedClasses, function (expectedClass) {
+        if (!view.$(selector).hasClass(expectedClass)) {
+          throw new Error('Expected "' + selector + '" to have class "' + expectedClass + '"');
+        }
+      });
+    }
+
+    it('points template with simple aggregation', function () {
+      this.view = new View({
+        onboardingNotification: {},
+        editorModel: new Backbone.Model({}),
+        notificationKey: 'style-key',
+        geom: 'point',
+        type: 'simple'
+      });
+      var assertText = assertTextFn.bind(this, this.view);
+      var assertClasses = assertClassesFn.bind(this, this.view);
+      this.view.render();
+
+      // Pads on the left
+      var leftPads = '.LayerOnboarding-pads--left';
+      assertClasses(leftPads + ' .LayerOnboarding-body', ['is-step0', 'js-step']);
+      assertText(leftPads + ' .LayerOnboarding-step.is-step1 .LayerOnboarding-headerText', 'style-onboarding.aggregation.title');
+      assertText(leftPads + ' .LayerOnboarding-step.is-step1 .LayerOnboarding-description', 'style-onboarding.aggregation.description');
+      assertText(leftPads + ' .LayerOnboarding-step.is-step2 .LayerOnboarding-headerText', 'style-onboarding.style.title');
+      assertText(leftPads + ' .LayerOnboarding-step.is-step2 .LayerOnboarding-description', 'style-onboarding.style.description');
+      assertText(leftPads + ' .LayerOnboarding-step.is-step3 .LayerOnboarding-headerText', 'style-onboarding.cartocss.title');
+      assertText(leftPads + ' .LayerOnboarding-step.is-step3 .LayerOnboarding-description', 'style-onboarding.cartocss.description');
+      assertText(leftPads + ' .LayerOnboarding-footer.is-step1.is-step2 .js-close span', 'style-onboarding.exit');
+      assertText(leftPads + ' .LayerOnboarding-footer.is-step1.is-step2 .js-next span', 'style-onboarding.next');
+      assertText(leftPads + ' .LayerOnboarding-footer.is-step3 .js-close span', 'style-onboarding.style-layer');
+
+      // Content wrapper
+      var content = '.LayerOnboarding-contentWrapper';
+      assertClasses(content, ['is-step0', 'js-step']);
+      assertClasses(content + ' .LayerOnboarding-contentBody', ['is-step0', 'js-step']);
+      assertClasses(content + ' .LayerOnboarding-header', ['is-step0']);
+      assertText(content + ' .LayerOnboarding-headerTitle', 'style-onboarding.title');
+      assertText(content + ' .LayerOnboarding-description', 'style-onboarding.description');
+      assertClasses(content + ' .LayerOnboarding-footer', ['is-step0']);
+      assertText(content + ' .LayerOnboarding-footer .js-start', 'style-onboarding.take-tour');
+      assertText(content + ' .LayerOnboarding-footer .js-close', 'style-onboarding.style-layer');
+      assertText(content + ' .LayerOnboarding-footer .u-iBlock.is-step1 label', 'style-onboarding.never-show-message');
+      expect(true).toBe(true); // In case no error was thrown in assert functions, we need to pass at least one expectation to get the test in green.
+    });
+
+    it('polygons template', function () {
+      this.view = new View({
+        onboardingNotification: {},
+        editorModel: new Backbone.Model({}),
+        notificationKey: 'style-key',
+        geom: 'polygon',
+        type: 'simple'
+      });
+      var assertText = assertTextFn.bind(this, this.view);
+      var assertClasses = assertClassesFn.bind(this, this.view);
+      this.view.render();
+
+      // Pads on the left
+      var leftPads = '.LayerOnboarding-pads--left';
+      assertClasses(leftPads + ' .LayerOnboarding-body', ['is-step0', 'js-step']);
+      assertText(leftPads + ' .LayerOnboarding-step.is-step1 .LayerOnboarding-headerText', 'style-onboarding.style.title');
+      assertText(leftPads + ' .LayerOnboarding-step.is-step1 .LayerOnboarding-description', 'style-onboarding.style.short-description');
+      assertText(leftPads + ' .LayerOnboarding-step.is-step2 .LayerOnboarding-headerText', 'style-onboarding.cartocss.title');
+      assertText(leftPads + ' .LayerOnboarding-step.is-step2 .LayerOnboarding-description', 'style-onboarding.cartocss.description');
+      assertText(leftPads + ' .LayerOnboarding-footer.is-step1.is-step1 .js-close span', 'style-onboarding.exit');
+      assertText(leftPads + ' .LayerOnboarding-footer.is-step1.is-step1 .js-next span', 'style-onboarding.next');
+      assertText(leftPads + ' .LayerOnboarding-footer.is-step2 .js-close span', 'style-onboarding.style-layer');
+
+      // Content wrapper
+      var content = '.LayerOnboarding-contentWrapper';
+      assertClasses(content, ['is-step0', 'js-step']);
+      assertClasses(content + ' .LayerOnboarding-contentBody', ['is-step0', 'js-step']);
+      assertClasses(content + ' .LayerOnboarding-header', ['is-step0']);
+      assertText(content + ' .LayerOnboarding-headerTitle', 'style-onboarding.title');
+      assertText(content + ' .LayerOnboarding-description', 'style-onboarding.description');
+      assertClasses(content + ' .LayerOnboarding-footer', ['is-step0']);
+      assertText(content + ' .LayerOnboarding-footer .js-start', 'style-onboarding.take-tour');
+      assertText(content + ' .LayerOnboarding-footer .js-close', 'style-onboarding.style-layer');
+      assertText(content + ' .LayerOnboarding-footer .u-iBlock.is-step1 label', 'style-onboarding.never-show-message');
+      expect(true).toBe(true); // In case no error was thrown in assert functions, we need to pass at least one expectation to get the test in green.
+    });
   });
 });