[UIK-4944][data-table] added solution to selectedRows in big tables

semcore/data-table/__tests__/data-table-accordion.browser-test.tsx

@@ -253,7 +253,6 @@ test.describe(`${TAG.VISUAL}`, () => {
         await loadPage(page, 'stories/components/data-table/advanced/examples/accordion_with_checkbox.tsx', 'en', item);
 
         const cells = locators.row(page, 2).locator('[data-ui-name="Row.Cell"]');
-
         await page.locator('[data-ui-name="Checkbox"]').nth(1).click();
         const accordion = page.locator('[role="gridcell"][aria-level="2"]');
 
@@ -265,6 +264,10 @@ test.describe(`${TAG.VISUAL}`, () => {
           'background-color': stylesActiveHovered[1],
         });
 
+        await checkStyles(accordion, {
+          'background-color': stylesNotActive[2],
+        });
+
         await expect(page).toHaveScreenshot();
 
         if (item.variant == 'card' || item.sideIndents == 'wide') {

semcore/data-table/__tests__/data-table-cells.browser-test.tsx

@@ -2,7 +2,7 @@ import { expect, test } from '@semcore/testing-utils/playwright';
 import { loadPage } from '@semcore/testing-utils/shared/helpers';
 import { TAG } from '@semcore/testing-utils/shared/tags';
 
-import { locators, checkStyles } from './utils';
+import { locators } from './utils';
 
 /* =====================================================
 @visual
@@ -48,131 +48,8 @@ test.describe(`${TAG.VISUAL}`, () => {
     }
     await expect(page).toHaveScreenshot();
   });
-
-  test('Verify empty data with selectable rows', {
-    tag: [TAG.PRIORITY_MEDIUM,
-      '@data-table'],
-  }, async ({ page }) => {
-    await loadPage(page, 'stories/components/data-table/tests/examples/cells-tests/checkbox-in-table-with-no-data.tsx', 'en');
-
-    await expect(page).toHaveScreenshot();
-  });
-
-  test('Verify sideIndents=wide with selectable rows non compact and compact', {
-    tag: [TAG.PRIORITY_MEDIUM,
-      '@data-table'],
-  }, async ({ page }) => {
-    await loadPage(page, 'stories/components/data-table/docs/examples/checkbox-in-table.tsx', 'en', {
-      sideIndents: 'wide',
-    });
-
-    await test.step('Verify wide for non compact data-table', async () => {
-      await expect(page).toHaveScreenshot();
-    });
-
-    await test.step('Verify wide for compact data-table', async () => {
-      await loadPage(page, 'stories/components/data-table/docs/examples/checkbox-in-table.tsx', 'en', {
-        sideIndents: 'wide', compact: true,
-      });
-      await expect(page).toHaveScreenshot();
-    });
-  });
-
-  test('Verify color on hover when merged rows AND columns with multi-level header', {
-    tag: [TAG.PRIORITY_HIGH,
-      '@data-table'],
-  }, async ({ page, browserName }) => {
-    if (browserName == 'firefox') test.skip();
-
-    await loadPage(page, 'stories/components/data-table/tests/examples/cells-tests/merged-row-for-multi-level-header.tsx', 'en');
-
-    const consoleErrors: string[] = [];
-
-    page.on('console', (msg) => {
-      if (msg.type() === 'error') {
-        consoleErrors.push(msg.text());
-      }
-    });
-
-    page.on('pageerror', (error) => {
-      consoleErrors.push(error.message);
-    });
-
-    await test.step('Verify Color when child cell hovered', async () => {
-      await locators.getCell(page, 3, 1).hover();
-
-      await checkStyles(locators.getCell(page, 3, 1), { 'background-color': 'rgb(240, 240, 244)' });
-      await checkStyles(locators.getCell(page, 2, 2), { 'background-color': 'rgb(240, 240, 244)' });
-      await checkStyles(locators.getCell(page, 2, 1), { 'background-color': 'rgb(255, 255, 255)' });
-    });
-
-    await test.step('Verify Color when parent cell hovered', async () => {
-      await locators.getCell(page, 2, 2).hover();
-
-      for (let row = 2; row <= 5; row++) {
-        await checkStyles(locators.getCell(page, row, 1), { 'background-color': 'rgb(240, 240, 244)' });
-      }
-    });
-
-    await test.step('Verify no console errors', async () => {
-      expect(consoleErrors, `Console errors found:\n${consoleErrors.join('\n')}`).toHaveLength(0);
-    });
-  });
-
-  test('Verify styles when checkbox in merged cells checked by keyboard', {
-    tag: [TAG.PRIORITY_HIGH,
-      TAG.KEYBOARD,
-      '@data-table',
-      '@tooltip'],
-  }, async ({ page, browserName }) => {
-    await loadPage(page, 'stories/components/data-table/advanced/examples/selectable_with_merged_rows.tsx', 'en');
-
-    await page.keyboard.press('Tab');
-
-    await page.keyboard.press('ArrowDown');
-    await expect(locators.getCell(page, 2, 1).locator('input')).toBeFocused();
-
-    await page.keyboard.press('Space');
-
-    await page.getByRole('button', { name: 'Deselect all' }).waitFor({ state: 'visible' });
-    await checkStyles(locators.getCell(page, 2, 1), { 'background-color': 'rgb(233, 247, 255)' });
-    await checkStyles(locators.getCell(page, 2, 2), { 'background-color': 'rgb(233, 247, 255)' });
-    await checkStyles(locators.getCell(page, 2, 3), { 'background-color': 'rgb(233, 247, 255)' });
-    await checkStyles(locators.getCell(page, 2, 4), { 'background-color': 'rgb(233, 247, 255)' });
-    await checkStyles(locators.getCell(page, 3, 2), { 'background-color': 'rgb(233, 247, 255)' });
-    await checkStyles(locators.getCell(page, 3, 3), { 'background-color': 'rgb(233, 247, 255)' });
-    await checkStyles(locators.getCell(page, 3, 4), { 'background-color': 'rgb(233, 247, 255)' });
-    await expect(page).toHaveScreenshot();
-
-    if (browserName == 'firefox') return;
-    const cell22 = locators.getCell(page, 2, 1);
-    const box22 = await cell22.boundingBox();
-    if (box22) {
-      await page.mouse.move(box22.x + box22.width / 2, box22.y + box22.height / 2);
-    }
-
-    await checkStyles(locators.getCell(page, 2, 1), { 'background-color': 'rgb(196, 229, 254)' });
-    await checkStyles(locators.getCell(page, 2, 2), { 'background-color': 'rgb(196, 229, 254)' });
-    await checkStyles(locators.getCell(page, 2, 3), { 'background-color': 'rgb(196, 229, 254)' });
-    await checkStyles(locators.getCell(page, 2, 4), { 'background-color': 'rgb(196, 229, 254)' });
-    await checkStyles(locators.getCell(page, 3, 2), { 'background-color': 'rgb(196, 229, 254)' });
-    await checkStyles(locators.getCell(page, 3, 3), { 'background-color': 'rgb(196, 229, 254)' });
-    await checkStyles(locators.getCell(page, 3, 4), { 'background-color': 'rgb(196, 229, 254)' });
-
-    const cell23 = locators.getCell(page, 2, 3);
-    const box23 = await cell23.boundingBox();
-    if (box23) {
-      await page.mouse.move(box23.x + box23.width / 2, box23.y + box23.height / 2);
-    }
-    await checkStyles(locators.getCell(page, 2, 1), { 'background-color': 'rgb(196, 229, 254)' });
-    await checkStyles(locators.getCell(page, 2, 2), { 'background-color': 'rgb(196, 229, 254)' });
-    await checkStyles(locators.getCell(page, 2, 3), { 'background-color': 'rgb(196, 229, 254)' });
-    await checkStyles(locators.getCell(page, 2, 4), { 'background-color': 'rgb(196, 229, 254)' });
-    await checkStyles(locators.getCell(page, 3, 2), { 'background-color': 'rgb(233, 247, 255)' });
-    await checkStyles(locators.getCell(page, 3, 3), { 'background-color': 'rgb(233, 247, 255)' });
-    await checkStyles(locators.getCell(page, 3, 4), { 'background-color': 'rgb(233, 247, 255)' });
-  });
 });
+
 /* =====================================================
   @functional
   Keyboard and mouse interactions - no snapshots here.
@@ -473,119 +350,6 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
     });
   });
 
-  test('Verify select rows with Shift', {
-    tag: [
-      TAG.KEYBOARD,
-      TAG.MOUSE,
-
-      '@data-table',
-    ],
-  }, async ({ page }) => {
-    await loadPage(page, 'stories/components/data-table/tests/examples/cells-tests/checkbox.tsx', 'en');
-
-    const firstCell = locators.getCell(page, 3, 1);
-    const secondCell = locators.getCell(page, 7, 1);
-
-    await firstCell.locator('label').click();
-    await secondCell.locator('label').click({ modifiers: ['Shift'] });
-
-    for (let i = 3; i <= 7; i++) {
-      await expect(locators.getCell(page, i, 1).locator('input')).toBeChecked();
-    }
-
-    await locators.getCell(page, 5, 1).locator('label').click({ modifiers: ['Shift'] });
-
-    for (let i = 5; i <= 7; i++) {
-      await expect(locators.getCell(page, i, 1).locator('input')).not.toBeChecked();
-    }
-
-    await locators.getCell(page, 9, 1).locator('label').click({ modifiers: ['Shift'] });
-    for (let i = 5; i <= 8; i++) {
-      await expect(locators.getCell(page, i, 1).locator('input')).not.toBeChecked();
-    }
-    await expect(locators.getCell(page, 9, 1).locator('input')).toBeChecked();
-  });
-
-  test('Verify select rows with Shift when checkbox in merged cells', {
-    tag: [
-      TAG.KEYBOARD,
-      TAG.MOUSE,
-      '@data-table',
-    ],
-  }, async ({ page }) => {
-    await loadPage(page, 'stories/components/data-table/advanced/examples/selectable_with_merged_rows.tsx', 'en');
-
-    const firstCell = locators.getCell(page, 2, 1);
-    const secondCell = locators.getCell(page, 4, 1);
-
-    await firstCell.locator('label').click();
-    await secondCell.locator('label').click({ modifiers: ['Shift'] });
-
-    await expect(locators.getCell(page, 2, 1).locator('input')).toBeChecked();
-    await expect(locators.getCell(page, 4, 1).locator('input')).toBeChecked();
-
-    await locators.getCell(page, 8, 1).locator('label').click({ modifiers: ['Shift'] });
-
-    await expect(locators.getCell(page, 2, 1).locator('input')).toBeChecked();
-    await expect(locators.getCell(page, 4, 1).locator('input')).toBeChecked();
-    await expect(locators.getCell(page, 6, 1).locator('input')).toBeChecked();
-    await expect(locators.getCell(page, 8, 1).locator('input')).toBeChecked();
-  });
-
-  test('Verify keyboard interaction when checkbox in merged cells', {
-    tag: [TAG.PRIORITY_HIGH,
-      TAG.KEYBOARD,
-      '@data-table',
-      '@tooltip'],
-  }, async ({ page }) => {
-    await loadPage(page, 'stories/components/data-table/advanced/examples/selectable_with_merged_rows.tsx', 'en');
-
-    await test.step('Verify Focus on checkbox', async () => {
-      await page.keyboard.press('Tab');
-      await page.keyboard.press('ArrowDown');
-      await expect(locators.getCell(page, 2, 1).locator('input')).toBeFocused();
-    });
-
-    await test.step('Verify navigation to the 1st child', async () => {
-      await page.keyboard.press('Space');
-      await page.keyboard.press('ArrowRight');
-      await page.keyboard.press('ArrowRight');
-      await expect(locators.getCell(page, 2, 3)).toBeFocused();
-    });
-    await test.step('Verify focus returns to checkbox', async () => {
-      await page.keyboard.press('ArrowLeft');
-      await page.keyboard.press('ArrowLeft');
-      await expect(locators.getCell(page, 2, 1).locator('input')).toBeFocused();
-    });
-    await test.step('Verify navigation from non merged to merged', async () => {
-      for (let i = 0; i < 4; i++)
-        await page.keyboard.press('ArrowDown');
-      await expect(locators.getCell(page, 10, 1).locator('input')).toBeFocused();
-      await page.keyboard.press('ArrowUp');
-      await expect(locators.getCell(page, 8, 1).locator('input')).toBeFocused();
-    });
-    await test.step('Verify navigation from 2nd child outside the table and back', async () => {
-      await page.keyboard.press('ArrowRight');
-      await page.keyboard.press('ArrowRight');
-      await page.keyboard.press('ArrowRight');
-      await page.keyboard.press('ArrowDown');
-      await expect(locators.getCell(page, 9, 4)).toBeFocused();
-
-      await page.keyboard.press('Tab');
-      await expect(locators.button(page, 'Next')).toBeFocused();
-      await page.keyboard.press('Shift+Tab');
-      await expect(locators.getCell(page, 9, 4)).toBeFocused();
-    });
-    await test.step('Verify navigation from last child outside the table and back', async () => {
-      await page.keyboard.press('ArrowRight');
-      await expect(locators.getCell(page, 9, 5)).toBeFocused();
-      await page.keyboard.press('Tab');
-      await expect(locators.button(page, 'Next')).toBeFocused();
-      await page.keyboard.press('Shift+Tab');
-      await expect(locators.getCell(page, 9, 5)).toBeFocused();
-    });
-  });
-
   test('Verify multiple access to cells with spin', {
     tag: [TAG.PRIORITY_HIGH,
       TAG.KEYBOARD,