@centreon/ui 26.12.1 → 26.12.2

package/src/api/useMutationQuery/useMutationQuery.browser.test.tsx

@@ -0,0 +1,154 @@
+import { rs } from '@rstest/core';
+import { interceptAPIRequest, waitForRequest } from '@test-setup/api';
+import { render } from '@test-setup/render';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import SnackbarProvider from '../../Snackbar/SnackbarProvider';
+import TestQueryProvider from '../TestQueryProvider';
+import useMutationQuery, { Method, type UseMutationQueryProps } from '.';
+
+interface Payload {
+  a: string;
+  b: number;
+  c: Array<string>;
+}
+
+type MutationProps = Omit<
+  UseMutationQueryProps<Payload, unknown>,
+  'getEndpoint'
+>;
+
+const TestComponent = (props: MutationProps): JSX.Element => {
+  const mutation = useMutationQuery<Payload, unknown>({
+    ...props,
+    getEndpoint: () => '/endpoint'
+  });
+
+  return (
+    <button
+      onClick={() =>
+        mutation.mutateAsync({ payload: { a: 'a', b: 2, c: ['arr', 'ay'] } })
+      }
+      type="button"
+    >
+      Send
+    </button>
+  );
+};
+
+interface InitializeProps {
+  isError?: boolean;
+  mutationProps: MutationProps & {
+    getEndpoint: () => string;
+  };
+}
+
+const initialize = ({
+  mutationProps,
+  isError = false
+}: InitializeProps): void => {
+  interceptAPIRequest({
+    alias: 'mutateEndpoint',
+    method: mutationProps.method,
+    path: './api/latest/endpoint',
+    response: isError
+      ? {
+          message: 'custom error message'
+        }
+      : undefined,
+    statusCode: isError ? 400 : 204
+  });
+
+  render(
+    <SnackbarProvider>
+      <TestQueryProvider>
+        <TestComponent {...mutationProps} />
+      </TestQueryProvider>
+    </SnackbarProvider>
+  );
+};
+
+describe('useMutationQuery', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  afterEach(() => {
+    rs.restoreAllMocks();
+  });
+
+  it('sends data to an endpoint', async () => {
+    // The recorded request has no headers: they are read from the call to
+    // `fetch` (the spy calls through).
+    const fetch = rs.spyOn(window, 'fetch');
+
+    initialize({
+      mutationProps: {
+        getEndpoint: () => '/endpoint',
+        method: Method.POST
+      }
+    });
+
+    await userEvent.click(screen.getByRole('button'));
+
+    const { request } = await waitForRequest('@mutateEndpoint');
+
+    expect(request.method).toBe('POST');
+    expect(request.body).toEqual({ a: 'a', b: 2, c: ['arr', 'ay'] });
+    expect(
+      new Headers(fetch.mock.calls[0][1]?.headers).get('content-type')
+    ).toBe('application/json');
+  });
+
+  it("shows an error from the API via the Snackbar and inside the browser's console when posting data to an endpoint", async () => {
+    const consoleError = rs
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined);
+
+    initialize({
+      isError: true,
+      mutationProps: {
+        getEndpoint: () => '/endpoint',
+        method: Method.POST
+      }
+    });
+
+    await userEvent.click(screen.getByRole('button'));
+
+    expect(await screen.findByText('custom error message')).toBeVisible();
+
+    expect(consoleError).toHaveBeenCalledWith(
+      'API Request: custom error message'
+    );
+  });
+
+  it('does not show any message via the Snackbar when the httpCodesBypassErrorSnackbar is passed when posting data to an API', async () => {
+    const consoleError = rs
+      .spyOn(console, 'error')
+      .mockImplementation(() => undefined);
+
+    initialize({
+      isError: true,
+      mutationProps: {
+        getEndpoint: () => '/endpoint',
+        httpCodesBypassErrorSnackbar: [400],
+        method: Method.POST
+      }
+    });
+
+    await userEvent.click(screen.getByRole('button'));
+
+    // The error is handled (and logged) once the answer is applied. The
+    // snackbar would show in a later render: it is given 500 ms to appear.
+    await waitFor(() => {
+      expect(consoleError).toHaveBeenCalledWith(
+        'API Request: custom error message'
+      );
+    });
+
+    await expect(
+      screen.findByText('custom error message', {}, { timeout: 500 })
+    ).rejects.toThrow();
+  });
+});

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

@@ -0,0 +1,120 @@
+import { render } from '@test-setup/render';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { CollapsibleItem, type Props } from './CollapsibleItem';
+
+const title = 'Title';
+
+const customizedTitle = <div>Customized title</div>;
+
+const initialize = ({ title, ...props }: Omit<Props, 'children'>): void => {
+  // The component also takes the accordion summary props, whose `title` is
+  // a string: its own `title` accepts an element as well.
+  render(
+    <CollapsibleItem {...props} title={title as string}>
+      Content
+    </CollapsibleItem>
+  );
+};
+
+const getExpandButton = (expanded: boolean): HTMLElement =>
+  document.querySelector(`button[aria-expanded="${expanded}"]`) as HTMLElement;
+
+const expectExpandIconVisible = (): void => {
+  expect(screen.getByTestId('ExpandMoreIcon')).toBeVisible();
+};
+
+// A string title is rendered as an h6 heading.
+const expectStringTitleHeading = (): void => {
+  expect(screen.getByRole('heading', { level: 6, name: title })).toBeVisible();
+};
+
+// The details' horizontal padding: 0 when compact, 16px otherwise.
+const getDetailsPaddingLeft = (): string =>
+  getComputedStyle(
+    screen.getByText('Content').closest('.MuiAccordionDetails-root') as Element
+  ).paddingLeft;
+
+describe('CollapsibleItem', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays the component collapsed by default', async () => {
+    initialize({ title });
+
+    expect(await screen.findByText(title)).toBeVisible();
+    expect(screen.getByText('Content')).not.toBeVisible();
+    expect(getExpandButton(false)).toBeInTheDocument();
+
+    expectStringTitleHeading();
+    expectExpandIconVisible();
+  });
+
+  it('displays the component expanded when the corresponding prop is set to true', async () => {
+    initialize({ defaultExpanded: true, title });
+
+    expect(await screen.findByText(title)).toBeVisible();
+    expect(screen.getByText('Content')).toBeVisible();
+    expect(getExpandButton(true)).toBeInTheDocument();
+
+    expectStringTitleHeading();
+    expectExpandIconVisible();
+    expect(getDetailsPaddingLeft()).toBe('16px');
+  });
+
+  it('displays a customized title', async () => {
+    initialize({ title: customizedTitle });
+
+    expect(await screen.findByText('Customized title')).toBeVisible();
+    expect(getExpandButton(false)).toBeInTheDocument();
+
+    expect(screen.queryByRole('heading', { level: 6 })).not.toBeInTheDocument();
+    expectExpandIconVisible();
+  });
+
+  it('displays the component as compact', async () => {
+    initialize({ compact: true, title });
+
+    expect(await screen.findByText(title)).toBeVisible();
+    expect(getExpandButton(false)).toBeInTheDocument();
+    expect(
+      document.querySelector('div[data-compact="true"]')
+    ).toBeInTheDocument();
+
+    expectStringTitleHeading();
+    expectExpandIconVisible();
+  });
+
+  it('displays the component as compact and expanded when the icon is clicked', async () => {
+    initialize({ compact: true, title });
+
+    expect(await screen.findByText(title)).toBeVisible();
+    expect(getExpandButton(false)).toBeInTheDocument();
+
+    await userEvent.click(getExpandButton(false));
+
+    await waitFor(() => {
+      expect(getExpandButton(true)).toBeInTheDocument();
+    });
+    await waitFor(() => {
+      expect(screen.getByText('Content')).toBeVisible();
+    });
+
+    expect(getDetailsPaddingLeft()).toBe('0px');
+  });
+
+  it('displays the component as compact and a customized title', async () => {
+    initialize({ compact: true, title: customizedTitle });
+
+    expect(await screen.findByText('Customized title')).toBeVisible();
+    expect(getExpandButton(false)).toBeInTheDocument();
+    expect(
+      document.querySelector('div[data-compact="true"]')
+    ).toBeInTheDocument();
+
+    expect(screen.queryByRole('heading', { level: 6 })).not.toBeInTheDocument();
+    expectExpandIconVisible();
+  });
+});

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

@@ -0,0 +1,287 @@
+import { ThemeMode, type User, userAtom } from '@centreon/ui-context';
+
+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 { createStore, Provider } from 'jotai';
+
+import SnackbarProvider from '../../Snackbar/SnackbarProvider';
+import ThemeProvider from '../../ThemeProvider';
+import CopyCommand, { type CopyCommandProps } from './CopyCommand';
+
+const initialize = (props: CopyCommandProps & { theme?: ThemeMode }): void => {
+  const store = createStore();
+  store.set(userAtom, { themeMode: props.theme || ThemeMode.light } as User);
+  render(
+    <Provider store={store}>
+      <ThemeProvider>
+        <SnackbarProvider>
+          <CopyCommand {...props} />
+        </SnackbarProvider>
+      </ThemeProvider>
+    </Provider>
+  );
+};
+
+const jsonText = `{
+  "number": 1,
+  "boolean": true,
+  "array": [
+    {
+      "string": "text"
+    }
+  ]
+}`;
+
+const getCode = (): HTMLElement => {
+  const code = document.querySelector('pre');
+
+  if (!code) {
+    throw new Error('No highlighted code block');
+  }
+
+  return code;
+};
+
+// The highlighted token of the given highlight.js class and exact text, with
+// its computed colour.
+const expectToken = ({
+  className,
+  color,
+  text
+}: {
+  className: string;
+  color: string;
+  text: string;
+}): void => {
+  const token = Array.from(
+    getCode().querySelectorAll<HTMLElement>(`.${className}`)
+  ).find((element) => element.textContent === text);
+
+  expect(token).toBeDefined();
+  expect(token).toBeVisible();
+  expect(getComputedStyle(token as HTMLElement).color).toBe(color);
+};
+
+// The language chip shows the language, and only it.
+const expectLanguageChip = (language: string): void => {
+  expect(screen.getByText(language, { selector: 'div' })).toHaveTextContent(
+    new RegExp(`^${language}$`)
+  );
+};
+
+describe('CopyCommand', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays bash code when props are set', async () => {
+    initialize({
+      commandToCopy: 'echo "hello" | grep "hel"',
+      language: 'bash',
+      text: `# a simple command
+echo "hello" | grep "hel"`
+    });
+
+    expect(await screen.findByText('# a simple command')).toBeVisible();
+    expect(screen.getByText('echo')).toBeVisible();
+    expect(screen.getByText('bash')).toBeVisible();
+    expect(screen.getByTestId('Copy command')).toBeVisible();
+
+    expect(getCode()).toHaveTextContent(
+      /^# a simple command echo "hello" \| grep "hel"$/
+    );
+    expectLanguageChip('bash');
+    expectToken({
+      className: 'hljs-comment',
+      color: 'rgb(106, 115, 125)',
+      text: '# a simple command'
+    });
+    expectToken({
+      className: 'hljs-built_in',
+      color: 'rgb(227, 98, 9)',
+      text: 'echo'
+    });
+    expectToken({
+      className: 'hljs-string',
+      color: 'rgb(3, 47, 98)',
+      text: '"hello"'
+    });
+    expectToken({
+      className: 'hljs-string',
+      color: 'rgb(3, 47, 98)',
+      text: '"hel"'
+    });
+  });
+
+  it('displays yaml code when props are set', async () => {
+    initialize({
+      commandToCopy: 'echo "hello" | grep "hel"',
+      language: 'yaml',
+      text: `key:
+  with:
+    input: "input"`
+    });
+
+    expect(await screen.findByText('key:')).toBeVisible();
+    expect(screen.getByText('"input"')).toBeVisible();
+    expect(screen.getByText('yaml')).toBeVisible();
+
+    expectLanguageChip('yaml');
+    expect(screen.getByTestId('Copy command')).toBeVisible();
+    // The indentation is kept, as non-breaking spaces.
+    expect(getCode().textContent).toMatch(/\n\u00a0+with:\n\u00a0+input:/);
+    expectToken({
+      className: 'hljs-attr',
+      color: 'rgb(0, 92, 197)',
+      text: 'key:'
+    });
+    expectToken({
+      className: 'hljs-attr',
+      color: 'rgb(0, 92, 197)',
+      text: 'input:'
+    });
+    expectToken({
+      className: 'hljs-string',
+      color: 'rgb(3, 47, 98)',
+      text: '"input"'
+    });
+  });
+
+  it('displays php code when props are set', async () => {
+    initialize({
+      commandToCopy: 'echo "hello" | grep "hel"',
+      language: 'php',
+      text: `<?php
+echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!';
+?>`
+    });
+
+    expect(await screen.findByText('echo')).toBeVisible();
+    expect(screen.getByText('"name"')).toBeVisible();
+    expect(screen.getByText('php')).toBeVisible();
+
+    expectLanguageChip('php');
+    expect(screen.getByTestId('Copy command')).toBeVisible();
+    expect(getCode()).toHaveTextContent(
+      `<?php echo 'Hello ' . htmlspecialchars($_POST["name"]) . '!'; ?>`
+    );
+    expectToken({
+      className: 'hljs-keyword',
+      color: 'rgb(215, 58, 73)',
+      text: 'echo'
+    });
+    expectToken({
+      className: 'hljs-title',
+      color: 'rgb(111, 66, 193)',
+      text: 'htmlspecialchars'
+    });
+    expectToken({
+      className: 'hljs-variable',
+      color: 'rgb(0, 92, 197)',
+      text: '$_POST'
+    });
+  });
+
+  it('displays json code when props are set', async () => {
+    initialize({
+      commandToCopy: 'echo "hello" | grep "hel"',
+      language: 'json',
+      text: jsonText
+    });
+
+    expect(await screen.findByText('"number"')).toBeVisible();
+    expect(screen.getByText('true')).toBeVisible();
+    expect(screen.getByText('json')).toBeVisible();
+
+    expectLanguageChip('json');
+    expect(screen.getByTestId('Copy command')).toBeVisible();
+    expectToken({
+      className: 'hljs-attr',
+      color: 'rgb(0, 92, 197)',
+      text: '"number"'
+    });
+    expectToken({
+      className: 'hljs-number',
+      color: 'rgb(0, 92, 197)',
+      text: '1'
+    });
+    expectToken({
+      className: 'hljs-keyword',
+      color: 'rgb(215, 58, 73)',
+      text: 'true'
+    });
+    expectToken({
+      className: 'hljs-string',
+      color: 'rgb(3, 47, 98)',
+      text: '"text"'
+    });
+  });
+
+  it('does not display the copy button when the corresponding prop is not passed', async () => {
+    initialize({
+      language: 'json',
+      text: jsonText
+    });
+
+    expect(await screen.findByText('"number"')).toBeVisible();
+    expect(screen.queryByTestId('Copy command')).not.toBeInTheDocument();
+
+    expectLanguageChip('json');
+  });
+
+  it('displays the highlighted code in dark mode when the theme is changed', async () => {
+    initialize({
+      language: 'json',
+      text: jsonText,
+      theme: ThemeMode.dark
+    });
+
+    await waitFor(() => {
+      const keyword = document.querySelector('.hljs-keyword');
+
+      expect(keyword).not.toBeNull();
+      expect(getComputedStyle(keyword as Element).color).toBe(
+        'rgb(255, 123, 114)'
+      );
+    });
+
+    // The rest of the dark palette.
+    expectToken({
+      className: 'hljs-attr',
+      color: 'rgb(121, 192, 255)',
+      text: '"number"'
+    });
+    expectToken({
+      className: 'hljs-string',
+      color: 'rgb(165, 214, 255)',
+      text: '"text"'
+    });
+    expectLanguageChip('json');
+    expect(screen.queryByTestId('Copy command')).not.toBeInTheDocument();
+  });
+
+  it('copies the command to the clipboard when the button is clicked', async () => {
+    const writeText = rs
+      .spyOn(navigator.clipboard, 'writeText')
+      .mockResolvedValue(undefined);
+
+    initialize({
+      commandToCopy: 'echo "hello" | grep "hel"',
+      language: 'bash',
+      text: `# a simple command
+echo "hello" | grep "hel"`
+    });
+
+    await userEvent.click(await screen.findByTestId('Copy command'));
+
+    await waitFor(() => {
+      expect(writeText).toHaveBeenCalledTimes(1);
+    });
+    expect(writeText).toHaveBeenCalledWith('echo "hello" | grep "hel"');
+
+    expect(screen.getByText('# a simple command')).toBeVisible();
+    expectLanguageChip('bash');
+  });
+});