test(okms): update impacted tests by the new key/value editor

mathieumousnier · mathieumousnier · commit bdc41aaff6bf · 2025-10-31T12:02:55.000+01:00
ref: #MANAGER-18318

Signed-off-by: Mathieu Mousnier &lt;mathieu.mousnier.ext@ovhcloud.com&gt;
diff --git a/packages/manager/apps/okms/src/modules/secret-manager/pages/createSecret/CreateSecret.page.spec.tsx b/packages/manager/apps/okms/src/modules/secret-manager/pages/createSecret/CreateSecret.page.spec.tsx
@@ -14,19 +14,26 @@ import userEvent, { UserEvent } from '@testing-library/user-event';
 import { assertBreadcrumbItems } from '@secret-manager/utils/tests/breadcrumb';
 import { createSecretErrorMessage } from '@secret-manager/mocks/secrets/secrets.handler';
 import { SECRET_MANAGER_ROUTES_URLS } from '@secret-manager/routes/routes.constants';
+import { SECRET_VALUE_TOGGLE_TEST_IDS } from '@secret-manager/components/secretValueToggle/secretValueToggle.constants';
 import { renderTestApp } from '@/utils/tests/renderTestApp';
 import { labels } from '@/utils/tests/init.i18n';
 import { catalogMock } from '@/mocks/catalog/catalog.mock';
 
 /* TEST UTILS */
 const firstRegion = catalogMock.plans[0].configurations[0].values[0];
 
+/**
+ * Selects the first region
+ */
 const selectRegion = async (user: UserEvent) => {
   const firstRegionRadioCard = screen.getByTestId(firstRegion);
 
   await act(() => user.click(firstRegionRadioCard));
 };
 
+/**
+ * Fills the required fields
+ */
 const fillRequiredFields = () => {
   const inputPath = screen.getByTestId(SECRET_FORM_TEST_IDS.INPUT_PATH);
   const inputData = screen.getByTestId(SECRET_FORM_FIELD_TEST_IDS.INPUT_DATA);
@@ -42,6 +49,16 @@ const fillRequiredFields = () => {
   });
 };
 
+/**
+ * Clicks on the JSON toggle
+ */
+const clickJsonEditorToggle = async (user: UserEvent) => {
+  const jsonToggle = screen.getByTestId(
+    SECRET_VALUE_TOGGLE_TEST_IDS.jsonToggle,
+  );
+  await act(() => user.click(jsonToggle));
+};
+
 /* CREATE PAGE TEST SUITE */
 describe('Create secret page test suite', () => {
   it('should display the form sections', async () => {
@@ -66,6 +83,7 @@ describe('Create secret page test suite', () => {
     await assertTextVisibility(firstRegion);
 
     await selectRegion(user);
+    await clickJsonEditorToggle(user);
     fillRequiredFields();
 
     const submitButton = screen.getByTestId(SECRET_FORM_TEST_IDS.SUBMIT_BUTTON);
@@ -97,6 +115,7 @@ describe('Create secret page test suite', () => {
     await assertTextVisibility(firstRegion);
 
     await selectRegion(user);
+    await clickJsonEditorToggle(user);
     fillRequiredFields();
 
     const submitButton = screen.getByTestId(SECRET_FORM_TEST_IDS.SUBMIT_BUTTON);
diff --git a/packages/manager/apps/okms/src/modules/secret-manager/pages/createSecret/SecretForm.component.spec.tsx b/packages/manager/apps/okms/src/modules/secret-manager/pages/createSecret/SecretForm.component.spec.tsx
@@ -5,14 +5,15 @@ import { useSearchParams } from 'react-router-dom';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { vi } from 'vitest';
 import { assertTextVisibility } from '@ovh-ux/manager-core-test-utils';
-import { waitFor } from '@testing-library/dom';
 import {
   MOCK_DATA_VALID_JSON,
   MOCK_PATH_VALID,
 } from '@secret-manager/utils/tests/secret.constants';
 import { SECRET_FORM_TEST_IDS } from '@secret-manager/pages/createSecret/SecretForm.constants';
 import { SECRET_FORM_FIELD_TEST_IDS } from '@secret-manager/components/form/form.constants';
-import { render, screen } from '@testing-library/react';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import { SECRET_VALUE_TOGGLE_TEST_IDS } from '@secret-manager/components/secretValueToggle/secretValueToggle.constants';
+import userEvent, { UserEvent } from '@testing-library/user-event';
 import { labels, initTestI18n } from '@/utils/tests/init.i18n';
 import { SecretForm } from './SecretForm.component';
 import { SECRET_DATA_TEMPLATE } from './SecretForm.constants';
@@ -32,38 +33,37 @@ vi.mock('react-router-dom', async (importOriginal) => {
 
 // Mocking ODS Input component
 vi.mock('@ovhcloud/ods-components/react', async () => {
+  const {
+    odsInputMock,
+    odsTextareaMock,
+    odsSwitchMock,
+    odsSwitchItemMock,
+  } = await import('@/utils/tests/odsMocks');
   const original = await vi.importActual('@ovhcloud/ods-components/react');
   return {
     ...original,
-    OdsInput: vi.fn(
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      ({ className, onOdsChange, onOdsBlur, ...rest }) => (
-        <input
-          data-testid={rest['data-testid']}
-          className={className}
-          onChange={(e) => onOdsChange && onOdsChange(e.target.value)}
-          onBlur={(e) => onOdsBlur && onOdsBlur(e.target.value)}
-          {...rest}
-        />
-      ),
-    ),
-    OdsTextarea: vi.fn(
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      ({ className, onOdsChange, onOdsBlur, isResizable, ...rest }) => (
-        <textarea
-          data-testid={rest['data-testid']}
-          className={className}
-          onChange={(e) => onOdsChange && onOdsChange(e.target.value)}
-          onBlur={() => onOdsBlur && onOdsBlur()}
-          {...rest}
-        />
-      ),
-    ),
+    OdsInput: vi.fn(odsInputMock),
+    OdsTextarea: vi.fn(odsTextareaMock),
+    OdsSwitch: vi.fn(odsSwitchMock),
+    OdsSwitchItem: vi.fn(odsSwitchItemMock),
   };
 });
 
 vi.mocked(useSearchParams).mockReturnValue([new URLSearchParams(), vi.fn()]);
 
+/**
+ * Clicks on the JSON toggle
+ */
+const clickJsonEditorToggle = async (user: UserEvent) => {
+  const jsonToggle = screen.getByTestId(
+    SECRET_VALUE_TOGGLE_TEST_IDS.jsonToggle,
+  );
+  await act(() => user.click(jsonToggle));
+};
+
+/**
+ * Renders the secret form
+ */
 const renderSecretForm = async (okmsId?: string) => {
   const queryClient = new QueryClient();
   if (!i18nValue) {
@@ -111,22 +111,31 @@ describe('Secrets creation form test suite', () => {
     'should check the form validity for data: $data, path: $path and a selectedOkms: $selectedOkmsId ',
     async ({ data, path, selectedOkmsId, shouldButtonBeDisabled }) => {
       // GIVEN
+      const user = userEvent.setup();
       await renderSecretForm(selectedOkmsId);
       await assertTextVisibility(
         labels.secretManager.create_secret_form_secret_section_title,
       );
 
+      // WHEN
+      await clickJsonEditorToggle(user);
+
       if (path) {
         await changeOdsInputValueByTestId(
           SECRET_FORM_TEST_IDS.INPUT_PATH,
           path,
         );
       }
       if (data) {
-        await changeOdsInputValueByTestId(
+        const input = await screen.findByTestId(
           SECRET_FORM_FIELD_TEST_IDS.INPUT_DATA,
-          data,
         );
+
+        // clean first the input
+        await act(() => user.clear(input));
+        // then type the new value
+        const escaped = data.replace(/{/g, '{{');
+        await act(() => user.type(input, escaped));
       }
 
       // THEN
@@ -145,7 +154,11 @@ describe('Secrets creation form test suite', () => {
 
   it('should display the template in the data input', async () => {
     // GIVEN
+    const user = userEvent.setup();
     await renderSecretForm(MOCK_OKMS_ID);
+
+    // WHEN
+    await clickJsonEditorToggle(user);
     const inputData = screen.getByTestId(SECRET_FORM_FIELD_TEST_IDS.INPUT_DATA);
     expect(inputData).toBeInTheDocument();
 
diff --git a/packages/manager/apps/okms/src/modules/secret-manager/pages/drawers/createVersionDrawer/CreateVersionDrawer.page.spec.tsx b/packages/manager/apps/okms/src/modules/secret-manager/pages/drawers/createVersionDrawer/CreateVersionDrawer.page.spec.tsx
@@ -1,10 +1,8 @@
-import React from 'react';
 import { vi } from 'vitest';
 import { SECRET_MANAGER_ROUTES_URLS } from '@secret-manager/routes/routes.constants';
 import { mockSecret1 } from '@secret-manager/mocks/secrets/secrets.mock';
 import { screen, act, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MOCK_DATA_VALID_JSON } from '@secret-manager/utils/tests/secret.constants';
+import userEvent, { UserEvent } from '@testing-library/user-event';
 import { SECRET_FORM_FIELD_TEST_IDS } from '@secret-manager/components/form/form.constants';
 import {
   assertTextVisibility,
@@ -13,10 +11,10 @@ import {
 } from '@ovh-ux/manager-core-test-utils';
 import * as secretVersionsApi from '@secret-manager/data/api/secretVersions';
 import { getSecretMockWithData } from '@secret-manager/mocks/secrets/secretsMock.utils';
+import { SECRET_VALUE_TOGGLE_TEST_IDS } from '@secret-manager/components/secretValueToggle/secretValueToggle.constants';
 import { okmsRoubaix1Mock } from '@/mocks/kms/okms.mock';
 import { renderTestApp } from '@/utils/tests/renderTestApp';
 import { labels } from '@/utils/tests/init.i18n';
-import { changeOdsInputValueByTestId } from '@/utils/tests/uiTestHelpers';
 import { CREATE_VERSION_DRAWER_TEST_IDS } from './CreateVersionDrawer.constants';
 
 const mockOkmsId = okmsRoubaix1Mock.id;
@@ -26,26 +24,27 @@ const mockPageUrl = SECRET_MANAGER_ROUTES_URLS.versionListCreateVersionDrawer(
   mockedSecret.path,
 );
 
-// Mocking ODS Input component
+// Mocking ODS components
 vi.mock('@ovhcloud/ods-components/react', async () => {
+  const {
+    odsInputMock,
+    odsTextareaMock,
+    odsSwitchMock,
+    odsSwitchItemMock,
+  } = await import('@/utils/tests/odsMocks');
   const original = await vi.importActual('@ovhcloud/ods-components/react');
   return {
     ...original,
-    OdsTextarea: vi.fn(
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
-      ({ className, onOdsChange, onOdsBlur, isResizable, ...rest }) => (
-        <textarea
-          data-testid={rest['data-testid']}
-          className={className}
-          onChange={(e) => onOdsChange && onOdsChange(e.target.value)}
-          onBlur={() => onOdsBlur && onOdsBlur()}
-          {...rest}
-        />
-      ),
-    ),
+    OdsInput: vi.fn(odsInputMock),
+    OdsTextarea: vi.fn(odsTextareaMock),
+    OdsSwitch: vi.fn(odsSwitchMock),
+    OdsSwitchItem: vi.fn(odsSwitchItemMock),
   };
 });
 
+/**
+ * Renders the create version drawer page
+ */
 const renderPage = async ({ url = mockPageUrl }: { url?: string } = {}) => {
   const user = userEvent.setup();
   const { container } = await renderTestApp(url);
@@ -61,11 +60,21 @@ const renderPage = async ({ url = mockPageUrl }: { url?: string } = {}) => {
 
   // wait for the content to be displayed
   await assertTextVisibility(labels.secretManager.add_new_version);
-  await assertTextVisibility(labels.secretManager.editor);
+  await assertTextVisibility(labels.secretManager.key_value);
 
   return { user, container };
 };
 
+/**
+ * Clicks on the JSON toggle
+ */
+const clickJsonToggle = async (user: UserEvent) => {
+  const jsonToggle = screen.getByTestId(
+    SECRET_VALUE_TOGGLE_TEST_IDS.jsonToggle,
+  );
+  await act(() => user.click(jsonToggle));
+};
+
 describe('Secret create version drawer page test suite', () => {
   it('should display the create version drawer', async () => {
     const { container } = await renderPage();
@@ -79,11 +88,13 @@ describe('Secret create version drawer page test suite', () => {
   });
 
   it('should display the current secret value', async () => {
-    await renderPage();
+    const { user } = await renderPage();
 
-    const dataInput = screen.getByTestId(SECRET_FORM_FIELD_TEST_IDS.INPUT_DATA);
+    // Click on the JSON toggle to switch to the JSON editor
+    await clickJsonToggle(user);
 
     // Check if the data input contains the secret value
+    const dataInput = screen.getByTestId(SECRET_FORM_FIELD_TEST_IDS.INPUT_DATA);
     expect(dataInput).toBeInTheDocument();
     expect(dataInput).toHaveValue(
       JSON.stringify(getSecretMockWithData(mockedSecret).version.data),
@@ -96,12 +107,21 @@ describe('Secret create version drawer page test suite', () => {
       getSecretMockWithData(mockedSecret).version,
     );
 
+    // Click on the JSON toggle to switch to the JSON editor
+    await clickJsonToggle(user);
+
+    const MOCK_NEW_DATA = '{"key1":"value1","key2":"value2"}';
     // Change the data input value
-    await changeOdsInputValueByTestId(
+    const input = await screen.findByTestId(
       SECRET_FORM_FIELD_TEST_IDS.INPUT_DATA,
-      MOCK_DATA_VALID_JSON,
     );
 
+    // clean first the input
+    await act(() => user.clear(input));
+    // then type the new value
+    const escaped = MOCK_NEW_DATA.replace(/{/g, '{{');
+    await act(() => user.type(input, escaped));
+
     // Submit the form
     // Button should be enabled after input change
     const submitButton = await getOdsButtonByLabel({
@@ -117,7 +137,7 @@ describe('Secret create version drawer page test suite', () => {
       expect(secretVersionsApi.createSecretVersion).toHaveBeenCalledWith({
         okmsId: mockOkmsId,
         path: mockedSecret.path,
-        data: JSON.parse(MOCK_DATA_VALID_JSON),
+        data: JSON.parse(MOCK_NEW_DATA),
         cas: mockedSecret.metadata.currentVersion,
       });
     });
diff --git a/packages/manager/apps/okms/src/modules/secret-manager/pages/secret/Secret.page.spec.tsx b/packages/manager/apps/okms/src/modules/secret-manager/pages/secret/Secret.page.spec.tsx
@@ -155,7 +155,7 @@ describe('Secret page test suite', () => {
     },
     {
       actionLabel: labels.secretManager.add_new_version,
-      assertion: () => assertTextVisibility(labels.secretManager.editor),
+      assertion: () => assertTextVisibility(labels.secretManager.key_value),
     },
     {
       actionLabel: labels.secretManager.delete_secret,

Original file line number	Diff line number	Diff line change
`@@ -155,7 +155,7 @@ describe('Secret page test suite', () => {`
`155`	`155`	`},`
`156`	`156`	`{`
`157`	`157`	`actionLabel: labels.secretManager.add_new_version,`
`158`		`- assertion: () => assertTextVisibility(labels.secretManager.editor),`
	`158`	`+ assertion: () => assertTextVisibility(labels.secretManager.key_value),`
`159`	`159`	`},`
`160`	`160`	`{`
`161`	`161`	`actionLabel: labels.secretManager.delete_secret,`