Merge pull request #10 from InCuca/jest

Add jest support

Author: klarkc

README.md

@@ -1,7 +1,7 @@
 # vue-loopback
 [![Travis](https://img.shields.io/travis/InCuca/vue-loopback/master.svg)](https://travis-ci.org/InCuca/vue-loopback/branches)
 
-A Vue project template with [Loopback](http://loopback.io/) framework featuring ES6, Gulp, and Mocha for unit tests
+A Vue project template with [Loopback](http://loopback.io/) framework featuring ES6, Gulp, and Jest for unit tests
 
 > This template is for Vue 2.x **only** with [vue-cli](https://github.com/vuejs/vue-cli).
 
@@ -44,6 +44,14 @@ A Vue project template with [Loopback](http://loopback.io/) framework featuring
   $ npm run dev
 ```
 
+## Debug
+
+```
+$ DEBUG=loopback npm run dev
+```
+
+[More info...](https://loopback.io/doc/en/lb3/Setting-debug-strings.html)
+
 ## Build to ./build
 
 ```
@@ -56,10 +64,3 @@ A Vue project template with [Loopback](http://loopback.io/) framework featuring
   $ cd build
   $ npm run start
 ```
-
-You can run only the server with:
-
-```bash
-  $ cd build/server
-  $ node .
-```

template/.babelrc

@@ -6,13 +6,16 @@
             "> 1%",
             "last 2 versions",
             "not ie <= 8"
-          ]
+          ],
+          "node": "8"
         }
       }],
-    "stage-2"
+      "stage-2"
   ],
   "plugins": [
-    ["babel-plugin-root-import", [
+    [
+      "babel-plugin-root-import",
+      [
         {
           "rootPathPrefix": "~",
           "rootPathSuffix": "."
@@ -21,6 +24,14 @@
           "rootPathPrefix": "@",
           "rootPathSuffix": "client"
         }
-    ]]
+      ]
+    ],
+    [
+      "transform-runtime",
+      {
+        "polyfill": false,
+        "regenerator": true
+      }
+    ]
   ]
 }

template/.eslintrc

@@ -22,7 +22,9 @@
         "devDependencies": [
           "test/**/*.js",
           "test/**/*.js",
-          "gulp-tasks/**/*.js"
+          "gulp-tasks/**/*.js",
+          "jest.config.js",
+          "jest.plugins.js"
         ]
       }
     ],
@@ -35,6 +37,7 @@
     "expect": true,
     "assert": true,
     "require": true,
-    "request": true
+    "request": true,
+    "jest": true
   }
 }

template/README.md

@@ -33,6 +33,14 @@
   $ npm run dev
 ```
 
+## Debug
+
+```
+$ DEBUG=loopback npm run dev
+```
+
+[More info...](https://loopback.io/doc/en/lb3/Setting-debug-strings.html)
+
 ## Build to ./build
 
 ```

template/gulp-tasks/build.js

@@ -15,15 +15,6 @@ import {argv} from 'yargs';
 import {dirs, extended} from './config';
 import {customSass} from './compilers';
 
-gulp.task('build:test', () => gulp.src([
-  path.resolve(dirs.test, '**/*.test.js'),
-  path.resolve(dirs.test, 'config.js'),
-])
-  .pipe(sourcemaps.init())
-  .pipe(babel())
-  .pipe(sourcemaps.write())
-  .pipe(gulp.dest(dirs.buildTest)));
-
 gulp.task('build:client', ['copy:client', 'copy:config:server'], () => {
   // Node modules to be included in babel transpilation
   //  Use this with ES6 modules for example
@@ -148,7 +139,6 @@ gulp.task('build:index', () => {
 });
 
 gulp.task('build', [
-  'build:test',
   'build:client',
   'build:common',
   'build:server',

template/gulp-tasks/tasks.js

@@ -2,5 +2,4 @@
 import './serve';
 import './default';
 import './build';
-import './test';
 import './copy';

template/gulp-tasks/test.js

@@ -10,11 +10,8 @@
     "dev": "gulp serve",
     "build": "gulp build --production && npm run afterbuild",
     "afterbuild": "cd build && npm install --production",
-    "test": "gulp test",
-    "test:server": "gulp test:server",
-    "test:client": "gulp test:client",
-    "start": "(type ./build/index.js && node ./build/index.js) || node ./index.js ",
-    "vulnerabilities": "nsp check"
+    "test": "npx jest --runInBand test/server/**.spec.js && npx jest test/client/**.spec.js",
+    "start": "node ./index.js"
   },
   "dependencies": {
     "compression": "^1.0.3",
@@ -24,7 +21,7 @@
     "express": "^4.16.2",
     "express-history-api-fallback": "^2.2.1",
     "loopback": "^3.16.2",
-    "loopback-boot": "^2.27.0",
+    "loopback-boot": "github:klarkc/loopback-boot#master",
     "loopback-component-explorer": "^4.0.0",
     "serve-favicon": "^2.0.1",
     "strong-error-handler": "^2.0.0",
@@ -47,18 +44,18 @@
   },
   "devDependencies": {
     "aliasify": "^2.1.0",
-    "babel-core": "^6.25.0",
+    "babel-core": "^6.26.3",
     "babel-eslint": "^8.2.2",
+    "babel-jest": "^23.0.1",
+    "regenerator-runtime": "^0.11.1",
+    "supertest": "^3.1.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
     "babel-preset-stage-2": "^6.24.1",
     "babelify": "^7.3.0",
     "browserify": "^14.4.0",
     "browserify-global-shim": "^1.0.3",
-    "chai": "^4.1.0",
-    "chai-http": "^3.0.0",
     "css-modulesify": "^0.28.0",
-    "babel-eslint": "^8.2.2",
     "eslint": "^4.15.0",
     "eslint-config-airbnb-base": "^11.3.0",
     "eslint-plugin-import": "^2.9.0",
@@ -68,34 +65,37 @@
     "gulp-autoprefixer": "^4.0.0",
     "gulp-babel": "^6.1.2",
     "gulp-connect": "^5.0.0",
-    "gulp-mocha": "^4.3.1",
     "gulp-sourcemaps": "^2.6.0",
-    "karma": "^1.7.1",
-    "karma-browserify": "^5.1.1",
-    "karma-chai": "^0.1.0",
-    "karma-mocha": "^1.3.0",
-    "karma-chrome-launcher": "^2.2.0",
-    "loopback-chai": "^2.3.0",
-    "mocha": "^3.4.2",
-    "sinon": "^2.3.8",
+    "jest": "^22.4.4",
+    "jest-plugins": "^2.9.0",
+    "jest-preset-loopback": "^1.0.0",
+    "loopback-jest": "^1.3.0",
+    "supertest": "^3.1.0",
     "tfilter": "^1.0.1",
     "through2": "^2.0.3",
     "tmp": "0.0.33",
     "vinyl-buffer": "^1.0.0",
     "vinyl-source-stream": "^1.1.0",
+    "vue-jest": "^2.6.0",
+    "vue-test-utils": "^1.0.0-beta.11",
     "vueify": "^9.4.1",
     "yargs": "^10.0.3",
     "babel-plugin-root-import": "^5.1.0",
     "connect-history-api-fallback": "^1.5.0",
     "node-sass": "^4.6.0",
-    "nsp": "^2.1.0",
     "gulp-util": "^3.0.8",
     "babel-register": "^6.26.0"
   },
   "repository": {
     "type": "",
     "url": ""
   },
+  "jest": {
+    "projects": [
+      "<rootDir>/test/server",
+      "<rootDir>/test/client"
+    ]
+  },
   "license": "UNLICENSED",
   "description": "{{ description }}"{{#extended}},
   "extended": true

template/package.json

@@ -3,6 +3,12 @@ import boot from 'loopback-boot';
 
 const app = loopback();
 
+const options = {
+  appRootDir: __dirname,
+  // File Extensions for jest (strongloop/loopback#3204)
+  scriptExtensions: ['.js', '.json', '.node', '.ejs'],
+};
+
 let httpServer;
 
 app.start = function() {
@@ -25,7 +31,7 @@ app.close = function() {
 
 // Bootstrap the application, configure models, datasources and middleware.
 // Sub-apps like REST API are mounted via boot scripts.
-boot(app, __dirname, (err) => {
+boot(app, options, (err) => {
   if (err) throw err;
 
   // start the server if `$ node server.js`

template/server/server.js

@@ -40,14 +40,14 @@ describe('App.vue', () => {
 
   {{#extended}}
   it('should render router component', () => {
-    expect(vm.$el.innerHTML).to.equal('mocked component');
-    expect(vm.$el.getAttribute('id')).to.equal('app');
+    expect(vm.$el.innerHTML).toEqual('mocked component');
+    expect(vm.$el.getAttribute('id')).toEqual('app');
   });
   {{else}}
   it('should render correct content', () => {
     const newVm = new Constructor().$mount();
     return Vue.nextTick().then(() => {
-      expect(newVm.$el.innerHTML).to.equal('Hello World!');
+      expect(newVm.$el.innerHTML).toEqual('Hello World!');
     });
   });
   {{/extended}}

template/test/.eslintrc

@@ -1,15 +1,12 @@
-import Vue from 'vue';
+import {mount} from 'vue-test-utils';
 import HelloWorld from '@/components/HelloWorld/HelloWorld.vue';
 
 describe('HelloWorld.vue', () => {
-  const Constructor = Vue.extend(HelloWorld);
+  const wrapper = mount(HelloWorld);
 
   it('should render correct content', () => {
-    const vm = new Constructor().$mount();
-    return Vue.nextTick().then(() => {
-      expect(vm.$el.innerHTML).to.include(
-        'Hello World! This content is restricted.'
-      );
-    });
+    expect(wrapper.html()).toContain(
+      'Hello World! This content is restricted.'
+    );
   });
 });

template/test/client/app.spec.js

@@ -0,0 +1,11 @@
+module.exports = {
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'vue',
+  ],
+  transform: {
+    '^.+\\.js$': 'babel-jest',
+    '^.+\\.vue$': 'vue-jest',
+  },
+};