add space tests, fix code settings test

frontend/src/components/__tests__/application_spaces/ApplicationSpaceSettings.spec.js

@@ -0,0 +1,92 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import ApplicationSpaceSettings from '@/components/application_spaces/ApplicationSpaceSettings.vue'
+import { createPinia, setActivePinia } from 'pinia'
+import { ElMessage } from 'element-plus'
+
+vi.mock('element-plus', () => ({
+  ElMessage: vi.fn()
+}))
+
+vi.mock('../../../packs/useFetchApi', () => ({
+  default: () => ({
+    post: () => ({
+      json: () =>
+        Promise.resolve({
+          response: { ok: true },
+          data: { value: { msg: 'Success' } },
+          error: { value: null }
+        })
+    }),
+    put: () => ({
+      json: () =>
+        Promise.resolve({
+          data: { value: { msg: 'Success' } },
+          error: { value: null }
+        })
+    }),
+    delete: () => ({
+      json: () =>
+        Promise.resolve({
+          data: { value: { msg: 'Success' } },
+          error: { value: null }
+        })
+    }),
+    json: () => {
+      return Promise.resolve({
+        data: { value: { id: 1, name: 'testcloud', is_available: true } },
+        error: { value: null }
+      })
+    }
+  })
+}))
+
+const createWrapper = (props = {}) => {
+  return mount(ApplicationSpaceSettings, {
+    props: {
+      path: 'test/application_space',
+      applicationSpaceNickname: 'Test Application Space',
+      applicationSpaceDesc: 'Test Description',
+      default_branch: 'main',
+      appStatus: 'Running',
+      ...props
+    },
+    global: {
+      plugins: [createPinia()],
+      mocks: {
+        $t: (key) => key
+      }
+    }
+  })
+}
+
+describe('ApplicationSpaceSettings', () => {
+  let wrapper
+
+  beforeEach(() => {
+    setActivePinia(createPinia())
+    wrapper = createWrapper()
+  })
+
+  it('mounts correctly', () => {
+    expect(wrapper.vm).toBeDefined()
+  })
+
+  it('displays space path correctly', () => {
+    expect(wrapper.find('.bg-gray-50').text()).toBe('test/application_space')
+  })
+
+  it('updates application space nickname when button is clicked', async () => {
+    const wrapper = createWrapper()
+    await wrapper.setData({ applicationSpaceNickname: 'New Name' })
+    await wrapper.find('button[data-test="update-nickname"]').trigger('click')
+    expect(ElMessage).toHaveBeenCalled()
+  })
+
+  it('update application space description when button is clicked', async () => {
+    const wrapper = createWrapper()
+    await wrapper.setData({ applicationSpaceDesc: 'New Description' })
+    await wrapper.find('button[data-test="update-description"]').trigger('click')
+    expect(ElMessage).toHaveBeenCalled()
+  })
+})

frontend/src/components/__tests__/application_spaces/NewApplicationSpace.spec.js

@@ -0,0 +1,111 @@
+import { describe, it, expect, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import NewApplicationSpace from '@/components/application_spaces/NewApplicationSpace.vue'
+
+const delay = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
+
+const createWrapper = (props) => {
+  return mount(NewApplicationSpace, {
+    global: {
+      provide: {
+        nameRule: /^[a-zA-Z][a-zA-Z0-9-_.]*[a-zA-Z0-9]$/
+      }
+    },
+    props: {
+      licenses: [['MIT', 'Apache-2.0']],
+      ...props
+    }
+  })
+}
+
+const triggerFormButton = async (wrapper) => {
+  const button = wrapper.findComponent({ name: 'CsgButton' })
+  await button.trigger('click')
+  await delay(300)
+  await wrapper.vm.$nextTick()
+}
+
+vi.mock('../../../stores/UserStore', () => ({
+  default: () => ({
+    username: 'testuser',
+    orgs: [{ path: 'testorg' }]
+  })
+}))
+
+const createResponse = (data, errorMsg = null) => ({
+  data: { value: { data } },
+  error: { value: errorMsg ? { msg: errorMsg } : null }
+})
+
+const mockApiResponses = {
+  '/cluster': createResponse([{ cluster_id: '1', region: 'region1' }]),
+  [`/space_resources?cluster_id=1`]: createResponse([
+    { id: 1, name: 'testcloud', is_available: true }
+  ])
+}
+
+vi.mock('../../../packs/useFetchApi', () => ({
+  default: (url) => ({
+    json: () => Promise.resolve(mockApiResponses[url] || createResponse([])),
+    post: () => ({
+      json: () =>
+        Promise.resolve(createResponse({ path: 'testuser/testspace' }))
+    })
+  })
+}))
+
+describe('NewApplicationSpace', () => {
+  describe('mount', async () => {
+    it('mounts correctly', () => {
+      const wrapper = createWrapper()
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+
+  describe('form validation', async () => {
+    it('validates required fields', async () => {
+      const wrapper = createWrapper()
+      await triggerFormButton(wrapper)
+      const formErrors = wrapper.findAll('.el-form-item__error')
+      expect(formErrors.length).toBeGreaterThan(0)
+    })
+
+    it('validates space name length', async () => {
+      const wrapper = createWrapper()
+      wrapper.vm.dataForm.name = 'a' // Invalid length
+      await triggerFormButton(wrapper)
+      expect(wrapper.find('.el-form-item__error').exists()).toBe(true)
+
+      wrapper.vm.dataForm.name = 'valid-space' // Valid length
+      await triggerFormButton(wrapper)
+      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 triggerFormButton(wrapper)
+      expect(wrapper.find('.el-form-item__error').exists()).toBe(true)
+    })
+  })
+
+  describe('form submission', async () => {
+    it('submits form with valid data', async () => {
+      const wrapper = createWrapper()
+
+      wrapper.vm.dataForm = {
+        name: 'testspace',
+        nickname: 'Test Space',
+        license: 'MIT',
+        desc: 'Test description',
+        space_cluster: '1',
+        cloud_resource: '1',
+        namespace: 'testuser'
+      }
+
+      await triggerFormButton(wrapper)
+      await new Promise((resolve) => setTimeout(resolve, 300))
+      expect(window.location.href).toBe('/spaces/testuser/testspace')
+    })
+  })
+})

frontend/src/components/__tests__/application_spaces/SpaceRelationsCard.spec.js

@@ -0,0 +1,42 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import SpaceRelationsCard from '@/components/application_spaces/SpaceRelationsCard.vue'
+
+const createWrapper = (props) => {
+  return mount(SpaceRelationsCard, {
+    props: {
+      namespacePath: 'test/namespace',
+      spaces: [],
+      ...props
+    }
+  })
+}
+
+describe('SpaceRelationsCard', () => {
+  it('mounts correctly', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.vm).toBeDefined()
+  })
+
+  it('renders correctly with props', () => {
+    const spaces = [
+      {
+        id: 1,
+        name: 'Space 1',
+        path: 'user/space-1',
+        updated_at: '2024-03-20 10:00:00'
+      },
+      {
+        id: 2,
+        name: 'Space 2',
+        path: 'user/space-2',
+        updated_at: '2024-03-20 10:00:00'
+      }
+    ]
+    const wrapper = createWrapper({ spaces })
+    const items = wrapper.findAll('[data-test="space-item"]')
+    expect(items.length).toBe(spaces.length)
+    expect(items[0].text()).toContain('user/space-1')
+    expect(items[1].text()).toContain('user/space-2')
+  })
+})

frontend/src/components/__tests__/codes/CodeRelationsCard.spec.js

@@ -19,7 +19,7 @@ describe("CodeRelationsCard", () => {
     expect(wrapper.vm).toBeDefined();
   });
 
-  it.skip("renders correctly with props", () => {
+  it("renders correctly with props", () => {
     const codes = [{
       id: 1,
       name: 'Code 1',

frontend/src/components/__tests__/codes/CodeSettings.spec.js

@@ -0,0 +1,70 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import CodeSettings from '@/components/codes/CodeSettings.vue'
+import { createPinia, setActivePinia } from 'pinia'
+import { ElMessage } from 'element-plus'
+
+vi.mock('element-plus', () => ({
+  ElMessage: vi.fn()
+}))
+
+// Mock the API response
+vi.mock('../../../packs/useFetchApi', () => ({
+  default: (url) => ({
+    put: () => ({
+      json: () =>
+        Promise.resolve({
+          data: { value: { data: { path: 'testuser/testcode' } } },
+          error: { value: null }
+        })
+    }),
+    json: () => {
+      return Promise.resolve({
+        data: { value: null },
+        error: { value: null }
+      })
+    }
+  })
+}))
+
+const createWrapper = (props = {}) => {
+  return mount(CodeSettings, {
+    props: {
+      path: 'test/code',
+      codeNickname: 'Test Code',
+      codeDesc: 'Test Description',
+      default_branch: 'main',
+      ...props
+    }
+  })
+}
+
+describe('CodeSettings', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('mounts correctly', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.vm).toBeDefined()
+  })
+
+  it('displays code path correctly', () => {
+    const wrapper = createWrapper()
+    expect(wrapper.find('.bg-gray-50').text()).toBe('test/code')
+  })
+
+  it('updates code nickname when button is clicked', async () => {
+    const wrapper = createWrapper()
+    await wrapper.setData({ codeNickname: 'New Name' })
+    await wrapper.find('button[data-test="update-nickname"]').trigger('click')
+    expect(ElMessage).toHaveBeenCalled()
+  })
+
+  it('shows warning when trying to update empty nickname', async () => {
+    const wrapper = createWrapper()
+    await wrapper.setData({ codeNickname: '' })
+    await wrapper.find('button[data-test="update-nickname"]').trigger('click')
+    expect(ElMessage).toHaveBeenCalled()
+  })
+})