@centreon/ui 26.12.1 → 26.12.2

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

@@ -0,0 +1,115 @@
+import { Typography } from '@mui/material';
+
+import { render } from '@test-setup/render';
+import { screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Tabs } from '.';
+import { TabPanel } from './TabPanel';
+
+const initialize = (withTabListProps = false): void => {
+  render(
+    <Tabs
+      defaultTab="tab 0"
+      tabList={
+        withTabListProps
+          ? {
+              variant: 'fullWidth'
+            }
+          : undefined
+      }
+      tabs={[
+        { label: 'Tab 0', value: 'tab 0' },
+        { label: 'Tab 1', value: 'tab 1' }
+      ]}
+    >
+      <TabPanel value="tab 0">
+        <Typography>Tab 0</Typography>
+      </TabPanel>
+      <TabPanel value="tab 1">
+        <Typography>Tab 1</Typography>
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+const getTabPanel = (value: string): HTMLElement =>
+  document.querySelector(`[data-TabPanel="${value}"]`) as HTMLElement;
+
+const getFontWeight = (element: HTMLElement): string =>
+  getComputedStyle(element).fontWeight;
+
+describe('Tabs', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays tabs and their content when a tab is selected', async () => {
+    initialize();
+
+    await waitFor(() => {
+      expect(getTabPanel('tab 0')).not.toHaveAttribute('hidden');
+    });
+    expect(getTabPanel('tab 1')).toHaveAttribute('hidden');
+    expect(screen.getByLabelText('Tab 0')).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+    expect(screen.getByLabelText('Tab 1')).toHaveAttribute(
+      'aria-selected',
+      'false'
+    );
+
+    await userEvent.click(screen.getByRole('tab', { name: 'Tab 1' }));
+
+    await waitFor(() => {
+      expect(getTabPanel('tab 0')).toHaveAttribute('hidden');
+    });
+    expect(getTabPanel('tab 1')).not.toHaveAttribute('hidden');
+    expect(screen.getByLabelText('Tab 0')).toHaveAttribute(
+      'aria-selected',
+      'false'
+    );
+    expect(screen.getByLabelText('Tab 1')).toHaveAttribute(
+      'aria-selected',
+      'true'
+    );
+
+    // The selected tab in bold, the other one not, and the content of the
+    // selected panel only.
+    expect(getFontWeight(screen.getByLabelText('Tab 1'))).toBe('700');
+    expect(getFontWeight(screen.getByLabelText('Tab 0'))).toBe('400');
+    expect(getTabPanel('tab 1')).toHaveTextContent(/^Tab 1$/);
+    expect(getTabPanel('tab 1')).toBeVisible();
+    expect(getTabPanel('tab 0')).not.toBeVisible();
+  });
+
+  it('displays tabs when tabList props are set', async () => {
+    initialize(true);
+
+    await waitFor(() => {
+      expect(getTabPanel('tab 0')).not.toHaveAttribute('hidden');
+    });
+    expect(getTabPanel('tab 1')).toHaveAttribute('hidden');
+
+    // The first tab selected, in bold, and the two tabs sharing the full
+    // width of the page.
+    const firstTab = screen.getByLabelText('Tab 0');
+    const secondTab = screen.getByLabelText('Tab 1');
+
+    expect(firstTab).toHaveAttribute('aria-selected', 'true');
+    expect(getFontWeight(firstTab)).toBe('700');
+    expect(getFontWeight(secondTab)).toBe('400');
+    expect(getTabPanel('tab 0')).toHaveTextContent(/^Tab 0$/);
+
+    const tabList = screen.getByRole('tablist');
+    const tabListWidth = tabList.getBoundingClientRect().width;
+    const firstTabWidth = firstTab.getBoundingClientRect().width;
+
+    expect(firstTabWidth).toBeGreaterThan(tabListWidth / 2 - 32);
+    expect(secondTab.getBoundingClientRect().width).toBeCloseTo(
+      firstTabWidth,
+      0
+    );
+  });
+});

package/src/utils/useFullscreen/Fullscreen.browser.test.tsx

@@ -0,0 +1,176 @@
+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 { createStore, Provider } from 'jotai';
+import { BrowserRouter } from 'react-router';
+
+import { useFullscreen } from './useFullscreen';
+import { router, useFullscreenListener } from './useFullscreenListener';
+
+const labelEnterFullscreen = 'Enter fullscreen';
+const labelExitFullscreen = 'Exit fullscreen';
+
+const ChildComponent = (): JSX.Element => {
+  const { toggleFullscreen, fullscreenEnabled, isFullscreenActivated } =
+    useFullscreen();
+
+  return (
+    <div
+      data-fullscreenActivated={isFullscreenActivated}
+      data-fullscreenEnabled={fullscreenEnabled}
+      id="test"
+    >
+      <Button onClick={() => toggleFullscreen(document.body)}>
+        {isFullscreenActivated ? labelExitFullscreen : labelEnterFullscreen}
+      </Button>
+      <input id="input" />
+      <textarea id="textarea" />
+    </div>
+  );
+};
+
+const TestComponent = (): JSX.Element => {
+  useFullscreenListener();
+
+  return <ChildComponent />;
+};
+
+// The real Fullscreen API is shared by the whole browser: with test files
+// running in parallel pages, a request can be refused or exited by another
+// page. It is faked here, with the same contract: the promises resolve, the
+// fullscreen element is set and cleared, and `fullscreenchange` is fired.
+const fakeFullscreenApi = (): void => {
+  let fullscreenElement: Element | null = null;
+
+  const changeFullscreenElement = (element: Element | null): Promise<void> => {
+    fullscreenElement = element;
+    document.dispatchEvent(new Event('fullscreenchange'));
+
+    return Promise.resolve();
+  };
+
+  rs.spyOn(Document.prototype, 'fullscreenElement', 'get').mockImplementation(
+    () => fullscreenElement
+  );
+  rs.spyOn(Document.prototype, 'fullscreenEnabled', 'get').mockReturnValue(
+    true
+  );
+  rs.spyOn(Element.prototype, 'requestFullscreen').mockImplementation(function (
+    this: Element
+  ) {
+    return changeFullscreenElement(this);
+  });
+  rs.spyOn(Document.prototype, 'exitFullscreen').mockImplementation(() =>
+    changeFullscreenElement(null)
+  );
+};
+
+const initialize = (): void => {
+  fakeFullscreenApi();
+
+  const store = createStore();
+
+  const queryParameters = new Map();
+
+  rs.spyOn(router, 'useSearchParams').mockImplementation(
+    () =>
+      queryParameters as unknown as ReturnType<typeof router.useSearchParams>
+  );
+
+  render(
+    <BrowserRouter>
+      <Provider store={store}>
+        <TestComponent />
+      </Provider>
+    </BrowserRouter>
+  );
+};
+
+const getTestElement = (): HTMLElement =>
+  document.querySelector('#test') as HTMLElement;
+
+const expectFullscreen = async (activated: boolean): Promise<void> => {
+  await waitFor(() => {
+    expect(getTestElement()).toHaveAttribute(
+      'data-fullscreenActivated',
+      `${activated}`
+    );
+  });
+  expect(getTestElement()).toHaveAttribute('data-fullscreenEnabled', 'true');
+};
+
+describe('Fullscreen', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  afterEach(() => {
+    rs.restoreAllMocks();
+  });
+
+  it('enters fullscreen mode when the button is clicked', async () => {
+    initialize();
+
+    await expectFullscreen(false);
+
+    await userEvent.click(screen.getByText(labelEnterFullscreen));
+
+    await expectFullscreen(true);
+
+    await userEvent.click(screen.getByText(labelExitFullscreen));
+  });
+
+  it('exits fullscreen mode when the button is clicked', async () => {
+    initialize();
+
+    await expectFullscreen(false);
+
+    await userEvent.click(screen.getByText(labelEnterFullscreen));
+
+    await expectFullscreen(true);
+
+    await userEvent.click(screen.getByText(labelExitFullscreen));
+
+    await expectFullscreen(false);
+  });
+
+  it('toggles fullscreen mode when the corresponding shortcut is clicked', async () => {
+    initialize();
+
+    await expectFullscreen(false);
+
+    await userEvent.keyboard('F');
+
+    await expectFullscreen(true);
+
+    await userEvent.keyboard('F');
+
+    await expectFullscreen(false);
+  });
+
+  ['input', 'textarea'].forEach((tag) => {
+    it(`cannot toggle fullscreen feature using the shortcut when ${tag === 'input' ? 'an' : 'a'} ${tag} is focused`, async () => {
+      initialize();
+
+      await expectFullscreen(false);
+
+      // The spies (which call through) tell that the shortcut did not even
+      // ask for a change.
+      const requestFullscreen = rs.spyOn(document.body, 'requestFullscreen');
+      const exitFullscreen = rs.spyOn(document, 'exitFullscreen');
+      const field = document.querySelector(`#${tag}`) as HTMLInputElement;
+
+      field.focus();
+
+      await userEvent.keyboard('F');
+
+      await expectFullscreen(false);
+      expect(field).toHaveValue('F');
+      expect(requestFullscreen).not.toHaveBeenCalled();
+      expect(exitFullscreen).not.toHaveBeenCalled();
+    });
+  });
+});

package/src/utils/useLocale/useLocale.browser.test.tsx

@@ -0,0 +1,49 @@
+import { browserLocaleAtom, type User, userAtom } from '@centreon/ui-context';
+
+import { render } from '@test-setup/render';
+import { screen } from '@testing-library/react';
+import { createStore, Provider } from 'jotai';
+
+import { useLocale } from '.';
+
+const TestComponent = () => {
+  const locale = useLocale();
+
+  return <p>{locale}</p>;
+};
+
+interface InitializeProps {
+  browserLocale: string;
+  userLocale: string | null;
+}
+
+const initialize = ({ userLocale, browserLocale }: InitializeProps): void => {
+  const store = createStore();
+
+  store.set(userAtom, { locale: userLocale } as User);
+  store.set(browserLocaleAtom, browserLocale);
+
+  render(
+    <Provider store={store}>
+      <TestComponent />
+    </Provider>
+  );
+};
+
+describe('useLocale', () => {
+  beforeEach(() => {
+    expect.hasAssertions();
+  });
+
+  it('displays the user locale when the corresponding atom is set', async () => {
+    initialize({ browserLocale: 'en', userLocale: 'fi' });
+
+    expect(await screen.findByText('fi')).toBeVisible();
+  });
+
+  it('displays the browser locale when the user locale is not set', async () => {
+    initialize({ browserLocale: 'de', userLocale: null });
+
+    expect(await screen.findByText('de')).toBeVisible();
+  });
+});

package/src/utils/useLocaleTimezoneDate/{LocaleTimezoneDate.cypress.spec.tsx → LocaleTimezoneDate.browser.test.tsx}

@@ -9,6 +9,9 @@ import 'dayjs/locale/en';
 import 'dayjs/locale/es';
 import 'dayjs/locale/pt';
 
+import { render } from '@test-setup/render';
+import { screen } from '@testing-library/react';
+
 import { type Props, useLocaleTimezoneDate } from './useLocaleTimezoneDate';
 
 dayjs.extend(localizedFormat);
@@ -27,10 +30,12 @@ const Test = ({
   return <p>{formatDate({ date, format, locale, timezone })}</p>;
 };
 
-const initialize = ({ timezone, locale, format }): void => {
-  cy.mount({
-    Component: <Test format={format} locale={locale} timezone={timezone} />
-  });
+const initialize = ({
+  timezone,
+  locale,
+  format
+}: Omit<Props, 'date'>): void => {
+  render(<Test format={format} locale={locale} timezone={timezone} />);
 };
 
 const locales = [undefined, 'en-GB', 'fr-FR', 'de-DE'];
@@ -83,16 +88,24 @@ const resultsDE = [
 ];
 
 const results = [...resultsEN, ...resultsEN, ...resultsFR, ...resultsDE];
-let index = 0;
 
-locales.forEach((locale) => {
-  timezones.forEach((timezone) => {
-    formats.forEach((format) => {
-      it(`displays the date with the locale ${locale}, the timezone ${timezone} and the format ${format}`, () => {
+beforeEach(() => {
+  expect.hasAssertions();
+});
+
+locales.forEach((locale, localeIndex) => {
+  timezones.forEach((timezone, timezoneIndex) => {
+    formats.forEach((format, formatIndex) => {
+      // The expected result of this combination, independent of the order the
+      // tests run in.
+      const index =
+        (localeIndex * timezones.length + timezoneIndex) * formats.length +
+        formatIndex;
+
+      it(`displays the date with the locale ${locale}, the timezone ${timezone} and the format ${format}`, async () => {
         initialize({ format, locale, timezone });
 
-        cy.contains(results[index]).should('be.visible');
-        index += 1;
+        expect(await screen.findByText(results[index])).toBeVisible();
       });
     });
   });

package/src/Dashboard/Dashboard.cypress.spec.tsx

@@ -1,71 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { DashboardLayout } from '.';
-
-const dashboardLayout: Array<CustomLayout> = [
-  {
-    content: 'Panel 1',
-    h: 4,
-    i: 'a',
-    shouldUseFluidTypography: false,
-    w: 6,
-    x: 0,
-    y: 0
-  },
-  {
-    content: 'Panel 2',
-    h: 3,
-    i: 'b',
-    minW: 2,
-    w: 7,
-    x: 1,
-    y: 7
-  },
-  {
-    content: 'Panel 3',
-    h: 7,
-    i: 'c',
-    w: 6,
-    x: 6,
-    y: 6
-  },
-  {
-    content: 'Panel 4',
-    h: 3,
-    i: 'd',
-    minW: 2,
-    w: 5,
-    x: 4,
-    y: 10
-  }
-];
-
-const initialize = (): void => {
-  cy.adjustViewport();
-
-  cy.mount({
-    Component: (
-      <DashboardLayout.Layout layout={dashboardLayout}>
-        {dashboardLayout.map(({ i, content }) => (
-          <DashboardLayout.Item header={<div>header</div>} id={i} key={i}>
-            <Typography>{content}</Typography>
-          </DashboardLayout.Item>
-        ))}
-      </DashboardLayout.Layout>
-    )
-  });
-
-  cy.viewport('macbook-13');
-};
-
-describe('Dashboard', () => {
-  it('displays placeholder when panels is out of viewport', () => {
-    initialize();
-
-    cy.get('[data-widget-skeleton="a"]').should('not.exist');
-    cy.get('[data-widget-skeleton="b"]').should('not.exist');
-    cy.get('[data-widget-skeleton="c"]').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-});