test(all): 测试用例

frontend/.vscode/settings.json

@@ -1,32 +0,0 @@
-{
-  "typescript.tsdk": "node_modules/typescript/lib",
-  "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true, // 开启stylelint自动修复
-  },
-  "editor.formatOnSave": true,
-  "eslint.validate": [
-    "javascript",
-    "javascriptreact",
-    "typescript",
-    "typescriptreact",
-    "html",
-    "vue",
-    "markdown",
-    "json",
-    "jsonc"
-  ],
-  // 配置stylelint检查的文件类型范围
-  "stylelint.validate": [
-    "css",
-    "less",
-    "postcss",
-    "scss",
-    "sass",
-    "vue"
-  ],
-  "stylelint.enable": true,
-  "css.validate": false,
-  "less.validate": false,
-  "scss.validate": false,
-}

frontend/src/__test__/table.spec.ts

@@ -0,0 +1,95 @@
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+import MsBaseTable from '@/components/ms-table/base-table.vue';
+import { nextTick } from 'vue';
+import { MsTableColumn } from '@/components/ms-table/type';
+import useTable from '@/components/ms-table/useTable';
+import { getTableList } from '@/api/modules/api-test/index';
+
+const columns: MsTableColumn = [
+  {
+    title: 'ID',
+    dataIndex: 'num',
+  },
+  {
+    title: '接口名称',
+    dataIndex: 'name',
+  },
+  {
+    title: '请求类型',
+    dataIndex: 'method',
+  },
+  {
+    title: '责任人',
+    dataIndex: 'username',
+  },
+  {
+    title: '路径',
+    dataIndex: 'path',
+  },
+  {
+    title: '标签',
+    dataIndex: 'tags',
+  },
+  {
+    title: '更新时间',
+    slotName: 'updataTime',
+  },
+  {
+    title: '用例数',
+    dataIndex: 'caseTotal',
+  },
+  {
+    title: '用例状态',
+    dataIndex: 'caseStatus',
+  },
+  {
+    title: '用例通过率',
+    dataIndex: 'casePassingRate',
+  },
+  {
+    title: '接口状态',
+    dataIndex: 'status',
+  },
+  {
+    title: '创建时间',
+    slotName: 'createTime',
+  },
+  {
+    title: '描述',
+    dataIndex: 'description',
+  },
+  {
+    title: '操作',
+    slotName: 'action',
+    fixed: 'right',
+    width: 200,
+  },
+];
+
+describe('MS-Table', () => {
+  test('init table with useTable', async () => {
+    const { propsRes, propsEvent, loadList, setProps } = useTable(getTableList, {
+      columns,
+      pagination: { current: 1, pageSize: 1 },
+    });
+
+    const wrapper = mount(MsBaseTable, {
+      vOn: propsEvent,
+      vBind: propsRes,
+    });
+    loadList();
+
+    await nextTick();
+    let content = wrapper.find('.arco-table-td-content').element.innerHTML;
+    expect(propsRes.value.data.length).toBe(2);
+    expect(content).toBe('e7bd7179-d63a-43a5-1a65-218473ee69ca');
+
+    setProps({ pagination: { current: 2, pageSize: 1 } });
+    loadList();
+
+    await nextTick();
+    content = wrapper.find('.arco-table-td-content').element.innerHTML;
+    expect(content).toBe('937be890-79bb-1b68-e03e-7d37a8b0a607');
+  });
+});

frontend/src/components/ms-table/useTable.ts

@@ -20,11 +20,11 @@ export interface QueryParams {
 }
 
 type GetListFunc = (v: QueryParams) => Promise<CommonReponse<ApiTestListI>>;
-export default function useTbleProps(loadListFunc: GetListFunc, props?: MsTabelProps) {
+export default function useTbleProps(loadListFunc: GetListFunc, props?: Partial<MsTabelProps>) {
   const defaultProps: MsTabelProps = {
     'bordered': true,
     'size': 'small',
-    'scroll': { y: 550, x: '100%' },
+    'scroll': { y: 550, x: '1400px' },
     'expandable': false,
     'loading': true,
     'data': [] as MsTableData,
@@ -67,10 +67,12 @@ export default function useTbleProps(loadListFunc: GetListFunc, props?: MsTabelP
   };
 
   // 单独设置默认属性
-  const setProps = (params: MsTabelProps) => {
+  const setProps = (params: Partial<MsTabelProps>) => {
+    const tmpProps = propsRes.value;
     Object.keys(params).forEach((key) => {
-      defaultProps[key] = params[key];
+      tmpProps[key] = params[key];
     });
+    propsRes.value = tmpProps;
   };
 
   // 设置请求参数，如果出了分页参数还有搜索参数，在模板页面调用此方法，可以加入参数

frontend/src/views/api-test/index.vue

@@ -79,7 +79,7 @@
     },
   ];
 
-  const { propsRes, propsEvent, loadList } = useTable(getTableList, { columns, data: [] });
+  const { propsRes, propsEvent, loadList } = useTable(getTableList, { columns, scroll: { x: 2000 } });
 
   const fetchData = async () => {
     await loadList();