test(pci-instances): add test suites for components

ref:TAPC-1928
Signed-off-by: Frédéric Vilcot <[email protected]>

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: '',
+};

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(
+        <LoadingCell isLoading={isLoading}>
+          <div>Foo</div>
+        </LoadingCell>,
+      );
+      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();
+      }
+    },
+  );
+});

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(
+      <BaseTextCell>
+        <div>Foo</div>
+      </BaseTextCell>,
+    );
+    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(<TextCell isLoading={false} label="foo" />);
+    const textCellElement = screen.getByText('foo');
+    expect(textCellElement).toBeInTheDocument();
+  });
+});

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(<ActionsMenu items={items} />);
+};
+
+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();
+  });
+});

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(<GoBack />);
+  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,
+    );
+  });
+});

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(<ActionsCell instance={mockedInstance} isLoading={false} />);
+    const actionsMenuElement = screen.getByTestId('actions-menu-button');
+    expect(actionsMenuElement).toBeInTheDocument();
+  });
+});

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(<AddressesCell isLoading={false} addresses={addresses} />);
+    addresses.forEach((address) => {
+      expect(screen.getByText(address.ip)).toBeInTheDocument();
+    });
+  });
+});

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(<NameIdCell instance={mockedInstance} isLoading={false} />);
+    const nameElement = screen.getByText(mockedInstance.name);
+    expect(nameElement).toBeInTheDocument();
+    expect(nameElement).toHaveAttribute('href', mockedInstance.id);
+    const idElement = screen.getByText(mockedInstance.id);
+    expect(idElement).toBeInTheDocument();
+  });
+});

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(<StatusCell instance={mockedInstance} isLoading={false} />);
+    const statusCellElement = screen.getByTestId('status-chip');
+    expect(statusCellElement).toBeInTheDocument();
+  });
+});