@centreon/ui 26.10.8 → 26.10.10

package/src/components/ItemComposition/ItemComposition.browser.test.tsx

@@ -0,0 +1,172 @@
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ItemComposition } from '.';
+import type { Props } from './ItemComposition';
+
+interface InitializeProps extends Partial<Props> {
+  deleteButtonHidden?: boolean;
+}
+
+interface Callbacks {
+  addItem: ReturnType<typeof rs.fn>;
+  deleteItem: ReturnType<typeof rs.fn>;
+}
+
+const initialize = ({
+  deleteButtonHidden,
+  ...props
+}: InitializeProps): Callbacks => {
+  const addItem = rs.fn();
+  const deleteItem = rs.fn();
+
+  render(
+    <ItemComposition {...props} labelAdd="Add" onAddItem={addItem}>
+      <ItemComposition.Item
+        deleteButtonHidden={deleteButtonHidden}
+        labelDelete="Delete"
+        onDeleteItem={deleteItem}
+      >
+        <div>Item 1</div>
+      </ItemComposition.Item>
+      <ItemComposition.Item
+        deleteButtonHidden={deleteButtonHidden}
+        labelDelete="Delete"
+        onDeleteItem={deleteItem}
+      >
+        <div>Item 2</div>
+      </ItemComposition.Item>
+    </ItemComposition>
+  );
+
+  return {
+    addItem,
+    deleteItem
+  };
+};
+
+// Both items are visible, Item 1 before Item 2.
+const expectItemsInOrder = (): void => {
+  const item1 = screen.getByText('Item 1');
+  const item2 = screen.getByText('Item 2');
+
+  expect(item1).toBeVisible();
+  expect(item2).toBeVisible();
+  expect(
+    item1.compareDocumentPosition(item2) & Node.DOCUMENT_POSITION_FOLLOWING
+  ).toBeTruthy();
+};
+
+const expectAddButtonWithIcon = (): void => {
+  const addButton = screen.getByTestId('Add');
+
+  expect(addButton).toBeVisible();
+  expect(addButton).toHaveTextContent('Add');
+  expect(addButton.querySelector('[data-testid="AddIcon"]')).toBeVisible();
+};
+
+describe('ItemComposition', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays the component', () => {
+    initialize({});
+
+    expect(screen.getByText('Item 1')).toBeVisible();
+    expect(screen.getByText('Item 2')).toBeVisible();
+    expect(screen.getAllByTestId('Delete')).toHaveLength(2);
+    expect(screen.getByTestId('Add')).toBeEnabled();
+
+    expectItemsInOrder();
+    expectAddButtonWithIcon();
+    screen.getAllByTestId('Delete').forEach((deleteButton) => {
+      expect(deleteButton).toBeVisible();
+    });
+    expect(document.querySelector('[data-linked]')).not.toBeInTheDocument();
+  });
+
+  it('displays the component with a secondary label', () => {
+    initialize({ secondaryLabel: 'Secondary label' });
+
+    expect(screen.getByText('Secondary label')).toBeVisible();
+
+    // The secondary label is on the right of the add button.
+    expectItemsInOrder();
+    expectAddButtonWithIcon();
+    expect(
+      screen.getByText('Secondary label').getBoundingClientRect().left
+    ).toBeGreaterThan(screen.getByTestId('Add').getBoundingClientRect().right);
+  });
+
+  it('displays add button as hidden when the prop is set to true', () => {
+    initialize({ addbuttonDisabled: true });
+
+    expect(screen.getByTestId('Add')).toBeDisabled();
+
+    expectItemsInOrder();
+    expect(screen.getByTestId('Add')).toBeVisible();
+  });
+
+  it('does not display the add button when the prop is set to true', () => {
+    initialize({ addButtonHidden: true });
+
+    expect(screen.queryByTestId('Add')).not.toBeInTheDocument();
+
+    expectItemsInOrder();
+    screen.getAllByTestId('Delete').forEach((deleteButton) => {
+      expect(deleteButton).toBeVisible();
+    });
+  });
+
+  it('does not display the delete button when the prop is set to true', () => {
+    initialize({ deleteButtonHidden: true });
+
+    // The delete buttons are kept in the page with `display: none`: none of
+    // them is displayed.
+    const deleteButtons = screen.queryAllByTestId('Delete');
+
+    expect(deleteButtons).toHaveLength(2);
+    deleteButtons.forEach((deleteButton) => {
+      expect(deleteButton).not.toBeVisible();
+    });
+
+    expectItemsInOrder();
+    expectAddButtonWithIcon();
+  });
+
+  it('calls the add function when the button is clicked', async () => {
+    const { addItem } = initialize({});
+
+    await userEvent.click(screen.getByTestId('Add'));
+
+    expect(addItem).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls the delete function when the button is clicked', async () => {
+    const { deleteItem } = initialize({});
+
+    await userEvent.click(screen.getAllByTestId('Delete')[1]);
+
+    expect(deleteItem).toHaveBeenCalledTimes(1);
+  });
+
+  it('displays items as linked when the prop is set to true', () => {
+    initialize({ displayItemsAsLinked: true });
+
+    expect(document.querySelector('[data-linked]')).toBeVisible();
+
+    // The link icon is on the left of the items.
+    expectItemsInOrder();
+    expect(screen.getByTestId('LinkIcon')).toBeVisible();
+    expect(
+      (
+        document.querySelector('[data-linked]') as HTMLElement
+      ).getBoundingClientRect().right
+    ).toBeLessThanOrEqual(
+      screen.getByText('Item 1').getBoundingClientRect().left
+    );
+  });
+});

package/src/components/Layout/PageLayout.browser.test.tsx

@@ -0,0 +1,114 @@
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { T } from 'ramda';
+
+import { PageHeader } from '..';
+import { PageLayout } from '.';
+import { AreaIndicator } from './AreaIndicator';
+
+const initialize = (): void => {
+  render(
+    <PageLayout>
+      <PageLayout.Header>
+        <PageHeader>
+          <PageHeader.Menu>
+            <PageLayout.QuickAccess
+              create={rs.fn()}
+              elements={[
+                {
+                  id: 1,
+                  name: 'Entity'
+                }
+              ]}
+              goBack={rs.fn()}
+              isActive={T}
+              labels={{
+                create: 'Create',
+                goBack: 'Go back'
+              }}
+              navigateToElement={rs.fn()}
+            />
+          </PageHeader.Menu>
+          <PageHeader.Main>
+            <PageHeader.Title description="Description" title="Title" />
+          </PageHeader.Main>
+          <PageHeader.Actions>Actions</PageHeader.Actions>
+        </PageHeader>
+      </PageLayout.Header>
+      <PageLayout.Body>
+        <PageLayout.Actions>
+          <AreaIndicator name="Body actions" />
+        </PageLayout.Actions>
+        <h1>Content</h1>
+      </PageLayout.Body>
+    </PageLayout>
+  );
+};
+
+describe('Page layout', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+    initialize();
+  });
+
+  it('displays the page layout', async () => {
+    // The header (quick access button, title, description, actions) above
+    // the body (actions area, then content), and the quick access menu closed.
+    const header = document.querySelector('#header') as HTMLElement;
+    const body = document.querySelector('#page-body') as HTMLElement;
+
+    const title = await within(header).findByRole('heading', {
+      name: 'page header title'
+    });
+
+    expect(title).toBeVisible();
+    expect(title).toHaveTextContent(/^Title$/);
+    expect(within(header).getByText('Description')).toBeVisible();
+    expect(within(header).getByText('Actions')).toBeVisible();
+    expect(within(header).getByTestId('quickaccess')).toBeVisible();
+    expect(within(header).getByTestId('quickaccess')).toHaveAttribute(
+      'data-is-active',
+      'false'
+    );
+
+    const bodyActions = within(body).getByText('Body actions');
+    const content = within(body).getByRole('heading', { name: 'Content' });
+
+    expect(bodyActions).toBeVisible();
+    expect(content).toBeVisible();
+    expect(header.getBoundingClientRect().bottom).toBeLessThanOrEqual(
+      body.getBoundingClientRect().top
+    );
+    expect(bodyActions.getBoundingClientRect().bottom).toBeLessThanOrEqual(
+      content.getBoundingClientRect().top
+    );
+    expect(screen.queryByText('Entity')).not.toBeInTheDocument();
+  });
+
+  it('opens the quick access poppin when the corresponding logo is displayed', async () => {
+    await userEvent.click(await screen.findByTestId('quickaccess'));
+
+    expect(await screen.findByText('Entity')).toBeVisible();
+    expect(await screen.findByText('Create')).toBeVisible();
+    expect(await screen.findByText('Go back')).toBeVisible();
+
+    // The button shown as open, the active element selected, and "Go back"
+    // before "Create".
+    expect(screen.getByTestId('quickaccess')).toHaveAttribute(
+      'data-is-active',
+      'true'
+    );
+    expect(screen.getByRole('menuitem', { name: 'Entity' })).toHaveClass(
+      'Mui-selected'
+    );
+    expect(
+      screen.getByRole('button', { name: 'Go back' }).getBoundingClientRect()
+        .right
+    ).toBeLessThanOrEqual(
+      screen.getByRole('button', { name: 'Create' }).getBoundingClientRect()
+        .left
+    );
+  });
+});

package/src/components/Modal/ConfirmationModal/ConfirmationModal.browser.test.tsx

@@ -0,0 +1,237 @@
+import { Button } from '@mui/material';
+
+import { rs } from '@rstest/core';
+import { render } from '@test-setup/render';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { atom, createStore, Provider, useSetAtom } from 'jotai';
+
+import {
+  ConfirmationModal,
+  type ConfirmationModalProps
+} from './ConfirmationModal';
+
+const testAtom = atom<string | null>(null);
+
+const buttonLabel = 'Click to open modal';
+
+const TestComponent = (args: ConfirmationModalProps<string>): JSX.Element => {
+  const setAtom = useSetAtom(testAtom);
+
+  return (
+    <>
+      <Button onClick={() => setAtom('John')}>{buttonLabel}</Button>
+      <ConfirmationModal<string> {...args} />
+    </>
+  );
+};
+
+const staticLabels = {
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  description: 'Description',
+  title: 'Title'
+};
+
+const dynamicLabels = {
+  cancel: 'Cancel',
+  confirm: 'Confirm',
+  description: (data: string | null): string => `Description ${data}`,
+  title: (data: string | null): string => `Hello ${data}`
+};
+
+type InitializeProps = Pick<
+  ConfirmationModalProps<string>,
+  'labels' | 'disabled' | 'hasCloseButton' | 'isDanger'
+>;
+
+interface InitializeResult {
+  cancel: ReturnType<typeof rs.fn>;
+  confirm: ReturnType<typeof rs.fn>;
+}
+
+const initialize = (props: InitializeProps): InitializeResult => {
+  const store = createStore();
+
+  const cancel = rs.fn();
+  const confirm = rs.fn();
+
+  render(
+    <Provider store={store}>
+      <TestComponent
+        {...props}
+        atom={testAtom}
+        onCancel={cancel}
+        onConfirm={confirm}
+      />
+    </Provider>
+  );
+
+  return {
+    cancel,
+    confirm
+  };
+};
+
+const openModal = async (): Promise<void> => {
+  await userEvent.click(screen.getByText(buttonLabel));
+};
+
+// The open modal: the title, the description, then the Cancel and Confirm
+// buttons, in that order.
+const expectModalContent = async ({
+  description,
+  title
+}: {
+  description: string;
+  title: string;
+}): Promise<void> => {
+  const dialog = await screen.findByRole('dialog');
+
+  expect(screen.getByTestId('modal-header')).toHaveTextContent(
+    new RegExp(`^${title}$`)
+  );
+  expect(dialog).toHaveTextContent(description);
+  expect(screen.getByTestId('cancel')).toBeVisible();
+  expect(screen.getByTestId('cancel')).toHaveTextContent(/^Cancel$/);
+  expect(screen.getByTestId('confirm')).toBeVisible();
+  expect(screen.getByTestId('confirm')).toHaveTextContent(/^Confirm$/);
+  expect(
+    screen
+      .getByTestId('cancel')
+      .compareDocumentPosition(screen.getByTestId('confirm'))
+  ).toBe(Node.DOCUMENT_POSITION_FOLLOWING);
+};
+
+const expectModalClosed = async (): Promise<void> => {
+  await waitFor(() => {
+    expect(screen.queryByText('Title')).not.toBeInTheDocument();
+  });
+  expect(screen.queryByRole('dialog')).not.toBeInTheDocument();
+  expect(screen.getByText(buttonLabel)).toBeVisible();
+};
+
+describe('Confirmation modal', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays the modal with static labels', async () => {
+    initialize({ labels: staticLabels });
+
+    await openModal();
+
+    expect(await screen.findByText('Title')).toBeVisible();
+    expect(screen.getByText('Description')).toBeVisible();
+    expect(screen.getByLabelText('close')).toBeVisible();
+
+    await expectModalContent({ description: 'Description', title: 'Title' });
+    expect(screen.getByTestId('confirm')).toBeEnabled();
+    expect(screen.getByTestId('confirm')).toHaveAttribute(
+      'data-is-danger',
+      'false'
+    );
+  });
+
+  it('displays the modal with dynamic labels', async () => {
+    initialize({ labels: dynamicLabels });
+
+    await openModal();
+
+    expect(await screen.findByText('Hello John')).toBeVisible();
+    expect(screen.getByText('Description John')).toBeVisible();
+
+    await expectModalContent({
+      description: 'Description John',
+      title: 'Hello John'
+    });
+    expect(screen.getByLabelText('close')).toBeVisible();
+  });
+
+  it('displays the confirm button as disabled when a prop is set', async () => {
+    initialize({ disabled: true, labels: staticLabels });
+
+    await openModal();
+
+    expect(await screen.findByText('Confirm')).toBeVisible();
+    expect(screen.getByTestId('confirm')).toBeDisabled();
+
+    await expectModalContent({ description: 'Description', title: 'Title' });
+    expect(screen.getByTestId('cancel')).toBeEnabled();
+  });
+
+  it('displays the confirm button as danger when a prop is set', async () => {
+    initialize({ isDanger: true, labels: staticLabels });
+
+    await openModal();
+
+    expect(await screen.findByText('Confirm')).toBeVisible();
+    expect(screen.getByTestId('confirm')).toHaveAttribute(
+      'data-is-danger',
+      'true'
+    );
+
+    await expectModalContent({ description: 'Description', title: 'Title' });
+
+    // A red Confirm button: its background is the theme's error colour.
+    const errorColorProbe = document.createElement('div');
+    errorColorProbe.style.backgroundColor = 'var(--color-error-main)';
+    document.body.appendChild(errorColorProbe);
+    const errorColor = getComputedStyle(errorColorProbe).backgroundColor;
+    errorColorProbe.remove();
+
+    expect(errorColor).not.toBe('rgba(0, 0, 0, 0)');
+    expect(
+      getComputedStyle(screen.getByTestId('confirm')).backgroundColor
+    ).toBe(errorColor);
+  });
+
+  it('displays the modal without the close button when a prop is set', async () => {
+    initialize({ hasCloseButton: false, labels: staticLabels });
+
+    await openModal();
+
+    await expectModalContent({ description: 'Description', title: 'Title' });
+    expect(screen.queryByLabelText('close')).not.toBeInTheDocument();
+  });
+
+  it('closes the modal when the close button is clicked', async () => {
+    initialize({ labels: staticLabels });
+
+    await openModal();
+
+    expect(await screen.findByText('Title')).toBeVisible();
+
+    await userEvent.click(screen.getByLabelText('close'));
+
+    await expectModalClosed();
+  });
+
+  it('closes the modal when the cancel button is clicked', async () => {
+    const { cancel } = initialize({ labels: staticLabels });
+
+    await openModal();
+
+    expect(await screen.findByText('Title')).toBeVisible();
+
+    await userEvent.click(screen.getByText('Cancel'));
+
+    expect(cancel).toHaveBeenCalledWith('John');
+
+    await expectModalClosed();
+  });
+
+  it('closes the modal when the confirm button is clicked', async () => {
+    const { confirm } = initialize({ labels: staticLabels });
+
+    await openModal();
+
+    expect(await screen.findByText('Title')).toBeVisible();
+
+    await userEvent.click(screen.getByText('Confirm'));
+
+    expect(confirm).toHaveBeenCalledWith('John');
+
+    await expectModalClosed();
+  });
+});