Function mountGrid

e2e/helpers/grid.ts:27–116

(page: E2EPage, options: GridSetupOptions)

}

export async function mountGrid(page: E2EPage, options: GridSetupOptions) {
  const width = options.width ?? 900;
  const height = options.height ?? 360;
  const initialAttrs = [
    options.filter ? 'filter' : '',
    options.exporting ? 'exporting' : '',
    options.canMoveColumns ? 'can-move-columns' : '',
  ]
    .filter(Boolean)
    .join(' ');

  await page.addInitScript(installBrowserGridHelpers);
  await page.setContent(`
    <div style="width:${width}px; height:${height}px;">
      <revo-grid ${initialAttrs} style="display:block; width:100%; height:100%;"></revo-grid>
    </div>
  `);

  await page.waitForSelector(SELECTORS.grid);

  await page.evaluate((config: GridSetupOptions) => {
    const grid = document.querySelector<HTMLRevoGridElement>('revo-grid');
    if (!grid) throw new Error('Grid element was not created');
    const browserGlobals = globalThis as typeof globalThis & { __revoGridE2EHelpers?: BrowserGridHelpers };
    const helpers = browserGlobals.__revoGridE2EHelpers;
    if (!helpers) throw new Error('Grid E2E helpers were not installed');

    const {
      columns,
      source,
      filter,
      rowHeaders,
      pinnedTopSource,
      pinnedBottomSource,
      range,
      useClipboard,
      resize,
      readonly,
      canMoveColumns,
      grouping,
      trimmedRows,
      rtl,
      theme,
      exporting,
      rowSize,
      colSize,
    } = config;

    function applyColumn(column: any): any {
      const next = { ...column };
      if (next.__testId) {
        next.columnProperties = helpers.toColumnProperties(next.__testId);
      }
      if (Array.isArray(next.children)) {
        next.children = next.children.map(applyColumn);
      }
      return next;
    }