react-native-devtools-frontend/test/interactions/data_grid/data_grid_test.ts

// Copyright 2020 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import {assert} from 'chai';

import {
  assertDataGridNotScrolled,
  getDataGrid,
  getDataGridCellAtIndex,
  getDataGridFillerCellAtColumnIndex,
  getDataGridRows,
  getInnerTextOfDataGridCells,
  scrollDataGridDown,
  waitForScrollTopOfDataGrid,
} from '../../e2e/helpers/datagrid-helpers.js';
import {$, $$, click, getBrowserAndPages, waitFor, waitForFunction} from '../../shared/helper.js';
import {it} from '../../shared/mocha-extensions.js';
import {loadComponentDocExample, preloadForCodeCoverage} from '../helpers/shared.js';

import type {ElementHandle} from 'puppeteer';

function assertNumberBetween(number: number, min: number, max: number) {
  assert.isAbove(number, min);
  assert.isBelow(number, max);
}

async function clickAndDragCellToResizeHorizontally(cell: ElementHandle<HTMLTableElement>, mouseXChange: number) {
  const cellBoundingBoxData = await cell.evaluate(cellElement => {
    const box = cellElement.getBoundingClientRect();
    return {
      right: box.right,
      top: box.top,
    };
  });
  const {frontend} = getBrowserAndPages();
  const startX = cellBoundingBoxData.right - 5;
  const startY = cellBoundingBoxData.top + 5;

  await frontend.mouse.move(startX, startY);
  await frontend.mouse.down();
  await frontend.mouse.move(startX + mouseXChange, startY);
  await frontend.mouse.up();
}

async function getColumnPixelWidths(columns: ElementHandle<Element>[]) {
  return Promise.all(columns.map(col => {
    return col.evaluate(cell => cell.clientWidth);
  }));
}

async function getColumnPercentageWidthsRounded(dataGrid: ElementHandle<Element>) {
  const cols = await $$<HTMLTableColElement>('col', dataGrid);
  return Promise.all(cols.map(col => {
    return col.evaluate(cell => Math.round(window.parseFloat(cell.style.width)));
  }));
}

describe('data grid', async () => {
  preloadForCodeCoverage('data_grid/basic.html');

  it('lists the data grid contents', async () => {
    await loadComponentDocExample('data_grid/basic.html');
    const dataGrid = await getDataGrid();
    const renderedText = await getInnerTextOfDataGridCells(dataGrid, 3);
    assert.deepEqual(
        [
          ['Bravo', 'Letter B'],
          ['Alpha', 'Letter A'],
          ['Charlie', 'Letter C'],
        ],
        renderedText);
  });

  it('can resize two columns', async () => {
    await loadComponentDocExample('data_grid/basic.html');
    const dataGrid = await getDataGrid();

    const columns = [
      await getDataGridCellAtIndex(dataGrid, {row: 1, column: 0}),
      await getDataGridCellAtIndex(dataGrid, {row: 1, column: 1}),
    ];

    let columnWidths = await getColumnPixelWidths(columns);
    assertNumberBetween(columnWidths[0], 500, 515);
    assertNumberBetween(columnWidths[1], 500, 515);
    const firstRowFirstCell = await waitFor<HTMLTableElement>('td[data-row-index="1"][data-col-index="0"]', dataGrid);
    await clickAndDragCellToResizeHorizontally(firstRowFirstCell, -50);

    columnWidths = await getColumnPixelWidths(columns);
    assertNumberBetween(columnWidths[0], 450, 465);
    assertNumberBetween(columnWidths[1], 545, 565);
  });

  it('can resize empty columns', async () => {
    await loadComponentDocExample('data_grid/empty.html');
    const dataGrid = await getDataGrid();
    await waitFor('.cell-resize-handle', dataGrid);
    const emptyTableFillerFirstColumn =
        await waitFor<HTMLTableElement>('td[data-filler-row-column-index="0"]', dataGrid);
    const columns = [
      await getDataGridFillerCellAtColumnIndex(dataGrid, 0),
      await getDataGridFillerCellAtColumnIndex(dataGrid, 1),
    ];

    let columnWidths = await getColumnPixelWidths(columns);
    assertNumberBetween(columnWidths[0], 485, 500);
    assertNumberBetween(columnWidths[1], 485, 500);

    await clickAndDragCellToResizeHorizontally(emptyTableFillerFirstColumn, -50);
    columnWidths = await getColumnPixelWidths(columns);
    assertNumberBetween(columnWidths[0], 435, 450);
    assertNumberBetween(columnWidths[1], 530, 550);
  });

  it('can resize two columns in a grid of 3 and leave the other column untouched', async () => {
    await loadComponentDocExample('data_grid/three_columns.html');
    const dataGrid = await getDataGrid();
    await waitFor('.cell-resize-handle', dataGrid);
    await getDataGridRows(3, dataGrid);
    const firstRowFirstCell = await waitFor<HTMLTableElement>('td[data-row-index="1"][data-col-index="0"]', dataGrid);

    const columns = [
      await getDataGridCellAtIndex(dataGrid, {row: 1, column: 0}),
      await getDataGridCellAtIndex(dataGrid, {row: 1, column: 1}),
      await getDataGridCellAtIndex(dataGrid, {row: 1, column: 2}),
    ];

    let columnWidths = await getColumnPixelWidths(columns);

    // The container is 900px wide so we expect each column to be ~300
    assertNumberBetween(columnWidths[0], 295, 305);
    assertNumberBetween(columnWidths[1], 295, 305);
    assertNumberBetween(columnWidths[2], 295, 305);

    await clickAndDragCellToResizeHorizontally(firstRowFirstCell, -100);
    /* The resize calculation is roughly as follows
     * mouse delta = 100px (-100, but we Math.abs it)
     * delta as a % = (100 / (leftCellWidth + rightCellWidth)) * 100
     * % delta = (100 / 300 + 300) * 100
     * % delta = 16.6%
     * therefore left column % = -16.6%
     * and right column % = + 16.6%
     */
    const newColumnPercentageWidths = await getColumnPercentageWidthsRounded(dataGrid);
    assert.deepEqual(
        [
          16, 50,
          33,  // left alone
        ],
        newColumnPercentageWidths);
    columnWidths = await getColumnPixelWidths(columns);
    assertNumberBetween(columnWidths[0], 145, 150);  // 16.31% of 900 = 146.79
    assertNumberBetween(columnWidths[1], 447, 454);  // 50% of 900 = 450
    assertNumberBetween(columnWidths[2], 297, 304);  // 33% of 900 = 300
  });

  it('lets the user resize columns when there is a middle hidden column inbetween', async () => {
    /** Imagine we have a data grid with 3 columns:
     * A | B | C And then we hide B, so the user sees:
     * A | C
     * If the user clicks and drags between A and C,
     * it should resize them accordingly, and leave B alone, even though
     * there is technically the B column inbetween them, but it's hidden.
     */
    await loadComponentDocExample('data_grid/hide-cols.html');

    /**
     * The value column is visible by default, so clicking this will hide it.
     */
    const toggleValueColumnButton = await $('.value-visibility-toggle');
    if (!toggleValueColumnButton) {
      assert.fail('Could not find value column toggle button.');
    }
    await click(toggleValueColumnButton);

    await waitForFunction(async () => {
      const dataGrid = await getDataGrid();
      const hiddenCells = await $$('tbody td.hidden', dataGrid);
      const resizerHandlers = await $$('.cell-resize-handle', dataGrid);
      // Now there are only 2 columns visible, there should be 1 resize handler.
      return hiddenCells.length === 3 && resizerHandlers.length === 1;
    });

    const dataGrid = await getDataGrid();
    await getDataGridRows(3, dataGrid);
    const renderedText = await getInnerTextOfDataGridCells(dataGrid, 3);
    // Make sure that the middle column ("value") is hidden now.
    assert.deepEqual(renderedText, [
      ['Bravo', '1'],
      ['Alpha', '2'],
      ['Charlie', '3'],
    ]);

    const firstRowFirstCell = await waitFor<HTMLTableElement>('td[data-row-index="1"][data-col-index="0"]', dataGrid);

    const columns = [
      await getDataGridCellAtIndex(dataGrid, {row: 1, column: 0}),
      await getDataGridCellAtIndex(dataGrid, {row: 1, column: 2}),
    ];

    let columnWidths = await getColumnPixelWidths(columns);

    // The container is 900px wide and the first column has a weighting of 2 and
    // the last column has a waiting of 1, so we expect one column to be ~600
    // and the other ~300
    assertNumberBetween(columnWidths[0], 602, 607);
    assertNumberBetween(columnWidths[1], 294, 300);

    await clickAndDragCellToResizeHorizontally(firstRowFirstCell, -100);
    /* The resize calculation is roughly as follows
     * mouse delta = 100px (-100, but we Math.abs it)
     * delta as a % = (100 / (leftCellWidth + rightCellWidth)) * 100
     * % delta = (100 / 666 + 333) * 100
     * % delta = 11.1%
     * therefore left column % = -11.1%
     * and right column % = + 11.1%
     */
    const newColumnPercentageWidths = await getColumnPercentageWidthsRounded(dataGrid);
    assert.deepEqual(
        newColumnPercentageWidths,
        [
          56,  // 66.66 - 11.1 rounded
          44,  // 33.33 + 11.1 rounded
        ]);
    columnWidths = await getColumnPixelWidths(columns);
    assertNumberBetween(columnWidths[0], 500, 504);  // 55.8% of 900 = 502
    assertNumberBetween(columnWidths[1], 395, 400);  // 44.12% of 900 = 397
  });

  it('persists the column resizes when new data is added', async () => {
    await loadComponentDocExample('data_grid/adding-data.html');

    const dataGrid = await getDataGrid();
    await getDataGridRows(10, dataGrid);
    await waitFor('.cell-resize-handle', dataGrid);
    const firstRowFirstCell = await waitFor<HTMLTableElement>('td[data-row-index="1"][data-col-index="0"]', dataGrid);

    const columns = [
      await getDataGridCellAtIndex(dataGrid, {row: 1, column: 0}),
      await getDataGridCellAtIndex(dataGrid, {row: 1, column: 1}),
    ];

    let columnPixelWidths = await getColumnPixelWidths(columns);
    // The container is 600px and both columns have weighting of 1, so they
    // should both be ~300.
    assertNumberBetween(columnPixelWidths[0], 297, 303);
    assertNumberBetween(columnPixelWidths[1], 297, 303);

    await clickAndDragCellToResizeHorizontally(firstRowFirstCell, 50);
    const newColumnPercentageWidths = await getColumnPercentageWidthsRounded(dataGrid);
    assert.deepEqual(
        newColumnPercentageWidths,
        [
          58,  // 50 + 8.3 rounded
          42,  // 50 - 8.3 rounded
        ]);
    columnPixelWidths = await getColumnPixelWidths(columns);
    assertNumberBetween(columnPixelWidths[0], 348, 352);  // 58.35% of 600 = ~350
    assertNumberBetween(columnPixelWidths[1], 247, 252);  // 42% of 600 = ~249

    const addButton = await waitFor('#add');
    await click(addButton);
    await getDataGridRows(11, dataGrid);

    const newColumnPixelWidths = await getColumnPixelWidths(columns);
    // Ensure that after resizing and then adding a row that the widths are not changed
    assert.deepEqual(newColumnPixelWidths, columnPixelWidths);
  });

  describe('auto-scrolling on new data', () => {
    async function clickAddButton() {
      const addButton = await $('#add');
      if (!addButton) {
        throw new Error('Could not find add button');
      }
      await addButton.click();
    }

    beforeEach(async function() {
      await loadComponentDocExample('data_grid/adding-data.html');
      const dataGrid = await getDataGrid();
      await getDataGridRows(10, dataGrid);
    });

    it('.auto-scrolls by default if a new row is added', async () => {
      const dataGrid = await getDataGrid();
      await assertDataGridNotScrolled(dataGrid);
      await clickAddButton();
      await getDataGridRows(11, dataGrid);
      await waitForScrollTopOfDataGrid(dataGrid, 89);
    });

    it('does not auto-scroll if the user has clicked on a cell', async () => {
      const dataGrid = await getDataGrid();
      await assertDataGridNotScrolled(dataGrid);

      const firstBodyCell = await $('tr[aria-rowindex="1"] > td[aria-colindex="1"]', dataGrid);
      if (!firstBodyCell) {
        throw new Error('Could not find first body cell to click.');
      }
      await click(firstBodyCell);
      await waitFor('tr.selected', dataGrid);
      const {frontend} = getBrowserAndPages();
      await frontend.evaluate('window.addNewRow()');
      await getDataGridRows(11, dataGrid);
      await waitForScrollTopOfDataGrid(dataGrid, 0);
    });

    it('does not auto-scroll if the user has scrolled in the data-grid', async () => {
      const dataGrid = await getDataGrid();
      await assertDataGridNotScrolled(dataGrid);
      await scrollDataGridDown(dataGrid, 20);
      const {frontend} = getBrowserAndPages();
      await frontend.evaluate('window.addNewRow()');
      await getDataGridRows(11, dataGrid);
      // Ensure the scrollTop hasn't changed.
      await waitForScrollTopOfDataGrid(dataGrid, 20);
    });

    it('will autoscroll if the user has a cell selected, but then clicks elsewhere in the UI, causing a new row to be added',
       async () => {
         const dataGrid = await getDataGrid();
         await assertDataGridNotScrolled(dataGrid);

         const firstBodyCell = await $('tr[aria-rowindex="1"] > td[aria-colindex="1"]', dataGrid);
         if (!firstBodyCell) {
           throw new Error('Could not find first body cell to click.');
         }
         await click(firstBodyCell);
         await waitFor('tr.selected', dataGrid);
         await clickAddButton();
         await getDataGridRows(11, dataGrid);
         await waitForScrollTopOfDataGrid(dataGrid, 89);
       });

    it('will resume autoscroll if the user clicks a cell but then scrolls to the bottom', async () => {
      const {frontend} = getBrowserAndPages();
      const dataGrid = await getDataGrid();
      await assertDataGridNotScrolled(dataGrid);

      const firstBodyCell = await $('tr[aria-rowindex="1"] > td[aria-colindex="1"]', dataGrid);
      if (!firstBodyCell) {
        throw new Error('Could not find first body cell to click.');
      }
      await click(firstBodyCell);
      await waitFor('tr.selected', dataGrid);
      // And new row and ensure we have not auto scrolled as we have a cell selected.
      await frontend.evaluate('window.addNewRow()');
      await getDataGridRows(11, dataGrid);
      await waitForScrollTopOfDataGrid(dataGrid, 0);

      // Now scroll down to the very bottom of the grid
      await scrollDataGridDown(dataGrid, 89);
      await frontend.evaluate('window.addNewRow()');
      await getDataGridRows(12, dataGrid);
      // Ensure the scrollTop has changed: we are auto-scrolling again as the
      // user scrolled to the bottom
      await waitForScrollTopOfDataGrid(dataGrid, 109);
    });
  });
});