Jest Test Suite Set-up and some tests

.babelrc

@@ -1,5 +1,10 @@
 {
   "presets": [
     ["es2015", { "modules" : false }]
-  ]
+  ],
+  "env": {
+    "test": {
+      "presets": ["es2015"]
+    }
+  }
 }

.circleci/config.yml

@@ -0,0 +1,32 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node:8.9.3
+
+    working_directory: ~/repo
+
+    steps:
+      - checkout
+
+      # Download and cache dependencies
+      - restore_cache:
+          keys:
+          - v1-dependencies-{{ checksum "package.json" }}
+          # fallback to using the latest cache if no exact match is found
+          - v1-dependencies-
+
+      - run: npm install
+      - save_cache:
+          paths:
+            - node_modules
+          key: v1-dependencies-{{ checksum "package.json" }}
+      - run:
+          name: Lint JS
+          command: npm run lint
+      - run:
+          name: Run tests
+          command: npm run test -- --maxWorkers=4
+
+
+

.eslintrc.json

@@ -13,6 +13,13 @@
     "sourceType": "module",
     "ecmaVersion": 6
   },
+  "overrides": [
+    {
+      "files": ["src/**/*.js", "src/**/*.vue"],
+      "excludedFiles": "*.test.js"
+    }
+  ],
+
     // add global vars for chai, etc
     "globals": {
       "expect": false,
@@ -66,7 +73,7 @@
     "space-before-function-paren": [2, {"anonymous": "always", "named": "never"}],
     "space-infix-ops": [1, {"int32Hint": false}],
     "spaced-comment": [2, "always"],
-    // es6
+    // avoid-escape6
     "generator-star-spacing": [2, "before"],
     // legacy jshint rules
     "max-depth": [2, 4],

jest.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  collectCoverage: true,
+  collectCoverageFrom: ['src/services/*.js'],
+  coverageReporters: ['text-summary']
+};

package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "lint": "eslint src/**/*.js src/**/*.vue",
     "watch": "NODE_ENV=development webpack -w -d",
-    "test": "NODE_ENV=testing webpack test.js -d --target web && tape -r  ./test/dom-setup.js test-bundle.js | tap-difflet ",
+    "test": "jest",
     "prepublishOnly": "NODE_ENV=production webpack -p"
   },
   "pre-commit": [
@@ -39,15 +39,19 @@
     "autoprefixer": "^7.1.1",
     "babel-core": "^6.14.0",
     "babel-loader": "^7.0.0",
+    "babel-plugin-lodash": "^3.3.4",
+    "babel-preset-env": "^1.7.0",
     "babel-preset-es2015": "^6.14.0",
     "css-loader": "^0.24.0",
     "eslint": "^4.13.1",
     "eslint-plugin-html": "^4.0.1",
     "eslint-plugin-vue": "^4.0.0-beta.2",
     "extract-text-webpack-plugin": "^2.1.0",
+    "jest": "^23.4.0",
     "jsdom": "^10.1.0",
     "jsdom-global": "^3.0.2",
     "lodash": "^4.14.2",
+    "lodash-webpack-plugin": "^0.11.5",
     "node-sass": "^4.8.3",
     "postcss-loader": "^2.0.5",
     "sass-loader": "^4.1.1",
@@ -63,7 +67,6 @@
   "dependencies": {
     "null-loader": "^0.1.1",
     "raw-loader": "^0.5.1",
-    "tape": "^4.6.3",
     "vuedraggable": "^2.15.0"
   }
 }

src/index.js

@@ -9,7 +9,7 @@ import {
   CLOSE_FORM,
   LOADING_SUCCESS
 } from './mutationTypes';
-import { includes } from 'lodash';
+import _ from 'lodash';
 
 // Vue Components
 import createSpaceButton from './ui/create-space-button.vue';
@@ -46,7 +46,7 @@ window.kiln.plugins['clay-space-edit'] = function spaceEdit(store) {
       switch (mutation.type) {
         case FOCUS:
           // Set the logic tracker to true
-          activeLogic = includes(mutation.payload.uri, 'components/space-logic') ? mutation.payload : undefined;
+          activeLogic = _.includes(mutation.payload.uri, 'components/space-logic') ? mutation.payload : undefined;
           break;
         case CLOSE_FORM:
           if (activeLogic) {

src/services/add-service.js

@@ -1,6 +1,7 @@
 import { getAvailableComponents, findParentUriAndList } from './utils';
 import { findSpaceLogic } from './create-service';
-import { setNewActive } from '../services/toggle-service';
+import { setNewActiveLogic } from '../services/toggle-service';
+import _ from 'lodash';
 
 export function findAvailableComponents(store, spaceRef) {
   const parent = findParentUriAndList(spaceRef);
@@ -31,6 +32,6 @@ export function addToSpace(store, spaceRef, componentName) {
         }
       ]
     })
-      .then(() => setNewActive(store, spaceRef));
+      .then(() => setNewActiveLogic(store, spaceRef));
   });
 }

src/services/add-service.test.js

@@ -0,0 +1,83 @@
+import { addToSpace, findAvailableComponents} from './add-service.js';
+import { kilnApiStub, VuexStoreStub } from '../../test/utils.js';
+
+// importing these other services so we can mock them
+import * as createService from './create-service';
+import * as utils from './utils';
+import * as toggleService from './toggle-service';
+
+describe('add-service', ()=>{
+  let dispatchCalls = [], storeStub;
+  const spaceRef = '/_components/clay-space/instances/my-space',
+    availableComponents = ['related-stories', 'ad', 'most-popular'];
+
+  beforeEach(()=>{
+    storeStub = new VuexStoreStub(null, dispatchCalls);
+    storeStub.state.components[spaceRef] = {content: [
+      {_ref: '/_components/space-logic/instances/space-logic-123'}
+    ]};
+
+    createService.findSpaceLogic = jest.fn()
+      .mockReturnValue('space-logic');
+
+    utils.getAvailableComponents = jest.fn()
+      .mockReturnValue(availableComponents);
+    utils.findParentUriAndList = jest.fn()
+      .mockReturnValue({el: 'layout', list:'teritary'});
+
+    toggleService.setNewActiveLogic = jest.fn();
+
+    global.kiln = kilnApiStub;
+    global.kiln.utils.create.default = jest.fn()
+      .mockReturnValue(Promise.resolve(['related-stories']));
+    // stubbing an empty object to this Kiln method to prevent errors
+    global.kiln.utils.references.getComponentName = jest.fn();
+
+  });
+
+  it('fetch list of components that can be added to a Space', ()=>{
+    expect(findAvailableComponents(storeStub, spaceRef)).toBe(availableComponents);
+    // make sure we are finding the correct parent
+    expect(utils.findParentUriAndList).toBeCalledWith(spaceRef);
+  });
+
+  describe('add Space Logic to Space', ()=>{
+    it('after adding a new Logic, that logic is set to active', ()=>{
+      return addToSpace(storeStub, spaceRef, 'related-stories')
+        .then(()=>{
+          expect(toggleService.setNewActiveLogic).toBeCalledWith(storeStub, spaceRef);
+        });
+    });
+
+    it('create a new instance of a Space Logic and add it to the Space', ()=>{
+      return addToSpace(storeStub, spaceRef, 'related-stories')
+        .then(()=>{
+          const testDispatch = dispatchCalls[0];
+
+          expect(testDispatch.type).toBe('addComponents');
+          // make sure that we're adding the new Space Logic to the last Space
+          // Logic in the Space
+          expect(testDispatch.payload.currentURI).toBe('/_components/space-logic/instances/space-logic-123');
+          expect(testDispatch.payload.components[0].name).toBe('space-logic');
+        });
+    });
+
+    it('when adding a component to a Space, a new instances of that components should be created', ()=>{
+
+      return addToSpace(storeStub, spaceRef, 'related-stories')
+        .then(()=>{
+          const testDispatch = dispatchCalls[0];
+
+          // are we creating the correct component?
+          expect(global.kiln.utils.create.default).toBeCalledWith([{name: 'related-stories'}]);
+          // ... then are we embedding it into the Space Logic?
+          expect(testDispatch.payload.components[0].data).toEqual({
+            embeddedComponent: 'related-stories'
+          });
+
+        });
+
+    });
+
+  });
+});

src/services/create-service.js

@@ -1,4 +1,5 @@
 import { findParentUriAndList } from './utils';
+import _ from 'lodash';
 /**
  * Find the component to convert to a Space, find the Spaces available
  * in the parent's component list, figure out which Space needs to be
@@ -17,6 +18,7 @@ export function createSpace(store, ref, parentRef, availableSpaces) {
     try {
       return componentToSpace(store, ref, parentRef, availableSpaces[0])
         .then(function () {
+          // need to reference the page to see changes via the Kiln UI
           window.location.reload();
         });
     } catch (err) {
@@ -77,7 +79,7 @@ function componentToSpace(store, ref, parentRef, spaceName) {
     parentList = findParentUriAndList(ref).list;
 
   return newSpaceLogicCmpt
-    .then((res)=>_.last(res))
+    .then((res)=> _.last(res))
     .then(function (newSpaceLogic) {
       const newSpaceData = {
         content: [
@@ -99,7 +101,7 @@ function componentToSpace(store, ref, parentRef, spaceName) {
         ]
       });
     })
-    .catch(function () {
+    .catch(function (res) {
       throw new Error(`error creating space for ${ref}`);
     });
 }