test: added basic test infrastructure (jd-solanki#93)

.github/workflows/check-build.yml

@@ -48,3 +48,11 @@ jobs:
         run: pnpm install
       - name: Build anu
         run: pnpm run build
+      - name: Run unit tests
+        run: npm run test -- --reporter=junit --outputFile=../../test-results.xml
+      - name: Add tests results to artifacts
+        uses: actions/upload-artifact@v2
+        if: always()
+        with:
+          name: test-results-${{ runner.os }}-${{ matrix.node-version }}
+          path: test-results.xml

.github/workflows/test-report.yml

@@ -0,0 +1,19 @@
+name: "Test Report"
+
+on:
+  workflow_run:
+    # runs after CI workflow
+    workflows: ["Check build on various systems and node versions"]
+    types:
+      - completed
+
+jobs:
+  report:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: dorny/test-reporter@v1
+        with:
+          artifact: /test-results-(.*)/
+          name: "Test report $1"
+          path: "*.xml"
+          reporter: jest-junit

package.json

@@ -12,7 +12,8 @@
     "clean": "rimraf packages/anu-vue/dist && rimraf packages/anu-nuxt/dist && rimraf packages/preset-theme-default/dist",
     "release": "bumpp package.json packages/**/package.json",
     "lint": "pnpm --filter anu-vue lint",
-    "update:deps": "taze -r -w"
+    "update:deps": "taze -r -w",
+    "test": "nr --filter anu-vue test"
   },
   "keywords": [],
   "author": "",

packages/anu-vue/package.json

@@ -41,7 +41,8 @@
     "gen-comp-meta": "na tsx ../../scripts/gen-component-meta.ts",
     "build": "pnpm gen-comp-meta && vite build",
     "preview": "vite preview",
-    "lint": "eslint . --fix"
+    "lint": "eslint . --fix",
+    "test": "vitest"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.0.3",
@@ -52,14 +53,17 @@
     "@unocss/reset": "^0.46.5",
     "@vitejs/plugin-vue": "^3.2.0",
     "@vitejs/plugin-vue-jsx": "^2.1.1",
+    "@vue/test-utils": "^2.2.6",
     "@vueuse/core": "^9.6.0",
+    "jsdom": "^20.0.3",
     "markdown-it": "^13.0.1",
     "sass": "^1.56.1",
     "typescript": "^4.9.3",
     "unocss": "^0.46.5",
     "unplugin-vue-components": "^0.22.11",
     "vite": "^3.2.4",
     "vite-plugin-dts": "^1.7.1",
+    "vitest": "^0.25.6",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.0.9"
   },

packages/anu-vue/src/components/btn/ABtn.tsx

@@ -70,6 +70,7 @@ export const ABtn = defineComponent({
     return () => (
       <button
         class={[props.iconOnly ? 'a-btn-icon-only' : 'a-btn', 'whitespace-nowrap inline-flex justify-center items-center', { 'opacity-50 pointer-events-none': props.disabled }, ...classes.value]}
+        disabled={props.disabled ? true : undefined}
         style={[...styles.value, { '--a-spacing': spacing.value / 100 }]}
         tabindex={props.disabled ? -1 : 0}
       >

packages/anu-vue/test/ABtn.test.ts

@@ -0,0 +1,66 @@
+import { shallowMount } from '@vue/test-utils'
+import { describe, expect, it } from 'vitest'
+import { ABtn } from '../src/components/btn/ABtn'
+
+describe('Testing ABtn', () => {
+  it('can mount component', () => {
+    const wrapper = shallowMount(ABtn, { props: {}, slots: { default: 'Click me' } })
+
+    expect(wrapper.find('button').exists()).toBe(true)
+    expect(wrapper.find('button').text()).toBe('Click me')
+    expect(wrapper.classes()).toContain('a-btn')
+    expect(window.getComputedStyle(wrapper.find('button').element).getPropertyValue('--a-layer-color')).toContain('--a-primary')
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('has proper classes', () => {
+    const wrapper = shallowMount(ABtn, { props: {}, slots: { default: 'Click me' } })
+    expect(wrapper.classes()).toMatchSnapshot()
+  })
+
+  it('handles click event', async () => {
+    const wrapper = shallowMount(ABtn, { props: {}, slots: { default: 'Click me' } })
+
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeDefined()
+  })
+
+  it('color prop changes button color', () => {
+    const wrapper = shallowMount(ABtn, { props: { color: 'warning' }, slots: { default: 'Click me' } })
+
+    expect(window.getComputedStyle(wrapper.find('button').element).getPropertyValue('--a-layer-color')).toContain('--a-warning')
+  })
+
+  it('icon prop adds an icon', () => {
+    const wrapper = shallowMount(ABtn, { props: { icon: 'i-bx-heart' }, slots: { default: 'Click me' } })
+
+    expect(wrapper.findAll('button i')[0].classes()).toContain('i-bx-heart')
+  })
+
+  it('appendIcon prop adds an icon after the text', () => {
+    const wrapper = shallowMount(ABtn, { props: { icon: 'i-bx-heart', appendIcon: 'i-bx-star' }, slots: { default: 'Click me' } })
+
+    expect(wrapper.findAll('button i')[0].classes()).toContain('i-bx-heart')
+    expect(wrapper.findAll('button i')[1].classes()).toContain('i-bx-star')
+  })
+
+  it('iconOnly prop applies a-btn-icon-only style', () => {
+    const wrapper = shallowMount(ABtn, { props: { icon: 'i-bx-heart', iconOnly: true }, slots: { default: 'Click me' } })
+
+    expect(wrapper.findAll('button i')[0].classes()).toContain('i-bx-heart')
+    expect(wrapper.classes()).not.toContain('a-btn')
+    expect(wrapper.classes()).toContain('a-btn-icon-only')
+  })
+
+  it('disabled prop disables cursor, decreases opacity and set tabindex to -1', async () => {
+    const wrapper = shallowMount(ABtn, { props: { disabled: true }, slots: { default: 'Click me' } })
+
+    expect(wrapper.classes()).toContain('opacity-50')
+    expect(wrapper.classes()).toContain('pointer-events-none')
+    expect(wrapper.find('button').element.tabIndex).toBe(-1)
+
+    await wrapper.trigger('click')
+    expect(wrapper.emitted('click')).toBeUndefined()
+  })
+})

packages/anu-vue/test/ATable.test.ts

@@ -0,0 +1,52 @@
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { ATable } from '../src/components/table/ATable'
+
+const nameList = Array.from(Array(10).keys()).map(x => {
+  return { name: `name${x + 1}` }
+})
+
+// 👉 Mock ResizeObserver
+// This is needed for ASelect autoupdate
+const ResizeObserverMock = vi.fn(() => ({
+  observe: vi.fn(),
+  unobserve: vi.fn(),
+  disconnect: vi.fn(),
+}))
+
+vi.stubGlobal('ResizeObserver', ResizeObserverMock)
+
+describe('Testing ATable', async () => {
+  let wrapper: VueWrapper
+  beforeEach(() => {
+    wrapper = mount(ATable,
+      { props: { rows: nameList, pageSize: 5 }, slots: { } },
+    )
+  })
+  it('mount component', () => {
+    // check header
+    expect(wrapper.findAll('table thead tr th').at(0)?.text()).toBe('name')
+
+    // check rows
+    expect(wrapper.findAll('table tbody tr td').at(0)?.text()).toBe('name1')
+    expect(wrapper.findAll('table tbody tr td').at(1)?.text()).toBe('name2')
+
+    // check pagination
+    expect(wrapper.find('.a-table-pagination-meta')?.text()).toBe('1 - 5 of 10')
+
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  it('paging should update content and paging indicator', async () => {
+  // trigger next page
+    await wrapper.find('.a-table-footer-next-page-btn').trigger('click')
+
+    // check rows
+    expect(wrapper.findAll('table tbody tr td').at(0)?.text()).toBe('name6')
+    expect(wrapper.findAll('table tbody tr td').at(1)?.text()).toBe('name7')
+
+    // check pagination
+    expect(wrapper.find('.a-table-pagination-meta')?.text()).toBe('6 - 10 of 10')
+  })
+})

packages/anu-vue/test/__snapshots__/ABtn.test.ts.snap

@@ -0,0 +1,27 @@
+// Vitest Snapshot v1
+
+exports[`Testing ABtn > can mount component 1`] = `
+"<button class=\\"a-btn whitespace-nowrap inline-flex justify-center items-center states [--un-bg-opacity:1] text-white typography-title-white typography-subtitle-white typography-text-white typography-subtitle-opacity-100 typography-text-opacity-100 bg-$a-layer-color\\" style=\\"--a-layer-color: hsla(var(--a-primary),var(--un-bg-opacity)); --un-ring-color: hsl(var(--a-primary)); --a-spacing: 1;\\" tabindex=\\"0\\">
+  <!---->Click me
+  <!---->
+</button>"
+`;
+
+exports[`Testing ABtn > has proper classes 1`] = `
+[
+  "a-btn",
+  "whitespace-nowrap",
+  "inline-flex",
+  "justify-center",
+  "items-center",
+  "states",
+  "[--un-bg-opacity:1]",
+  "text-white",
+  "typography-title-white",
+  "typography-subtitle-white",
+  "typography-text-white",
+  "typography-subtitle-opacity-100",
+  "typography-text-opacity-100",
+  "bg-$a-layer-color",
+]
+`;

packages/anu-vue/test/__snapshots__/ATable.test.ts.snap

@@ -0,0 +1,72 @@
+// Vitest Snapshot v1
+
+exports[`Testing ATable > mount component 1`] = `
+"<div class=\\"a-card overflow-hidden uno-layer-base-bg-[hsl(var(--a-layer))] a-table\\" style=\\"--a-spacing: 1;\\">
+  <!---->
+  <!---->
+  <!---->
+  <div class=\\"overflow-x-auto\\">
+    <table class=\\"a-table-table overflow-x-auto w-full max-w-full\\">
+      <thead>
+        <tr>
+          <th class=\\"a-table-table-th whitespace-nowrap cursor-pointer select-none\\">
+            <div class=\\"inline-flex items-center\\"><span>name</span>
+              <div class=\\"i-bx-up-arrow-alt\\" style=\\"display: none;\\"></div>
+              <div class=\\"i-bx-down-arrow-alt\\" style=\\"display: none;\\"></div>
+            </div>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td class=\\"a-table-table-td whitespace-nowrap\\"><span class=\\"a-table-td-text\\">name1</span></td>
+        </tr>
+        <tr>
+          <td class=\\"a-table-table-td whitespace-nowrap\\"><span class=\\"a-table-td-text\\">name2</span></td>
+        </tr>
+        <tr>
+          <td class=\\"a-table-table-td whitespace-nowrap\\"><span class=\\"a-table-td-text\\">name3</span></td>
+        </tr>
+        <tr>
+          <td class=\\"a-table-table-td whitespace-nowrap\\"><span class=\\"a-table-td-text\\">name4</span></td>
+        </tr>
+        <tr>
+          <td class=\\"a-table-table-td whitespace-nowrap\\"><span class=\\"a-table-td-text\\">name5</span></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+  <div class=\\"a-table-footer flex items-center\\">
+    <div class=\\"uno-layer-base-text-base gap-4 flex flex-col a-table-pagination-meta\\">
+      <!----><span class=\\"uno-layer-base-text-[hsla(var(--a-typography-text-color),var(--a-typography-text-opacity))]\\"><span class=\\"text-xs\\">1 - 5 of 10</span></span>
+    </div>
+    <div class=\\"flex-grow\\"></div>
+    <div class=\\"a-table-footer-per-page-container flex items-center\\"><span class=\\"sm:inline hidden\\">per page</span>
+      <div class=\\"a-base-input-root i:children:focus-within:text-primary flex flex-col flex-grow flex-shrink-0 a-table-footer-per-page-select a-base-input-interactive\\" style=\\"--a-spacing: 0.8;\\">
+        <!---->
+        <div class=\\"a-base-input-input-container flex items-center\\">
+          <!---->
+          <div class=\\"focus-within:border-primary a-base-input-input-wrapper cursor-text em:spacing:px-4 spacing:gap-x-2 relative i:focus-within:text-primary items-center border border-solid border-a-border w-full a-table-footer-per-page-select--input-wrapper-classes\\">
+            <!----><input class=\\"a-base-input-child w-full h-full inset-0 rounded-inherit bg-transparent a-base-input-wo-prepend-inner a-base-input-w-append-inner\\" readonly=\\"\\"><i class=\\"a-base-input-append-inner-icon ml-auto transition duration-150 ease -in i-bx-chevron-down\\"></i>
+          </div>
+          <!---->
+        </div>
+        <transition-stub name=\\"expand\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\" data-v-0762f2f7=\\"\\">
+          <div class=\\"h-8\\" style=\\"display: none;\\"><small class=\\"inline-block text-light-emphasis\\">
+              <!---->
+            </small></div>
+        </transition-stub>
+      </div>
+      <!--teleport start-->
+      <!--teleport end-->
+    </div>
+    <div><button class=\\"a-btn-icon-only whitespace-nowrap inline-flex justify-center items-center opacity-50 pointer-events-none states [--un-bg-opacity:1] text-primary typography-title-primary typography-subtitle-primary typography-text-primary typography-subtitle-opacity-100 typography-text-opacity-100 a-table-footer-previous-page-btn\\" disabled=\\"\\" style=\\"--a-layer-color: hsla(var(--a-primary),var(--un-bg-opacity)); --un-ring-color: hsl(var(--a-primary)); --a-spacing: 1;\\" tabindex=\\"-1\\"><i class=\\"i-bx-left-arrow-alt\\"></i>
+        <!---->
+        <!---->
+      </button><button class=\\"a-btn-icon-only whitespace-nowrap inline-flex justify-center items-center states [--un-bg-opacity:1] text-primary typography-title-primary typography-subtitle-primary typography-text-primary typography-subtitle-opacity-100 typography-text-opacity-100 a-table-footer-next-page-btn\\" style=\\"--a-layer-color: hsla(var(--a-primary),var(--un-bg-opacity)); --un-ring-color: hsl(var(--a-primary)); --a-spacing: 1;\\" tabindex=\\"0\\"><i class=\\"i-bx-right-arrow-alt\\"></i>
+        <!---->
+        <!---->
+      </button></div>
+  </div>
+</div>"
+`;

packages/anu-vue/tsconfig.json

@@ -23,7 +23,10 @@
       "anu-vue": [
         "./src"
       ]
-    }
+    },
+    "types": [
+      "vitest/globals"
+    ]
   },
   "include": [
     "src/**/*.ts",

packages/anu-vue/tsconfig.node.json

@@ -2,7 +2,8 @@
   "compilerOptions": {
     "composite": true,
     "module": "esnext",
-    "moduleResolution": "node",
+    "target": "esnext",
+    "moduleResolution": "node"
   },
   "include": [
     "vite.config.ts"

packages/anu-vue/vite.config.ts

@@ -2,8 +2,8 @@ import { resolve } from 'path'
 import { URL, fileURLToPath } from 'url'
 import vue from '@vitejs/plugin-vue'
 import vueJsx from '@vitejs/plugin-vue-jsx'
-import { defineConfig } from 'vite'
 import dts from 'vite-plugin-dts'
+import { defineConfig } from 'vitest/config'
 
 const externals = [
   'vue',
@@ -42,4 +42,11 @@ export default defineConfig({
       '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    transformMode: {
+      web: [/.[tj]sx$/],
+    },
+  },
 })