update new dataset test

frontend/setupTests.js

@@ -1,5 +1,12 @@
 import { config } from '@vue/test-utils';
 import ElementPlus from 'element-plus';
 import 'element-plus/dist/index.css';
+import CsgButton from './src/components/shared/CsgButton.vue';
+import SvgIcon from './src/components/shared/SvgIcon.vue';
 
 config.global.plugins = [ElementPlus];
+
+config.global.components = {
+  CsgButton,
+  SvgIcon
+};

frontend/src/components/__tests__/datasets/NewDataset.spec.js

@@ -12,16 +12,14 @@ vi.mock('../../../stores/UserStore', () => ({
 }));
 
 // Mock useFetchApi
-const mockPost = vi.fn().mockResolvedValue({
-                   json: async () => ({
-                     data: { value: { data: { path: 'testuser/testdataset' } } },
-                     error: { value: null }
-                   })
-                 });
-
 vi.mock('../../../packs/useFetchApi', () => ({
   default: () => ({
-    post: () => mockPost(),
+    post: () => ({
+      json: () => Promise.resolve({
+        data: { value: { data: { path: 'testuser/testdataset' } } },
+        error: { value: null }
+      })
+    })
   })
 }));
 
@@ -70,28 +68,25 @@ describe("NewDataset", () => {
   });
 
   describe("form validation", () => {
+    const validateForm = () => {
+      return new Promise(resolve => {
+        wrapper.vm.$refs.dataFormRef.validate(valid => resolve(valid))
+      })
+    }
     it("validates required fields", async() => {
-      await wrapper.find('button').trigger('click');
-
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const formErrors = wrapper.findAll('.el-form-item__error');
-      expect(formErrors.length).toBeGreaterThan(0);
+      expect(await validateForm()).toBe(false)
     })
 
     it("accepts invalid dataset name", async () => {
       wrapper.vm.dataForm.name = '**__invalid-name'
-      await wrapper.find('button').trigger('click');
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const errorMessage = wrapper.find('.el-form-item__error');
-      expect(errorMessage.exists()).toBe(true);
+      await wrapper.vm.$nextTick()
+      expect(await validateForm()).toBe(false)
     });
 
     it("accepts valid dataset name", async () => {
       wrapper.vm.dataForm.name = 'valid-name'
-      await wrapper.find('button').trigger('click');
-      await new Promise((resolve) => setTimeout(resolve, 300))
-      const errorMessage = wrapper.find('.el-form-item__error');
-      expect(errorMessage.exists()).toBe(false);
+      await wrapper.vm.$nextTick()
+      expect(await validateForm()).toBe(true)
     });
   })
 

frontend/src/components/datasets/NewDataset.vue

@@ -295,8 +295,7 @@
       body: JSON.stringify(params)
     }
     const newEndpoint = '/datasets'
-    const postres = await useFetchApi(newEndpoint, options).post().json()
-    const { data, error } = await postres.json()
+    const { data, error } = await useFetchApi(newEndpoint, options).post().json()
 
     if (data.value) {
       ElMessage.success(t('datasets.newDataset.createSuccess'))