test: add tests using vitest (#4)

* test(core): add test case for utils function

* chore: upgrade vitest

* test: add tests for the core composition api

* chore: update ci

* test: update test

* test: update test

.eslintrc

@@ -17,5 +17,13 @@
     // typescript
     "@typescript-eslint/ban-types": "off",
     "@typescript-eslint/no-explicit-any": "off"
-  }
+  },
+  "overrides": [
+    {
+      "files": ["*.test.ts"],
+      "rules": {
+        "@typescript-eslint/no-empty-function": "off"
+      }
+    }
+  ]
 }

.github/workflows/ci.yml

@@ -0,0 +1,51 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  lint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install --frozen-lockfile
+
+      - name: Lint
+        run: pnpm lint
+
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v2
+
+      - name: Set node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.x
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install --frozen-lockfile
+
+      - name: Test
+        run: pnpm test

.gitignore

@@ -1,5 +1,6 @@
 node_modules
 dist
+coverage
 
 .DS_STORE
 

package.json

@@ -7,7 +7,9 @@
     "lint": "eslint './packages/**/*.{js,ts}'",
     "lint:fix": "pnpm lint --fix",
     "play": "cd playground && pnpm dev",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage"
   },
   "lint-staged": {
     "{packages}/**/*.{js,ts}": [
@@ -29,6 +31,8 @@
     "@types/node": "^16.11.0",
     "@typescript-eslint/eslint-plugin": "^5.20.0",
     "@typescript-eslint/parser": "^5.20.0",
+    "@vitest/coverage-c8": "^0.24.3",
+    "@vue/test-utils": "^2.2.0",
     "consola": "^2.15.3",
     "esbuild-register": "^3.3.2",
     "eslint": "^8.13.0",
@@ -37,6 +41,7 @@
     "esno": "^0.14.1",
     "fs-extra": "^10.1.0",
     "husky": "^7.0.0",
+    "jsdom": "^20.0.1",
     "lint-staged": "^12.4.1",
     "prettier": "^2.6.2",
     "rimraf": "^3.0.2",
@@ -45,6 +50,7 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.31.2",
     "typescript": "^4.6.3",
+    "vitest": "^0.24.3",
     "vue": "^3.0.0"
   }
 }

packages/core/tests/composiable/useField.test.ts

@@ -0,0 +1,56 @@
+import { describe, expect, it } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { defineComponent } from 'vue';
+
+import { useForm, useField } from '../../src';
+
+const noop = () => {};
+
+const setup = (setup: () => unknown) => {
+  const Comp = defineComponent({
+    setup,
+    template: `<div />`,
+  });
+
+  return mount(Comp);
+};
+
+describe('useField', () => {
+  it('when not using it in the correct structure', () => {
+    setup(() => {
+      expect(() => useField('name')).toThrowError();
+    });
+  });
+
+  it('when useField initialize field value and state', () => {
+    setup(() => {
+      useForm({
+        initialValues: {
+          name: 'Alex',
+        },
+        onSubmit: noop,
+      });
+
+      const nameField = useField('name');
+      expect(nameField.value.value).toEqual('Alex');
+      expect(nameField.dirty.value).toEqual(false);
+      expect(nameField.error.value).toEqual(undefined);
+      expect(nameField.touched.value).toEqual(false);
+      expect(nameField.attrs.value.name).toEqual('name');
+
+      nameField.value.value = 'Hunter';
+      expect(nameField.value.value).toEqual('Hunter');
+      expect(nameField.dirty.value).toEqual(true);
+
+      const mockEvent = {
+        target: {
+          name: 'name',
+          id: 'name',
+        },
+      } as unknown as Event;
+
+      nameField.attrs.value.onBlur(mockEvent);
+      expect(nameField.touched.value).toEqual(true);
+    });
+  });
+});