@centreon/ui 26.12.1 → 26.12.3

package/src/InputField/Number/Number.cypress.spec.tsx

@@ -1,89 +0,0 @@
-import NumberField, { type NumberProps } from './Number';
-
-const initialize = (props: NumberProps): void => {
-  cy.mount({
-    Component: <NumberField {...props} />
-  });
-};
-
-describe('Number field', () => {
-  it('displays the placeholder when the field has no default or fallback values', () => {
-    initialize({ dataTestId: 'test', onChange: cy.stub() });
-
-    cy.get('input').should('have.value', '');
-    cy.get('input').should('have.attr', 'placeholder', '0');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the fallback value as placeholder when the field as no default value', () => {
-    initialize({ dataTestId: 'test', fallbackValue: 25, onChange: cy.stub() });
-
-    cy.get('input').should('have.value', '');
-    cy.get('input').should('have.attr', 'placeholder', '25');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the default value as placeholder when the field as default value', () => {
-    initialize({ dataTestId: 'test', defaultValue: 25, onChange: cy.stub() });
-
-    cy.get('input').should('have.value', '25');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the fallback value when the field is cleared out', () => {
-    initialize({
-      dataTestId: 'test',
-      defaultValue: 25,
-      fallbackValue: 10,
-      onChange: cy.stub()
-    });
-
-    cy.get('input').should('have.value', '25');
-    cy.get('input').clear();
-    cy.get('input').should('have.value', '');
-    cy.get('input').should('have.attr', 'placeholder', '10');
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the field using auto size', () => {
-    initialize({
-      autoSize: true,
-      dataTestId: 'test',
-      defaultValue: 25,
-      onChange: cy.stub()
-    });
-
-    cy.get('input').should('have.value', '25');
-
-    cy.get('input').type('0');
-
-    cy.makeSnapshot();
-  });
-
-  it('sets the value to the minimum value configured when a value less than the minimum value is typed in the field', () => {
-    initialize({
-      dataTestId: 'test',
-      defaultValue: 25,
-      onChange: cy.stub(),
-      textFieldSlotsAndSlotProps: {
-        slotProps: {
-          htmlInput: {
-            min: 2
-          }
-        }
-      }
-    });
-
-    cy.get('input').should('have.value', '25');
-
-    cy.get('input').clear().type('-1');
-
-    cy.get('input').should('have.value', '2');
-
-    cy.makeSnapshot();
-  });
-});

package/src/InputField/Select/Autocomplete/Connected/Multi/MultiConnectedAutocompleteField.cypress.spec.tsx

@@ -1,182 +0,0 @@
-import {
-  Method,
-  MultiConnectedAutocompleteField,
-  TestQueryProvider
-} from '@centreon/ui';
-
-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';
-
-const Component = () => {
-  const [values, setValues] = useState([]);
-  return (
-    <TestQueryProvider>
-      <div style={{ paddingTop: 20 }}>
-        <MultiConnectedAutocompleteField
-          disableSelectAll={false}
-          field="host.name"
-          getEndpoint={getEndpoint}
-          label={label}
-          onChange={(_, item) => setValues(item)}
-          placeholder={placeholder}
-          value={values}
-        />
-      </div>
-    </TestQueryProvider>
-  );
-};
-
-describe('Multi connected autocomplete', () => {
-  beforeEach(() => {
-    i18next.use(initReactI18next).init({
-      lng: 'en',
-      resources: {}
-    });
-
-    cy.fixture('inputField/listOptions').then((optionsData) => {
-      cy.interceptAPIRequest({
-        alias: 'getListOptions',
-        method: Method.GET,
-        path: `${baseEndpoint}**`,
-        response: optionsData
-      });
-    });
-
-    cy.fixture('inputField/searchedOption').then((optionData) => {
-      cy.interceptAPIRequest({
-        alias: 'getSearchedOption',
-        method: Method.GET,
-        path: `${baseEndpoint}**`,
-        query: {
-          name: 'search',
-          value: JSON.stringify({
-            $and: [{ 'host.name': { $lk: `%${optionOne}%` } }]
-          })
-        },
-        response: optionData
-      });
-    });
-
-    cy.mount({
-      Component: <Component />
-    });
-  });
-
-  it('displays and hides the list when the user double-clicks on the input', () => {
-    cy.contains(label).should('be.visible');
-
-    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
-
-    cy.get('@input').click();
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.get('@input').invoke('attr', 'placeholder').should('equal', placeholder);
-
-    cy.findByRole('presentation').as('listOptions');
-
-    cy.get('@listOptions').should('be.visible');
-
-    cy.fixture('inputField/listOptions').then((optionsData) => {
-      cy.get('@listOptions').within(() => {
-        optionsData.result.forEach((option) => {
-          cy.contains(option.name);
-        });
-      });
-    });
-
-    cy.makeSnapshot('displays the list when the user clicks on the input');
-
-    cy.get('@input').click();
-
-    cy.get('@listOptions').should('not.exist');
-
-    cy.makeSnapshot('hides the list when the user clicks on the input');
-  });
-
-  it('displays all options on the list when the user searches for and selects an option', () => {
-    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
-
-    cy.get('@input').click();
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.findByRole('presentation').as('listOptions');
-
-    cy.get('@listOptions').should('be.visible');
-
-    cy.get('@input').type(optionOne);
-
-    cy.waitForRequest('@getSearchedOption');
-
-    cy.fixture('inputField/searchedOption').then(() => {
-      cy.get('@listOptions').find('li').should('have.length', 6);
-    });
-
-    cy.get('[type="checkbox"]').eq(0).check();
-    cy.get('@input')
-      .parent()
-      .within(() => {
-        cy.contains(optionOne).should('be.visible');
-
-        cy.get('[data-testid="CancelIcon"]').should('be.visible');
-      });
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.fixture('inputField/listOptions').then((optionsData) => {
-      cy.get('@listOptions')
-        .find('li')
-        .should('have.length', optionsData.result.length + 1);
-
-      cy.get('@listOptions').within(() => {
-        optionsData.result.forEach((option) => {
-          cy.contains(option.name);
-        });
-      });
-    });
-  });
-
-  it('checks all options when Select all button is clicked', () => {
-    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
-
-    cy.get('@input').click();
-
-    cy.contains('5 element(s) found');
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.contains(labelSelectAll).click();
-
-    cy.contains(labelUnSelectAll).should('be.visible');
-
-    cy.get('[data-testid="CancelIcon"]').should('have.length', 5);
-
-    cy.makeSnapshot('checks all options when Select all button is clicked');
-  });
-
-  it('unchecks all options when unSelect all button is clicked', () => {
-    cy.get('[data-testid="Multi Connected Autocomplete"]').as('input');
-
-    cy.get('@input').click();
-
-    cy.contains('5 element(s) found');
-
-    cy.waitForRequest('@getListOptions');
-
-    cy.contains(labelSelectAll).click();
-    cy.contains(labelUnSelectAll).click();
-
-    cy.contains(labelSelectAll).should('be.visible');
-
-    cy.get('[data-testid="CancelIcon"]').should('have.length', 0);
-
-    cy.makeSnapshot('unchecks all options when unSelect all button is clicked');
-  });
-});

package/src/Listing/Listing.cypress.spec.tsx

@@ -1,349 +0,0 @@
-import { Button, Typography } from '@mui/material';
-
-import { ListingVariant } from '@centreon/ui-context';
-
-import { useState } from 'react';
-
-import Listing from '.';
-import { ColumnType } from './models';
-
-interface Props {
-  row: { name: string };
-}
-
-const ButtonColumn = ({ row }: Props): JSX.Element => (
-  <Button size="small">Click to reveal details about {row.name}</Button>
-);
-
-const CheckboxColumn = ({ row }: Props): JSX.Element => {
-  const [checked, setChecked] = useState(false);
-
-  return (
-    <input
-      aria-label={`Toggle ${row.name}`}
-      checked={checked}
-      onChange={(event) => setChecked(event.target.checked)}
-      type="checkbox"
-    />
-  );
-};
-
-const LargeText = (): JSX.Element => (
-  <Typography sx={{ whiteSpace: 'normal' }}>
-    This is a large text that fills the content
-  </Typography>
-);
-
-const tenElements = new Array(10).fill(0);
-
-const generateSubItems = (): Array<unknown> => {
-  return tenElements.map((_, subIndex) => ({
-    active: false,
-    description: `Sub item ${subIndex * 10} description`,
-    disableCheckbox: false,
-    disableRow: false,
-    id: subIndex * 10,
-    name: `Sub Item ${subIndex * 10}`,
-    selected: false
-  }));
-};
-
-const listingWithSubItems = tenElements.map((_, index) => ({
-  active: false,
-  description: `Entity ${index}`,
-  disableCheckbox: false,
-  disableRow: false,
-  id: index,
-  name: `E${index}`,
-  selected: false,
-  subItems: index % 2 === 0 ? generateSubItems() : undefined
-}));
-
-const listingWithSubItems3Rows = Array(3)
-  .fill(0)
-  .map((_, index) => ({
-    active: false,
-    description: `Entity ${index}`,
-    disableCheckbox: false,
-    disableRow: false,
-    id: index,
-    name: `E${index}`,
-    selected: false,
-    subItems: index % 2 === 0 ? generateSubItems() : undefined
-  }));
-
-const defaultColumn = [
-  {
-    getFormattedString: ({ name }): string => name,
-    id: 'name',
-    label: 'Name',
-    type: ColumnType.string
-  },
-  {
-    getFormattedString: ({ description }): string => description,
-    id: 'description',
-    label: 'Description',
-    type: ColumnType.string
-  },
-  {
-    Component: LargeText,
-    id: '#',
-    label: 'Custom',
-    type: ColumnType.component,
-    width: '100px'
-  }
-];
-
-const columnsWithSubItems = [
-  {
-    getFormattedString: ({ name }): string => name,
-    id: 'name',
-    label: 'Name',
-    type: ColumnType.string
-  },
-  {
-    getFormattedString: ({ description }): string => description,
-    id: 'description',
-    label: 'Description',
-    type: ColumnType.string
-  },
-  {
-    Component: ButtonColumn,
-    displaySubItemsCaret: true,
-    id: '#',
-    label: 'Custom',
-    type: ColumnType.component,
-    width: '350px'
-  }
-];
-
-const expandedItems = [0, 8];
-
-const mountListingResponsive = (listingVariant: ListingVariant): void => {
-  cy.viewport('macbook-13');
-
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh' }}>
-        <Listing
-          columns={defaultColumn}
-          currentPage={1}
-          isResponsive
-          limit={10}
-          listingVariant={listingVariant}
-          rows={listingWithSubItems}
-          totalRows={10}
-        />
-      </div>
-    )
-  });
-};
-
-interface TestComponentProps {
-  canCheckSubItems?: boolean;
-  isSmallListing?: boolean;
-}
-
-const TestComponent = ({
-  isSmallListing = false,
-  canCheckSubItems = false
-}: TestComponentProps): JSX.Element => {
-  const [selectedRows, setSelectedRows] = useState([]);
-
-  return (
-    <Listing
-      checkable
-      columns={columnsWithSubItems}
-      currentPage={1}
-      limit={10}
-      onSelectRows={setSelectedRows}
-      rows={isSmallListing ? listingWithSubItems3Rows : listingWithSubItems}
-      selectedRows={selectedRows}
-      subItems={{
-        canCheckSubItems,
-        enable: true,
-        getRowProperty: () => 'subItems',
-        labelCollapse: 'Collapse',
-        labelExpand: 'Expand'
-      }}
-      totalRows={10}
-    />
-  );
-};
-
-const mountListingForSubItems = ({
-  isSmallListing = false,
-  canCheckSubItems = false
-}: TestComponentProps): void => {
-  cy.viewport('macbook-13');
-
-  cy.mount({
-    Component: (
-      <div style={{ height: '100vh' }}>
-        <TestComponent
-          canCheckSubItems={canCheckSubItems}
-          isSmallListing={isSmallListing}
-        />
-      </div>
-    )
-  });
-};
-
-describe('Listing', () => {
-  describe('Sub items', () => {
-    it('expands the row when the corresponding icon is clicked', () => {
-      mountListingForSubItems({});
-
-      cy.contains('E0').should('be.visible');
-
-      expandedItems.forEach((index) => {
-        const subItems = generateSubItems(index);
-
-        cy.findByLabelText(`Expand ${index}`).click();
-
-        cy.findByLabelText(`Collapse ${index}`).should('exist');
-
-        subItems.forEach(({ name, description }) => {
-          cy.contains(name).should('exist');
-          cy.contains(description).should('exist');
-        });
-
-        cy.findByLabelText(`Collapse ${index}`).click();
-      });
-
-      cy.makeSnapshot();
-    });
-
-    it('collapses the row when the corresponding icon is clicked', () => {
-      mountListingForSubItems({});
-
-      cy.findByLabelText('Expand 0').click();
-
-      cy.contains('Sub item 10').should('be.visible');
-
-      cy.findByLabelText('Collapse 0').click();
-
-      cy.contains('Sub item 10').should('not.exist');
-
-      cy.makeSnapshot();
-    });
-
-    it('displays only one row as hovered when mutilple rows are expanded and a sub item row is hovered', () => {
-      mountListingForSubItems({ isSmallListing: true });
-
-      cy.findByLabelText('Expand 2').click();
-      cy.findByLabelText('Expand 0').click();
-
-      cy.findByLabelText('Collapse 0').should('be.visible');
-      cy.findByLabelText('Collapse 2').should('be.visible');
-
-      cy.contains('Sub Item 0').realHover();
-
-      cy.get('[data-is-hovered="true"]').should('have.length', 1);
-      cy.get('[data-is-hovered="true"]').contains('Sub Item 0').should('exist');
-
-      cy.findByLabelText('Collapse 0').click();
-      cy.findByLabelText('Collapse 2').click();
-    });
-
-    it('selects displayed rows when a row is selected and another row is selected with the shift key', () => {
-      mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
-
-      cy.findByLabelText('Expand 2').click();
-
-      cy.findByLabelText('Collapse 2').should('be.visible');
-
-      cy.findAllByLabelText('Select row 2').eq(0).click();
-      cy.get('body').type('{shift}', { release: false });
-      cy.findByLabelText('Select row 50').eq(0).click();
-
-      cy.findAllByLabelText('Select row 2').eq(0).should('be.checked');
-      cy.findByLabelText('Select row 10').should('be.checked');
-      cy.findByLabelText('Select row 20').should('be.checked');
-      cy.findByLabelText('Select row 30').should('be.checked');
-      cy.findByLabelText('Select row 40').should('be.checked');
-
-      cy.findByLabelText('Collapse 2').click();
-    });
-
-    it('selects displayed rows when the corresponding checkbox is clicked', () => {
-      mountListingForSubItems({ canCheckSubItems: true, isSmallListing: true });
-
-      cy.findByLabelText('Expand 2').click();
-
-      cy.findByLabelText('Collapse 2').should('be.visible');
-
-      cy.findAllByLabelText('Select all').eq(0).click();
-
-      cy.findAllByLabelText('Select row 2').eq(0).should('be.checked');
-      tenElements.forEach((_, index) => {
-        if (index === 0) {
-          cy.findAllByLabelText('Select row 0').eq(1).should('be.checked');
-
-          return;
-        }
-        cy.findByLabelText(`Select row ${index * 10}`).should('be.checked');
-      });
-      cy.findByLabelText('Select row 1').should('be.checked');
-      cy.findByLabelText('Select row 2').should('be.checked');
-
-      cy.findByLabelText('Collapse 2').click();
-    });
-  });
-
-  it('displays the last column on several lines in compact mode when the isResponsive prop is set', () => {
-    mountListingResponsive(ListingVariant.compact);
-
-    cy.get('.MuiTable-root').should(
-      'have.css',
-      'grid-template-rows',
-      '30px 85px 85px 85px 85px 85px 85px 85px 85px 85px 85px'
-    );
-
-    cy.makeSnapshot();
-  });
-
-  it('displays the last column on several lines in extended mode when the isResponsive prop is set', () => {
-    mountListingResponsive(ListingVariant.extended);
-
-    cy.get('.MuiTable-root').should(
-      'have.css',
-      'grid-template-rows',
-      '38px 85px 85px 85px 85px 85px 85px 85px 85px 85px 85px'
-    );
-
-    cy.makeSnapshot();
-  });
-
-  it('toggles a checkbox in a clickable column without clicking the row', () => {
-    const onRowClick = cy.stub().as('rowClick');
-
-    cy.mount({
-      Component: (
-        <div style={{ height: '100vh' }}>
-          <Listing
-            columns={[
-              {
-                Component: CheckboxColumn,
-                clickable: true,
-                id: 'toggle',
-                label: 'Toggle',
-                type: ColumnType.component
-              }
-            ]}
-            currentPage={1}
-            limit={10}
-            onRowClick={onRowClick}
-            rows={[{ id: 0, name: 'E0' }]}
-            totalRows={1}
-          />
-        </div>
-      )
-    });
-
-    cy.findByLabelText('Toggle E0').click();
-
-    cy.findByLabelText('Toggle E0').should('be.checked');
-    cy.get('@rowClick').should('not.have.been.called');
-  });
-});