-
Notifications
You must be signed in to change notification settings - Fork 98
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(vrack-services): components unit tests
ref: MANAGER-16104 Signed-off-by: Quentin Pavy <[email protected]>
- Loading branch information
Quentin Pavy
committed
Dec 6, 2024
1 parent
7b1f4fb
commit 54880ec
Showing
23 changed files
with
685 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import { vi } from 'vitest'; | ||
| import '@testing-library/jest-dom'; | ||
|
|
||
| vi.mock('react-i18next', () => ({ | ||
| useTranslation: () => ({ | ||
| t: (translationKey: string) => translationKey, | ||
| i18n: { language: 'fr_FR' }, | ||
| }), | ||
| })); | ||
|
|
||
| vi.mock('@ovh-ux/manager-react-shell-client', async (importOriginal) => { | ||
| const original: typeof import('@ovh-ux/manager-react-shell-client') = await importOriginal(); | ||
| return { | ||
| ...original, | ||
| useOvhTracking: () => ({ trackClick: vi.fn(), trackPage: vi.fn() }), | ||
| }; | ||
| }); | ||
|
|
||
| vi.mock('react-router-dom', async (importOriginal) => { | ||
| const original: typeof import('react-router-dom') = await importOriginal(); | ||
| return { | ||
| ...original, | ||
| useSearchParams: () => [{ get: (str: string) => str }], | ||
| useNavigate: vi.fn(), | ||
| useLocation: vi.fn().mockReturnValue({ | ||
| pathname: 'pathname', | ||
| }), | ||
| }; | ||
| }); |
23 changes: 23 additions & 0 deletions
23
packages/manager/apps/vrack-services/src/components/Breadcrumb.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
| import { render, waitFor } from '@testing-library/react'; | ||
| import { Breadcrumb, BreadcrumbProps } from './Breadcrumb.component'; | ||
|
|
||
| /** Render */ | ||
| const renderComponent = ({ items, overviewUrl }: BreadcrumbProps) => { | ||
| return render(<Breadcrumb items={items} overviewUrl={overviewUrl} />); | ||
| }; | ||
|
|
||
| /** END RENDER */ | ||
|
|
||
| describe('Breadcrumb Component', () => { | ||
| it('should display ODS breadcrumb', async () => { | ||
| const { getByRole } = renderComponent({ | ||
| items: [], | ||
| }); | ||
|
|
||
| await waitFor(() => { | ||
| expect(getByRole('navigation')).toBeDefined(); | ||
| }); | ||
| }); | ||
| }); |
106 changes: 106 additions & 0 deletions
106
packages/manager/apps/vrack-services/src/components/CreateVrack.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,106 @@ | ||
| import React from 'react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
| import { render, fireEvent, waitFor, act } from '@testing-library/react'; | ||
| import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; | ||
| import { DetailedOrder } from '@ovh-ux/manager-module-order'; | ||
| import { | ||
| ShellContext, | ||
| ShellContextType, | ||
| } from '@ovh-ux/manager-react-shell-client'; | ||
| import { CreateVrack, CreateVrackProps } from './CreateVrack.component'; | ||
| import { createVrackOnlyCart } from '@/utils/cart'; | ||
|
|
||
| const queryClient = new QueryClient(); | ||
|
|
||
| const shellContext = { | ||
| environment: { | ||
| user: { ovhSubsidiary: 'FR' }, | ||
| }, | ||
| }; | ||
|
|
||
| const renderComponent = ({ closeModal }: CreateVrackProps) => { | ||
| return render( | ||
| <QueryClientProvider client={queryClient}> | ||
| <ShellContext.Provider | ||
| value={(shellContext as unknown) as ShellContextType} | ||
| > | ||
| <CreateVrack closeModal={closeModal} /> | ||
| </ShellContext.Provider> | ||
| </QueryClientProvider>, | ||
| ); | ||
| }; | ||
|
|
||
| /** MOCKS */ | ||
| const closeModalMock = vi.fn(); | ||
|
|
||
| vi.mock('@/utils/cart', async (importOriginal) => { | ||
| const original: typeof import('@/utils/cart') = await importOriginal(); | ||
| return { | ||
| ...original, | ||
| createVrackOnlyCart: vi.fn(), | ||
| }; | ||
| }); | ||
|
|
||
| vi.mock('@ovh-ux/manager-module-order', async (importOriginal) => { | ||
| const original: typeof import('@ovh-ux/manager-module-order') = await importOriginal(); | ||
| return { | ||
| ...original, | ||
| useOrderPollingStatus: () => ({ | ||
| data: [] as DetailedOrder[], | ||
| }), | ||
| }; | ||
| }); | ||
|
|
||
| /** END MOCKS */ | ||
|
|
||
| describe('CreateVrack Component', () => { | ||
| it('should display the contracts after click the button create a vrack', async () => { | ||
| vi.mocked(createVrackOnlyCart).mockResolvedValue({ | ||
| contractList: [ | ||
| { | ||
| name: 'test', | ||
| url: 'test', | ||
| content: 'test', | ||
| }, | ||
| { | ||
| name: 'test2', | ||
| url: 'test2', | ||
| content: 'test2', | ||
| }, | ||
| ], | ||
| cartId: '1', | ||
| }); | ||
|
|
||
| const { getByText } = renderComponent({ closeModal: closeModalMock }); | ||
| const button = await getByText('modalCreateNewVrackButtonLabel'); | ||
| await act(() => { | ||
| fireEvent.click(button); | ||
| }); | ||
|
|
||
| await waitFor(() => { | ||
| expect(createVrackOnlyCart).toHaveBeenCalledWith('FR'); | ||
| expect(getByText('modalConfirmContractsCheckboxLabel')).not.toBeNull(); | ||
| expect( | ||
| getByText('modalVrackCreationSubmitOrderButtonLabel'), | ||
| ).toBeDefined(); | ||
| }); | ||
| }); | ||
|
|
||
| it('should display an error message if cart creation fail', async () => { | ||
| vi.mocked(createVrackOnlyCart).mockRejectedValue({ | ||
| response: { data: { message: 'api-error' } }, | ||
| }); | ||
|
|
||
| const { getByText } = renderComponent({ closeModal: closeModalMock }); | ||
| const button = await getByText('modalCreateNewVrackButtonLabel'); | ||
|
|
||
| await act(() => { | ||
| fireEvent.click(button); | ||
| }); | ||
|
|
||
| await waitFor(() => { | ||
| expect(createVrackOnlyCart).toHaveBeenCalledWith('FR'); | ||
| expect(getByText('api-error')).toBeDefined(); | ||
| }); | ||
| }); | ||
| }); |
61 changes: 61 additions & 0 deletions
61
packages/manager/apps/vrack-services/src/components/DeliveringMessages.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,61 @@ | ||
| import React from 'react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
| import { render } from '@testing-library/react'; | ||
| import { | ||
| ShellContext, | ||
| ShellContextType, | ||
| } from '@ovh-ux/manager-react-shell-client'; | ||
| import { DetailedOrder } from '@ovh-ux/manager-module-order'; | ||
| import { ErrorBannerProps, ErrorPage } from './ErrorPage.component'; | ||
| import { | ||
| DeliveringMessages, | ||
| DeliveringMessagesProps, | ||
| } from './DeliveringMessages.component'; | ||
|
|
||
| /** MOCKS */ | ||
| vi.mock('react-i18next', () => ({ | ||
| useTranslation: () => ({ | ||
| t: (translationKey: string, params?: any) => { | ||
| const flattenParams = params | ||
| ? Object.keys(params).reduce((previous, current) => { | ||
| return `${previous} | ${current}:${params[current]}`; | ||
| }, '') | ||
| : undefined; | ||
| return flattenParams | ||
| ? `${translationKey}${flattenParams}` | ||
| : translationKey; | ||
| }, | ||
| i18n: { language: 'fr_FR' }, | ||
| }), | ||
| })); | ||
| /** END MOCKS */ | ||
| /** Render */ | ||
| const renderComponent = ({ orders }: { orders?: DetailedOrder[] }) => { | ||
| return render(<DeliveringMessages messageKey="order-text" orders={orders} />); | ||
| }; | ||
|
|
||
| /** END RENDER */ | ||
|
|
||
| describe('DeliveringMessages Component', () => { | ||
| it('should display list of ongoing orders', async () => { | ||
| const { getByText } = renderComponent({ | ||
| orders: [ | ||
| { | ||
| date: '2024-12-06T12:10:00.000Z', | ||
| orderId: 1, | ||
| status: 'delivering', | ||
| } as DetailedOrder, | ||
| ], | ||
| }); | ||
|
|
||
| const date = new Date('2024-12-06T12:10:00.000Z'); | ||
|
|
||
| expect( | ||
| getByText( | ||
| `order-text | date:${date.toLocaleDateString( | ||
| 'fr-FR', | ||
| )} | time:${date.getHours()}:${date.getMinutes()} | status:orderStatus-delivering`, | ||
| ), | ||
| ).toBeDefined(); | ||
| }); | ||
| }); |
51 changes: 51 additions & 0 deletions
51
packages/manager/apps/vrack-services/src/components/ErrorPage.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,51 @@ | ||
| import React from 'react'; | ||
| import { describe, expect, it, vi } from 'vitest'; | ||
| import { render } from '@testing-library/react'; | ||
| import { | ||
| ShellContext, | ||
| ShellContextType, | ||
| } from '@ovh-ux/manager-react-shell-client'; | ||
| import { ErrorBannerProps, ErrorPage } from './ErrorPage.component'; | ||
|
|
||
| /** Render */ | ||
| const shellContext = { | ||
| environment: { | ||
| user: { ovhSubsidiary: 'FR' }, | ||
| }, | ||
| shell: { | ||
| tracking: { | ||
| trackClick: vi.fn(), | ||
| trackPage: vi.fn(), | ||
| init: vi.fn(), | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| const renderComponent = ({ error }: ErrorBannerProps) => { | ||
| return render( | ||
| <ShellContext.Provider | ||
| value={(shellContext as unknown) as ShellContextType} | ||
| > | ||
| <ErrorPage error={error} /> | ||
| </ShellContext.Provider>, | ||
| ); | ||
| }; | ||
|
|
||
| /** END RENDER */ | ||
|
|
||
| describe('ErrorPage Component', () => { | ||
| it('should display an api error message with queryid', async () => { | ||
| const { getByText } = renderComponent({ | ||
| error: { | ||
| response: { | ||
| data: { message: 'api-error-message' }, | ||
| headers: { | ||
| 'x-ovh-queryid': 'api-error-queryid', | ||
| }, | ||
| }, | ||
| }, | ||
| }); | ||
| expect(getByText('api-error-message')).toBeDefined(); | ||
| expect(getByText('api-error-queryid', { exact: false })).toBeDefined(); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.