@centreon/ui 26.10.7 → 26.10.9

package/src/Form/Form.cypress.spec.tsx

@@ -1,306 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { faker } from '@faker-js/faker';
-import { useFormikContext } from 'formik';
-import { object } from 'yup';
-
-import { Button } from '../components';
-import { Form } from './Form';
-import { InputType } from './Inputs/models';
-
-faker.seed(42);
-
-const AddItem = ({ addItem }: { addItem: (item) => void }): JSX.Element => {
-  const { values } = useFormikContext();
-  const add = (): void => {
-    addItem({
-      alias: faker.company.name(),
-      id: values.list.length,
-      name: faker.person.firstName()
-    });
-  };
-
-  return (
-    <Button onClick={add} variant="ghost">
-      Add item
-    </Button>
-  );
-};
-
-const SortContent = ({
-  name,
-  alias
-}: {
-  alias: string;
-  name: string;
-}): JSX.Element => (
-  <Typography>
-    {name} ({alias})
-  </Typography>
-);
-
-const initializeFormList = (): void => {
-  cy.mount({
-    Component: (
-      <Form
-        initialValues={{
-          list: []
-        }}
-        inputs={[
-          {
-            fieldName: 'list',
-            group: '',
-            label: '',
-            list: {
-              AddItem,
-              addItemLabel: 'Add an item to the list',
-              itemProps: ['id', 'name', 'alias'],
-              SortContent,
-              sortLabel: 'Sort items'
-            },
-            type: InputType.List
-          }
-        ]}
-        submit={cy.stub()}
-        validationSchema={object()}
-      />
-    )
-  });
-};
-
-describe('Form list', () => {
-  beforeEach(initializeFormList);
-
-  it('adds an element to the list', () => {
-    cy.contains('Add an item to the list').should('be.visible');
-    cy.contains('Sort items').should('be.visible');
-
-    cy.contains('Add item').click();
-
-    cy.findByLabelText('sort-0').should('be.visible');
-    cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Lavinia (Wiegand LLC)').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('sorts elements in the list', () => {
-    cy.contains('Add an item to the list').should('be.visible');
-    cy.contains('Sort items').should('be.visible');
-
-    cy.contains('Add item').click();
-    cy.contains('Add item').click();
-
-    cy.findByLabelText('sort-0').should('be.visible');
-    cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Sammie (Crist - Beer)').should('be.visible');
-    cy.findByLabelText('sort-1').should('be.visible');
-    cy.findByLabelText('delete-1').should('be.visible');
-    cy.contains('Waino (Quigley Group)').should('be.visible');
-
-    cy.moveSortableElementUsingAriaLabel({
-      ariaLabel: 'sort-0',
-      direction: 'down'
-    });
-
-    cy.contains('Waino (Quigley Group)').should('be.visible');
-    cy.contains('Sammie (Crist - Beer)').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-
-  it('removes an element from the list', () => {
-    cy.contains('Add an item to the list').should('be.visible');
-    cy.contains('Sort items').should('be.visible');
-
-    cy.contains('Add item').click();
-    cy.contains('Add item').click();
-
-    cy.findByLabelText('sort-0').should('be.visible');
-    cy.findByLabelText('delete-0').should('be.visible');
-    cy.contains('Elliott (Effertz, Deckow and Deckow)').should('be.visible');
-    cy.findByLabelText('sort-1').should('be.visible');
-    cy.findByLabelText('delete-1').should('be.visible');
-    cy.contains('Leopoldo (Kemmer Inc)').should('be.visible');
-
-    cy.findByLabelText('delete-0').click();
-
-    cy.contains('Elliott (Effertz, Deckow and Deckow)').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-});
-
-const initializeFormWithSections = (): void => {
-  cy.mount({
-    Component: (
-      <Form
-        groups={[
-          {
-            name: 'First group',
-            order: 1
-          },
-          {
-            name: 'Third group',
-            order: 3
-          },
-          {
-            name: 'Second group',
-            order: 2
-          },
-          {
-            name: 'Fourth group',
-            order: 4
-          }
-        ]}
-        initialValues={{
-          list: []
-        }}
-        inputs={[
-          {
-            fieldName: 'First name',
-            group: 'First group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'Divider',
-            group: 'First group',
-            label: 'Divider',
-            type: InputType.Divider
-          },
-          {
-            fieldName: 'Second name',
-            group: 'First group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'Third name',
-            group: 'First group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'Fourth name',
-            group: 'First group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'Fifth name',
-            group: 'First group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'Sixth name',
-            group: 'First group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'Seventh name',
-            group: 'First group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'Eighth name',
-            group: 'First group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'Ninth name',
-            group: 'First group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'First second group name',
-            group: 'Second group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'First third group name',
-            group: 'Third group',
-            label: 'Name',
-            type: InputType.Text
-          },
-          {
-            fieldName: 'First fourth group name',
-            group: 'Fourth group',
-            label: 'Name',
-            type: InputType.Text
-          }
-        ]}
-        isCollapsible
-        submit={cy.stub()}
-        validationSchema={object()}
-      />
-    )
-  });
-};
-
-const initializeFile = () => {
-  cy.mount({
-    Component: (
-      <Form
-        initialValues={{
-          list: []
-        }}
-        inputs={[
-          {
-            fieldName: 'list',
-            file: {
-              accept: '.json'
-            },
-            group: '',
-            label: 'json',
-            type: InputType.File
-          }
-        ]}
-        submit={cy.stub()}
-        validationSchema={object()}
-      />
-    )
-  });
-};
-
-describe('File', () => {
-  it('uploads a file when a file is selected', () => {
-    initializeFile();
-
-    cy.contains('Drop or select a file').should('be.visible');
-    cy.findByLabelText('select a file').selectFile('package.json', {
-      force: true
-    });
-    cy.contains('package.json').should('be.visible');
-
-    cy.makeSnapshot();
-  });
-});
-
-describe('Form with sections', () => {
-  beforeEach(initializeFormWithSections);
-  it('displays sections when correct amount of sections', () => {
-    cy.contains('First group').should('be.visible');
-    cy.contains('Second group').should('be.visible');
-    cy.contains('Third group').should('be.visible');
-    cy.contains('Fourth group').should('be.visible');
-    cy.makeSnapshot();
-  });
-
-  it('scrolls correctly to section', () => {
-    cy.window().then((win) => {
-      const initialScrollY = win.scrollY;
-      cy.contains('Third group').click();
-      cy.window().its('scrollY').should('be.greaterThan', initialScrollY);
-    });
-
-    cy.wait(500); // Wait for the scroll animation to complete
-    cy.makeSnapshot();
-  });
-});

package/src/Form/Inputs/ExclusiveCheckboxGroup.cypress.spec.tsx

@@ -1,174 +0,0 @@
-import { Typography } from '@mui/material';
-
-import { useFormikContext } from 'formik';
-import { object } from 'yup';
-
-import { Form } from '../Form';
-import { InputType } from './models';
-
-const options = ['Down', 'Unreachable', 'Recovery', 'None'];
-
-const ValueDisplay = (): JSX.Element => {
-  const { values } = useFormikContext<{
-    notificationOptions: Array<string> | null;
-  }>();
-
-  return (
-    <Typography data-testid="value">
-      {JSON.stringify(values.notificationOptions)}
-    </Typography>
-  );
-};
-
-const initialize = ({
-  notificationOptions = [],
-  disabled = false
-}: {
-  disabled?: boolean;
-  notificationOptions?: Array<string> | null;
-} = {}): void => {
-  cy.mount({
-    Component: (
-      <Form
-        initialValues={{ notificationOptions }}
-        inputs={[
-          {
-            dataTestId: 'notification-options',
-            exclusiveCheckboxGroup: {
-              direction: 'horizontal',
-              exclusiveLabel: 'No notifications',
-              exclusiveOption: 'None',
-              options
-            },
-            fieldName: 'notificationOptions',
-            getDisabled: () => disabled,
-            group: '',
-            label: 'Notification options',
-            type: InputType.ExclusiveCheckboxGroup
-          },
-          {
-            custom: { Component: ValueDisplay },
-            fieldName: 'value',
-            group: '',
-            label: 'value',
-            type: InputType.Custom
-          }
-        ]}
-        submit={cy.stub()}
-        validationSchema={object()}
-      />
-    )
-  });
-};
-
-const toggle = (): Cypress.Chainable => cy.findByLabelText('No notifications');
-
-const expectValue = (value: Array<string> | null): void => {
-  cy.findByTestId('value').should('have.text', JSON.stringify(value));
-};
-
-describe('Exclusive checkbox group', () => {
-  it('displays the toggle and every option except the exclusive one', () => {
-    initialize();
-
-    toggle().should('not.be.checked');
-    cy.findByLabelText('Down').should('exist');
-    cy.findByLabelText('Unreachable').should('exist');
-    cy.findByLabelText('Recovery').should('exist');
-    cy.findByLabelText('None').should('not.exist');
-
-    cy.makeSnapshot();
-  });
-
-  it('keeps the inherited state when nothing is selected', () => {
-    initialize();
-
-    toggle().should('not.be.checked');
-    cy.findByLabelText('Down').should('not.be.checked').and('be.enabled');
-    expectValue([]);
-  });
-
-  it('treats a null value as the inherited state', () => {
-    initialize({ notificationOptions: null });
-
-    toggle().should('not.be.checked');
-    cy.findByLabelText('Down').should('not.be.checked').and('be.enabled');
-  });
-
-  it('displays the exclusive state from the initial value', () => {
-    initialize({ notificationOptions: ['None'] });
-
-    toggle().should('be.checked');
-    cy.findByLabelText('Down').should('not.be.checked').and('be.disabled');
-    expectValue(['None']);
-
-    cy.makeSnapshot();
-  });
-
-  it('displays a selection from the initial value', () => {
-    initialize({ notificationOptions: ['Down', 'Recovery'] });
-
-    toggle().should('not.be.checked');
-    cy.findByLabelText('Down').should('be.checked');
-    cy.findByLabelText('Unreachable').should('not.be.checked');
-    cy.findByLabelText('Recovery').should('be.checked');
-    expectValue(['Down', 'Recovery']);
-  });
-
-  it('goes from the inherited state to a selection and back', () => {
-    initialize();
-
-    cy.findByLabelText('Down').click();
-    cy.findByLabelText('Recovery').click();
-    expectValue(['Down', 'Recovery']);
-
-    cy.findByLabelText('Down').click();
-    cy.findByLabelText('Recovery').click();
-    expectValue([]);
-    toggle().should('not.be.checked');
-  });
-
-  it('goes from the inherited state to the exclusive state and back', () => {
-    initialize();
-
-    toggle().click();
-    toggle().should('be.checked');
-    expectValue(['None']);
-
-    toggle().click();
-    toggle().should('not.be.checked');
-    expectValue([]);
-  });
-
-  it('clears the selection when the toggle is turned on and leaves it empty when turned off', () => {
-    initialize({ notificationOptions: ['Down', 'Recovery'] });
-
-    toggle().click();
-    expectValue(['None']);
-    cy.findByLabelText('Down').should('not.be.checked').and('be.disabled');
-    cy.findByLabelText('Recovery').should('not.be.checked').and('be.disabled');
-
-    toggle().click();
-    expectValue([]);
-    cy.findByLabelText('Down').should('not.be.checked').and('be.enabled');
-
-    cy.findByLabelText('Unreachable').click();
-    expectValue(['Unreachable']);
-  });
-
-  it('prevents ticking a box while the toggle is on', () => {
-    initialize({ notificationOptions: ['None'] });
-
-    cy.findByLabelText('Down').click({ force: true });
-    cy.findByLabelText('Down').should('not.be.checked');
-    expectValue(['None']);
-  });
-
-  it('disables both the toggle and the checkboxes when the input is disabled', () => {
-    initialize({ disabled: true, notificationOptions: ['Down'] });
-
-    toggle().should('be.disabled');
-    cy.findByLabelText('Down').should('be.checked').and('be.disabled');
-    expectValue(['Down']);
-  });
-});

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();
-  });
-});