Configure Jest for Backbone Components

lib/assets/test/spec/new-dashboard/unit/jest.conf.js

@@ -17,12 +17,26 @@ module.exports = {
     '^new-dashboard/(.*)$': `<rootDir>/${srcPath}/new-dashboard/$1`,
     '^dashboard/(.*)$': `<rootDir>/${srcPath}/dashboard/$1`,
     '^builder/(.*)$': `<rootDir>/${srcPath}/builder/$1`,
-    '^backbone/core-view$': `<rootDir>/${srcPath}/vendor/backbone/core-view.js`
+    '^backbone/core-view$': `<rootDir>/${srcPath}/vendor/backbone/core-view.js`,
+    '^mousewheel$': `<rootDir>/node_modules/internal-carto.js/vendor/mousewheel`,
+    '^mwheelIntent$': `<rootDir>/node_modules/internal-carto.js/vendor/mwheelIntent`,
+    '^html-css-sanitizer$': `<rootDir>/node_modules/internal-carto.js/vendor/html-css-sanitizer-bundle`,
+    '^cdb$': `<rootDir>/node_modules/internal-carto.js/src/cdb`,
+    '^cdb.log$': `<rootDir>/node_modules/internal-carto.js/src/cdb.log`,
+    '^cdb.core.Profiler$': `<rootDir>/node_modules/internal-carto.js/src/core/profiler`,
+    '^cdb.core.util$': `<rootDir>/node_modules/internal-carto.js/src/core/util`,
+    '^cdb.templates$': `<rootDir>/node_modules/internal-carto.js/src/cdb.templates`,
+    '^cdb.config$': `<rootDir>/node_modules/internal-carto.js/src/cdb.config`
   },
   transform: {
     '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '^.+\\.tpl$': `<rootDir>/${testPath}/unit/utils/tplLoader.js`,
     '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest'
   },
+  transformIgnorePatterns: [
+    'node_modules/(?!(internal-carto.js)/)'
+  ],
+  silent: true,
   snapshotSerializers: ['<rootDir>/node_modules/jest-serializer-vue'],
   setupFiles: [`<rootDir>/${testPath}/unit/setup`],
   coverageDirectory: `<rootDir>/${testPath}/coverage`,

lib/assets/test/spec/new-dashboard/unit/setup.js

@@ -1,3 +1,6 @@
 import Vue from 'vue';
 
 Vue.config.productionTip = false;
+
+// Make jQuery global without DefinePlugin
+window.jQuery = require('jquery');

lib/assets/test/spec/new-dashboard/unit/specs/NavigationBar.spec.js

@@ -1,9 +1,47 @@
-import { shallow } from '@vue/test-utils';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
 import NavigationBar from 'new-dashboard/components/NavigationBar/NavigationBar';
 
+// Vue imports
+import VueRouter from 'vue-router';
+import Vuex from 'vuex';
+
+// Backbone Models
+import ConfigModel from 'dashboard/data/config-model';
+import UserModel from 'dashboard/data/user-model';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+localVue.use(VueRouter);
+
+let store, user, config;
+
 describe('NavigationBar.vue', () => {
+  beforeEach(() => {
+    user = {
+      avatar_url: 'hola'
+    };
+
+    user.userModel = new UserModel(user);
+
+    config = {};
+    config.configModel = new ConfigModel(config);
+
+    store = new Vuex.Store({
+      state: {
+        user,
+        config
+      }
+    });
+  });
+
   it('should render correct contents', () => {
-    const navigationBar = shallow(NavigationBar);
+    const navigationBar = shallowMount(NavigationBar, {
+      propsData: { user },
+      localVue,
+      store
+    });
+
+
     expect(navigationBar).toMatchSnapshot();
   });
 });

lib/assets/test/spec/new-dashboard/unit/specs/__snapshots__/NavigationBar.spec.js.snap

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavigationBar.vue should render correct contents 1`] = `
+<nav class="navbar">
+  <ul class="navbar-elementsContainer">
+    <router-link-stub to="[object Object]" tag="a" exactactiveclass="is-active" event="click" class="navbar-elementItem"><span class="navbar-icon"><img svg-inline="" src="../../assets/icons/navbar/home.svg" class="navbar-iconFill"></span> <span class="title is-caption is-regular is-txtWhite">Home</span></router-link-stub>
+    <router-link-stub to="[object Object]" tag="a" exactactiveclass="is-active" event="click" class="navbar-elementItem"><span class="navbar-icon"><img svg-inline="" src="../../assets/icons/navbar/solutions.svg" class="navbar-iconFill"></span> <span class="title is-caption is-regular is-txtWhite">Solutions</span></router-link-stub>
+    <router-link-stub to="[object Object]" tag="a" exactactiveclass="is-active" event="click" class="navbar-elementItem"><span class="navbar-icon"><img svg-inline="" src="../../assets/icons/navbar/applications.svg" class="navbar-iconFill"></span> <span class="title is-caption is-regular is-txtWhite">Maps</span></router-link-stub>
+    <router-link-stub to="[object Object]" tag="a" exactactiveclass="is-active" event="click" class="navbar-elementItem"><span class="navbar-icon"><img svg-inline="" src="../../assets/icons/navbar/data.svg" class="navbar-iconFill"></span> <span class="title is-caption is-regular is-txtWhite">Data</span></router-link-stub>
+  </ul>
+  <div class="navbar-imagotype"><img src="../../assets/icons/navbar/imagotype.svg"></div>
+  <div class="navbar-elementsContainer">
+    <form action="#" method="get" class="navbar-search"><input type="text" name="query" placeholder="Search" class="title is-small is-regular"></form>
+    <div class="navbar-user">
+      <div class="navbar-avatar" style="background-image: url(hola);"></div>
+      <userdropdown-stub usermodel="[object Object]" configmodel="[object Object]"></userdropdown-stub>
+    </div>
+  </div>
+</nav>
+`;

lib/assets/test/spec/new-dashboard/unit/utils/tplLoader.js

@@ -0,0 +1,7 @@
+const underscoreTemplateLoader = require('underscore-template-strict-loader');
+
+module.exports = {
+  process (src, filename, config, options) {
+    return underscoreTemplateLoader(src);
+  }
+};

package.json

@@ -144,6 +144,7 @@
     "tpl-loader": "CartoDB/tpl-loader#webpack4",
     "uglify-js": "2.7.x",
     "uglifyjs-webpack-plugin": "https://registry.npmjs.org/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.2.5.tgz",
+    "underscore-template-strict-loader": "^0.3.0",
     "vue-jest": "^3.0.0",
     "vue-loader": "^15.4.2",
     "vue-style-loader": "^4.1.2",