Merge pull request #21 from element-plus/feat/test

feat: add jest basic config

jest.config.js

@@ -0,0 +1,16 @@
+module.exports = {
+  preset: 'ts-jest',
+  globals: {
+    // work around: https://github.com/kulshekhar/ts-jest/issues/748#issuecomment-423528659
+    'ts-jest': {
+      diagnostics: {
+        ignoreCodes: [151001],
+      },
+    },
+  },
+  testEnvironment: 'jsdom',
+  transform: {
+    "^.+\\.vue$": "vue-jest"
+  },
+  moduleFileExtensions: ['vue', 'json', 'ts', 'tsx', 'js', 'json']
+}

package.json

@@ -6,7 +6,8 @@
     "dev": "vite",
     "build": "vite build",
     "cz": "npx git-cz",
-    "gen": "sh ./scripts/gc.sh",
+    "test": "jest",
+    "gen": "bash ./scripts/gc.sh",
     "storybook": "start-storybook",
     "bootstrap": "yarn && npx lerna bootstrap"
   },
@@ -15,6 +16,7 @@
     "vue-router": "^4.0.0-beta.2"
   },
   "devDependencies": {
+    "@types/jest": "^26.0.7",
     "@babel/core": "^7.10.5",
     "@storybook/html": "^5.3.19",
     "@vue/compiler-sfc": "^3.0.0-rc.1",
@@ -22,9 +24,12 @@
     "babel-preset-vue": "^2.0.2",
     "cz-conventional-changelog": "^3.2.0",
     "lerna": "^3.22.1",
+    "jest": "^24.1.0",
+    "ts-jest": "^26.1.3",
+    "vue-jest": "5.0.0-alpha.1",
+    "vite": "^1.0.0-rc.1",
     "ts-loader": "^8.0.1",
     "typescript": "^3.9.7",
-    "vite": "^1.0.0-rc.1",
     "vue-loader": "^v16.0.0-beta.4"
   },
   "config": {

packages/button/__tests__/button.spec.ts

@@ -0,0 +1,36 @@
+import {mount} from '@vue/test-utils'
+import Button from '../src/index.vue'
+
+const AXIOM = 'Rem is the best girl'
+const COMMON_CONFIG = {
+  global: {
+    provide: {
+      elForm: {},
+      elFormItem: {},
+    }
+  }
+}
+
+describe('Button.vue', () => {
+  test('render text', () => {
+    const instance = mount(Button, {
+      slots: {
+        default: AXIOM
+      },
+      ...COMMON_CONFIG,
+    })
+    expect(instance.text()).toEqual(AXIOM)
+  })
+
+  test('handle click', async () => {
+    const instance = mount(Button, {
+      slots: {
+        default: AXIOM
+      },
+      ...COMMON_CONFIG,
+    })
+    await instance.trigger('click')
+    expect(instance.emitted()).toBeDefined()
+
+  })
+})

packages/button/package.json

@@ -5,5 +5,8 @@
   "license": "MIT",
   "peerDependencies": {
     "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.0"
   }
 }

packages/button/src/index.vue

@@ -29,7 +29,7 @@ const ELEMENT: {
 } = {}
 // TODOS: replace these interface definition with actual ElForm interface
 interface ElForm {
-  disabled: boolean;  
+  disabled: boolean;
 }
 interface ElFormItem {
   elFormItemSize: number;
@@ -89,4 +89,4 @@ export default {
       }
     }
   };
-</script>
+</script>

scripts/gc.sh

@@ -28,6 +28,25 @@ NAME=$NORMALIZED_NAME
 mkdir -p "$DIRNAME"
 mkdir -p "$DIRNAME/src"
 mkdir -p "$DIRNAME/doc"
+mkdir -p "$DIRNAME/__tests__"
+
+cat > $DIRNAME/src/index.vue <<EOF
+<template>
+  <div>
+    <slot/>
+  </div>
+</template>
+<script lang='ts'>
+export default {
+  NAME: 'El${NAME}',
+    props: {
+    },
+    setup(props,ctx) { }
+  };
+</script>
+<style scoped>
+</style>
+EOF
 
 cat <<EOF >"$DIRNAME/index.ts"
 import { App } from 'vue'
@@ -35,27 +54,42 @@ import ${NAME} from './src/index.vue'
 export default (app: App) => {
   app.component(${NAME}.name, ${NAME})
 }
-
 EOF
 
-cat <<EOF >"$DIRNAME/src/index.vue"
-<template>
-  <div>
-  </div>
-</template>
-<script lang='ts'>
-export default {
-  NAME: 'El${NAME}',
-    props: { },
-    setup(props,ctx) { }
-  };
-</script>
-<style>
-</style>
-
+cat > $DIRNAME/package.json <<EOF
+{
+  "name": "@element-plus/$INPUT_NAME",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.0"
+  }
+}
 EOF
 
-cat <<EOF >"$DIRNAME/doc/index.stories.js"
+cat > $DIRNAME/__tests__/$INPUT_NAME.spec.ts <<EOF
+import {mount} from '@vue/test-utils'
+import $NAME from '../src/index.vue'
+
+const AXIOM = 'Rem is the best girl'
+
+describe('$NAME.vue', () => {
+  test('render test', () => {
+    const instance = mount($NAME, {
+      slots: {
+        default: AXIOM
+      },
+    })
+    expect(instance.text()).toEqual(AXIOM)
+  })
+})
+EOF
+
+cat <<EOF >"$DIRNAME/doc/index.stories.ts"
 import El${NAME} from '../index'
 
 export default {
@@ -63,15 +97,3 @@ export default {
 }
 
 EOF
-
-cat <<EOF >"$DIRNAME/package.json"
-{
-  "name": "@element-plus/${INPUT_NAME}",
-  "description": "ElementPlus Component ${INPUT_NAME}",
-  "version": "0.1.0",
-  "main": "dist/index.js",
-  "license": "MIT",
-  "dependencies": {}
-}
-
-EOF

typings/vue-shim.d.ts

@@ -1,5 +1,7 @@
 declare module '*.vue' {
-  import { Component } from 'vue'
-  const _default: Component
+  import { Component, ComponentPublicInstance } from 'vue'
+  const _default: Component & {
+    new (): ComponentPublicInstance
+  }
   export default _default
 }