tests fixes

Author: lucasgoral

cypress/support/component.tsx

@@ -20,6 +20,7 @@ import { ThemeProvider } from '@ui5/webcomponents-react';
 import { mount } from 'cypress/react';
 // Import commands.js using ES2015 syntax:
 import './commands';
+import {FrontendConfigProvider, Landscape} from "../../src/context/FrontendConfigContext";
 
 // Augment the Cypress namespace to include type definitions for
 // your custom command.
@@ -34,7 +35,13 @@ declare global {
   }
 }
 
+
+
 Cypress.Commands.add('mount', (component, options) => {
-  return mount(<ThemeProvider>{component} </ThemeProvider>, options);
+  return mount(<ThemeProvider><FrontendConfigProvider config={{
+    "backendUrl": "http://localhost:3000",
+    "landscape": "DEV" as Landscape,
+    "documentationBaseUrl": "http://localhost:3000"
+  }}>{component} </FrontendConfigProvider></ThemeProvider>, options);
 });
 

src/components/Dialogs/CreateProjectDialog.test.tsx

@@ -1,27 +1,48 @@
 import React, {useState, useRef} from 'react';
 import {CreateProjectWorkspaceDialog, onCreatePayload} from './CreateProjectWorkspaceDialog';
-import {Member, MemberRoles} from '../../lib/api/types/shared/members';
+import { MemberRoles} from '../../lib/api/types/shared/members';
 import {ErrorDialogHandle} from '../Shared/ErrorMessageBox';
-import {InputDomRef} from '@ui5/webcomponents-react';
+
+import {useForm} from "react-hook-form";
+import {zodResolver} from "@hookform/resolvers/zod";
+import {validationSchemaProjectWorkspace} from "../../lib/api/validations/schemas.ts";
+import {CreateDialogProps} from "./CreateWorkspaceDialogContainer.tsx";
 
 
 
 
 export const CreateProjectWorkspaceDialogWrapper: React.FC<{ spyFormBody?: (data: any) => {} }> = ({spyFormBody}) => {
   const [isOpen, setIsOpen] = useState(true);
-  const [members, setMembers] = useState<Member[]>([{
-    name: '[email protected]',
-    roles: [MemberRoles.admin],
-    kind: "User"
-  }]);
+
   const errorDialogRef = useRef<ErrorDialogHandle>(null);
-  const nameInputRef = useRef<InputDomRef>(null);
-  const displayNameInputRef = useRef<InputDomRef>(null);
-  const chargingTargetInputRef = useRef<InputDomRef>(null);  const handleCreate = async () => {
+
+  const {
+    register,
+    handleSubmit,
+    setValue,
+    formState: { errors },
+    watch
+  } = useForm<CreateDialogProps>({
+    // @ts-ignore
+    resolver: zodResolver(validationSchemaProjectWorkspace),
+    defaultValues: {
+      name: "",
+      displayName: "",
+      chargingTarget: "",
+      members: [{   name: '[email protected]', roles: [MemberRoles.admin], kind: "User"}],
+    }
+  });
+
+  const handleCreate = async ({
+                                name,
+                                displayName,
+                                chargingTarget,
+                                members,
+                              }: onCreatePayload) => {
     const payload: onCreatePayload = {
-      name: nameInputRef.current?.value || '',
-      displayName: displayNameInputRef.current?.value || '',
-      chargingTarget: chargingTargetInputRef.current?.value || '',
+      name: name,
+      displayName: displayName,
+      chargingTarget: chargingTarget,
       members: members
     };
 
@@ -33,13 +54,12 @@ export const CreateProjectWorkspaceDialogWrapper: React.FC<{ spyFormBody?: (data
       isOpen={isOpen}
       setIsOpen={setIsOpen}
       titleText="Create Project Workspace"
-      onCreate={handleCreate}
+      onCreate={handleSubmit(handleCreate)}
       errorDialogRef={errorDialogRef}
-      members={members}
-      setMembers={setMembers}
-      nameInputRef={nameInputRef}
-      displayNameInputRef={displayNameInputRef}
-      chargingTargetInputRef={chargingTargetInputRef}
+      members={watch('members')}
+      register={register}
+      errors={errors}
+      setValue={setValue}
     />
   );
 };
@@ -55,9 +75,9 @@ describe('CreateProjectWorkspaceDialog', () => {
       .contains('[email protected]')
       .should('be.visible');
     cy.get('ui5-button[icon="delete"]').find('button').click({ force: true });
-    cy.get('div[data-component-name="AnalyticalTableContainerWithScrollbar"]')
-      .contains('[email protected]')
-      .should('not.exist');
+    cy.get('span[id="members-error"]')
+      .contains('You need to have at least one member assigned.')
+      .should('be.visible');
   });
 
   it('should add a new member and display it in the table', () => {
@@ -75,21 +95,21 @@ describe('CreateProjectWorkspaceDialog', () => {
     const stubFn = cy.stub().as('stubFn');
     cy.mount(<CreateProjectWorkspaceDialogWrapper spyFormBody={stubFn} />, {});
 
-    cy.get('ui5-input[id*="project-name-input"]').find('input[id*="inner"]')
-      .type('brand-new-workspace-test-01', { force: true });
-    cy.get('ui5-input[id*="project-displayname-input"]').find('input[id*="inner"]')
+    cy.get('ui5-input[id*="name"]').find('input[id*="inner"]')
+      .type('brand--01', { force: true });
+    cy.get('ui5-input[id*="displayName"]').find('input[id*="inner"]')
       .type('Brand new workspace number one', { force: true });
-    cy.get('ui5-input[id*="project-chargingtarget-input"]').find('input[id*="inner"]')
+    cy.get('ui5-input[id*="chargingTarget"]').find('input[id*="inner"]')
       .type('Charging target 1000', { force: true });
-    cy.get('ui5-input[id*="member-email-input"]').find('input[id*="inner"]')
+    cy.get('ui5-input[id*="email"]').find('input[id*="inner"]')
       .type('[email protected]', { force: true });
     cy.get('ui5-button:contains("Add")')
       .click({ force: true });
     cy.get('ui5-button:contains("Create")')
       .click({ force: true });
 
     cy.get('@stubFn').should('have.been.calledWith', {
-      name: 'brand-new-workspace-test-01',
+      name: 'brand--01',
       displayName: 'Brand new workspace number one',
       chargingTarget: 'Charging target 1000',
       members: [

src/components/Dialogs/CreateWorkspaceDialogContainer.tsx

@@ -115,7 +115,7 @@ export function CreateWorkspaceDialogContainer({
         setIsOpen={setIsOpen}
         onCreate={handleSubmit(handleWorkspaceCreate)}
         errorDialogRef={errorDialogRef}
-        titleText="Create Workspace"
+        titleText="Create Project Workspace"
         members={watch('members')}
         register={register}
         errors={errors}

src/components/Members/MemberTable.tsx

@@ -41,7 +41,7 @@ export const MemberTable: FC<MemberTableProps> = ({members, onDeleteMember, isVa
     },)
   }
   if (members.length === 0) {
-    return (<Infobox variant={isValidationError ? 'danger' : 'normal'}> You need to have at least one member assigned</Infobox>)
+    return (<Infobox size={'sm'} variant={isValidationError ? 'danger' : 'normal'} id={'members-error'}>You need to have at least one member assigned.</Infobox>)
   }
   return (
     <AnalyticalTable

src/components/Ui/Infobox/Infobox.module.scss

@@ -1,7 +1,7 @@
 .infobox {
   display: inline-block;
   border: 1px solid;
-  margin-bottom: 1rem;
+  margin: 1rem 0;
 
   &.size-sm {
     padding: 0.5rem 0.75rem;

src/components/Ui/Infobox/Infobox.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, {ReactNode} from 'react';
 import cx from 'clsx';
 
 import styles from './Infobox.module.scss';
@@ -8,13 +8,15 @@ interface LabelProps {
   size?: 'sm' | 'md' | 'lg';
   variant?: 'normal' | 'success' | 'warning' | 'danger';
   children: ReactNode;
+  className?: string;
 }
 
 export const Infobox: React.FC<LabelProps> = ({
                                                 id,
                                                 size = 'md', // Default to medium size
                                                 variant = 'normal', // Default to normal variant
                                                 children,
+                                                className
                                               }) => {
   const infoboxClasses = cx(styles.infobox, {
     [styles['size-sm']]: size === 'sm',
@@ -24,7 +26,7 @@ export const Infobox: React.FC<LabelProps> = ({
     [styles['variant-success']]: variant === 'success',
     [styles['variant-warning']]: variant === 'warning',
     [styles['variant-danger']]: variant === 'danger',
-  });
+  }, className);
 
   return (
     <span

src/index.css

@@ -103,4 +103,8 @@ body {
 #root {
   height: 100%;
   background-color: var(--sapBackgroundColor);
+}
+
+ui5-form-item {
+  margin-bottom: 24px;
 }