From 3e347059184f99e36fa15adbf91cebfdea84bf32 Mon Sep 17 00:00:00 2001 From: radubrehar Date: Fri, 9 Aug 2024 15:49:53 +0300 Subject: [PATCH] fix showHoverRows when zebra rows is disabled and release version patch --- .../data/basic-no-zebra-no-hover.page.tsx | 123 ++++++++++++++++++ .../data/basic-no-zebra-no-hover.spec.ts | 30 +++++ .../table/props/data/basic-no-zebra.page.tsx | 123 ++++++++++++++++++ .../table/props/data/basic-no-zebra.spec.ts | 29 +++++ .../tests/testUtils/TableTestingModel.ts | 5 + .../InfiniteTable/components/cell.css.ts | 4 +- source/src/components/InfiniteTable/index.tsx | 3 +- 7 files changed, 315 insertions(+), 2 deletions(-) create mode 100644 examples/src/pages/tests/table/props/data/basic-no-zebra-no-hover.page.tsx create mode 100644 examples/src/pages/tests/table/props/data/basic-no-zebra-no-hover.spec.ts create mode 100644 examples/src/pages/tests/table/props/data/basic-no-zebra.page.tsx create mode 100644 examples/src/pages/tests/table/props/data/basic-no-zebra.spec.ts diff --git a/examples/src/pages/tests/table/props/data/basic-no-zebra-no-hover.page.tsx b/examples/src/pages/tests/table/props/data/basic-no-zebra-no-hover.page.tsx new file mode 100644 index 00000000..7dce79e5 --- /dev/null +++ b/examples/src/pages/tests/table/props/data/basic-no-zebra-no-hover.page.tsx @@ -0,0 +1,123 @@ +import * as React from 'react'; + +import { + InfiniteTable, + DataSource, + InfiniteTableColumn, +} from '@infinite-table/infinite-react'; +import { CarSale } from '@examples/datasets/CarSale'; + +const carsales: CarSale[] = [ + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'RDX 2WD', + year: 2010, + sales: 15, + color: 'red', + id: 0, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'RDX 4WD', + year: 2007, + sales: 1, + color: 'red', + id: 1, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'RDX 4WD', + year: 2008, + sales: 2, + color: 'magenta', + id: 2, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'RDX 4WD', + year: 2009, + sales: 136, + color: 'blue', + id: 3, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'RDX 4WD', + year: 2010, + color: 'blue', + sales: 30, + id: 4, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'TSX', + year: 2009, + sales: 14, + color: 'yellow', + id: 5, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'TSX', + year: 2010, + sales: 14, + color: 'red', + id: 6, + }, + { + category: '1 - Category 1 Truck', + make: 'Audi', + model: 'A3', + year: 2009, + sales: 2, + color: 'magenta', + id: 7, + }, +]; + +(globalThis as any).carsales = carsales; + +const columns: Record> = { + make: { field: 'make' }, + model: { field: 'model' }, + + category: { + field: 'category', + }, + count: { + field: 'sales', + }, + year: { + field: 'year', + type: 'number', + }, +}; + +export default function DataTestPage() { + return ( + + data={carsales} primaryKey="id"> + + domProps={{ + style: { + margin: '5px', + height: 900, + border: '1px solid gray', + position: 'relative', + }, + }} + showHoverRows={false} + showZebraRows={false} + columns={columns} + /> + + + ); +} diff --git a/examples/src/pages/tests/table/props/data/basic-no-zebra-no-hover.spec.ts b/examples/src/pages/tests/table/props/data/basic-no-zebra-no-hover.spec.ts new file mode 100644 index 00000000..0e0c1d14 --- /dev/null +++ b/examples/src/pages/tests/table/props/data/basic-no-zebra-no-hover.spec.ts @@ -0,0 +1,30 @@ +import { test, expect } from '@testing'; + +export default test.describe + .parallel('Hover rows when zebra is off and hover is off', () => { + test('', async ({ page, tableModel }) => { + await page.waitForInfinite(); + + const row1 = tableModel.withCell({ + rowIndex: 0, + colIndex: 0, + }); + + const row2 = tableModel.withCell({ + rowIndex: 1, + colIndex: 0, + }); + + const bg1row1 = await row1.getComputedStyleProperty('background-color'); + + await row1.getLocator().hover(); + + const bg2row1 = await row1.getComputedStyleProperty('background-color'); + + expect(bg2row1).toEqual(bg1row1); + + const bg1row2 = await row2.getComputedStyleProperty('background-color'); + + expect(bg1row2).toEqual(bg1row1); + }); +}); diff --git a/examples/src/pages/tests/table/props/data/basic-no-zebra.page.tsx b/examples/src/pages/tests/table/props/data/basic-no-zebra.page.tsx new file mode 100644 index 00000000..ef0ebe4e --- /dev/null +++ b/examples/src/pages/tests/table/props/data/basic-no-zebra.page.tsx @@ -0,0 +1,123 @@ +import * as React from 'react'; + +import { + InfiniteTable, + DataSource, + InfiniteTableColumn, +} from '@infinite-table/infinite-react'; +import { CarSale } from '@examples/datasets/CarSale'; + +const carsales: CarSale[] = [ + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'RDX 2WD', + year: 2010, + sales: 15, + color: 'red', + id: 0, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'RDX 4WD', + year: 2007, + sales: 1, + color: 'red', + id: 1, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'RDX 4WD', + year: 2008, + sales: 2, + color: 'magenta', + id: 2, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'RDX 4WD', + year: 2009, + sales: 136, + color: 'blue', + id: 3, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'RDX 4WD', + year: 2010, + color: 'blue', + sales: 30, + id: 4, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'TSX', + year: 2009, + sales: 14, + color: 'yellow', + id: 5, + }, + { + category: '1 - Category 1 Truck', + make: 'Acura', + model: 'TSX', + year: 2010, + sales: 14, + color: 'red', + id: 6, + }, + { + category: '1 - Category 1 Truck', + make: 'Audi', + model: 'A3', + year: 2009, + sales: 2, + color: 'magenta', + id: 7, + }, +]; + +(globalThis as any).carsales = carsales; + +const columns: Record> = { + make: { field: 'make' }, + model: { field: 'model' }, + + category: { + field: 'category', + }, + count: { + field: 'sales', + }, + year: { + field: 'year', + type: 'number', + }, +}; + +export default function DataTestPage() { + return ( + + data={carsales} primaryKey="id"> + + domProps={{ + style: { + margin: '5px', + height: 900, + border: '1px solid gray', + position: 'relative', + }, + }} + showHoverRows={true} + showZebraRows={false} + columns={columns} + /> + + + ); +} diff --git a/examples/src/pages/tests/table/props/data/basic-no-zebra.spec.ts b/examples/src/pages/tests/table/props/data/basic-no-zebra.spec.ts new file mode 100644 index 00000000..e3e8849b --- /dev/null +++ b/examples/src/pages/tests/table/props/data/basic-no-zebra.spec.ts @@ -0,0 +1,29 @@ +import { test, expect } from '@testing'; + +export default test.describe.parallel('Hover rows when zebra is off', () => { + test('', async ({ page, tableModel }) => { + await page.waitForInfinite(); + + const row1 = tableModel.withCell({ + rowIndex: 0, + colIndex: 0, + }); + + const row2 = tableModel.withCell({ + rowIndex: 1, + colIndex: 0, + }); + + const bg1row1 = await row1.getComputedStyleProperty('background-color'); + + await row1.getLocator().hover(); + + const bg2row1 = await row1.getComputedStyleProperty('background-color'); + + expect(bg2row1).not.toEqual(bg1row1); + + const bg1row2 = await row2.getComputedStyleProperty('background-color'); + + expect(bg1row2).toEqual(bg1row1); + }); +}); diff --git a/examples/src/pages/tests/testUtils/TableTestingModel.ts b/examples/src/pages/tests/testUtils/TableTestingModel.ts index 9049a6a2..1458e3ec 100644 --- a/examples/src/pages/tests/testUtils/TableTestingModel.ts +++ b/examples/src/pages/tests/testUtils/TableTestingModel.ts @@ -137,6 +137,11 @@ export class TableTestingModel { styleName, ); }, + + getLocator: () => { + return this.rowModel.getCellLocator(cellLocation); + }, + getValue: async () => { return await this.rowModel.getTextForCell(cellLocation); }, diff --git a/source/src/components/InfiniteTable/components/cell.css.ts b/source/src/components/InfiniteTable/components/cell.css.ts index b235b0ec..713de009 100644 --- a/source/src/components/InfiniteTable/components/cell.css.ts +++ b/source/src/components/InfiniteTable/components/cell.css.ts @@ -210,7 +210,9 @@ export const ColumnCellRecipe = recipe({ true: {}, }, zebra: { - false: {}, + false: { + background: ThemeVars.components.Row.background, + }, even: { background: ThemeVars.components.Row.background, }, diff --git a/source/src/components/InfiniteTable/index.tsx b/source/src/components/InfiniteTable/index.tsx index 4b1103d6..36d33ba0 100644 --- a/source/src/components/InfiniteTable/index.tsx +++ b/source/src/components/InfiniteTable/index.tsx @@ -172,6 +172,7 @@ function InfiniteTableBody() { bodySize, activeCellIndex, rowDetailRenderer, + showHoverRows, } = componentState; const LoadMaskCmp = components?.LoadMask ?? LoadMask; @@ -267,7 +268,7 @@ function InfiniteTableBody() { activeCellRowHeight={activeCellRowHeight} renderCell={renderCell} renderDetailRow={rowDetailRenderer ? renderDetailRow : undefined} - cellHoverClassNames={HOVERED_CLASS_NAMES} + cellHoverClassNames={showHoverRows ? HOVERED_CLASS_NAMES : undefined} scrollerDOMRef={scrollerDOMRef} >