@centreon/ui 26.10.8 → 26.10.10

package/src/components/SortableEntriesList/SortableEntriesList.cypress.spec.tsx

@@ -1,792 +0,0 @@
-import DescriptionOutlinedIcon from '@mui/icons-material/DescriptionOutlined';
-import EditIcon from '@mui/icons-material/Edit';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-
-import { useState } from 'react';
-
-import { TestQueryProvider } from '../..';
-import buildListingEndpoint from '../../api/buildListingEndpoint';
-import type { SelectEntry } from '../../InputField/Select';
-import SingleConnectedAutocompleteField from '../../InputField/Select/Autocomplete/Connected/Single';
-import TextField from '../../InputField/Text';
-import type { RenderRowParams, RowParams, SortableRowAction } from './models';
-import { type Props, SortableEntriesList } from './SortableEntriesList';
-
-type Stub = ReturnType<typeof cy.stub>;
-
-const ControlledList = <T,>({
-  initialValues,
-  onChangeSpy,
-  ...props
-}: Omit<Props<T>, 'values' | 'onChange'> & {
-  initialValues: Array<T>;
-  onChangeSpy: Stub;
-}): JSX.Element => {
-  const [values, setValues] = useState(initialValues);
-
-  return (
-    <SortableEntriesList<T>
-      {...props}
-      onChange={(nextValues): void => {
-        onChangeSpy(nextValues);
-        setValues(nextValues);
-      }}
-      values={values}
-    />
-  );
-};
-
-const getLastValues = <T,>(onChange: Stub): Array<T> =>
-  onChange.lastCall.args[0];
-
-const getRows = (): Cypress.Chainable => cy.findAllByRole('listitem');
-
-const endpoint = '/configuration/hosts/templates';
-
-const options: Array<SelectEntry> = [
-  { id: 1, name: 'generic-active-host' },
-  { id: 2, name: 'generic-passive-host' },
-  { id: 3, name: 'linux-server-standard' }
-];
-
-type TemplateRow = SelectEntry | null;
-
-const renderTemplateRow = ({
-  setValue,
-  value,
-  values
-}: RenderRowParams<TemplateRow>): JSX.Element => {
-  const selectedElsewhere = values
-    .map((template) => template?.id)
-    .filter((id) => id !== value?.id);
-
-  return (
-    <SingleConnectedAutocompleteField
-      baseEndpoint=""
-      field="name"
-      fullWidth
-      getEndpoint={(parameters): string =>
-        buildListingEndpoint({ baseEndpoint: endpoint, parameters })
-      }
-      getOptionDisabled={(option: SelectEntry): boolean =>
-        selectedElsewhere.includes(option.id)
-      }
-      label="Template"
-      onChange={(_event, template): void => setValue(template as TemplateRow)}
-      value={value}
-    />
-  );
-};
-
-const initializeTemplates = ({
-  draggable = true,
-  templates = [options[0], options[1]]
-}: {
-  draggable?: boolean;
-  templates?: Array<TemplateRow>;
-} = {}): { onChange: Stub; onEdit: Stub } => {
-  const onChange = cy.stub();
-  const onEdit = cy.stub();
-
-  cy.intercept('GET', `**${endpoint}**`, {
-    body: {
-      meta: { limit: 10, page: 1, total: options.length },
-      result: options
-    },
-    statusCode: 200
-  }).as('getTemplates');
-
-  cy.mount({
-    Component: (
-      <TestQueryProvider>
-        <div className="p-4">
-          <ControlledList<TemplateRow>
-            actions={({
-              index,
-              value
-            }: RowParams<TemplateRow>): Array<SortableRowAction> => [
-              {
-                icon: <EditIcon />,
-                id: 'edit-template',
-                label: 'Edit template',
-                onClick: () => onEdit(value, index)
-              }
-            ]}
-            createValue={(): TemplateRow => null}
-            draggable={draggable}
-            initialValues={templates}
-            label="Templates"
-            onChangeSpy={onChange}
-            renderRow={renderTemplateRow}
-          />
-        </div>
-      </TestQueryProvider>
-    )
-  });
-
-  return { onChange, onEdit };
-};
-
-describe('SortableEntriesList - single input rows', () => {
-  it('displays one row per value with its value, its actions, a delete button and a trailing drag handle', () => {
-    initializeTemplates();
-
-    cy.findByRole('list', { name: 'Templates' }).should('exist');
-    getRows().should('have.length', 2);
-    cy.get('[data-testid="Template"]')
-      .eq(0)
-      .should('have.value', options[0].name);
-    cy.get('[data-testid="Template"]')
-      .eq(1)
-      .should('have.value', options[1].name);
-    cy.findAllByTestId('edit-template').should('have.length', 2);
-    cy.findAllByTestId('delete-row').should('have.length', 2);
-
-    getRows()
-      .eq(0)
-      .find('button')
-      .last()
-      .should('have.attr', 'data-testid', 'drag-handle');
-
-    cy.makeSnapshot();
-  });
-
-  it('reports the plain values, without any internal id, when an option is selected', () => {
-    const { onChange } = initializeTemplates();
-
-    cy.get('[data-testid="Template"]').eq(1).click();
-    cy.wait('@getTemplates');
-    cy.findByRole('option', { name: options[2].name }).click();
-
-    cy.get('[data-testid="Template"]')
-      .eq(1)
-      .should('have.value', options[2].name);
-    cy.wrap(onChange).should(() => {
-      expect(getLastValues(onChange)).to.deep.equal([options[0], options[2]]);
-    });
-  });
-
-  it('lets a row disable the options already selected in sibling rows', () => {
-    initializeTemplates();
-
-    cy.get('[data-testid="Template"]').eq(1).click();
-    cy.wait('@getTemplates');
-
-    cy.findByRole('option', { name: options[0].name }).should(
-      'have.attr',
-      'aria-disabled',
-      'true'
-    );
-    cy.findByRole('option', { name: options[2].name }).should(
-      'not.have.attr',
-      'aria-disabled',
-      'true'
-    );
-  });
-
-  it('appends a row built with createValue and focuses its first input', () => {
-    const { onChange } = initializeTemplates();
-
-    cy.findByTestId('Add').click();
-
-    getRows().should('have.length', 3);
-    cy.get('[data-testid="Template"]').eq(2).should('have.value', '');
-    cy.focused().should('have.attr', 'data-testid', 'Template');
-    cy.focused()
-      .closest('li')
-      .should(($row) => {
-        expect($row.index()).to.equal(2);
-      });
-    cy.wrap(onChange).should(() => {
-      expect(getLastValues(onChange)).to.deep.equal([
-        options[0],
-        options[1],
-        null
-      ]);
-    });
-  });
-
-  it('removes a row and moves the focus to the first input of the row taking its place', () => {
-    const { onChange } = initializeTemplates({
-      templates: [options[0], options[1], options[2]]
-    });
-
-    cy.findAllByTestId('delete-row').eq(0).click();
-
-    getRows().should('have.length', 2);
-    cy.wrap(onChange).should(() => {
-      expect(getLastValues(onChange)).to.deep.equal([options[1], options[2]]);
-    });
-    cy.focused()
-      .should('have.attr', 'data-testid', 'Template')
-      .should('have.value', options[1].name);
-  });
-
-  it('moves the focus to the previous row when the last row is removed, then to the add button when the list becomes empty', () => {
-    initializeTemplates();
-
-    cy.findAllByTestId('delete-row').eq(1).click();
-    cy.focused()
-      .closest('li')
-      .find('[data-testid="Template"]')
-      .should('have.value', options[0].name);
-
-    cy.findAllByTestId('delete-row').eq(0).click();
-    getRows().should('not.exist');
-    cy.focused().should('have.attr', 'data-testid', 'Add');
-  });
-
-  it('reorders the rows with the keyboard through the drag handle', () => {
-    const { onChange } = initializeTemplates();
-
-    cy.moveSortableElement({
-      direction: 'down',
-      element: cy.findAllByTestId('drag-handle').eq(0)
-    });
-
-    cy.get('[data-testid="Template"]')
-      .eq(0)
-      .should('have.value', options[1].name);
-    cy.get('[data-testid="Template"]')
-      .eq(1)
-      .should('have.value', options[0].name);
-    cy.wrap(onChange).should(() => {
-      expect(getLastValues(onChange)).to.deep.equal([options[1], options[0]]);
-    });
-  });
-
-  it('passes the up-to-date row value and index to the actions after a reorder', () => {
-    const { onEdit } = initializeTemplates();
-
-    cy.moveSortableElement({
-      direction: 'down',
-      element: cy.findAllByTestId('drag-handle').eq(0)
-    });
-    cy.get('[data-testid="Template"]')
-      .eq(0)
-      .should('have.value', options[1].name);
-
-    cy.findAllByTestId('edit-template').eq(1).click();
-    cy.wrap(onEdit).should('have.been.calledWith', options[0], 1);
-  });
-
-  it('hides the drag handle when the list is not draggable', () => {
-    initializeTemplates({ draggable: false });
-
-    cy.findAllByTestId('delete-row').should('have.length', 2);
-    cy.findByTestId('drag-handle').should('not.exist');
-  });
-
-  it('lets the inputs take the remaining width and keeps the row buttons at a 32px pitch', () => {
-    initializeTemplates();
-
-    cy.get('[data-row-fields]')
-      .eq(0)
-      .next()
-      .find('button')
-      .should('have.length', 3)
-      .then(($buttons) => {
-        const lefts = $buttons
-          .toArray()
-          .map((button) => button.getBoundingClientRect().left);
-
-        lefts.slice(1).forEach((left, index) => {
-          expect(left - lefts[index]).to.equal(32);
-        });
-      });
-
-    cy.get('[data-row-fields]')
-      .eq(0)
-      .invoke('outerWidth')
-      .should('be.greaterThan', 500);
-  });
-});
-
-interface MacroRow {
-  isPassword: boolean;
-  name: string;
-  origin: 'direct' | 'fromTpl';
-  value: string;
-}
-
-const macros: Array<MacroRow> = [
-  { isPassword: false, name: 'MACRO_A', origin: 'direct', value: 'a' },
-  { isPassword: true, name: 'MACRO_B', origin: 'fromTpl', value: 'b' }
-];
-
-const emptyMacro: MacroRow = {
-  isPassword: false,
-  name: '',
-  origin: 'direct',
-  value: ''
-};
-
-const renderMacroRow = ({
-  setField,
-  value: macro
-}: RenderRowParams<MacroRow>): JSX.Element => (
-  <div className="grid grid-cols-2 gap-2 @max-[600px]:grid-cols-1">
-    <TextField
-      dataTestId="macro-name"
-      fullWidth
-      label="Name"
-      onChange={(event): void => setField('name', event.target.value)}
-      value={macro.name}
-    />
-    <TextField
-      dataTestId="macro-value"
-      fullWidth
-      label="Value"
-      onChange={(event): void => setField('value', event.target.value)}
-      type={macro.isPassword ? 'password' : 'text'}
-      value={macro.value}
-    />
-  </div>
-);
-
-const MacrosList = ({
-  copyOnChange,
-  onChangeSpy
-}: {
-  copyOnChange: boolean;
-  onChangeSpy: Stub;
-}): JSX.Element => {
-  const [values, setValues] = useState(macros);
-
-  const change = (nextValues: Array<MacroRow>): void => {
-    onChangeSpy(nextValues);
-    // Simulates a parent that stores a copy (new array and objects), like a
-    // form library that clones its state.
-    setValues(
-      copyOnChange ? nextValues.map((macro) => ({ ...macro })) : nextValues
-    );
-  };
-
-  return (
-    <>
-      <button
-        data-testid="reset"
-        onClick={(): void => setValues([emptyMacro])}
-        type="button"
-      >
-        Reset
-      </button>
-      <SortableEntriesList<MacroRow>
-        actions={({ index, value }) => [
-          {
-            icon: <VisibilityIcon />,
-            id: 'toggle-password',
-            label: 'Toggle password',
-            onClick: () =>
-              change(
-                values.map((macro, macroIndex) =>
-                  macroIndex === index
-                    ? { ...macro, isPassword: !value.isPassword }
-                    : macro
-                )
-              )
-          }
-        ]}
-        createValue={(): MacroRow => emptyMacro}
-        getRowClassName={({ value }) => `origin-${value.origin}`}
-        onChange={change}
-        renderRow={renderMacroRow}
-        values={values}
-      />
-    </>
-  );
-};
-
-const initializeMacros = ({
-  copyOnChange = false
-}: {
-  copyOnChange?: boolean;
-} = {}): { onChange: Stub } => {
-  const onChange = cy.stub();
-
-  cy.mount({
-    Component: <MacrosList copyOnChange={copyOnChange} onChangeSpy={onChange} />
-  });
-
-  return { onChange };
-};
-
-describe('SortableEntriesList - multiple input rows', () => {
-  it('renders every input of every row', () => {
-    initializeMacros();
-
-    cy.get('input[data-testid="macro-name"]').should('have.length', 2);
-    cy.get('input[data-testid="macro-value"]').should('have.length', 2);
-    cy.get('input[data-testid="macro-value"]')
-      .eq(1)
-      .should('have.attr', 'type', 'password');
-  });
-
-  it('keeps the focus in the edited input while typing and reports a structured value', () => {
-    const { onChange } = initializeMacros();
-
-    cy.get('input[data-testid="macro-name"]').eq(0).clear();
-    cy.get('input[data-testid="macro-name"]').eq(0).type('HOST_IP');
-    cy.focused().should('have.value', 'HOST_IP');
-
-    cy.get('input[data-testid="macro-value"]').eq(0).clear();
-    cy.get('input[data-testid="macro-value"]').eq(0).type('10.0.0.1');
-    cy.focused().should('have.value', '10.0.0.1');
-
-    cy.wrap(onChange).should(() => {
-      expect(getLastValues(onChange)).to.deep.equal([
-        {
-          isPassword: false,
-          name: 'HOST_IP',
-          origin: 'direct',
-          value: '10.0.0.1'
-        },
-        macros[1]
-      ]);
-    });
-  });
-
-  it('keeps the focus when a new row is typed into right after being added', () => {
-    const { onChange } = initializeMacros();
-
-    cy.findByTestId('Add').click();
-    cy.focused().should('have.attr', 'data-testid', 'macro-name').type('NEW');
-    cy.get('input[data-testid="macro-value"]').eq(2).type('value');
-
-    cy.wrap(onChange).should(() => {
-      expect(getLastValues<MacroRow>(onChange)[2]).to.deep.equal({
-        ...emptyMacro,
-        name: 'NEW',
-        value: 'value'
-      });
-    });
-  });
-
-  it('keeps the rows and the focus stable when the parent stores a copy of the values', () => {
-    const { onChange } = initializeMacros({ copyOnChange: true });
-
-    cy.get('input[data-testid="macro-name"]').eq(1).clear();
-    cy.get('input[data-testid="macro-name"]').eq(1).type('RENAMED');
-    cy.focused().should('have.value', 'RENAMED');
-
-    cy.findByTestId('Add').click();
-    cy.focused().should('have.attr', 'data-testid', 'macro-name').type('NEW');
-
-    cy.wrap(onChange).should(() => {
-      expect(
-        getLastValues<MacroRow>(onChange).map(({ name }) => name)
-      ).to.deep.equal(['MACRO_A', 'RENAMED', 'NEW']);
-    });
-  });
-
-  it('renders the new values when the parent replaces them', () => {
-    initializeMacros();
-
-    cy.findByTestId('reset').click();
-
-    getRows().should('have.length', 1);
-    cy.get('input[data-testid="macro-name"]').should('have.value', '');
-  });
-
-  it('lets a row action change its own row', () => {
-    initializeMacros();
-
-    cy.findAllByTestId('toggle-password').eq(0).click();
-
-    cy.get('input[data-testid="macro-value"]')
-      .eq(0)
-      .should('have.attr', 'type', 'password');
-  });
-
-  it('applies the class returned by getRowClassName to each row', () => {
-    initializeMacros();
-
-    getRows().eq(0).should('have.class', 'origin-direct');
-    getRows().eq(1).should('have.class', 'origin-fromTpl');
-  });
-});
-
-const buildMacros = (count: number): Array<MacroRow> =>
-  Array.from({ length: count }, (_, index) => ({
-    ...emptyMacro,
-    name: `MACRO_${index + 1}`
-  }));
-
-const panelWidths = [1400, 900, 720, 560];
-
-// The panel width is state, so changing it resizes the mounted list at runtime.
-const ResizablePanel = ({
-  count,
-  maxVisibleRows,
-  onChangeSpy
-}: {
-  count: number;
-  maxVisibleRows?: number;
-  onChangeSpy: Stub;
-}): JSX.Element => {
-  const [width, setWidth] = useState(panelWidths[0]);
-
-  return (
-    <div className="p-4">
-      {panelWidths.map((panelWidth) => (
-        <button
-          data-testid={`width-${panelWidth}`}
-          key={panelWidth}
-          onClick={(): void => setWidth(panelWidth)}
-          type="button"
-        >
-          {panelWidth}
-        </button>
-      ))}
-      <div data-testid="panel" style={{ width }}>
-        <ControlledList<MacroRow>
-          actions={(): Array<SortableRowAction> => [
-            {
-              icon: <VisibilityIcon />,
-              id: 'toggle-password',
-              label: 'Toggle password',
-              onClick: () => undefined
-            },
-            {
-              icon: <DescriptionOutlinedIcon />,
-              id: 'macro-description',
-              label: 'Description',
-              onClick: () => undefined
-            }
-          ]}
-          createValue={(): MacroRow => emptyMacro}
-          initialValues={buildMacros(count)}
-          maxVisibleRows={maxVisibleRows}
-          onChangeSpy={onChangeSpy}
-          renderRow={renderMacroRow}
-        />
-      </div>
-    </div>
-  );
-};
-
-const initializePanel = ({
-  count,
-  maxVisibleRows
-}: {
-  count: number;
-  maxVisibleRows?: number;
-}): { onChange: Stub } => {
-  const onChange = cy.stub();
-
-  cy.viewport(1600, 900);
-  cy.mount({
-    Component: (
-      <ResizablePanel
-        count={count}
-        maxVisibleRows={maxVisibleRows}
-        onChangeSpy={onChange}
-      />
-    )
-  });
-
-  return { onChange };
-};
-
-const getScrollArea = (): Cypress.Chainable =>
-  cy.findByTestId('sortable-entries-scroll');
-
-const getRect = (element: Element): DOMRect => element.getBoundingClientRect();
-
-const getLastNames = (onChange: Stub): Array<string> =>
-  getLastValues<MacroRow>(onChange).map(({ name }) => name);
-
-describe('SortableEntriesList - capped list', () => {
-  it('shows maxVisibleRows rows plus half of the next one, and keeps the add button outside the scroll area', () => {
-    initializePanel({ count: 15, maxVisibleRows: 10 });
-
-    getScrollArea().should(($scrollArea) => {
-      const scrollArea = $scrollArea[0];
-      const rows = scrollArea.querySelectorAll('li');
-      const visibleBottom = getRect(scrollArea).bottom;
-
-      expect(scrollArea.scrollHeight).to.be.greaterThan(
-        scrollArea.clientHeight
-      );
-      expect(getRect(rows[9]).bottom).to.be.at.most(visibleBottom);
-      expect(visibleBottom - getRect(rows[10]).top).to.be.closeTo(
-        getRect(rows[10]).height / 2,
-        1
-      );
-    });
-
-    cy.findByTestId('Add')
-      .should('be.visible')
-      .closest('[data-testid="sortable-entries-scroll"]')
-      .should('not.exist');
-  });
-
-  it('fades the cut-off row only while rows are hidden below', () => {
-    initializePanel({ count: 15, maxVisibleRows: 10 });
-
-    getScrollArea().should('not.have.css', 'mask-image', 'none');
-    getScrollArea().scrollTo('bottom');
-    getScrollArea().should('have.css', 'mask-image', 'none');
-  });
-
-  it('does not cap a list shorter than maxVisibleRows', () => {
-    initializePanel({ count: 5, maxVisibleRows: 10 });
-
-    getScrollArea()
-      .should('have.css', 'max-height', 'none')
-      .should(($scrollArea) => {
-        expect($scrollArea[0].scrollHeight).to.equal(
-          $scrollArea[0].clientHeight
-        );
-      });
-  });
-
-  it('focuses and scrolls to a row added at the end of a capped list', () => {
-    initializePanel({ count: 15, maxVisibleRows: 10 });
-
-    cy.findByTestId('Add').click();
-
-    getRows().should('have.length', 16);
-    cy.focused()
-      .should('have.attr', 'data-testid', 'macro-name')
-      .should(($input) => {
-        const scrollAreaRect = getRect(
-          $input[0].closest(
-            '[data-testid="sortable-entries-scroll"]'
-          ) as Element
-        );
-        const inputRect = getRect($input[0]);
-
-        expect(inputRect.top).to.be.at.least(scrollAreaRect.top);
-        expect(inputRect.bottom).to.be.at.most(scrollAreaRect.bottom);
-      });
-  });
-
-  it('scrolls to the focused new row when adding it makes the list reach the cap', () => {
-    initializePanel({ count: 10, maxVisibleRows: 10 });
-
-    getScrollArea().should('have.css', 'max-height', 'none');
-    cy.findByTestId('Add').click();
-
-    getRows().should('have.length', 11);
-    getScrollArea().should('not.have.css', 'max-height', 'none');
-    cy.focused()
-      .should('have.attr', 'data-testid', 'macro-name')
-      .closest('li')
-      .should(($row) => {
-        const scrollAreaRect = getRect(
-          $row[0].closest('[data-testid="sortable-entries-scroll"]') as Element
-        );
-
-        // 1px tolerance for sub-pixel row heights.
-        expect(getRect($row[0]).bottom).to.be.at.most(
-          scrollAreaRect.bottom + 1
-        );
-      });
-    getScrollArea().should('have.css', 'mask-image', 'none');
-  });
-
-  it('moves a row past the visible area with the keyboard, scrolling the list', () => {
-    const { onChange } = initializePanel({ count: 15, maxVisibleRows: 10 });
-
-    cy.moveSortableElement({
-      direction: 'down',
-      element: cy.findAllByTestId('drag-handle').eq(0),
-      times: 12
-    });
-
-    cy.wrap(onChange).should(() => {
-      expect(getLastNames(onChange).indexOf('MACRO_1')).to.equal(12);
-    });
-    getScrollArea().its('0.scrollTop').should('be.greaterThan', 0);
-  });
-
-  it('auto-scrolls while a row is dragged with the pointer near the bottom edge', () => {
-    const { onChange } = initializePanel({ count: 15, maxVisibleRows: 10 });
-
-    cy.findAllByTestId('drag-handle')
-      .eq(0)
-      .then(($handle) => {
-        const { left, top, width, height } = getRect($handle[0]);
-        const pointer = {
-          button: 0,
-          clientX: left + width / 2,
-          isPrimary: true,
-          pointerId: 1
-        };
-
-        cy.wrap($handle).trigger('pointerdown', {
-          ...pointer,
-          clientY: top + height / 2
-        });
-
-        getScrollArea().then(($scrollArea) => {
-          const clientY = getRect($scrollArea[0]).bottom - 5;
-
-          cy.document().trigger('pointermove', { ...pointer, clientY });
-          getScrollArea().its('0.scrollTop').should('be.greaterThan', 100);
-          cy.document().trigger('pointermove', { ...pointer, clientY });
-          cy.document().trigger('pointerup', { ...pointer, clientY });
-        });
-      });
-
-    cy.wrap(onChange).should(() => {
-      expect(getLastNames(onChange).indexOf('MACRO_1')).to.be.greaterThan(10);
-    });
-  });
-});
-
-describe('SortableEntriesList - container responsive rows', () => {
-  const getFieldRects = (): Cypress.Chainable<Array<DOMRect>> =>
-    getRows()
-      .eq(0)
-      .find('.MuiFormControl-root')
-      .then(($fields) => $fields.toArray().map(getRect));
-
-  it('keeps the fields and the four buttons on one line at 1400, 900 and 720px, resized at runtime', () => {
-    initializePanel({ count: 3 });
-
-    [1400, 900, 720, 1400].forEach((width) => {
-      cy.findByTestId(`width-${width}`).click();
-      cy.findByTestId('panel').should('have.css', 'width', `${width}px`);
-
-      getFieldRects().should(([name, value]) => {
-        expect(value.top).to.equal(name.top);
-        expect(name.width).to.be.at.least(275);
-        expect(value.width).to.be.at.least(275);
-      });
-
-      cy.get('[data-row-fields]')
-        .eq(0)
-        .next()
-        .find('button')
-        .should('have.length', 4)
-        .should(($buttons) => {
-          const rects = $buttons.toArray().map(getRect);
-          const panelRight = getRect(
-            Cypress.$('[data-testid="panel"]')[0]
-          ).right;
-
-          rects.slice(1).forEach((rect, index) => {
-            expect(rect.top).to.equal(rects[index].top);
-            expect(rect.left - rects[index].left).to.equal(32);
-          });
-          expect(rects[3].right).to.be.at.most(panelRight);
-        });
-    });
-  });
-
-  it('stacks the fields when the list gets narrower than 600px, whatever the viewport', () => {
-    initializePanel({ count: 3 });
-
-    cy.findByTestId('width-560').click();
-    getFieldRects().should(([name, value]) => {
-      expect(value.top).to.be.greaterThan(name.bottom);
-    });
-
-    cy.findByTestId('width-900').click();
-    getFieldRects().should(([name, value]) => {
-      expect(value.top).to.equal(name.top);
-    });
-  });
-});