tests for projects creation + delete hook

Author: Hubert-Szczepanski-SAP

src/components/Dialogs/CreateProjectDialogContainer.cy.tsx

@@ -0,0 +1,156 @@
+import { CreateProjectDialogContainer } from './CreateProjectDialogContainer';
+import { useCreateProject, CreateProjectParams } from '../../hooks/useCreateProject';
+import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding';
+
+describe('CreateProjectDialogContainer', () => {
+  let createProjectPayload: CreateProjectParams | null = null;
+
+  const fakeUseCreateProject: typeof useCreateProject = () => ({
+    createProject: async (data: CreateProjectParams): Promise<void> => {
+      createProjectPayload = data;
+    },
+    isLoading: false,
+  });
+
+  const fakeUseAuthOnboarding = (() => ({
+    user: {
+      email: '[email protected]',
+    },
+  })) as typeof useAuthOnboarding;
+
+  beforeEach(() => {
+    createProjectPayload = null;
+  });
+
+  it('creates a project with valid data', () => {
+    const setIsOpen = cy.stub();
+
+    cy.mount(
+      <CreateProjectDialogContainer
+        useCreateProject={fakeUseCreateProject}
+        useAuthOnboarding={fakeUseAuthOnboarding}
+        isOpen={true}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    const expectedPayload = {
+      name: 'test-project',
+      displayName: 'Test Project Display Name',
+      chargingTarget: '12345678-1234-1234-1234-123456789abc',
+      chargingTargetType: 'btp',
+      members: [
+        {
+          name: '[email protected]',
+          roles: ['admin'],
+          kind: 'User',
+        },
+      ],
+    };
+
+    // Fill in the form
+    cy.get('#name').find('input[id*="inner"]').type('test-project');
+    cy.get('#displayName').find('input[id*="inner"]').type('Test Project Display Name');
+
+    // Select charging target type (should be pre-selected as 'btp')
+    cy.get('#chargingTargetType').click();
+    cy.contains('BTP').click();
+
+    // Fill charging target
+    cy.get('#chargingTarget').find('input[id*="inner"]').type('12345678-1234-1234-1234-123456789abc');
+
+    // Submit the form
+    cy.get('ui5-button').contains('Create').click();
+
+    // Verify the hook was called with correct data
+    cy.then(() => cy.wrap(createProjectPayload).deepEqualJson(expectedPayload));
+
+    // Dialog should close on success
+    cy.wrap(setIsOpen).should('have.been.calledWith', false);
+  });
+
+  it('validates required fields', () => {
+    const setIsOpen = cy.stub();
+
+    cy.mount(
+      <CreateProjectDialogContainer
+        useCreateProject={fakeUseCreateProject}
+        useAuthOnboarding={fakeUseAuthOnboarding}
+        isOpen={true}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    // Try to submit without filling required fields
+    cy.get('ui5-button').contains('Create').click();
+
+    // Should show validation errors
+    cy.get('#name').should('have.attr', 'value-state', 'Negative');
+    cy.contains('This field is required').should('exist');
+
+    // Dialog should not close
+    cy.wrap(setIsOpen).should('not.have.been.called');
+  });
+
+  it('validates charging target format for BTP', () => {
+    const setIsOpen = cy.stub();
+
+    cy.mount(
+      <CreateProjectDialogContainer
+        useCreateProject={fakeUseCreateProject}
+        useAuthOnboarding={fakeUseAuthOnboarding}
+        isOpen={true}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    cy.get('#name').find('input[id*="inner"]').type('test-project');
+    cy.get('#chargingTargetType').click();
+    cy.contains('BTP').click();
+
+    // Invalid format
+    cy.get('#chargingTarget').find('input[id*="inner"]').type('invalid-format');
+    cy.get('ui5-button').contains('Create').click();
+
+    // Should show validation error
+    cy.get('#chargingTarget').should('have.attr', 'value-state', 'Negative');
+
+    // Dialog should not close
+    cy.wrap(setIsOpen).should('not.have.been.called');
+  });
+
+  it('should not close dialog when creation fails', () => {
+    const failingUseCreateProject: typeof useCreateProject = () => ({
+      createProject: async (): Promise<void> => {
+        throw new Error('Creation failed');
+      },
+      isLoading: false,
+    });
+
+    const setIsOpen = cy.stub();
+
+    cy.mount(
+      <CreateProjectDialogContainer
+        useCreateProject={failingUseCreateProject}
+        useAuthOnboarding={fakeUseAuthOnboarding}
+        isOpen={true}
+        setIsOpen={setIsOpen}
+      />,
+    );
+
+    // Fill in the form
+    cy.get('#name').find('input[id*="inner"]').type('test-project');
+    cy.get('#chargingTargetType').click();
+    cy.contains('BTP').click();
+    cy.get('#chargingTarget').find('input[id*="inner"]').type('12345678-1234-1234-1234-123456789abc');
+
+    // Submit the form
+    cy.get('ui5-button').contains('Create').click();
+
+    // Dialog should NOT close on failure
+    cy.wrap(setIsOpen).should('not.have.been.called');
+
+    // Dialog should still be visible
+    cy.contains('Create').should('be.visible');
+  });
+});

src/components/Dialogs/CreateProjectDialogContainer.tsx

@@ -1,26 +1,26 @@
 import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useApiResourceMutation } from '../../lib/api/useApiResource';
 import { ErrorDialogHandle } from '../Shared/ErrorMessageBox.tsx';
 import { APIError } from '../../lib/api/error';
 import { CreateProjectWorkspaceDialog, OnCreatePayload } from './CreateProjectWorkspaceDialog.tsx';
-
-import { useToast } from '../../context/ToastContext.tsx';
-import { useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx';
+import { useAuthOnboarding as _useAuthOnboarding } from '../../spaces/onboarding/auth/AuthContextOnboarding.tsx';
 import { MemberRoles } from '../../lib/api/types/shared/members.ts';
-
 import { useTranslation } from 'react-i18next';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
-import { CreateProject, CreateProjectResource, CreateProjectType } from '../../lib/api/types/crate/createProject.ts';
 import { createProjectWorkspaceSchema } from '../../lib/api/validations/schemas.ts';
 import { CreateDialogProps } from './CreateWorkspaceDialogContainer.tsx';
+import { useCreateProject as _useCreateProject } from '../../hooks/useCreateProject.ts';
 
 export function CreateProjectDialogContainer({
   isOpen,
   setIsOpen,
+  useCreateProject = _useCreateProject,
+  useAuthOnboarding = _useAuthOnboarding,
 }: {
   isOpen: boolean;
   setIsOpen: (isOpen: boolean) => void;
+  useCreateProject?: typeof _useCreateProject;
+  useAuthOnboarding?: typeof _useAuthOnboarding;
 }) {
   const { t } = useTranslation();
   const validationSchemaProjectWorkspace = useMemo(() => createProjectWorkspaceSchema(t), [t]);
@@ -44,6 +44,9 @@ export function CreateProjectDialogContainer({
   const { user } = useAuthOnboarding();
 
   const username = user?.email;
+  const { createProject } = useCreateProject();
+  const errorDialogRef = useRef<ErrorDialogHandle>(null);
+
   const clearForm = useCallback(() => {
     resetField('name');
     resetField('chargingTarget');
@@ -60,12 +63,6 @@ export function CreateProjectDialogContainer({
     }
   }, [resetField, setValue, username, isOpen, clearForm]);
 
-  const toast = useToast();
-
-  const { trigger } = useApiResourceMutation<CreateProjectType>(CreateProjectResource());
-
-  const errorDialogRef = useRef<ErrorDialogHandle>(null);
-
   const handleProjectCreate = async ({
     name,
     chargingTarget,
@@ -74,16 +71,14 @@ export function CreateProjectDialogContainer({
     members,
   }: OnCreatePayload): Promise<boolean> => {
     try {
-      await trigger(
-        CreateProject(name, {
-          displayName: displayName,
-          chargingTarget: chargingTarget,
-          members: members,
-          chargingTargetType: chargingTargetType,
-        }),
-      );
+      await createProject({
+        name,
+        displayName,
+        chargingTarget,
+        chargingTargetType,
+        members,
+      });
       setIsOpen(false);
-      toast.show(t('CreateProjectDialog.toastMessage'));
       return true;
     } catch (e) {
       console.error(e);

src/components/Projects/ProjectsListItemMenu.tsx

@@ -7,23 +7,25 @@ import '@ui5/webcomponents-icons/dist/accept';
 import { useTranslation } from 'react-i18next';
 import { DeleteConfirmationDialog } from '../Dialogs/DeleteConfirmationDialog.tsx';
 
-import { useToast } from '../../context/ToastContext.tsx';
-import { useApiResourceMutation } from '../../lib/api/useApiResource.ts';
-import { DeleteWorkspaceType } from '../../lib/api/types/crate/deleteWorkspace.ts';
-import { DeleteProjectResource } from '../../lib/api/types/crate/deleteProject.ts';
+import { useDeleteProject as _useDeleteProject } from '../../hooks/useDeleteProject.ts';
 import { KubectlDeleteProject } from '../Dialogs/KubectlCommandInfo/Controllers/KubectlDeleteProject.tsx';
 
 type ProjectsListItemMenuProps = {
   projectName: string;
+  useDeleteProject?: typeof _useDeleteProject;
 };
 
-export const ProjectsListItemMenu: FC<ProjectsListItemMenuProps> = ({ projectName }) => {
+export const ProjectsListItemMenu: FC<ProjectsListItemMenuProps> = ({
+  projectName,
+  useDeleteProject = _useDeleteProject,
+}) => {
   const popoverRef = useRef<MenuDomRef>(null);
   const [open, setOpen] = useState(false);
   const [dialogDeleteProjectIsOpen, setDialogDeleteProjectIsOpen] = useState(false);
   const { t } = useTranslation();
-  const toast = useToast();
-  const { trigger } = useApiResourceMutation<DeleteWorkspaceType>(DeleteProjectResource(projectName));
+
+  const { deleteProject } = useDeleteProject(projectName);
+
   const handleOpenerClick = (e: Ui5CustomEvent<ButtonDomRef, ButtonClickEventDetail>) => {
     e.stopImmediatePropagation();
     e.stopPropagation();
@@ -59,10 +61,7 @@ export const ProjectsListItemMenu: FC<ProjectsListItemMenuProps> = ({ projectNam
           kubectl={<KubectlDeleteProject projectName={projectName} />}
           isOpen={dialogDeleteProjectIsOpen}
           setIsOpen={setDialogDeleteProjectIsOpen}
-          onDeletionConfirmed={async () => {
-            await trigger();
-            toast.show(t('ProjectsListView.deleteConfirmationDialog'));
-          }}
+          onDeletionConfirmed={deleteProject}
         />
       )}
     </div>

src/hooks/useCreateProject.spec.ts

@@ -0,0 +1,111 @@
+import { act, renderHook } from '@testing-library/react';
+import { useCreateProject } from './useCreateProject';
+import { describe, it, expect, vi, afterEach, Mock, beforeEach } from 'vitest';
+import { assertNonNullish, assertString } from '../utils/test/vitest-utils';
+import { MemberRoles } from '../lib/api/types/shared/members';
+
+// Mock toast and translation
+vi.mock('../context/ToastContext', () => ({
+  useToast: () => ({
+    show: vi.fn(),
+  }),
+}));
+
+vi.mock('react-i18next', () => ({
+  useTranslation: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+describe('useCreateProject', () => {
+  let fetchMock: Mock<typeof fetch>;
+
+  beforeEach(() => {
+    fetchMock = vi.fn();
+    global.fetch = fetchMock;
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  it('should perform a valid create project request', async () => {
+    // ARRANGE
+    const mockProjectData = {
+      name: 'test-project',
+      displayName: 'Test Project',
+      chargingTarget: '12345678-1234-1234-1234-123456789abc',
+      chargingTargetType: 'btp',
+      members: [
+        {
+          name: '[email protected]',
+          roles: [MemberRoles.admin],
+          kind: 'User' as const,
+        },
+      ],
+    };
+
+    fetchMock.mockResolvedValue({
+      ok: true,
+      status: 200,
+      json: vi.fn().mockResolvedValue({}),
+    } as unknown as Response);
+
+    // ACT
+    const renderHookResult = renderHook(() => useCreateProject());
+    const { createProject } = renderHookResult.result.current;
+
+    await act(async () => {
+      await createProject(mockProjectData);
+    });
+
+    // ASSERT
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+
+    const call = fetchMock.mock.calls[0];
+    const [url, init] = call;
+    assertNonNullish(init);
+    const { method, headers, body } = init;
+
+    expect(url).toContain('/api/onboarding/apis/core.openmcp.cloud/v1alpha1/projects');
+    expect(method).toBe('POST');
+    expect(headers).toEqual(
+      expect.objectContaining({
+        'Content-Type': 'application/json',
+        'X-use-crate': 'true',
+      }),
+    );
+
+    assertString(body);
+    const parsedBody = JSON.parse(body);
+    expect(parsedBody.metadata.name).toBe('test-project');
+    expect(parsedBody.metadata.annotations?.['openmcp.cloud/display-name']).toBe('Test Project');
+    expect(parsedBody.metadata.labels?.['openmcp.cloud.sap/charging-target']).toBe(
+      '12345678-1234-1234-1234-123456789abc',
+    );
+    expect(parsedBody.spec.members).toHaveLength(1);
+    expect(parsedBody.spec.members[0].name).toBe('[email protected]');
+  });
+
+  it('should throw error on API failure', async () => {
+    // ARRANGE
+    fetchMock.mockRejectedValue(new Error('API Error'));
+
+    const mockProjectData = {
+      name: 'test-project',
+      displayName: 'Test Project',
+      chargingTarget: '12345678-1234-1234-1234-123456789abc',
+      chargingTargetType: 'btp',
+      members: [],
+    };
+
+    // ACT
+    const renderHookResult = renderHook(() => useCreateProject());
+    const { createProject } = renderHookResult.result.current;
+
+    // ASSERT
+    await act(async () => {
+      await expect(createProject(mockProjectData)).rejects.toThrow('API Error');
+    });
+  });
+});