Add jest tests

bitbucket-pipelines.yml

@@ -43,6 +43,16 @@ aliases:
   - npm run dev --prefix client &
   - cd client
   - /node_modules/.bin/cypress run
+- &jest-test
+  name: run jest tests
+  caches:
+  - node
+  script:
+  - echo "This pipeline rules!"
+  - *setup-tests
+  - npm install --prefix client
+  - cd client
+  - npm run test:unit
 - &deploy-prod
   name: deploy to prod on Heroku
   script:
@@ -66,6 +76,9 @@ pipelines:
         script:
         - git push https://heroku:$HEROKU_API_KEY@git.heroku.com/skillbox-stage.git develop:master
 
+    feature/jest-tests:
+      - step: *jest-test
+
   custom:
     prod:
     - step: *unittest-python

client/.babelrc

@@ -1,12 +1,14 @@
 {
   "presets": [
-    ["env", {
+    ["@babel/preset-env", {
-      "modules": false,
+      "useBuiltIns": false,
       "targets": {
         "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
       }
     }],
-    "stage-2"
   ],
-  "plugins": ["transform-vue-jsx", "transform-runtime"]
+  "plugins": [
+    "transform-vue-jsx",
+    "@babel/plugin-transform-runtime"
+  ]
 }

client/build/webpack.base.conf.js

@@ -49,6 +49,9 @@ module.exports = {
       {
         test: /\.js$/,
         loader: 'babel-loader',
+        options: {
+          presets: ['@babel/preset-env']
+        },
         include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
       },
       {

client/jest.config.js

@@ -0,0 +1,35 @@
+module.exports = {
+  moduleFileExtensions: [
+    'js',
+    'jsx',
+    'json',
+    'vue'
+  ],
+  transform: {
+    "\\.(gql|graphql)$": "<rootDir>/node_modules/jest-transform-graphql",
+    "^.+\\.js$": "<rootDir>/node_modules/babel-jest",
+    '^.+\\.vue$': '<rootDir>/node_modules/vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub'
+  },
+  modulePaths: [
+    "<rootDir>/src",
+    "<rootDir>/node_modules"
+  ],
+  transformIgnorePatterns: [
+    '/node_modules/'
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  snapshotSerializers: [
+    '<rootDir>/node_modules/jest-serializer-vue'
+  ],
+  testMatch: [
+    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
+  ],
+  testURL: 'http://localhost/',
+  watchPlugins: [
+    'jest-watch-typeahead/filename',
+    'jest-watch-typeahead/testname'
+  ]
+}

client/package.json

@@ -11,7 +11,8 @@
     "build": "node build/build.js",
     "open:cypress": "cypress open",
     "test:cypress": "cypress run",
-    "install:cypress": "cypress install"
+    "install:cypress": "cypress install",
+    "test:unit": "jest"
   },
   "dependencies": {
     "apollo-cache-inmemory": "^1.2.2",
@@ -21,16 +22,10 @@
     "appolo": "^6.0.19",
     "autoprefixer": "^7.1.2",
     "axios": "^0.18.0",
-    "babel-core": "^6.22.1",
     "babel-eslint": "^8.2.1",
     "babel-helper-vue-jsx-merge-props": "^2.0.3",
-    "babel-loader": "^7.1.1",
     "babel-plugin-syntax-jsx": "^6.18.0",
-    "babel-plugin-transform-runtime": "^6.22.0",
     "babel-plugin-transform-vue-jsx": "^3.5.0",
-    "babel-polyfill": "^6.26.0",
-    "babel-preset-env": "^1.3.2",
-    "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
@@ -99,6 +94,24 @@
     "not ie <= 8"
   ],
   "devDependencies": {
-    "cypress": "^3.1.5"
+    "@babel/core": "^7.5.4",
+    "@babel/plugin-transform-runtime": "^7.5.0",
+    "@babel/polyfill": "^7.4.4",
+    "@babel/preset-env": "^7.5.4",
+    "@babel/preset-stage-2": "^7.0.0",
+    "@babel/runtime": "^7.5.4",
+    "@vue/test-utils": "^1.0.0-beta.29",
+    "babel-bridge": "^1.12.11",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^24.8.0",
+    "babel-loader": "^8.0.6",
+    "canvas": "^2.5.0",
+    "cypress": "^3.1.5",
+    "jest": "^24.8.0",
+    "jest-serializer-vue": "^2.0.2",
+    "jest-transform-graphql": "^2.1.0",
+    "jest-transform-stub": "^2.0.0",
+    "jest-watch-typeahead": "^0.3.1",
+    "vue-jest": "^3.0.4"
   }
 }

client/src/main.js

@@ -1,4 +1,4 @@
-import 'babel-polyfill'
+import '@babel/polyfill'
 import Vue from 'vue'
 import axios from 'axios'
 import VueAxios from 'vue-axios'

client/tests/unit/.eslintrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  env: {
+    jest: true
+  }
+}

client/tests/unit/module-navigation.spec.js

@@ -0,0 +1,69 @@
+import { shallowMount } from '@vue/test-utils'
+import ModuleNavigation from '@/components/modules/ModuleNavigation'
+
+describe('ModuleNavigation.vue', () => {
+  it('should flatten an array', () => {
+    const props = {
+      modlues: [],
+      me: {}
+    };
+    const wrapper = shallowMount(ModuleNavigation, {
+      propsData: props
+    });
+
+
+    let arrayToFlatten = [[1], [2, 3], [4, 5, 6], [7]]
+
+    let flattenedArray = wrapper.vm.flattenArray(arrayToFlatten);
+    expect(flattenedArray).toEqual([1, 2, 3, 4, 5, 6, 7]);
+  });
+
+  it('should find top level assignment', () => {
+    const props = {
+      modlues: [],
+      me: {}
+    };
+    const wrapper = shallowMount(ModuleNavigation, {
+      propsData: props
+    });
+
+    let nodeData = {
+      type: 'assignment',
+      id: 1
+    }
+
+    let assignment = wrapper.vm.findAssignment(nodeData);
+    expect(assignment).toEqual([nodeData]);
+  });
+
+  it('should find content list assignments', () => {
+    const props = {
+      modlues: [],
+      me: {}
+    };
+    const wrapper = shallowMount(ModuleNavigation, {
+      propsData: props
+    });
+
+    let assignments = [
+      {
+        type: 'assignment',
+        id: 2
+      },
+      {
+        type: 'assignment',
+        id: 3
+      }
+    ];
+
+    let nodeData = {
+      type: 'content_list_item',
+      id: 1,
+      value: assignments
+    }
+
+    let foundAssignments = wrapper.vm.findAssignment(nodeData);
+    expect(foundAssignments).toEqual(assignments);
+  });
+
+})