feat(CsgButton): emit click event on button click (#1240)

zhendi · zhendi.wang · web-flow · commit 7e9bad17ba9b · 2025-08-04T11:54:12.000+08:00
* Draft MR

* feat(CsgButton): emit click event on button click

* feat(tests): enhance NewModel component tests

- Mock vue-i18n for translations
- Mock UserStore for user data
- Mock useFetchApi for API calls
- Improve form validation tests
- Add success message on form submission

---------

Co-authored-by: zhendi.wang &lt;zhd.wang@opencsg.com&gt;
diff --git a/frontend/src/components/__tests__/application_spaces/ApplicationSpaceSettings.spec.js b/frontend/src/components/__tests__/application_spaces/ApplicationSpaceSettings.spec.js
@@ -84,14 +84,14 @@ describe('ApplicationSpaceSettings', () => {
   it('updates application space nickname when button is clicked', async () => {
     const wrapper = createWrapper()
     await wrapper.setData({ theApplicationSpaceNickname: 'New Name' })
-    await wrapper.find('[data-test="update-nickname"]').trigger('click')
+    await wrapper.findComponent('[data-test="update-nickname"]').vm.$emit('click')
     expect(ElMessage.success).toHaveBeenCalledWith('Success')
   })
 
   it('update application space description when button is clicked', async () => {
     const wrapper = createWrapper()
     await wrapper.setData({ theApplicationSpaceDesc: 'New Description' })
-    await wrapper.find('[data-test="update-description"]').trigger('click')
+    await wrapper.findComponent('[data-test="update-description"]').vm.$emit('click')
     expect(ElMessage.success).toHaveBeenCalledWith('Success')
   })
 })
diff --git a/frontend/src/components/__tests__/application_spaces/NewApplicationSpace.spec.js b/frontend/src/components/__tests__/application_spaces/NewApplicationSpace.spec.js
@@ -19,7 +19,7 @@ const createWrapper = (props) => {
 
 const triggerFormButton = async (wrapper) => {
   const button = wrapper.findComponent({ name: 'CsgButton' })
-  await button.trigger('click')
+  await button.vm.$emit('click') // Trigger the form submission
   await wrapper.vm.$nextTick()
 }
 
@@ -120,8 +120,8 @@ describe('NewApplicationSpace', () => {
   describe('when select docker sdk', async () => {
     it('fetchs the docker templates', async () => {
       const wrapper = createWrapper()
-      const dockerRadio = wrapper.find('#sdk-docker')
-      await dockerRadio.trigger('click')
+      const dockerRadio = wrapper.findComponent('#sdk-docker')
+      await dockerRadio.vm.$emit('click')
       await waitFor(() => {
         expect(wrapper.vm.dockerTemplates[0].name).toEqual('ChatUI')
       })
diff --git a/frontend/src/components/__tests__/codes/CodeSettings.spec.js b/frontend/src/components/__tests__/codes/CodeSettings.spec.js
@@ -67,14 +67,14 @@ describe('CodeSettings', () => {
   it('updates code nickname when button is clicked', async () => {
     const wrapper = createWrapper()
     await wrapper.setData({ theCodeNickname: 'New Name' })
-    await wrapper.find('[data-test="update-nickname"]').trigger('click')
+    await wrapper.findComponent('[data-test="update-nickname"]').vm.$emit('click')
     expect(ElMessage.success).toHaveBeenCalledWith('Success')
   })
 
   it('shows warning when trying to update empty nickname', async () => {
     const wrapper = createWrapper()
     await wrapper.setData({ theCodeNickname: '' })
-    await wrapper.find('[data-test="update-nickname"]').trigger('click')
+    await wrapper.findComponent('[data-test="update-nickname"]').vm.$emit('click')
     expect(ElMessage.success).toHaveBeenCalled()
   })
 })
diff --git a/frontend/src/components/__tests__/codes/NewCode.spec.js b/frontend/src/components/__tests__/codes/NewCode.spec.js
@@ -19,7 +19,7 @@ const createWrapper = (props) => {
 
 const triggerFormButton = async (wrapper) => {
   const button = wrapper.findComponent({ name: 'CsgButton' })
-  await button.trigger('click')
+  await button.vm.$emit('click')
   await wrapper.vm.$nextTick()
 }
 
diff --git a/frontend/src/components/__tests__/models/NewModel.spec.js b/frontend/src/components/__tests__/models/NewModel.spec.js
@@ -1,18 +1,70 @@
-import { describe, it, expect, beforeEach, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { mount } from "@vue/test-utils";
 import NewModel from "@/components/models/NewModel.vue";
-import SvgIcon from '@/components/shared/SvgIcon.vue';
 import ElementPlus from 'element-plus'
-import * as ElementPlusIconsVue from '@element-plus/icons-vue'
+import waitForExpect from 'wait-for-expect';
 
-const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms));
+// Mock vue-i18n
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: (key) => key,
+  }),
+}));
 
+// Mock UserStore
+vi.mock('../../../stores/UserStore', () => ({
+  default: () => ({
+    username: 'testuser',
+    orgs: [{ path: 'testorg' }]
+  })
+}));
+
+// Mock useFetchApi to handle license fetching and form submission
+vi.mock('../../../packs/useFetchApi', () => {
+  const mock = vi.fn().mockImplementation((url) => {
+    if (url.startsWith('/tags')) {
+      return {
+        json: () => Promise.resolve({
+          data: { value: { data: [{name: 'MIT'}, {name: 'Apache-2.0'}] } }
+        })
+      };
+    }
+    if (url === '/models') {
+      return {
+        post: () => ({
+          json: () => Promise.resolve({
+            data: { value: { data: { path: 'testuser/testmodel' } } },
+            error: { value: null }
+          })
+        })
+      };
+    }
+    // Default mock for any other calls
+    return {
+      post: () => ({
+        json: () => Promise.resolve({ data: { value: {} }, error: { value: null } })
+      }),
+      json: () => Promise.resolve({ data: { value: {} } })
+    };
+  });
+  return { default: mock };
+});
 
 const createWrapper = (props) => {
   return mount(NewModel, {
     global: {
+      plugins: [ElementPlus],
       provide: {
         nameRule: /^[a-zA-Z][a-zA-Z0-9-_.]*[a-zA-Z0-9]$/,
+      },
+      stubs: {
+        SvgIcon: true,
+        PublicAndPrivateRadioGroup: true,
+        // Stub CsgButton to be a simple button that emits a click event
+        CsgButton: {
+          template: '<button @click="$emit(\'click\')"><slot/></button>',
+          props: ['loading']
+        }
       }
     },
     props: {
@@ -22,67 +74,94 @@ const createWrapper = (props) => {
   });
 };
 
-
+// Helper to trigger form submission and wait for reactivity
 async function triggerFormButton(wrapper) {
-  const button = wrapper.findComponent({ name: 'CsgButton' })
+  const button = wrapper.find('button');
   await button.trigger('click');
-  await delay(300);
-  await wrapper.vm.$nextTick()
+  // Wait for the next DOM update cycle
+  await wrapper.vm.$nextTick();
 }
 
-// Mock stores
-vi.mock('../../../stores/UserStore', () => ({
-  default: () => ({
-    username: 'testuser',
-    orgs: [{ path: 'testorg' }]
-  })
-}));
-
-const buttonClass = '.btn.btn-primary'
-
 describe("NewModel", () => {
-  describe("mount", async () => {
-    it("mounts correctly", () => {
+  beforeEach(() => {
+    // Reset mocks and window.location before each test
+    vi.clearAllMocks();
+    delete window.location;
+    window.location = { href: '' };
+  });
+
+  describe("mount", () => {
+    it("mounts correctly", async () => {
       const wrapper = createWrapper();
+      // Wait for async operations in onMounted to complete
+      await new Promise(resolve => setTimeout(resolve, 0));
       expect(wrapper.exists()).toBe(true);
     });
   });
 
   describe("form validation", () => {
     it("validates required fields", async () => {
       const wrapper = createWrapper();
+      await new Promise(resolve => setTimeout(resolve, 0)); // Wait for mount
+      // Clear pre-filled fields to test required rule
+      wrapper.vm.dataForm.owner = '';
+      wrapper.vm.dataForm.name = '';
+      wrapper.vm.dataForm.license = '';
       await triggerFormButton(wrapper);
-      const formErrors = wrapper.findAll('.el-form-item__error');
-      expect(formErrors.length).toBeGreaterThan(0);
+      
+      await waitForExpect(() => {
+        const formErrors = wrapper.findAll('.el-form-item__error');
+        expect(formErrors.length).toBe(3); // owner, name, license
+      });
     });
 
     it("validates invalid model name", async () => {
       const wrapper = createWrapper();
+      await new Promise(resolve => setTimeout(resolve, 0));
       wrapper.vm.dataForm.name = 'a'; // Invalid length
+      wrapper.vm.dataForm.license = 'MIT'; // Provide valid license
       await triggerFormButton(wrapper);
-      expect(wrapper.find('.el-form-item__error').exists()).toBe(true);
+      
+      await waitForExpect(() => {
+        const error = wrapper.find('.el-form-item__error');
+        expect(error.exists()).toBe(true);
+        expect(error.text()).toContain('rule.lengthLimit');
+      });
     });
 
-    it("validates valid model name", async () => {
+    it("validates valid form", async () => {
       const wrapper = createWrapper();
-      wrapper.vm.dataForm.name = 'valid_model'; // Invalid length
-      wrapper.vm.dataForm.license = 'apache-2.0'; // Invalid length
+      await new Promise(resolve => setTimeout(resolve, 0));
+      wrapper.vm.dataForm.owner = 'testuser';
+      wrapper.vm.dataForm.name = 'valid_model';
+      wrapper.vm.dataForm.license = 'MIT';
       await triggerFormButton(wrapper);
-      expect(wrapper.find('.el-form-item__error').exists()).toBe(false);
+      
+      await waitForExpect(() => {
+        expect(wrapper.find('.el-form-item__error').exists()).toBe(false);
+      });
     });
 
     it("validates owner selection", async () => {
       const wrapper = createWrapper();
-      wrapper.vm.dataForm.owner = ''; // Invalid owner
+      await new Promise(resolve => setTimeout(resolve, 0));
+      wrapper.vm.dataForm.owner = ''; // Set invalid owner
       await triggerFormButton(wrapper);
-      expect(wrapper.find('.el-form-item__error').exists()).toBe(true);
+      
+      await waitForExpect(() => {
+        const formErrors = wrapper.findAll('.el-form-item__error');
+        const ownerError = formErrors.filter(e => e.text().includes('all.pleaseSelect'));
+        expect(ownerError.length).toBeGreaterThan(0);
+      });
     });
   });
 
   describe("form submission", () => {
-    it("shows success message on successful submission", async () => {
+    it("redirects on successful submission", async () => {
       const wrapper = createWrapper();
+      await new Promise(resolve => setTimeout(resolve, 0));
 
+      // Fill the form with valid data
       wrapper.vm.dataForm = {
         owner: 'testuser',
         name: 'valid-model',
@@ -92,23 +171,11 @@ describe("NewModel", () => {
         visibility: 'public'
       };
 
-      // Mock the API response
-      vi.mock('../../../packs/useFetchApi', () => ({
-        default: () => ({
-          post: () => ({
-            json: () => Promise.resolve({
-              data: { value: { data: { path: 'testuser/testmodel' } } },
-              error: { value: null }
-            })
-          })
-        })
-      }));
-
       await triggerFormButton(wrapper);
-
-      // validate href is correct
-      expect(window.location.href).toBe('/models/testuser/testmodel');
+      
+      await waitForExpect(() => {
+        expect(window.location.href).toBe('/models/testuser/testmodel');
+      });
     });
-
   });
 });
diff --git a/frontend/src/components/__tests__/organizations/NewOrganization.spec.js b/frontend/src/components/__tests__/organizations/NewOrganization.spec.js
@@ -18,7 +18,7 @@ const createWrapper = (props) => {
 
 const triggerFormButton = async (wrapper) => {
   const button = wrapper.findComponent({ name: 'CsgButton' })
-  await button.trigger('click')
+  await button.vm.$emit('click')
 
   // deprecate this, as we can use waitFor to wait for the async operation to complete
   // return new Promise((resolve) => { setTimeout(resolve, 2000) })
diff --git a/frontend/src/components/shared/CsgButton.vue b/frontend/src/components/shared/CsgButton.vue
@@ -8,6 +8,7 @@
         :class="btnClass"
         :type="btnType"
         :disabled="disabled || loading || hasDisabledClass"
+        @click="$emit('click', $event)"
       >
         <i v-if="loading" class="el-icon is-loading"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="currentColor" d="M512 64a32 32 0 0 1 32 32v192a32 32 0 0 1-64 0V96a32 32 0 0 1 32-32m0 640a32 32 0 0 1 32 32v192a32 32 0 1 1-64 0V736a32 32 0 0 1 32-32m448-192a32 32 0 0 1-32 32H736a32 32 0 1 1 0-64h192a32 32 0 0 1 32 32m-640 0a32 32 0 0 1-32 32H96a32 32 0 0 1 0-64h192a32 32 0 0 1 32 32M195.2 195.2a32 32 0 0 1 45.248 0L376.32 331.008a32 32 0 0 1-45.248 45.248L195.2 240.448a32 32 0 0 1 0-45.248zm452.544 452.544a32 32 0 0 1 45.248 0L828.8 783.552a32 32 0 0 1-45.248 45.248L647.744 692.992a32 32 0 0 1 0-45.248zM828.8 195.264a32 32 0 0 1 0 45.184L692.992 376.32a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0m-452.544 452.48a32 32 0 0 1 0 45.248L240.448 828.8a32 32 0 0 1-45.248-45.248l135.808-135.808a32 32 0 0 1 45.248 0z"></path></svg></i>
         <SvgIcon
@@ -28,6 +29,9 @@
 <script setup>
   import { computed } from 'vue'
   import { ElTooltip } from 'element-plus';
+
+  defineEmits(['click']);
+
   const props = defineProps({
     name: String,
     btnType: {

Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ const createWrapper = (props) => {`
`19`	`19`
`20`	`20`	`const triggerFormButton = async (wrapper) => {`
`21`	`21`	`const button = wrapper.findComponent({ name: 'CsgButton' })`
`22`		`- await button.trigger('click')`
	`22`	`+ await button.vm.$emit('click')`
`23`	`23`	`await wrapper.vm.$nextTick()`
`24`	`24`	`}`
`25`	`25`