add test unit (#549)

Author: ygj6

.github/workflows/vuepress-deploy.yml

@@ -15,3 +15,9 @@ jobs:
           TARGET_BRANCH: gh-pages
           BUILD_SCRIPT: cd website && yarn && yarn build
           BUILD_DIR: public
+
+      - name: test:unit
+        run: |
+          yarn
+          yarn test:unit
+          yarn test:cover

babel.config.js

@@ -1,6 +1,7 @@
 module.exports = {
     presets: [
-        '@vue/app'
+        '@vue/app',
+        '@babel/preset-env'
     ],
     "plugins": [
         "transform-flow-comments"

jest.config.js

@@ -0,0 +1,24 @@
+module.exports = {
+  moduleFileExtensions: [
+    'js',
+    'json',
+    'vue',
+  ],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1', 
+  },
+  transformIgnorePatterns: [
+    "<rootDir>/node_modules/(?!@babel|@interactjs)",
+  ],
+  transform: {
+    '^.+\\.js$': '<rootDir>/node_modules/babel-jest',
+    '.*\\.(vue)$': '<rootDir>/node_modules/vue-jest',
+  },
+  coverageDirectory: '<rootDir>/test/unit/coverage',
+  collectCoverageFrom: [
+    'src/**/*.{js,vue}',
+    '!src/main.js',
+    '!src/router/index.js',
+    '!**/node_modules/**',
+  ],
+};

package.json

@@ -24,7 +24,9 @@
     "serve": "vue-cli-service serve",
     "build": "rimraf dist && vue-cli-service build",
     "build-lib": "rimraf dist && vue-cli-service build --target lib ./src/components/index.js",
-    "lint": "vue-cli-service lint"
+    "lint": "vue-cli-service lint",
+    "test:unit": "vue-cli-service test:unit",
+    "test:cover": "vue-cli-service test:unit --coverage"
   },
   "dependencies": {
     "element-resize-detector": "^1.2.1",
@@ -35,15 +37,21 @@
     "@interactjs/dev-tools": "^1.10.2"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.12.11",
     "@vue/cli-plugin-babel": "^3.4.1",
     "@vue/cli-plugin-eslint": "^3.4.1",
+    "@vue/cli-plugin-unit-jest": "^4.5.10",
     "@vue/cli-service": "^3.4.1",
     "@vue/eslint-config-standard": "^3.0.5",
+    "@vue/test-utils": "^1.1.2",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-jest": "^26.6.3",
     "babel-plugin-transform-flow-comments": "^6.7.0",
     "node-sass": "^4.13.0",
     "rimraf": "^2.6.2",
     "sass-loader": "^7.0.1",
     "vue": "^2.6.12",
+    "vue-jest": "^3.0.7",
     "vue-template-compiler": "^2.6.12",
     "webpack-bundle-analyzer": "^3.9.0"
   }

test/unit/GridItem.spec.js

@@ -0,0 +1,23 @@
+import { shallowMount } from '@vue/test-utils'
+import GridLayout from '../../src/components/GridLayout.vue'
+
+let layout
+
+describe('GridLayout test', () => {
+    beforeAll(()=>{
+        let testLayout = [{"x":0,"y":0,"w":2,"h":2,"i":"0", resizable: true, draggable: true, static: false, minY: 0, maxY: 2}];
+        layout = JSON.parse(JSON.stringify(testLayout))
+    })
+    
+    describe('Interface test', () => {
+        it('should render correct contents', () => {
+            const wrapper = shallowMount(GridLayout, {
+                propsData: {
+                    layout: layout
+                }   
+            })
+            const grid = wrapper.findAll('.vue-grid-layout');
+            expect(grid.selector).toEqual('.vue-grid-layout');
+        })
+    })
+})