Merge pull request #7 from chakra-ui/chore/testing-setup

chore: testing setup

Author: codebender828

.commitlintrc.json

@@ -0,0 +1,5 @@
+{
+  "extends": [
+    "@commitlint/config-conventional"
+  ]
+}

.github/pr.yml

@@ -0,0 +1,42 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: PR Workflow
+
+on:
+  pull_request:
+    branches:
+      - master
+      - develop
+  push:
+    branches:
+      - develop
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [12.x]
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+
+    - name: Install dependencies
+      run: yarn install --frozen-lockfile && yarn bootstrap
+
+    - name: Lint types and code
+      run: yarn lint
+
+    - name: Build packages
+      run: yarn build
+
+    - name: Run tests
+      run: yarn test
+      env:
+        CI: true

.huskyrc

@@ -0,0 +1,7 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged",
+    "pre-push": "yarn test",
+    "commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
+  }
+}

.lintstagedrc

@@ -0,0 +1,3 @@
+{
+  "*.{js,vue}": "eslint --fix"
+}

_templates/generator/module/package.json.ejs.t

@@ -19,6 +19,10 @@ to: packages/<%=h.changeCase.paramCase(name)%>/package.json
   "scripts": {
     "build": "concurrently yarn:build:*",
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps"
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
+    "watch": "concurrently yarn:watch:*",
+    "watch:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps --watch",
+    "watch:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps --watch",
+    "watch:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types --watch"
   }
 }

jest.config.js

@@ -0,0 +1,27 @@
+module.exports = {
+  preset: 'ts-jest',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'vue'],
+  transform: {
+    '^.+\\.vue$': 'vue-jest',
+    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
+      'jest-transform-stub',
+    '^.+\\.(ts|jsx)?$': 'ts-jest',
+  },
+  transformIgnorePatterns: ['/node_modules/(?!lodash.)'],
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/$1',
+  },
+  snapshotSerializers: [
+    '@chakra-ui/vue-test-utils/dist/cjs/snapshot-serializer.js',
+  ],
+  testMatch: ['**/**/*.test.(js|jsx|ts|tsx)'],
+  testURL: 'http://localhost/',
+  testEnvironmentOptions: { resources: 'usable' },
+  globals: {
+    'ts-jest': {
+      tsconfig: {
+        target: 'ES2019',
+      },
+    },
+  },
+}

package.json

@@ -10,20 +10,22 @@
   ],
   "scripts": {
     "postinstall": "yarn run lerna bootstrap",
-    "build": "lerna run build --no-private --stream",
-    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "scaffold": "hygen",
-    "playground:routes": "ts-node ./scripts/parse-routes.ts",
+    "build": "lerna run build --no-private --stream",
     "dev": "yarn playground:routes && NODE_ENV=development vite serve playground --config ./vite.config.ts",
+    "playground:routes": "ts-node ./scripts/parse-routes.ts",
     "playground:build": "yarn install && yarn build && yarn playground:routes && NODE_ENV=production vite build playground --config ./vite.config.ts",
+    "test": "jest",
+    "lint": "eslint '*/**/*.{js,ts,tsx}' --quiet --fix",
     "core": "yarn workspace @chakra-ui/vue-next",
     "c-alert": "yarn workspace @chakra-ui/c-alert",
     "c-theme-provider": "yarn workspace @chakra-ui/c-theme-provider",
     "c-box": "yarn workspace @chakra-ui/c-box",
     "c-button": "yarn workspace @chakra-ui/c-button",
     "system": "yarn workspace @chakra-ui/system-vue",
     "theme": "yarn workspace @chakra-ui/vue-theme",
-    "nuxt": "yarn workspace @chakra-ui/nuxt-next"
+    "nuxt": "yarn workspace @chakra-ui/nuxt-next",
+    "test-utils": "yarn workspace @chakra-ui/vue-test-utils"
   },
   "license": "MIT",
   "private": true,
@@ -32,7 +34,12 @@
     "@babel/core": "^7.12.9",
     "@babel/preset-env": "^7.12.7",
     "@babel/preset-typescript": "^7.12.7",
-    "@types/jest": "^26.0.14",
+    "@commitlint/cli": "^11.0.0",
+    "@commitlint/config-conventional": "^11.0.0",
+    "@testing-library/jest-dom": "^5.11.9",
+    "@testing-library/user-event": "^12.6.2",
+    "@testing-library/vue": "^6.3.4",
+    "@types/jest": "^26.0.20",
     "@types/recursive-readdir": "^2.2.0",
     "@typescript-eslint/eslint-plugin": "^2.34.0",
     "@typescript-eslint/parser": "4.0.1",
@@ -41,6 +48,7 @@
     "@vue/eslint-config-typescript": "^5.1.0",
     "@vuedx/typecheck": "^0.4.1",
     "@vuedx/typescript-plugin-vue": "^0.4.1",
+    "babel-jest": "^26.6.3",
     "concurrently": "^5.3.0",
     "consola": "^2.15.0",
     "cross-env": "^7.0.2",
@@ -54,14 +62,21 @@
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^7.0.0",
     "fs-extra": "^9.0.1",
+    "husky": "^4.3.8",
     "hygen": "^6.0.4",
+    "jest": "^26.6.3",
+    "jest-transform-stub": "^2.0.0",
     "lerna": "^3.22.1",
+    "lint-staged": "^10.5.3",
     "prettier": "^2.1.2",
+    "pretty": "^2.0.0",
     "recursive-readdir": "^2.2.2",
+    "ts-jest": "^26.5.0",
     "ts-node": "^9.0.0",
     "typescript": "^4.1.2",
     "vite": "^2.0.0-beta.44",
     "vue": "^3.0.5",
+    "vue-jest": "^5.0.0-alpha.7",
     "vue-router": "4.0.0-beta.10"
   },
   "dependencies": {

packages/c-accordion/package.json

@@ -17,5 +17,8 @@
     "build:esm": "cross-env BABEL_ENV=esm babel src --root-mode upward --extensions .ts -d dist/esm --source-maps",
     "build:cjs": "cross-env BABEL_ENV=cjs babel src --root-mode upward --extensions .ts -d dist/cjs --source-maps",
     "build:types": "tsc --emitDeclarationOnly --declaration --declarationDir dist/types"
+  },
+  "dependencies": {
+    "@chakra-ui/system-vue": "1.0.0"
   }
 }

packages/c-accordion/src/index.ts

@@ -1,14 +1,15 @@
 import { h, defineComponent, PropType } from 'vue'
+import { chakra, DOMElements } from '@chakra-ui/system-vue'
 
 const CAccordion = defineComponent({
   props: {
     as: {
-      type: Object as PropType<string>,
+      type: [String] as PropType<DOMElements>,
       default: 'div',
     },
   },
   setup(props, { slots, attrs }) {
-    return h(props?.as, { ...attrs }, slots.default?.())
+    return () => h(chakra(props.as), { ...attrs }, slots)
   },
 })
 

packages/c-accordion/tests/__snapshots__/c-accordion.test.ts.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render properly 1`] = `
+<DocumentFragment>
+  <div
+    class="css-0"
+  />
+</DocumentFragment>
+`;