test(vrack-services): listing and create endpoint it

ref: MANAGER-16104

Signed-off-by: Quentin Pavy <[email protected]>

packages/manager/apps/vrack-services/mocks/vrack-services/get-vrack-services.json

@@ -552,7 +552,7 @@
     "currentState": {
       "displayName": "SUB-test",
       "productStatus": "DRAFT",
-      "region": "LABEUPRE",
+      "region": "eu-west-lim",
       "subnets": [
         {
           "cidr": "10.0.0.0/24",

packages/manager/apps/vrack-services/src/pages/create-endpoint/EndpointCreate.page.tsx

@@ -187,7 +187,7 @@ export default function EndpointCreatePage() {
           size={ODS_SELECT_SIZE.md}
         >
           <span slot="placeholder">{t('subnetPlaceholder')}</span>
-          {vrackServices?.data.currentState.subnets.map((subnet) => (
+          {vrackServices?.data?.currentState.subnets.map((subnet) => (
             <OsdsSelectOption key={subnet.cidr} value={subnet.cidr}>
               {subnet.displayName
                 ? `${subnet.displayName} - ${subnet.cidr}`

packages/manager/apps/vrack-services/src/pages/create-endpoint/EndpointCreate.spec.tsx

@@ -0,0 +1,61 @@
+import { describe, it } from 'vitest';
+import '@testing-library/jest-dom';
+import { assertTextVisibility } from '@ovh-ux/manager-core-test-utils';
+import { waitFor, fireEvent } from '@testing-library/react';
+import { ODS_BUTTON_VARIANT } from '@ovhcloud/ods-components';
+import { eligibleManagedServiceResponse } from 'mocks/vrack-services/vrack-services';
+import {
+  assertOsdFormInputInError,
+  changeInputValueByLabelText,
+  changeSelectValueByLabelText,
+  clickOnRadioByName,
+  getButtonByVariant,
+  labels,
+  renderTest,
+} from '../../test-utils';
+import vrackServicesList from '../../../mocks/vrack-services/get-vrack-services.json';
+import { urls } from '@/routes/routes.constants';
+import { iamResources } from '../../../mocks/iam/iam';
+
+describe('Vrack Services endpoint creation page test suite', () => {
+  it('should create an endpoint', async () => {
+    const { container } = await renderTest({
+      nbVs: 21,
+      initialRoute: urls.createEndpoint.replace(
+        ':id',
+        vrackServicesList[20].id,
+      ),
+      nbEligibleService: 1,
+    });
+
+    await assertTextVisibility(labels.endpoints.createEndpointPageDescription);
+
+    await getButtonByVariant({
+      container,
+      variant: ODS_BUTTON_VARIANT.flat,
+      disabled: true,
+    });
+
+    await changeSelectValueByLabelText({
+      selectLabel: labels.endpoints.serviceNameLabel,
+      value: iamResources[0].displayName,
+    });
+
+    await getButtonByVariant({
+      container,
+      variant: ODS_BUTTON_VARIANT.flat,
+      disabled: true,
+    });
+
+    await changeSelectValueByLabelText({
+      selectLabel: labels.endpoints.subnetLabel,
+      value: vrackServicesList[20].currentState.subnets[0].cidr,
+    });
+
+    await getButtonByVariant({
+      container,
+      variant: ODS_BUTTON_VARIANT.flat,
+      disabled: false,
+    });
+  });
+});

packages/manager/apps/vrack-services/src/pages/listing/Listing.spec.tsx

@@ -1,12 +1,103 @@
 import { describe, it } from 'vitest';
 import '@testing-library/jest-dom';
-import { assertTextVisibility } from '@ovh-ux/manager-core-test-utils';
-import { labels, renderTest } from '../../test-utils';
+import {
+  assertTextVisibility,
+  getButtonByLabel,
+} from '@ovh-ux/manager-core-test-utils';
+import { ODS_BUTTON_VARIANT, ODS_ICON_NAME } from '@ovhcloud/ods-components';
+import { fireEvent, waitFor } from '@testing-library/react';
+import {
+  assertModalTitle,
+  getButtonByIcon,
+  getButtonByVariant,
+  labels,
+  renderTest,
+} from '../../test-utils';
 
 describe('Vrack Services listing test suite', () => {
   it('should redirect to the onboarding page when the VRS list is empty', async () => {
     await renderTest({ nbVs: 0 });
 
     await assertTextVisibility(labels.onboarding.onboardingPageTitle);
   });
+
+  it('should show list of vrack services', async () => {
+    const { container } = await renderTest({ nbVs: 7 });
+
+    await assertTextVisibility(labels.listing.createVrackServicesButtonLabel);
+
+    const actionMenuDisabled = await getButtonByIcon({
+      container,
+      iconName: ODS_ICON_NAME.ELLIPSIS,
+      nth: 6,
+    });
+
+    await waitFor(() => fireEvent.click(actionMenuDisabled));
+
+    await getButtonByLabel({
+      container,
+      label: labels.common['action-editDisplayName'],
+      nth: 6,
+      disabled: true,
+    });
+    await getButtonByLabel({
+      container,
+      label: labels.common['action-deleteVrackServices'],
+      nth: 6,
+      disabled: true,
+    });
+    await getButtonByLabel({
+      container,
+      label: labels.common['action-goDetails'],
+      nth: 6,
+      disabled: false,
+    });
+
+    const actionMenuActive = await getButtonByIcon({
+      container,
+      iconName: ODS_ICON_NAME.ELLIPSIS,
+      nth: 1,
+    });
+
+    await waitFor(() => fireEvent.click(actionMenuActive));
+
+    const editDisplayNameModalButton = await getButtonByLabel({
+      container,
+      label: labels.common['action-editDisplayName'],
+      nth: 1,
+      disabled: false,
+    });
+    await getButtonByLabel({
+      container,
+      label: labels.common['action-deleteVrackServices'],
+      nth: 1,
+      disabled: false,
+    });
+    const goToDEtailButton = await getButtonByLabel({
+      container,
+      label: labels.common['action-goDetails'],
+      nth: 1,
+      disabled: false,
+    });
+
+    await waitFor(() => fireEvent.click(editDisplayNameModalButton));
+
+    await assertModalTitle({
+      container,
+      title: labels.common.modalUpdateVrackServicesHeadline.replace(
+        '{{id}}',
+        'vrs-ahz-9t0-7lb-b5r',
+      ),
+    });
+
+    const closeDisplayNameModal = await getButtonByVariant({
+      container,
+      variant: ODS_BUTTON_VARIANT.ghost,
+    });
+    await waitFor(() => fireEvent.click(closeDisplayNameModal));
+
+    await waitFor(() => fireEvent.click(goToDEtailButton));
+
+    await assertTextVisibility(labels.dashboard.dashboardPageDescription);
+  });
 });

packages/manager/apps/vrack-services/src/test-utils/uiTestHelpers.ts

@@ -120,6 +120,23 @@ export const changeInputValueByLabelText = async ({
   return waitFor(() => fireEvent(odsInput, event));
 };
 
+export const changeSelectValueByLabelText = async ({
+  selectLabel,
+  value,
+}: {
+  selectLabel: string;
+  value: string;
+}) => {
+  const odsForm: HTMLElement = screen
+    .getByText(selectLabel)
+    ?.closest('osds-form-field');
+  const odsSelect = odsForm.querySelector('osds-select');
+  const event = new CustomEvent('odsValueChange', {
+    detail: { value },
+  });
+  return waitFor(() => fireEvent(odsSelect, event));
+};
+
 export const assertOsdFormInputInError = async ({
   inputLabel,
   inError = false,