@centreon/ui 26.10.8 → 26.10.10

package/src/Pagination/Pagination.cypress.spec.tsx

@@ -1,140 +0,0 @@
-import TestQueryProvider from '../api/TestQueryProvider';
-import { Method } from '../api/useMutationQuery';
-import { labelNextPage, labelPreviousPage } from '../Listing/translatedLabels';
-import Pagination from './Pagination';
-import { generateItems } from './utils';
-
-const defaultTotalItems = 25;
-const itemsPerPage = 6;
-const totalPages = Math.ceil(defaultTotalItems / itemsPerPage);
-
-const initialize = ({
-  total = defaultTotalItems,
-  currentPage = 1
-}: {
-  total?: number;
-  currentPage?: number;
-}) => {
-  cy.interceptAPIRequest({
-    alias: 'list',
-    method: Method.GET,
-    path: '**/listing**',
-    response: {
-      meta: {
-        limit: itemsPerPage,
-        page: currentPage,
-        total
-      },
-      result: generateItems(itemsPerPage)
-    }
-  });
-
-  cy.mount({
-    Component: (
-      <div
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          height: '100vh',
-          justifyContent: 'center',
-          width: '100%'
-        }}
-      >
-        <div
-          style={{
-            boxShadow: '2px 2px 4px rgba(0, 0, 0, 0.2)',
-            height: '176px'
-          }}
-        >
-          <TestQueryProvider>
-            <Pagination
-              api={{ baseEndpoint: '/test/listing', queryKey: ['test'] }}
-            />
-          </TestQueryProvider>
-        </div>
-      </div>
-    )
-  });
-};
-
-describe('Pagination Component', () => {
-  it('render with correct initial state', () => {
-    initialize({});
-    cy.waitForRequest('@list');
-
-    cy.findByTestId(labelPreviousPage).should('be.disabled');
-
-    cy.findByTestId(labelNextPage).should('not.be.disabled');
-
-    cy.contains(`Page 1/${totalPages}`);
-
-    cy.makeSnapshot();
-  });
-
-  it('hides pagination controls when only one page exists', () => {
-    initialize({ total: itemsPerPage });
-    cy.waitForRequest('@list');
-
-    cy.findByTestId(labelPreviousPage).should('not.exist');
-    cy.findByTestId(labelNextPage).should('not.exist');
-    cy.contains(/Page \d+\/\d+/).should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('navigates forward through pages correctly', () => {
-    initialize({});
-    cy.waitForRequest('@list');
-
-    cy.contains(`Page 1/${totalPages}`);
-
-    Array.from({ length: totalPages - 1 }).forEach((_, index) => {
-      cy.findByTestId(labelNextPage).click();
-      cy.waitForRequest('@list');
-
-      cy.contains(`Page ${index + 2}/${totalPages}`);
-    });
-
-    cy.findByTestId(labelNextPage).should('be.disabled');
-
-    cy.makeSnapshot();
-  });
-
-  it('navigates backward through pages correctly', () => {
-    initialize({});
-
-    cy.waitForRequest('@list');
-
-    Array.from({ length: totalPages - 1 }).forEach(() => {
-      cy.findByTestId(labelNextPage).click();
-
-      cy.waitForRequest('@list');
-    });
-
-    Array.from({ length: totalPages - 1 }).forEach((_, index) => {
-      cy.findByTestId(labelPreviousPage).click();
-      cy.waitForRequest('@list');
-
-      cy.contains(`Page ${totalPages - index - 1}/${totalPages}`);
-    });
-
-    cy.findByTestId(labelPreviousPage).should('be.disabled');
-
-    cy.makeSnapshot();
-  });
-
-  it('enables both buttons when on middle page', () => {
-    initialize({});
-
-    cy.waitForRequest('@list');
-
-    cy.findByTestId(labelNextPage).click();
-
-    cy.waitForRequest('@list');
-
-    cy.findByTestId(labelPreviousPage).should('not.be.disabled');
-    cy.findByTestId(labelNextPage).should('not.be.disabled');
-
-    cy.makeSnapshot();
-  });
-});

package/src/RichTextEditor/RichTextEditor.cypress.spec.tsx

@@ -1,408 +0,0 @@
-import { standardMacros } from './plugins/ToolbarPlugin/MacrosButton';
-import RichTextEditor from './RichTextEditor';
-import { labelAlignPicker } from './translatedLabels';
-
-interface CheckElementStyleOnRichTextEditorProps {
-  check: boolean;
-  element: HTMLElement;
-}
-
-const mockInititalStateToEditor =
-  '{"root": {"children": [{"children": [{"detail": 0,"format": 0,"mode": "normal","style": "","text": "test Cypress","type": "text","version": 1}],"direction": "ltr","format": "","indent": 0,"type": "paragraph","version": 1}],"direction": "ltr","format": "","indent": 0,"type": "root","version": 1}}';
-
-const checkElementStyleOnRichTextEditor = ({
-  element,
-  check
-}: CheckElementStyleOnRichTextEditorProps): void => {
-  cy.wrap(element).should('be.visible');
-
-  if (check) {
-    cy.wrap(element)
-      .contains('strong', 'cypress test')
-      .should('have.css', 'font-style')
-      .and('match', /italic/);
-
-    cy.wrap(element)
-      .contains('strong', 'cypress test')
-      .should('have.css', 'text-decoration')
-      .and('match', /underline line-through/);
-  } else {
-    cy.wrap(element)
-      .contains('p', 'cypress test')
-      .invoke('css', 'font-style')
-      .and('not.match', /italic/);
-
-    cy.wrap(element)
-      .contains('p', 'cypress test')
-      .invoke('css', 'text-decoration')
-      .and('not.match', /underline line-through/);
-  }
-};
-
-describe('Rich Text Editor', () => {
-  describe('Editable Rich Text Editor', () => {
-    beforeEach(() => {
-      cy.mount({ Component: <RichTextEditor editable /> });
-    });
-
-    it('displays all elements when RichTextEditor is called with required props', () => {
-      cy.findByLabelText('Undo').should('be.visible');
-      cy.findByLabelText('Redo').should('be.visible');
-      cy.findByLabelText('align picker').should('be.visible');
-      cy.findByLabelText('block').should('be.visible');
-      cy.findByLabelText('format').should('be.visible');
-      cy.findByLabelText('link').should('be.visible');
-      cy.findByLabelText('list').should('be.visible');
-
-      cy.findByLabelText('RichTextEditor')
-        .should('be.visible')
-        .and('have.value', '');
-
-      cy.findByLabelText('RichTextEditor').parent().contains('Type here...');
-
-      cy.makeSnapshot();
-    });
-
-    it('displays all format actions when the format button is clicked', () => {
-      cy.findByLabelText('format').click();
-
-      cy.findByLabelText('bold').should('be.visible');
-      cy.findByLabelText('italic').should('be.visible');
-      cy.findByLabelText('underline').should('be.visible');
-      cy.findByLabelText('strikethrough').should('be.visible');
-
-      cy.makeSnapshot();
-    });
-
-    it('displays changes with undo redo buttons', () => {
-      cy.get('[data-testid="RichTextEditor"]').type('cypress test');
-      cy.get('[data-testid="RichTextEditor"]').should(
-        'have.text',
-        'cypress test'
-      );
-
-      cy.findByLabelText('Undo').click();
-
-      cy.get('[data-testid="RichTextEditor"]').should('have.text', '');
-
-      cy.findByLabelText('Redo').click();
-
-      cy.get('[data-testid="RichTextEditor"]').should(
-        'have.text',
-        'cypress test'
-      );
-    });
-
-    it('displays changes with bold, italic, underline and strikethrough buttons', () => {
-      cy.get('[data-testid="RichTextEditor"]').type('cypress test');
-
-      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
-
-      cy.findByLabelText('format').click();
-      cy.findByLabelText('bold').click();
-
-      cy.findByLabelText('format').click();
-      cy.findByLabelText('italic').click();
-
-      cy.findByLabelText('format').click();
-      cy.findByLabelText('underline').click();
-
-      cy.findByLabelText('format').click();
-      cy.findByLabelText('strikethrough').click();
-
-      cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
-        checkElementStyleOnRichTextEditor({ check: true, element });
-      });
-
-      cy.findByLabelText('format').click();
-      cy.findByLabelText('bold').click();
-
-      cy.findByLabelText('format').click();
-      cy.findByLabelText('italic').click();
-
-      cy.findByLabelText('format').click();
-      cy.findByLabelText('underline').click();
-
-      cy.findByLabelText('format').click();
-      cy.findByLabelText('strikethrough').click();
-
-      cy.findByTestId('RichTextEditor').then((element: HTMLElement) => {
-        checkElementStyleOnRichTextEditor({ check: false, element });
-      });
-    });
-
-    it('adds link with an url when link button is clicked', () => {
-      cy.get('[data-testid="RichTextEditor"]').type('cypress');
-      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
-
-      cy.findByLabelText('link').click();
-
-      cy.findByLabelText('Saved link').should('have.text', 'https://');
-
-      cy.findByLabelText('Edit link').click();
-      cy.get('#InputLinkField').type('www.centreon.com').type('{enter}');
-
-      cy.findByText('cypress')
-        .parent()
-        .then((element: HTMLElement) => {
-          cy.wrap(element)
-            .should('have.attr', 'href')
-            .and('match', /^https:\/\/www.centreon.com/);
-
-          cy.wrap(element)
-            .should('have.attr', 'rel')
-            .and('match', /^noreferrer/);
-
-          cy.wrap(element)
-            .should('have.attr', 'target')
-            .and('match', /_blank/);
-        });
-
-      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
-
-      cy.findByLabelText('link').click();
-
-      cy.findByText('cypress')
-        .parent()
-        .then((element: HTMLElement) => {
-          cy.wrap(element)
-            .contains('p', 'cypress')
-            .should('not.have.attr', 'href');
-
-          cy.wrap(element).should('not.have.attr', 'rel');
-
-          cy.wrap(element).should('not.have.attr', 'target');
-        });
-    });
-
-    it('does not allow to open links in a new tab', () => {
-      cy.mount({
-        Component: <RichTextEditor editable openLinkInNewTab={false} />
-      });
-
-      cy.get('[data-testid="RichTextEditor"]').type('cypress');
-      cy.get('[data-testid="RichTextEditor"]').focus().type('{selectAll}');
-
-      cy.findByLabelText('link').click();
-
-      cy.findByLabelText('Saved link').should('have.text', 'https://');
-
-      cy.findByLabelText('Edit link').click();
-      cy.get('#InputLinkField').type('www.centreon.com').type('{enter}');
-
-      cy.findByText('cypress').parent().should('not.have.attr', 'target');
-
-      cy.get('[data-testid="RichTextEditor"]').focus().clear();
-
-      cy.get('[data-testid="RichTextEditor"]')
-        .focus()
-        .type('https://centreon.com');
-
-      cy.findByText('https://centreon.com')
-        .parent()
-        .should('not.have.attr', 'target');
-    });
-  });
-
-  describe('Rich Text Editor not editable', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: (
-          <RichTextEditor
-            editable={false}
-            initialEditorState={mockInititalStateToEditor}
-          />
-        )
-      });
-    });
-
-    it('displays editor when editable props is false and an initialState exist', () => {
-      cy.findByLabelText('Undo').should('not.exist');
-      cy.findByLabelText('Redo').should('not.exist');
-      cy.findByLabelText(labelAlignPicker).should('not.exist');
-      cy.findByLabelText('block').should('not.exist');
-      cy.findByLabelText('format').should('not.exist');
-      cy.findByLabelText('link').should('not.exist');
-      cy.findByLabelText('list').should('not.exist');
-    });
-  });
-
-  describe('Rich Text Editor is disabled', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: (
-          <RichTextEditor
-            disabled
-            editable
-            initialEditorState={mockInititalStateToEditor}
-          />
-        )
-      });
-    });
-
-    it('displays editor when editable props is false and an initialState exist', () => {
-      cy.findByLabelText('Undo').should('be.disabled');
-      cy.findByLabelText('Redo').should('be.disabled');
-      cy.findByLabelText(labelAlignPicker).should('be.disabled');
-      cy.findByLabelText('block').should('be.disabled');
-      cy.findByLabelText('format').should('be.disabled');
-      cy.findByLabelText('link').should('be.disabled');
-      cy.findByLabelText('list').should('be.disabled');
-    });
-  });
-
-  describe('Custom style editable rich text editor ', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: (
-          <RichTextEditor
-            editable
-            minInputHeight={200}
-            namespace="CypressComponentTest"
-            placeholder="Type Cypress test..."
-          />
-        )
-      });
-    });
-    it('displays editor with custom namespace', () => {
-      cy.get('[data-testid="CypressComponentTest"] > p').should('be.exist');
-      cy.get('[data-testid="CypressComponentTest"]').should('be.exist');
-    });
-
-    it('displays editor with custom placeholder', () => {
-      cy.get('[data-testid="CypressComponentTest"]')
-        .parent()
-        .contains('Type Cypress test...');
-    });
-
-    it('displays editor with custom minimum input height', () => {
-      cy.get('[data-testid="CypressComponentTest"]').should(
-        'have.css',
-        'min-height',
-        '200px'
-      );
-    });
-  });
-
-  describe('Rich Text Editor with Macros Plugin', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: <RichTextEditor displayMacrosButton editable />
-      });
-    });
-
-    it('displays the Macros button when the "displayMacrosButton" prop is set to true', () => {
-      cy.findByLabelText('Macros').click();
-
-      standardMacros.forEach((macro) => {
-        cy.findByText(macro).should('be.visible');
-      });
-    });
-
-    it('ensures that the selected macro is inserted into the RichTextEditor', () => {
-      cy.get('[data-testid="RichTextEditor"]').type('macro : ');
-
-      standardMacros.forEach((macro) => {
-        cy.findByLabelText('Macros').click();
-        cy.findByText(macro).click();
-
-        cy.get('[data-testid="RichTextEditor"]').should('contain', macro);
-      });
-    });
-  });
-
-  describe('Block type', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: <RichTextEditor editable />
-      });
-    });
-
-    const testCases = [
-      {
-        blockType: 'Huge',
-        tag: 'h3'
-      },
-      {
-        blockType: 'Large',
-        tag: 'h5'
-      },
-      {
-        blockType: 'Normal',
-        tag: 'p'
-      },
-      {
-        blockType: 'Small',
-        tag: 'h6'
-      }
-    ];
-
-    testCases.forEach(({ blockType, tag }) => {
-      it(`displays ${blockType} when the corresponding block type button is selected`, () => {
-        cy.get('[data-testid="RichTextEditor"]').type('Example');
-        cy.findByLabelText('block').click();
-        cy.findByText(blockType).click();
-
-        cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
-
-        cy.makeSnapshot();
-      });
-    });
-  });
-
-  describe('List type', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: <RichTextEditor editable />
-      });
-    });
-
-    const testCases = [
-      {
-        listType: 'Unordered List',
-        tag: 'ul'
-      },
-      {
-        listType: 'Ordered List',
-        tag: 'ol'
-      }
-    ];
-
-    testCases.forEach(({ listType, tag }) => {
-      it(`displays ${listType} when the corresponding list type button is selected`, () => {
-        cy.get('[data-testid="RichTextEditor"]').type('Example');
-        cy.findByLabelText('list').click();
-        cy.findByLabelText(listType).click();
-
-        cy.get('[data-testid="RichTextEditor"]').find(tag).should('be.visible');
-
-        cy.makeSnapshot();
-      });
-    });
-  });
-
-  describe('Aligns', () => {
-    beforeEach(() => {
-      cy.mount({
-        Component: <RichTextEditor editable />
-      });
-    });
-
-    const testCases = ['Center', 'Right', 'Left'];
-
-    testCases.forEach((label) => {
-      it(`aligns the text to the ${label} when the corresponding button was clicked`, () => {
-        cy.get('[data-testid="RichTextEditor"]').type('Example');
-
-        cy.findByLabelText(labelAlignPicker).click();
-        cy.findByLabelText(label).click();
-
-        cy.findByText('Example')
-          .parent()
-          .should('have.css', 'text-align', label.toLowerCase());
-
-        cy.makeSnapshot();
-      });
-    });
-  });
-});

package/src/TimePeriods/ResolutionTimePeriod.cypress.spec.tsx

@@ -1,74 +0,0 @@
-import dayjs from 'dayjs';
-import 'dayjs/locale/en';
-
-import { Switch } from '@mui/material';
-
-import { userAtom } from '@centreon/ui-context';
-
-import localizedFormatPlugin from 'dayjs/plugin/localizedFormat';
-import timezonePlugin from 'dayjs/plugin/timezone';
-import utcPlugin from 'dayjs/plugin/utc';
-import { createStore, Provider } from 'jotai';
-
-import TimePeriod from './index';
-import { retrievedUser } from './mockedData';
-
-dayjs.extend(timezonePlugin);
-dayjs.extend(utcPlugin);
-dayjs.extend(localizedFormatPlugin);
-
-const data = [
-  {
-    locale: 'en_US',
-    resolution: { height: 590, width: 500 },
-    timezone: 'Europe/Paris'
-  },
-  {
-    locale: 'en_US',
-    resolution: { height: 590, width: 200 },
-    timezone: 'Europe/Paris'
-  },
-  {
-    locale: 'en_US',
-    resolution: { height: 590, width: 1024 },
-    timezone: 'Europe/Paris'
-  }
-];
-
-data.forEach((item) => {
-  describe('Time period', () => {
-    const { height, width } = item.resolution;
-    beforeEach(() => {
-      cy.viewport(width, height);
-
-      const store = createStore();
-
-      store.set(userAtom, {
-        ...retrievedUser,
-        locale: 'en_US',
-        timezone: 'Europe/Paris'
-      });
-
-      cy.mount({
-        Component: (
-          <Provider store={store}>
-            <TimePeriod renderExternalComponent={<Switch />} />
-          </Provider>
-        )
-      });
-    });
-
-    it(`displays correctly the dates design when screen resolution is ${width}px`, () => {
-      cy.contains('1 day').should('be.visible');
-      cy.contains('7 days').should('be.visible');
-      cy.contains('31 days').should('be.visible');
-      cy.contains('From').should('be.visible');
-      cy.contains('To').should('be.visible');
-
-      cy.makeSnapshotWithCustomResolution({
-        resolution: { height, width },
-        title: `${width}px`
-      });
-    });
-  });
-});