feat(components): refactor lifecycle hooks (#995)

* feat(components): refactor lifecycle hooks

- Replace watch with onMounted in AddToCollections
- Remove unnecessary watch in OrganizationDetail
- Simplify OrganizationSettings onMounted logic
- Update EvaluationTable to use onMounted
- Change ResourceConsoleIndex to use onMounted
- Refactor Profile to remove watch for username

* update fetchUserInfo in profile

* feat(tests): improve Profile component tests

- Refactor user store data creation
- Mock UserStore in beforeEach
- Update test cases for current user checks
- Enhance API call assertions in tests

Author: zhendi

frontend/src/components/__tests__/user_settings/Profile.spec.js

@@ -1,93 +1,68 @@
-import {
-  describe,
-  it,
-  expect,
-  beforeEach,
-  vi,
-  afterEach,
-} from 'vitest'
+import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest'
 import { mount } from '@vue/test-utils'
 import Profile from '../../user_settings/Profile.vue'
 import { reactive } from 'vue'
 
-// Mock vue3-cookies
-// let mockCookieGetFn = vi.fn()
-let { mockCookieGetFn } = vi.hoisted(() => {
-  return { mockCookieGetFn: vi.fn() }
-})
-mockCookieGetFn.mockImplementation(() => ({
-  cookies: {
-    get: (key) => '123'
-  }
-}))
-vi.mock('vue3-cookies', () => ({
-  useCookies: mockCookieGetFn
-}))
-
-// mock, actually redefine window.location
 const mockLocation = {
-  href: 'http://localhost:3000/profile/test_user',
+  href: 'http://localhost:3000/profile/current_user',
   search: ''
 }
 Object.defineProperty(window, 'location', {
   value: mockLocation,
   writable: true
 })
 
-let userStoreData = reactive({
-  uuid: 'current_user',
-  username: 'current_user',
-  nickname: 'current_user',
-  email: '[email protected]',
-  avatar: 'current_user.com',
-  roles: ['admin'],
-  initialized: true,
-  orgs: [
-    {
-      path: 'org_one',
-      logo: 'org_one.png'
+const createUserStore = (overrides = {}) =>
+  reactive({
+    uuid: 'current_user',
+    username: 'current_user',
+    nickname: 'current_user',
+    email: '[email protected]',
+    avatar: 'current_user.com',
+    roles: ['admin'],
+    initialized: true,
+    orgs: [
+      {
+        path: 'org_one',
+        logo: 'org_one.png'
+      }
+    ],
+    lastLoginTime: '2023-09-11',
+    phone: '123456',
+    ...overrides
+  })
+
+const getApiMockFn = vi.fn().mockResolvedValue({
+  data: {
+    value: {
+      data: {
+        id: 16,
+        username: 'testuser',
+        nickname: 'TestUser',
+        phone: '123456',
+        email: '[email protected]',
+        uuid: 'ddfbb27b',
+        avatar: 'https://example.com/avatar.jpg',
+        bio: 'my bio',
+        homepage: 'mm.com',
+        roles: ['admin', 'super_user'],
+        orgs: [
+          {
+            path: 'power',
+            name: '联合力量',
+            homepage: 'https://baidu.com',
+            logo: 'https://example.com/logo.jpg',
+            org_type: '社区组织',
+            verified: false,
+            user_id: 16
+          }
+        ]
+      }
     }
-  ],
-  lastLoginTime: '2023-09-11',
-  phone: '123456'
+  },
+  error: { value: null }
 })
-vi.mock('../../../stores/UserStore', () => ({
-  default: () => userStoreData
-}))
 
-let getApiMockFn = vi.fn().mockImplementation(() =>
-  Promise.resolve({
-    data: {
-      value: {
-        data: {
-          id: 16,
-          username: 'testuser',
-          nickname: 'TestUser',
-          phone: '123456',
-          email: '[email protected]',
-          uuid: 'ddfbb27b',
-          avatar:
-            'https://opencsg-public-resource.oss-cn-beijing.aliyuncs.com/comment/21b4d6ca-213e-48fc-9aba-aeed122633ef',
-          bio: 'mya ',
-          homepage: 'mm.com',
-          roles: ['admin', 'super_user'],
-          orgs: [
-            {
-              path: 'power',
-              name: '联合力量',
-              homepage: 'https://baidu.com',
-              logo: 'https://opencsg-test.oss-cn-beijing.aliyuncs.com/org_logo/8d8aa331-54b7-453e-9d0b-d253a706ae27',
-              org_type: '社区组织',
-              verified: false,
-              user_id: 16
-            }
-          ]
-        }
-      }
-    },
-    error: { value: null }
-  })
-)
 vi.mock('../../../packs/useFetchApi', () => ({
   default: () => ({
     json: getApiMockFn
@@ -96,73 +71,93 @@ vi.mock('../../../packs/useFetchApi', () => ({
 
 describe('Profile', () => {
   let wrapper
+  let originalLocalStorage
 
   beforeEach(() => {
+    originalLocalStorage = { ...localStorage }
+    localStorage.clear()
     vi.clearAllMocks()
-    wrapper = mount(Profile, {
-      props: {
-        name: 'test_name'
-      }
-    })
+
+    vi.mock('../../../stores/UserStore', () => ({
+      default: () => createUserStore()
+    }))
   })
 
   afterEach(() => {
+    localStorage.clear()
+    Object.entries(originalLocalStorage).forEach(([key, value]) => {
+      localStorage.setItem(key, value)
+    })
+
     if (wrapper) {
       wrapper.unmount()
     }
   })
 
-  describe('mount', () => {
-    it('mounts correctly', () => {
-      console.log('mount correctly')
-      expect(wrapper.exists()).toBe(true)
-      expect(getApiMockFn).toHaveBeenCalledTimes(0)
-    })
-  })
-
   describe('logged in', () => {
     describe('is current user', () => {
-      it('will not fetch user info from api', async () => {
-        userStoreData.username = 'test_user'
+      it('should not call profile API', async () => {
+        window.location.href = 'http://localhost:3000/profile/current_user'
+
+        vi.doMock('../../../stores/UserStore', () => ({
+          default: () =>
+            createUserStore({
+              username: 'current_user',
+              uuid: 'current_user'
+            })
+        }))
+
+        wrapper = mount(Profile, { props: { name: 'current_user' } })
         await wrapper.vm.$nextTick()
-        expect(getApiMockFn).toHaveBeenCalledTimes(0)
+
+        expect(getApiMockFn).not.toHaveBeenCalled()
       })
     })
 
     describe('is not current user', () => {
-      it('fetch user info from api', async () => {
-        userStoreData.username = 'not_test_user'
+      it('should call profile API', async () => {
+        window.location.href = 'http://localhost:3000/profile/other_user'
+
+        vi.doMock('../../../stores/UserStore', () => ({
+          default: () =>
+            createUserStore({
+              username: 'current_user',
+              uuid: 'current_user'
+            })
+        }))
+
+        wrapper = mount(Profile, { props: { name: 'other_user' } })
         await wrapper.vm.$nextTick()
+
         expect(getApiMockFn).toHaveBeenCalledTimes(1)
       })
     })
-
   })
 
-  describe('without logged in', () => {
+  describe('not logged in', () => {
     beforeEach(() => {
-      mockCookieGetFn.mockImplementation(() => ({
-        cookies: {
-          get: (key) => null
-        }
+      vi.doMock('../../../stores/UserStore', () => ({
+        default: () =>
+          createUserStore({
+            uuid: '',
+            username: '',
+            initialized: true
+          })
       }))
-      userStoreData = {}
-      wrapper = mount(Profile, {
-        props: {
-          name: 'test_name'
-        }
-      })
     })
 
-    it('fetchs user info from api', async () => {
+    it('should call profile API', async () => {
+      wrapper = mount(Profile, { props: { name: 'testuser' } })
       await wrapper.vm.$nextTick()
+
       expect(getApiMockFn).toHaveBeenCalledTimes(1)
     })
 
-    it('renders user info from api', async () => {
+    it('should not be current user', async () => {
+      wrapper = mount(Profile, { props: { name: 'testuser' } })
       await wrapper.vm.$nextTick()
+
       expect(wrapper.vm.isCurrentUser).toBe(false)
-      expect(wrapper.vm.username).toBe('testuser')
     })
   })
 })

frontend/src/components/collections/AddToCollections.vue

@@ -78,7 +78,7 @@
   </div>
 </template>
 <script setup>
-  import { ref, watch } from 'vue'
+  import { ref, onMounted } from 'vue'
   import { ElMessage } from 'element-plus'
   import { useI18n } from 'vue-i18n'
   import useFetchApi from '../../packs/useFetchApi';
@@ -94,7 +94,6 @@
   const dialogVisible = ref(false)
   const collectionsList = ref([])
   const collectionsIdsInput = ref('')
-  const isLogged = ref(false)
   const fetchCollectionsList = async () => {
     const url = `/user/${userStore.username}/collections`
     const { data, error } = await useFetchApi(url).json()
@@ -107,7 +106,7 @@
   }
 
   const openAddCollections = () => {
-    if(isLogged.value) {
+    if(userStore.isLoggedIn) {
       dialogVisible.value = true
     } else {
       ToLoginPage()
@@ -146,11 +145,10 @@
     }
   }
 
-  watch(() => userStore.isLoggedIn, () => {
-    isLogged.value = userStore.isLoggedIn
-  })
-  watch(() => userStore.username, () => {
-    fetchCollectionsList()
+  onMounted(() => {
+    if (userStore.isLoggedIn) {
+      fetchCollectionsList()
+    }
   })
 </script>
 <style scoped>

frontend/src/components/organizations/OrganizationDetail.vue

@@ -164,12 +164,11 @@
     }
   }
 
-  watch(() => userStore.username, () => {
-    currentUserRole()
-  })
-
   onMounted(() => {
     fetchOrgDetail()
     fetchOrgMemberList()
+    if (userStore.isLoggedIn) {
+      currentUserRole()
+    }
   })
 </script>

frontend/src/components/organizations/OrganizationSettings.vue

@@ -32,7 +32,7 @@
   import OrganizationEdit from './OrganizationEdit.vue'
   import OrganizationMembers from './OrganizationMembers.vue'
   import useFetchApi from "../../packs/useFetchApi"
-  import { ref, onMounted, watch } from 'vue'
+  import { ref, onMounted } from 'vue'
   import { ElMessage } from 'element-plus'
   import useUserStore from '../../stores/UserStore'
 
@@ -54,13 +54,6 @@
 
   const role =ref('')
 
-  watch(
-    () => userStore.username,
-    () => {
-      currentUserRole()
-    }
-  )
-
   const fetchOrgDetail = async () => {
     const orgDetailEndpoint = `/organization/${props.name}`
     const { data, error } = await useFetchApi(orgDetailEndpoint).json()
@@ -105,8 +98,6 @@
 
   onMounted(() => {
     fetchOrgDetail()
-    if (userStore.initialized) {
-      currentUserRole()
-    }
+    currentUserRole()
   })
 </script>

frontend/src/components/resource_console/EvaluationTable.vue

@@ -188,7 +188,7 @@
 </template>
 
 <script setup>
-  import { ref, watch } from 'vue'
+  import { ref, onMounted } from 'vue'
   import { formatDate } from '../../packs/datetimeUtils'
   import useFetchApi from '../../packs/useFetchApi'
   import useUserStore from '../../stores/UserStore.js'
@@ -258,12 +258,9 @@
     }
   }
 
-  watch(
-    () => userStore.username,
-    () => {
-      fetchEvaluations()
-    }
-  )
+  onMounted(() => {
+    fetchEvaluations()
+  })
 </script>
 
 <style lang="less">