Merge pull request #6 from roschaefer/test_setup

Test and build server setup

.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    ["env", { "modules": false }]
+  ],
+  "env": {
+    "test": {
+      "presets": [
+        ["env", { "targets": { "node": "current" }}]
+      ]
+    }
+  }
+}

.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+node_js:
+  - "10"
+
+cache:
+  directories:
+    - "node_modules"
+
+install:
+  - yarn install
+
+script:
+  - yarn run test

components/Badges.spec.js

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils'
+import Badges from './Badges.vue'
+
+describe('Badges.vue', () => {
+  let wrapper
+
+  beforeEach(() => {
+    wrapper = shallowMount(Badges, {
+    })
+  })
+
+  it('renders', () => {
+    expect(wrapper.is('div')).toBe(true)
+  })
+
+  it('has class "hc-badges"', () => {
+    expect(wrapper.contains('.hc-badges')).toBe(true)
+  })
+
+  // TODO: add similar software tests for other components
+  // TODO: add more test cases in this file
+})

package.json

@@ -5,7 +5,6 @@
   "author": "Grzegorz Leoniec",
   "private": true,
   "scripts": {
-    "postinstall": "yarn styleguide:build",
     "dev": "cross-env NODE_ENV=development nodemon server/index.js --watch server",
     "build": "nuxt build",
     "start": "cross-env node server/index.js",
@@ -13,8 +12,25 @@
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore .",
     "styleguide": "cd ./styleguide && yarn dev",
     "styleguide:build": "cd ./styleguide && yarn build:lib && cd ../ && yarn upgrade vue-cion-design-system --ignore-engines",
+    "test": "jest",
     "precommit": "yarn lint"
   },
+  "jest": {
+    "moduleFileExtensions": [
+      "js",
+      "json",
+      "vue"
+    ],
+    "transform": {
+      ".*\\.(vue)$": "vue-jest",
+      "^.+\\.js$": "<rootDir>/node_modules/babel-jest"
+    },
+    "moduleNameMapper": {
+      "^@/(.*)$": "<rootDir>/src/$1",
+      "^@@/(.*)$": "<rootDir>/styleguide/src/system/$1",
+      "^~/(.*)$": "<rootDir>/$1"
+    }
+  },
   "dependencies": {
     "@nuxtjs/apollo": "^4.0.0-rc3",
     "@nuxtjs/dotenv": "^1.3.0",
@@ -32,15 +48,20 @@
     "vue-izitoast": "^1.1.0"
   },
   "devDependencies": {
+    "@vue/test-utils": "^1.0.0-beta.25",
     "babel-eslint": "^10.0.1",
+    "babel-jest": "^23.6.0",
+    "babel-preset-env": "^1.7.0",
     "eslint": "^5.0.1",
     "eslint-config-prettier": "^3.1.0",
     "eslint-loader": "^2.0.0",
     "eslint-plugin-prettier": "3.0.0",
     "eslint-plugin-vue": "^4.0.0",
+    "jest": "^23.6.0",
     "node-sass": "^4.9.3",
     "nodemon": "^1.11.0",
     "prettier": "1.14.3",
-    "sass-loader": "^7.1.0"
+    "sass-loader": "^7.1.0",
+    "vue-jest": "^3.0.0"
   }
 }

styleguide/src/system/components/data-display/CopyField/CopyField.vue

@@ -36,7 +36,7 @@ import DsButton from '@@/components/navigation/Button/Button'
 export default {
   name: 'DsCopyField',
   components: {
-    DsButton
+    'ds-button': DsButton
   },
   props: {
     /**

styleguide/src/system/components/data-display/CopyField/__snapshots__/spec.js.snap

@@ -11,10 +11,11 @@ exports[`CopyField.vue matches snapshot 1`] = `
   <div
     class="ds-copy-field-link"
   >
-    <ds-button
+    <ds-button-stub
       color="soft"
-      ghost=""
+      ghost="true"
       icon="copy"
+      linktag="button"
     />
   </div>