@centreon/ui 26.12.1 → 26.12.3

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,236 +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,
-  variant
-}: {
-  disabled?: boolean;
-  notificationOptions?: Array<string> | null;
-  variant?: 'checkboxes' | 'chips';
-} = {}): void => {
-  cy.mount({
-    Component: (
-      <Form
-        initialValues={{ notificationOptions }}
-        inputs={[
-          {
-            dataTestId: 'notification-options',
-            exclusiveCheckboxGroup: {
-              direction: 'horizontal',
-              exclusiveLabel: 'No notifications',
-              exclusiveOption: 'None',
-              options,
-              variant
-            },
-            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']);
-  });
-});
-
-describe('Exclusive checkbox group, as chips', () => {
-  const chip = (option: string): Cypress.Chainable =>
-    cy.findByTestId(`notification-options-${option}`);
-
-  it('displays the options as chips and the exclusive one as the toggle', () => {
-    initialize({ variant: 'chips' });
-
-    ['Down', 'Unreachable', 'Recovery'].forEach((option) => {
-      chip(option).should('have.attr', 'aria-pressed', 'false');
-    });
-    chip('None').should('not.exist');
-    toggle().should('not.be.checked');
-    cy.findByRole('checkbox', { name: 'Down' }).should('not.exist');
-  });
-
-  it('toggles a chip on and off', () => {
-    initialize({ variant: 'chips' });
-
-    chip('Down').click();
-    chip('Recovery').click();
-
-    expectValue(['Down', 'Recovery']);
-    chip('Down').should('have.attr', 'aria-pressed', 'true');
-
-    chip('Down').click();
-
-    expectValue(['Recovery']);
-  });
-
-  it('clears and disables the chips while the toggle is on', () => {
-    initialize({ notificationOptions: ['Down', 'Recovery'], variant: 'chips' });
-
-    toggle().click();
-
-    expectValue(['None']);
-    chip('Down')
-      .should('have.attr', 'aria-pressed', 'false')
-      .and('have.attr', 'aria-disabled', 'true');
-  });
-
-  it('leaves the chips empty and usable once the toggle is off', () => {
-    initialize({ notificationOptions: ['None'], variant: 'chips' });
-
-    toggle().click();
-
-    expectValue([]);
-    chip('Unreachable').click();
-
-    expectValue(['Unreachable']);
-  });
-
-  it('disables the chips and the toggle when the input is disabled', () => {
-    initialize({ disabled: true, variant: 'chips' });
-
-    chip('Down').should('have.attr', 'aria-disabled', 'true');
-    toggle().should('be.disabled');
-  });
-});

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

@@ -1,101 +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 = [
-  { label: 'Yes', value: 'true' },
-  { label: 'No', value: 'false' },
-  { label: 'Default', value: 'use_default' }
-];
-
-const ValueDisplay = (): JSX.Element => {
-  const { values } = useFormikContext<{ enabled: string }>();
-
-  return (
-    <Typography data-testid="value">
-      {JSON.stringify(values.enabled)}
-    </Typography>
-  );
-};
-
-const initialize = ({
-  enabled = 'use_default',
-  disabled = false
-}: {
-  disabled?: boolean;
-  enabled?: string;
-} = {}): void => {
-  cy.mount({
-    Component: (
-      <Form
-        initialValues={{ enabled }}
-        inputs={[
-          {
-            dataTestId: 'enabled',
-            fieldName: 'enabled',
-            getDisabled: () => disabled,
-            group: '',
-            label: 'Notification Enabled',
-            segmentedButtons: { options },
-            type: InputType.SegmentedButtons
-          },
-          {
-            custom: { Component: ValueDisplay },
-            fieldName: 'value',
-            group: '',
-            label: 'value',
-            type: InputType.Custom
-          }
-        ]}
-        submit={cy.stub()}
-        validationSchema={object()}
-      />
-    )
-  });
-};
-
-const button = (label: string): Cypress.Chainable =>
-  cy.findByRole('button', { name: label });
-
-describe('Segmented buttons', () => {
-  it('displays every option and marks the current one', () => {
-    initialize();
-
-    cy.contains('Notification Enabled').should('be.visible');
-    button('Yes').should('have.attr', 'aria-pressed', 'false');
-    button('No').should('have.attr', 'aria-pressed', 'false');
-    button('Default').should('have.attr', 'aria-pressed', 'true');
-  });
-
-  it('stores the value of the clicked option as given', () => {
-    initialize();
-
-    button('Yes').click();
-
-    // A string, not the boolean the radio would store.
-    cy.findByTestId('value').should('have.text', '"true"');
-    button('Yes').should('have.attr', 'aria-pressed', 'true');
-    button('Default').should('have.attr', 'aria-pressed', 'false');
-
-    button('No').click();
-
-    cy.findByTestId('value').should('have.text', '"false"');
-  });
-
-  it('starts on the initial value', () => {
-    initialize({ enabled: 'false' });
-
-    button('No').should('have.attr', 'aria-pressed', 'true');
-  });
-
-  it('does not change when disabled', () => {
-    initialize({ disabled: true });
-
-    button('Yes').should('be.disabled');
-    cy.findByTestId('value').should('have.text', '"use_default"');
-  });
-});