@centreon/ui 26.10.8 → 26.10.9

package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.browser.test.tsx

@@ -0,0 +1,250 @@
+import {
+  Method,
+  MultiConnectedAutocompleteField,
+  type SelectEntry,
+  TestQueryProvider
+} from '@centreon/ui';
+
+import { interceptAPIRequest, waitForRequest } from '@test-setup/api';
+import { render } from '@test-setup/render';
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import i18next from 'i18next';
+import { useState } from 'react';
+import { initReactI18next } from 'react-i18next';
+
+import { labelSelectAll, labelUnSelectAll } from '../../../../translatedLabels';
+import { baseEndpoint, getEndpoint, label, placeholder } from './utils';
+
+const optionOne = 'My Option 1';
+
+// The option list and search result the endpoint mocks return.
+const listOptions = {
+  meta: { limit: 5, page: 1, total: 5 },
+  result: [
+    { id: 0, name: 'My Option 1' },
+    { id: 1, name: 'My Option 2' },
+    { id: 2, name: 'My Option 3' },
+    { id: 3, name: 'My Option 4' },
+    { id: 4, name: 'My Option 5' }
+  ]
+};
+
+const searchedOption = {
+  meta: { limit: 1, page: 1, total: 1 },
+  result: [{ id: 0, name: 'My Option 1' }]
+};
+
+const optionNames = listOptions.result.map(({ name }) => name);
+
+// Passed down to the multi autocomplete, though the connected field's type
+// does not declare it.
+const multiAutocompleteProps: Record<string, unknown> = {
+  disableSelectAll: false
+};
+
+const Component = (): JSX.Element => {
+  const [values, setValues] = useState<Array<SelectEntry>>([]);
+
+  return (
+    <TestQueryProvider>
+      <div style={{ paddingTop: 20 }}>
+        <MultiConnectedAutocompleteField
+          {...multiAutocompleteProps}
+          field="host.name"
+          getEndpoint={getEndpoint}
+          label={label}
+          onChange={(_, item) => setValues(item as Array<SelectEntry>)}
+          placeholder={placeholder}
+          value={values}
+        />
+      </div>
+    </TestQueryProvider>
+  );
+};
+
+const getInput = (): HTMLInputElement =>
+  document.querySelector(
+    '[data-testid="Multi Connected Autocomplete"]'
+  ) as HTMLInputElement;
+
+// The last one: a closing list can still be in the page.
+const findListOptions = async (): Promise<HTMLElement> =>
+  (await screen.findAllByRole('presentation')).at(-1) as HTMLElement;
+
+const getOptionTexts = (listOptionsElement: HTMLElement): Array<string> =>
+  within(listOptionsElement)
+    .queryAllByText(/^My Option \d$/)
+    .map((option) => option.textContent ?? '');
+
+const getOptionCheckboxes = (listOptionsElement: HTMLElement) =>
+  within(listOptionsElement).getAllByRole('checkbox');
+
+describe('Multi connected autocomplete', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  beforeEach(() => {
+    i18next.use(initReactI18next).init({
+      lng: 'en',
+      resources: {}
+    });
+
+    interceptAPIRequest({
+      alias: 'getListOptions',
+      method: Method.GET,
+      path: `${baseEndpoint}**`,
+      response: listOptions
+    });
+
+    interceptAPIRequest({
+      alias: 'getSearchedOption',
+      method: Method.GET,
+      path: `${baseEndpoint}**`,
+      query: {
+        name: 'search',
+        value: JSON.stringify({
+          $and: [{ $and: [{ 'host.name': { $lk: `%${optionOne}%` } }] }]
+        })
+      },
+      response: searchedOption
+    });
+
+    render(<Component />);
+  });
+
+  it('displays and hides the list when the user double-clicks on the input', async () => {
+    expect((await screen.findAllByText(label))[0]).toBeVisible();
+
+    const input = getInput();
+
+    await userEvent.click(input);
+
+    await waitForRequest('@getListOptions');
+
+    expect(input).toHaveAttribute('placeholder', placeholder);
+
+    const listOptionsElement = await findListOptions();
+
+    expect(listOptionsElement).toBeVisible();
+
+    // The list re-renders its options: compared by text, not by element.
+    await waitFor(() => {
+      expect(getOptionTexts(listOptionsElement)).toEqual(optionNames);
+    });
+
+    // The count of options, the select all button and the five options
+    // unchecked.
+    expect(
+      within(listOptionsElement).getByText('5 element(s) found')
+    ).toBeVisible();
+    expect(within(listOptionsElement).getByText(labelSelectAll)).toBeVisible();
+    getOptionCheckboxes(listOptionsElement).forEach((checkbox) => {
+      expect(checkbox).not.toBeChecked();
+    });
+
+    await userEvent.click(input);
+
+    await waitFor(() => {
+      expect(listOptionsElement).not.toBeInTheDocument();
+    });
+
+    // No option list, and nothing selected.
+    expect(screen.queryByRole('presentation')).not.toBeInTheDocument();
+    expect(screen.queryByTestId('CancelIcon')).not.toBeInTheDocument();
+  });
+
+  it('displays all options on the list when the user searches for and selects an option', async () => {
+    const input = getInput();
+
+    await userEvent.click(input);
+
+    await waitForRequest('@getListOptions');
+
+    const listOptionsElement = await findListOptions();
+
+    expect(listOptionsElement).toBeVisible();
+
+    await userEvent.type(input, optionOne);
+
+    await waitForRequest('@getSearchedOption');
+
+    await waitFor(() => {
+      expect(listOptionsElement.querySelectorAll('li')).toHaveLength(6);
+    });
+
+    await userEvent.click(document.querySelectorAll('[type="checkbox"]')[0]);
+
+    const inputContainer = input.parentElement as HTMLElement;
+
+    expect(await within(inputContainer).findByText(optionOne)).toBeVisible();
+    expect(within(inputContainer).getByTestId('CancelIcon')).toBeVisible();
+
+    await waitForRequest('@getListOptions');
+
+    await waitFor(() => {
+      expect(listOptionsElement.querySelectorAll('li')).toHaveLength(
+        listOptions.result.length + 1
+      );
+    });
+
+    // The list re-renders its options: compared by text, not by element.
+    await waitFor(() => {
+      expect(getOptionTexts(listOptionsElement)).toEqual(optionNames);
+    });
+  });
+
+  it('checks all options when Select all button is clicked', async () => {
+    const input = getInput();
+
+    await userEvent.click(input);
+
+    expect(await screen.findByText('5 element(s) found')).toBeInTheDocument();
+
+    await waitForRequest('@getListOptions');
+
+    await userEvent.click(await screen.findByText(labelSelectAll));
+
+    expect(await screen.findByText(labelUnSelectAll)).toBeVisible();
+
+    await waitFor(() => {
+      expect(screen.getAllByTestId('CancelIcon')).toHaveLength(5);
+    });
+
+    // A chip per option in the field, in order, and every option checked.
+    expect(
+      within(input.parentElement as HTMLElement)
+        .getAllByText(/^My Option \d$/)
+        .map((chip) => chip.textContent)
+    ).toEqual(optionNames);
+    getOptionCheckboxes(await findListOptions()).forEach((checkbox) => {
+      expect(checkbox).toBeChecked();
+    });
+  });
+
+  it('unchecks all options when unSelect all button is clicked', async () => {
+    const input = getInput();
+
+    await userEvent.click(input);
+
+    expect(await screen.findByText('5 element(s) found')).toBeInTheDocument();
+
+    await waitForRequest('@getListOptions');
+
+    await userEvent.click(await screen.findByText(labelSelectAll));
+    await userEvent.click(await screen.findByText(labelUnSelectAll));
+
+    expect(await screen.findByText(labelSelectAll)).toBeVisible();
+
+    await waitFor(() => {
+      expect(screen.queryAllByTestId('CancelIcon')).toHaveLength(0);
+    });
+
+    // The field is empty and every option unchecked.
+    expect(input).toHaveAttribute('placeholder', placeholder);
+    getOptionCheckboxes(await findListOptions()).forEach((checkbox) => {
+      expect(checkbox).not.toBeChecked();
+    });
+  });
+});

package/src/InputField/Select/Autocomplete/Connected/index.test.tsx

@@ -8,6 +8,8 @@ import {
   resetMocks,
   waitFor
 } from '../../../../../test/testRenderer';
+import fetchMock from 'jest-fetch-mock';
+
 import buildListingEndpoint from '../../../../api/buildListingEndpoint';
 import type {
   BuildListingEndpointParameters,
@@ -127,4 +129,39 @@ describe(SingleConnectedAutocompleteField, () => {
       );
     });
   });
+
+  it('leaves no request rejected unhandled when it is closed while its options load', async () => {
+    const unhandledRejections: Array<unknown> = [];
+    const onUnhandledRejection = (reason: unknown): void => {
+      unhandledRejections.push(reason);
+    };
+
+    process.on('unhandledRejection', onUnhandledRejection);
+
+    try {
+      // Options that never arrive: the request is still running at unmount,
+      // which cancels it.
+      fetchMock.mockResponse(() => new Promise(() => undefined));
+
+      const { getByLabelText, unmount } =
+        renderSingleConnectedAutocompleteField();
+
+      fireEvent.click(getByLabelText('Open'));
+
+      await waitFor(() => {
+        expect(getFetchCall(0)).toEqual(`${baseEndpoint}?page=1`);
+      });
+
+      unmount();
+
+      // Unhandled rejections are reported once the microtask queue drains.
+      await new Promise((resolve) => {
+        setTimeout(resolve, 50);
+      });
+
+      expect(unhandledRejections).toEqual([]);
+    } finally {
+      process.off('unhandledRejection', onUnhandledRejection);
+    }
+  });
 });

package/src/InputField/Select/Autocomplete/Connected/index.tsx

@@ -1,6 +1,7 @@
 import { CircularProgress, useTheme } from '@mui/material';
 import type { AutocompleteRenderOptionState } from '@mui/material/Autocomplete';
 
+import { isCancelledError } from '@tanstack/react-query';
 import {
   equals,
   has,
@@ -307,52 +308,62 @@ const ConnectedAutocompleteField = (
     );
 
     const fetchOptionsAndPrefetchNextOptions = useCallback((): void => {
-      fetchQuery().then((newOptions) => {
-        const isError = has('isError', newOptions);
-
-        if (isError) {
-          return;
-        }
-
-        const moreOptions = page > 1 ? options : [];
-
-        const { result, limit, total } = getOptionResult(newOptions);
-
-        const formattedList = changeIdValue
-          ? result.map((item) => ({
-              ...item,
-              id: changeIdValue(item)
-            }))
-          : result;
-
-        if (!isEmpty(labelKey) && !isNil(labelKey)) {
-          const list = formattedList.map((item) =>
-            renameKey({ key: labelKey, newKey: 'name', object: item })
-          );
-          setOptions(moreOptions.concat(list as Array<TData>));
-
-          return;
-        }
-        setOptions(moreOptions.concat(formattedList));
-
-        setOptions(moreOptions.concat(formattedList as Array<TData>));
-
-        const newMaxPage = Math.ceil(total / limit);
-
-        setMaxPage(newMaxPage);
-        if (equals(newMaxPage, page)) {
-          return;
-        }
-
-        prefetchNextPage({
-          getPrefetchQueryKey: (newPage: number) => [
-            `autocomplete-${props.label}`,
-            newPage,
-            searchParameter
-          ],
-          page
+      fetchQuery()
+        .then((newOptions) => {
+          const isError = has('isError', newOptions);
+
+          if (isError) {
+            return;
+          }
+
+          const moreOptions = page > 1 ? options : [];
+
+          const { result, limit, total } = getOptionResult(newOptions);
+
+          const formattedList = changeIdValue
+            ? result.map((item) => ({
+                ...item,
+                id: changeIdValue(item)
+              }))
+            : result;
+
+          if (!isEmpty(labelKey) && !isNil(labelKey)) {
+            const list = formattedList.map((item) =>
+              renameKey({ key: labelKey, newKey: 'name', object: item })
+            );
+            setOptions(moreOptions.concat(list as Array<TData>));
+
+            return;
+          }
+          setOptions(moreOptions.concat(formattedList));
+
+          setOptions(moreOptions.concat(formattedList as Array<TData>));
+
+          const newMaxPage = Math.ceil(total / limit);
+
+          setMaxPage(newMaxPage);
+          if (equals(newMaxPage, page)) {
+            return;
+          }
+
+          prefetchNextPage({
+            getPrefetchQueryKey: (newPage: number) => [
+              `autocomplete-${props.label}`,
+              newPage,
+              searchParameter
+            ],
+            page
+          });
+        })
+        // The request is cancelled when the field unmounts while it loads: there
+        // is nothing left to update, and nothing went wrong.
+        .catch((error) => {
+          if (isCancelledError(error)) {
+            return;
+          }
+
+          throw error;
         });
-      });
     }, [
       changeIdValue,
       fetchQuery,

package/src/Listing/Cell/DataCell.tsx

@@ -113,7 +113,6 @@ const DataCell = ({
               if (!clickable) {
                 return;
               }
-              e.preventDefault();
               e.stopPropagation();
             }}
             {...commonCellProps}
@@ -130,7 +129,6 @@ const DataCell = ({
             if (!clickable) {
               return;
             }
-            e.preventDefault();
             e.stopPropagation();
           }}
           style={{