add tests

web/package.json

@@ -14,7 +14,7 @@
     "format": "prettier --write .",
     "format:check": "prettier -c .",
     "typecheck": "vue-tsc --noEmit",
-    "test": "echo 'No tests configured' && exit 0"
+    "test": "vitest"
   },
   "dependencies": {
     "@intlify/unplugin-vue-i18n": "^4.0.0",
@@ -44,6 +44,7 @@
     "@typescript-eslint/parser": "^7.0.0",
     "@vitejs/plugin-vue": "^5.0.3",
     "@vue/compiler-sfc": "^3.4.15",
+    "@vue/test-utils": "^2.4.5",
     "eslint": "^8.56.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-airbnb-typescript": "^18.0.0",
@@ -54,6 +55,7 @@
     "eslint-plugin-simple-import-sort": "^12.0.0",
     "eslint-plugin-vue": "^9.20.1",
     "eslint-plugin-vue-scoped-css": "^2.7.2",
+    "jsdom": "^24.0.0",
     "prettier": "^3.2.4",
     "replace-in-file": "^7.1.0",
     "tinycolor2": "^1.6.0",
@@ -64,6 +66,7 @@
     "vite-plugin-prismjs": "^0.0.11",
     "vite-plugin-windicss": "^1.9.3",
     "vite-svg-loader": "^5.1.0",
+    "vitest": "^1.5.0",
     "vue-eslint-parser": "^9.4.0",
     "vue-tsc": "^2.0.0",
     "windicss": "^3.5.6"

web/src/compositions/usePaginate.test.ts

@@ -0,0 +1,65 @@
+import { shallowMount } from '@vue/test-utils';
+import { describe, expect, it } from 'vitest';
+import { type Ref, watch } from 'vue';
+
+import { usePagination } from './usePaginate';
+
+async function waitForState<T>(ref: Ref<T>, expected: T): Promise<void> {
+  await new Promise<void>((resolve) => {
+    watch(
+      ref,
+      (value) => {
+        if (value === expected) {
+          resolve();
+        }
+      },
+      { immediate: true },
+    );
+  });
+}
+
+// eslint-disable-next-line promise/prefer-await-to-callbacks
+export const mountComposition = (cb: () => void) => {
+  const wrapper = shallowMount({
+    setup() {
+      // eslint-disable-next-line promise/prefer-await-to-callbacks
+      cb();
+      return {};
+    },
+    template: '<div />',
+  });
+
+  return wrapper;
+};
+
+describe('usePaginate', () => {
+  it('get first repo page', async () => {
+    const repoSecrets = [
+      [{ name: 'repo1' }, { name: 'repo2' }, { name: 'repo3' }],
+      [{ name: 'repo4' }, { name: 'repo5' }, { name: 'repo6' }],
+    ];
+    const orgSecrets = [
+      [{ name: 'org1' }, { name: 'org2' }, { name: 'org3' }],
+      [{ name: 'org4' }, { name: 'org5' }, { name: 'org6' }],
+    ];
+
+    let usePaginationComposition = null as unknown as ReturnType<typeof usePagination>;
+    mountComposition(() => {
+      usePaginationComposition = usePagination<{ name: string }>(
+        async (page, level) => {
+          console.log('getSingle', page, level);
+          if (level === 'repo') {
+            return repoSecrets[page - 1];
+          }
+          return orgSecrets[page - 1];
+        },
+        () => true,
+        { each: ['repo', 'org'] },
+      );
+    });
+    await waitForState(usePaginationComposition.loading, true);
+    await waitForState(usePaginationComposition.loading, false);
+
+    expect(usePaginationComposition.data.value.length).toBe(6);
+  });
+});

web/src/compositions/usePaginate.ts

@@ -33,6 +33,8 @@ export function usePagination<T, S = unknown>(
       return;
     }
 
+    console.log('loadData', page.value, each.value);
+
     loading.value = true;
     const newData = (await _loadData(page.value, each.value?.[0] as S)) ?? [];
     hasMore.value = newData.length >= pageSize.value && newData.length > 0;
@@ -40,6 +42,8 @@ export function usePagination<T, S = unknown>(
       data.value.push(...newData);
     }
 
+    console.log('loadData1', page.value, hasMore.value, each.value);
+
     // last page and each has more
     if (!hasMore.value && each.value.length > 0) {
       // use next each element

web/vite.config.ts

@@ -7,10 +7,10 @@ import replace from 'replace-in-file';
 import IconsResolver from 'unplugin-icons/resolver';
 import Icons from 'unplugin-icons/vite';
 import Components from 'unplugin-vue-components/vite';
-import { defineConfig } from 'vite';
 import prismjs from 'vite-plugin-prismjs';
 import WindiCSS from 'vite-plugin-windicss';
 import svgLoader from 'vite-svg-loader';
+import { defineConfig } from 'vitest/config';
 
 function woodpeckerInfoPlugin() {
   return {
@@ -133,4 +133,8 @@ export default defineConfig({
     host: process.env.VITE_DEV_SERVER_HOST || '127.0.0.1',
     port: 8010,
   },
+  test: {
+    globals: true,
+    environment: 'jsdom',
+  },
 });