diff --git a/packages/manager/apps/pci-instances/src/__mocks__/instance/constants.ts b/packages/manager/apps/pci-instances/src/__mocks__/instance/constants.ts new file mode 100644 index 000000000000..e33fb4cb8e39 --- /dev/null +++ b/packages/manager/apps/pci-instances/src/__mocks__/instance/constants.ts @@ -0,0 +1,21 @@ +import { TInstance } from '@/data/hooks/instance/useInstances'; + +export const mockedInstance: TInstance = { + id: '12345', + name: 'foo', + flavorId: '678910', + flavorName: 'b2-8', + imageId: '11121314', + imageName: 'linux', + region: 'BHS', + status: { severity: 'success', state: 'ACTIVE' }, + addresses: new Map([ + ['private', [{ ip: '123.000.00', version: 1, gatewayIp: '' }]], + ['public', [{ ip: '777.000.00', version: 2, gatewayIp: '' }]], + ]), +}; + +export const mockedInstanceWithEmptyRegion: TInstance = { + ...mockedInstance, + region: '', +}; diff --git a/packages/manager/apps/pci-instances/src/components/datagrid/cell/LoadingCell.spec.tsx b/packages/manager/apps/pci-instances/src/components/datagrid/cell/LoadingCell.spec.tsx new file mode 100644 index 000000000000..280558c55bb7 --- /dev/null +++ b/packages/manager/apps/pci-instances/src/components/datagrid/cell/LoadingCell.spec.tsx @@ -0,0 +1,29 @@ +import { render, screen } from '@testing-library/react'; +import { describe, test } from 'vitest'; +import { LoadingCell } from './LoadingCell.component'; + +describe('Considering the loading cell component', () => { + test.each` + isLoading + ${false} + ${true} + `( + 'Should render component correctly depending on isLoading property <$isLoading>', + ({ isLoading }) => { + render( + +
Foo
+
, + ); + const loadingCellElement = screen.getByTestId('loading-cell'); + expect(loadingCellElement).toBeInTheDocument(); + if (isLoading) { + const skeletonElement = screen.getByTestId('skeleton'); + expect(skeletonElement).toBeTruthy(); + } else { + const childrenElement = screen.getByText('Foo'); + expect(childrenElement).toBeTruthy(); + } + }, + ); +}); diff --git a/packages/manager/apps/pci-instances/src/components/datagrid/cell/TextCell.spec.tsx b/packages/manager/apps/pci-instances/src/components/datagrid/cell/TextCell.spec.tsx new file mode 100644 index 000000000000..1eb845abd1b5 --- /dev/null +++ b/packages/manager/apps/pci-instances/src/components/datagrid/cell/TextCell.spec.tsx @@ -0,0 +1,23 @@ +import { render, screen } from '@testing-library/react'; +import { describe } from 'vitest'; +import { BaseTextCell, TextCell } from './TextCell.component'; + +describe('Considering the text cell components', () => { + test('Should render BaseTextCell component correctly with children', () => { + render( + +
Foo
+
, + ); + const baseTextCellElement = screen.getByTestId('base-text-cell'); + expect(baseTextCellElement).toBeInTheDocument(); + const childElement = screen.getByText('Foo'); + expect(childElement).toBeInTheDocument(); + }); + + test('Should render TextCell component correctly with label', () => { + render(); + const textCellElement = screen.getByText('foo'); + expect(textCellElement).toBeInTheDocument(); + }); +}); diff --git a/packages/manager/apps/pci-instances/src/components/menu/ActionsMenu.spec.tsx b/packages/manager/apps/pci-instances/src/components/menu/ActionsMenu.spec.tsx new file mode 100644 index 000000000000..e08c50820568 --- /dev/null +++ b/packages/manager/apps/pci-instances/src/components/menu/ActionsMenu.spec.tsx @@ -0,0 +1,42 @@ +import { describe, test, vi } from 'vitest'; +import { fireEvent, render, screen } from '@testing-library/react'; +import { ActionsMenu, TActionsMenuItem } from './ActionsMenu.component'; + +const onMenuItemClickMock = vi.fn(); + +const testItems: TActionsMenuItem[] = [ + { + label: 'foo', + href: '/foo/bar', + }, + { + label: 'bar', + onMenuItemClick: onMenuItemClickMock, + }, +]; + +const renderActionsMenu = (items: TActionsMenuItem[]) => { + render(); +}; + +describe('Considering the ActionsMenu component', () => { + test('Should render only action menu button with Icon as first child if items prop is []', () => { + renderActionsMenu([]); + const actionsMenuButtonElement = screen.getByTestId('actions-menu-button'); + expect(actionsMenuButtonElement).toBeInTheDocument(); + const childElements = actionsMenuButtonElement.querySelectorAll('*'); + expect(childElements.length).toBe(1); + }); + + test('Should render the list of items correctly if provided', () => { + renderActionsMenu(testItems); + const menuItemElements = screen.getAllByTestId('actions-menu-item'); + expect(menuItemElements.length).toBe(2); + const [firstChild, secondChild] = menuItemElements; + expect(firstChild).toHaveTextContent('foo'); + expect(firstChild).toHaveAttribute('href', '/foo/bar'); + expect(secondChild).toHaveTextContent('bar'); + fireEvent.click(secondChild); + expect(onMenuItemClickMock).toHaveBeenCalled(); + }); +}); diff --git a/packages/manager/apps/pci-instances/src/components/navigation/GoBack.spec.tsx b/packages/manager/apps/pci-instances/src/components/navigation/GoBack.spec.tsx new file mode 100644 index 000000000000..ed0ecc7078b4 --- /dev/null +++ b/packages/manager/apps/pci-instances/src/components/navigation/GoBack.spec.tsx @@ -0,0 +1,33 @@ +import { describe, test, vi } from 'vitest'; +import { render, screen } from '@testing-library/react'; +import { ODS_ICON_NAME } from '@ovhcloud/ods-components'; +import { GoBack } from './GoBack.component'; + +const backHref = '..'; + +vi.mock('react-router-dom', () => ({ + useHref: () => backHref, +})); + +const getGoBackElement = () => { + render(); + return screen.getByText('pci_instances_common_go_back'); +}; + +describe('Considering the GoBack component', () => { + test('Should be rendered with correct class and href attribute', () => { + const goBackElement = getGoBackElement(); + expect(goBackElement).toBeInTheDocument(); + expect(goBackElement).toHaveClass('mt-12 mb-3'); + expect(goBackElement).toHaveAttribute('href', backHref); + }); + + test('Should contain icon as first child element', () => { + const goBackElement = getGoBackElement(); + expect(goBackElement.firstChild).toBeTruthy(); + expect(goBackElement.firstChild).toHaveAttribute( + 'name', + ODS_ICON_NAME.ARROW_LEFT, + ); + }); +}); diff --git a/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/ActionsCell.spec.tsx b/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/ActionsCell.spec.tsx new file mode 100644 index 000000000000..232685f05a1b --- /dev/null +++ b/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/ActionsCell.spec.tsx @@ -0,0 +1,16 @@ +import { render, screen } from '@testing-library/react'; +import { describe, vi } from 'vitest'; +import { ActionsCell } from './ActionsCell.component'; +import { mockedInstance } from '@/__mocks__/instance/constants'; + +vi.mock('react-router-dom', () => ({ + useHref: () => mockedInstance.id, +})); + +describe('Considering the ActionsCell component', () => { + test('Should render component correctly', () => { + render(); + const actionsMenuElement = screen.getByTestId('actions-menu-button'); + expect(actionsMenuElement).toBeInTheDocument(); + }); +}); diff --git a/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/AddressesCell.spec.tsx b/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/AddressesCell.spec.tsx new file mode 100644 index 000000000000..a2d08f4e487b --- /dev/null +++ b/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/AddressesCell.spec.tsx @@ -0,0 +1,26 @@ +import { render, screen } from '@testing-library/react'; +import { describe, test } from 'vitest'; +import { AddressesCell } from './AddressesCell.component'; +import { TAddress } from '@/data/hooks/instance/useInstances'; + +const addresses: TAddress[] = [ + { + ip: '123456', + version: 1, + gatewayIp: '', + }, + { + ip: '78910', + version: 2, + gatewayIp: '', + }, +]; + +describe('Considering the AddressesCell component', () => { + test('Should render the component with given addresses', () => { + render(); + addresses.forEach((address) => { + expect(screen.getByText(address.ip)).toBeInTheDocument(); + }); + }); +}); diff --git a/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/NameIdCell.spec.tsx b/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/NameIdCell.spec.tsx new file mode 100644 index 000000000000..bb5c8b5269c4 --- /dev/null +++ b/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/NameIdCell.spec.tsx @@ -0,0 +1,19 @@ +import { render, screen } from '@testing-library/react'; +import { describe, test, vi } from 'vitest'; +import { NameIdCell } from './NameIdCell.component'; +import { mockedInstance } from '@/__mocks__/instance/constants'; + +vi.mock('react-router-dom', () => ({ + useHref: () => mockedInstance.id, +})); + +describe('Considering the NameIdCell component', () => { + test('Should render component with correct href and labels', () => { + render(); + const nameElement = screen.getByText(mockedInstance.name); + expect(nameElement).toBeInTheDocument(); + expect(nameElement).toHaveAttribute('href', mockedInstance.id); + const idElement = screen.getByText(mockedInstance.id); + expect(idElement).toBeInTheDocument(); + }); +}); diff --git a/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/StatusCell.spec.tsx b/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/StatusCell.spec.tsx new file mode 100644 index 000000000000..f5b68a0f2133 --- /dev/null +++ b/packages/manager/apps/pci-instances/src/pages/instances/datagrid/cell/StatusCell.spec.tsx @@ -0,0 +1,12 @@ +import { render, screen } from '@testing-library/react'; +import { describe, test } from 'vitest'; +import { mockedInstance } from '@/__mocks__/instance/constants'; +import { StatusCell } from './StatusCell.component'; + +describe('Considering the StatusCell component', () => { + test('Should render component correctly', () => { + render(); + const statusCellElement = screen.getByTestId('status-chip'); + expect(statusCellElement).toBeInTheDocument(); + }); +});