Skip to content

feat(okms): add okms silent order #18412

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 31, 2025
Merged

feat(okms): add okms silent order #18412

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f85917a
fix(okms): comment create secret wip sections
Jul 22, 2025
8429d03
feat(okms): add order okms modal on create secret page
Jul 25, 2025
ff062ff
test(okms): add order okms tests on create secret page
Jul 29, 2025
c557170
fix(okms): fix order okms tests and modal page
Jul 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions ...apps/key-management-service/public/translations/secret-manager/create/Messages_fr_FR.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,10 @@
"domain_section_title": "1. Sélection du domaine",
"region_selector_title": "Sélectionnez une région",
"domain_selector_title": "Sélectionnez un domaine",
"domain_activation_in_progress": "Veuillez patienter, creation en cours.",
"create_domain_tc_title": "Activation de la région",
"create_domain_tc_description": "Pour activer votre région il est nécessaire de créer un domaine OKMS. Souhaitez-vous continuer l'activation de votre région ?",
"create_domain_tc_confirm_label": "J'ai pris connaissance et j'accepte les conditions générales, l'annexe relative au traitement des données personnelles et les conditions particulières de services d'OVH.",
"secret_section_title": "2. Configuration du secret",
"path_title": "Path",
"path_helper": "Pour créer une hiérarchie, utilisez des '/'. Exemple : prod/database/MySQL",
Expand Down
7 changes: 7 additions & 0 deletions ...gement-service/src/common/components/OrderOkmsModal/OrderOkmsModal.component.constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
export const ORDER_OKMS_CREATE_CART_SPINNER_TEST_ID = 'create-cart-spinner';
export const ORDER_OKMS_CREATE_CANCEL_BUTTON_TEST_ID =
'create-cart-cancel-button';
export const ORDER_OKMS_CREATE_RETRY_BUTTON_TEST_ID =
'create-cart-retry-button';
export const ORDER_OKMS_TC_CONFIRM_CHECKBOX_TEST_ID = 'tc-confirm-checkbox';
export const ORDER_OKMS_TC_CONFIRM_BUTTON_TEST_ID = 'tc-confirm-button';
311 changes: 311 additions & 0 deletions ...management-service/src/common/components/OrderOkmsModal/OrderOkmsModal.component.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,311 @@
import React from 'react';
import { i18n } from 'i18next';
import { AxiosResponse } from 'axios';
import { I18nextProvider } from 'react-i18next';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { vi } from 'vitest';
import { act, render, screen, waitFor } from '@testing-library/react';
import userEvent, { UserEvent } from '@testing-library/user-event';
import {
ShellContext,
ShellContextType,
} from '@ovh-ux/manager-react-shell-client';
import {
Contract,
createCart,
Order,
postOrderCartCartIdCheckout,
} from '@ovh-ux/manager-module-order';
import { assertTextVisibility } from '@ovh-ux/manager-core-test-utils';
import { initTestI18n, labels } from '@/utils/tests/init.i18n';
import {
OkmsRegionOrderSuccessful,
OrderOkmsModal,
} from './OrderOkmsModal.component';
import {
ORDER_OKMS_CREATE_CANCEL_BUTTON_TEST_ID,
ORDER_OKMS_CREATE_CART_SPINNER_TEST_ID,
ORDER_OKMS_CREATE_RETRY_BUTTON_TEST_ID,
ORDER_OKMS_TC_CONFIRM_BUTTON_TEST_ID,
ORDER_OKMS_TC_CONFIRM_CHECKBOX_TEST_ID,
} from './OrderOkmsModal.component.constants';

let i18nValue: i18n;

const shellContext = {
environment: {
getUser: () => ({ ovhSubsidiary: 'mocked_ovhSubsidiary' }),
},
};

const mockedRegion = 'mocked-region';

const mockedContracts: Contract[] = [
{
content: 'contract-1-content',
name: 'contract-1',
url: 'contrat-1-url',
},
{
content: 'contract-2-content',
name: 'contract-2',
url: 'contrat-2-url',
},
];

const navigate = vi.fn();

vi.mock('react-router-dom', async (importOriginal) => {
const module: typeof import('react-router-dom') = await importOriginal();
return {
...module,
useNavigate: () => navigate,
useParams: () => ({ region: mockedRegion }),
};
});

vi.mock('@ovh-ux/manager-module-order', async (importOriginal) => {
const module: typeof import('@ovh-ux/manager-module-order') = await importOriginal();
return {
...module,
createCart: vi.fn(),
postOrderCartCartIdCheckout: vi.fn(),
};
});

const renderOrderOkmsModal = async () => {
const queryClient = new QueryClient();
if (!i18nValue) {
i18nValue = await initTestI18n();
}

return render(
<I18nextProvider i18n={i18nValue}>
<QueryClientProvider client={queryClient}>
<ShellContext.Provider
value={(shellContext as unknown) as ShellContextType}
>
<OrderOkmsModal />
</ShellContext.Provider>
</QueryClientProvider>
</I18nextProvider>,
);
};

const clickOnConfirmCheckbox = async () => {
const confirmCheckbox = screen.getByTestId(
ORDER_OKMS_TC_CONFIRM_CHECKBOX_TEST_ID,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
) as any;
await act(() => {
confirmCheckbox.odsChange.emit({
checked: 'true',
});
});
};

const clickOnConfirmButton = async (user: UserEvent) => {
const confirmButton = screen.getByTestId(
ORDER_OKMS_TC_CONFIRM_BUTTON_TEST_ID,
);
await waitFor(() => {
expect(confirmButton).toHaveAttribute('is-disabled', 'false');
});
await act(() => user.click(confirmButton));
return confirmButton;
};

describe('Order Okms Modal test suite', () => {
beforeEach(() => {
vi.resetAllMocks();
});
describe('on init', () => {
it('should display a loading state when creating a cart', async () => {
// GIVEN
vi.mocked(createCart).mockImplementation(() => new Promise(() => {}));

// WHEN
await renderOrderOkmsModal();

// THEN
await waitFor(() => {
expect(
screen.getByTestId(ORDER_OKMS_CREATE_CART_SPINNER_TEST_ID),
).toBeVisible();
});
});

it('should display terms and conditions on cart succesful creation', async () => {
// GIVEN
vi.mocked(createCart).mockResolvedValueOnce({
cartId: 'cart-id',
contractList: [],
});

// WHEN
await renderOrderOkmsModal();

// THEN
await assertTextVisibility(
labels.secretManager.create.create_domain_tc_title,
);
});

it('should display a notification and a retry button on error', async () => {
// GIVEN
const mockError = new Error('Failed to create cart');
vi.mocked(createCart).mockRejectedValue(mockError);

// WHEN
await renderOrderOkmsModal();

// THEN
await assertTextVisibility(
labels.common.error.error_message.replace(
'{{message}}',
mockError.message,
),
);
expect(
screen.getByTestId(ORDER_OKMS_CREATE_CANCEL_BUTTON_TEST_ID),
).toBeVisible();
expect(
screen.getByTestId(ORDER_OKMS_CREATE_RETRY_BUTTON_TEST_ID),
).toBeVisible();
});
});

describe('on terms and conditions', () => {
beforeEach(() => {
vi.resetAllMocks();
vi.mocked(createCart).mockResolvedValue({
cartId: 'cart-id',
contractList: mockedContracts,
});
});

it('should display terms and conditions', async () => {
// GIVEN
// WHEN
await renderOrderOkmsModal();

// THEN
await assertTextVisibility(
labels.secretManager.create.create_domain_tc_title,
);
await assertTextVisibility(
labels.secretManager.create.create_domain_tc_description,
);

mockedContracts.forEach(async (contract) => {
await assertTextVisibility(contract.name);
});

const confirmCheckbox = screen.getByTestId(
ORDER_OKMS_TC_CONFIRM_CHECKBOX_TEST_ID,
);
expect(confirmCheckbox).toBeVisible();
expect(confirmCheckbox).toHaveAttribute('is-checked', 'false');

expect(
screen.getByTestId(ORDER_OKMS_CREATE_CANCEL_BUTTON_TEST_ID),
).toBeVisible();

const confirmButton = screen.getByTestId(
ORDER_OKMS_TC_CONFIRM_BUTTON_TEST_ID,
);
expect(confirmButton).toBeVisible();
expect(confirmButton).toHaveAttribute('is-disabled', 'true');
});

it('should enable confirm button on condition approval', async () => {
// GIVEN
await renderOrderOkmsModal();
await assertTextVisibility(
labels.secretManager.create.create_domain_tc_title,
);

// WHEN
await clickOnConfirmCheckbox();

// THEN
const confirmButton = screen.getByTestId(
ORDER_OKMS_TC_CONFIRM_BUTTON_TEST_ID,
);
expect(confirmButton).toHaveAttribute('is-disabled', 'false');
});

it('should show a loading button on confirmation', async () => {
const user = userEvent.setup();

// GIVEN
vi.mocked(postOrderCartCartIdCheckout).mockImplementation(
() => new Promise(() => {}),
);
await renderOrderOkmsModal();
await assertTextVisibility(
labels.secretManager.create.create_domain_tc_title,
);

// WHEN
await clickOnConfirmCheckbox();
const confirmButton = await clickOnConfirmButton(user);

// THEN
await waitFor(() => {
expect(confirmButton).toHaveAttribute('is-loading', 'true');
});
});

it('should close the modal on success', async () => {
const user = userEvent.setup();
// GIVEN
vi.mocked(postOrderCartCartIdCheckout).mockResolvedValueOnce(
{} as AxiosResponse<Order>,
);

await renderOrderOkmsModal();
await assertTextVisibility(
labels.secretManager.create.create_domain_tc_title,
);

// WHEN
await clickOnConfirmCheckbox();
await clickOnConfirmButton(user);

// THEN
const state: OkmsRegionOrderSuccessful = {
orderRegion: mockedRegion,
};

await waitFor(() => {
expect(navigate).toHaveBeenCalledTimes(1);
});
expect(navigate).toHaveBeenCalledWith('..', { state });
});

it('should display a notification on error', async () => {
const user = userEvent.setup();
// GIVEN
const mockError = new Error('Failed to submit order');
vi.mocked(postOrderCartCartIdCheckout).mockRejectedValueOnce(mockError);

await renderOrderOkmsModal();
await assertTextVisibility(
labels.secretManager.create.create_domain_tc_title,
);

// WHEN
await clickOnConfirmCheckbox();
await clickOnConfirmButton(user);

// THEN
await assertTextVisibility(
labels.common.error.error_message.replace(
'{{message}}',
mockError.message,
),
);
});
});
});
Loading
Loading