From 8985399fe642ee9efb156f2186d08c8a0432cfa7 Mon Sep 17 00:00:00 2001 From: Karan Mistry Date: Fri, 31 Jan 2025 15:59:07 +0530 Subject: [PATCH] test: add e2e for paging, sorting, selection and others --- angular.json | 2 +- playwright/e2e/custom-template.spec.ts | 203 +++++++++++ playwright/e2e/drag-drop.spec.ts | 58 ++++ playwright/e2e/paging.spec.ts | 227 +++++++++++++ playwright/e2e/resize.spec.ts | 66 ++++ playwright/e2e/selection.spec.ts | 316 ++++++++++++++++++ playwright/e2e/sorting.spec.ts | 173 ++++++++++ ...custom-template-default-chromium-linux.png | 3 + ...-template-lastname-only-chromium-linux.png | 3 + ...ummary--custom-template-chromium-linux.png | 3 + ...summary--no-summary-row-chromium-linux.png | 3 + ...mmary--show-summary-row-chromium-linux.png | 3 + ...--summary-row-at-bottom-chromium-linux.png | 3 + ...ary--summary-row-at-top-chromium-linux.png | 3 + .../drag-drop--switch-rows-chromium-linux.png | 3 + .../filter--empty-chromium-linux.png | 4 +- .../filter--filtered-chromium-linux.png | 4 +- .../filter--next-page-chromium-linux.png | 4 +- .../filter-chromium-linux.png | 4 +- ...ging--default-paginator-chromium-linux.png | 3 + ...ation--novirtualization-chromium-linux.png | 3 + ...--server-side-paginator-chromium-linux.png | 3 + ...ite-scroll-after-scroll-chromium-linux.png | 3 + ...infinite-scroll-initial-chromium-linux.png | 3 + ...rtual-paging--paginator-chromium-linux.png | 3 + ...-virtual-scroll-initial-chromium-linux.png | 3 + ...al-server-side-navigate-chromium-linux.png | 3 + ...tual-server-side-scroll-chromium-linux.png | 3 + ...-check-resize-attribute-chromium-linux.png | 3 + ...g-name-and-state-column-chromium-linux.png | 3 + ...ing--resize-name-column-chromium-linux.png | 3 + .../row-grouping--default-chromium-linux.png | 4 +- ...ouping--group-collapsed-chromium-linux.png | 4 +- ...rouping--group-expanded-chromium-linux.png | 4 +- ...rouping--group-selected-chromium-linux.png | 4 +- ...-company-cell-selection-chromium-linux.png | 3 + ...on--name-cell-selection-chromium-linux.png | 3 + ...x-selection-all-checked-chromium-linux.png | 3 + ...ckbox-selection-uncheck-chromium-linux.png | 3 + ...igation-shift-tab-space-chromium-linux.png | 3 + ...ion-using-tab-and-space-chromium-linux.png | 3 + ...ection--click-selection-chromium-linux.png | 3 + ...i-selection--using-ctrl-chromium-linux.png | 3 + ...-selection--using-shift-chromium-linux.png | 3 + ...--disable-row-selection-chromium-linux.png | 3 + ...--row-selection-initial-chromium-linux.png | 3 + ...orting--default-sorting-chromium-linux.png | 3 + ...nt-sorting--sorting-asc-chromium-linux.png | 3 + ...t-sorting--sorting-desc-chromium-linux.png | 3 + ...-sorting--sorting-unset-chromium-linux.png | 3 + ...rator-sorting-asc-again-chromium-linux.png | 3 + ...-comparator-sorting-asc-chromium-linux.png | 3 + ...comparator-sorting-desc-chromium-linux.png | 3 + ...fault-name-sorting-desc-chromium-linux.png | 3 + ...rting--sort-name-by-asc-chromium-linux.png | 3 + ...orting--unset-name-sort-chromium-linux.png | 3 + ...ting--sorting-asc-again-chromium-linux.png | 3 + ...er-sorting--sorting-asc-chromium-linux.png | 3 + ...r-sorting--sorting-desc-chromium-linux.png | 3 + src/app/app.component.scss | 5 + src/app/app.component.ts | 7 +- src/app/paging/mock-server-results-service.ts | 2 +- src/app/paging/scrolling-server.component.ts | 2 +- .../selection-chkbox-template.component.ts | 2 +- .../selection/selection-chkbox.component.ts | 2 +- .../selection/selection-disabled.component.ts | 2 +- .../selection-multi-click-chkbox.component.ts | 2 +- .../selection-multi-click.component.ts | 2 +- .../selection/selection-multi.component.ts | 2 +- .../selection/selection-single.component.ts | 2 +- src/assets/app.css | 3 +- 71 files changed, 1209 insertions(+), 33 deletions(-) create mode 100644 playwright/e2e/custom-template.spec.ts create mode 100644 playwright/e2e/drag-drop.spec.ts create mode 100644 playwright/e2e/paging.spec.ts create mode 100644 playwright/e2e/resize.spec.ts create mode 100644 playwright/e2e/selection.spec.ts create mode 100644 playwright/e2e/sorting.spec.ts create mode 100644 playwright/snapshots/e2e/custom-template.spec.ts-snapshots/custom-template-summary--custom-template-default-chromium-linux.png create mode 100644 playwright/snapshots/e2e/custom-template.spec.ts-snapshots/inline-html-summary--custom-template-lastname-only-chromium-linux.png create mode 100644 playwright/snapshots/e2e/custom-template.spec.ts-snapshots/paging-summary--custom-template-chromium-linux.png create mode 100644 playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--no-summary-row-chromium-linux.png create mode 100644 playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--show-summary-row-chromium-linux.png create mode 100644 playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--summary-row-at-bottom-chromium-linux.png create mode 100644 playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--summary-row-at-top-chromium-linux.png create mode 100644 playwright/snapshots/e2e/drag-drop.spec.ts-snapshots/drag-drop--switch-rows-chromium-linux.png create mode 100644 playwright/snapshots/e2e/paging.spec.ts-snapshots/client-paging--default-paginator-chromium-linux.png create mode 100644 playwright/snapshots/e2e/paging.spec.ts-snapshots/paging-scrolling-novirtualization--novirtualization-chromium-linux.png create mode 100644 playwright/snapshots/e2e/paging.spec.ts-snapshots/server-paging--server-side-paginator-chromium-linux.png create mode 100644 playwright/snapshots/e2e/paging.spec.ts-snapshots/server-scrolling--infinite-scroll-after-scroll-chromium-linux.png create mode 100644 playwright/snapshots/e2e/paging.spec.ts-snapshots/server-scrolling--infinite-scroll-initial-chromium-linux.png create mode 100644 playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--paginator-chromium-linux.png create mode 100644 playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-scroll-initial-chromium-linux.png create mode 100644 playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-server-side-navigate-chromium-linux.png create mode 100644 playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-server-side-scroll-chromium-linux.png create mode 100644 playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--check-resize-attribute-chromium-linux.png create mode 100644 playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--pinning-name-and-state-column-chromium-linux.png create mode 100644 playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--resize-name-column-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/cell-selection--company-cell-selection-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/cell-selection--name-cell-selection-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/chkbox-selection--checkbox-selection-all-checked-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/chkbox-selection--checkbox-selection-uncheck-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-chkbox-selection--backward-navigation-shift-tab-space-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-chkbox-selection--navigation-using-tab-and-space-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-selection--click-selection-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-ctrl-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-shift-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/multidisable-selection--disable-row-selection-chromium-linux.png create mode 100644 playwright/snapshots/e2e/selection.spec.ts-snapshots/single-selection--row-selection-initial-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--default-sorting-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-asc-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-desc-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-unset-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-asc-again-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-asc-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-desc-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--default-name-sorting-desc-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--sort-name-by-asc-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--unset-name-sort-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-asc-again-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-asc-chromium-linux.png create mode 100644 playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-desc-chromium-linux.png diff --git a/angular.json b/angular.json index efc660ff8..0e15845c2 100644 --- a/angular.json +++ b/angular.json @@ -58,7 +58,7 @@ { "type": "anyComponentStyle", "maximumWarning": "6kb", - "maximumError": "12kb" + "maximumError": "16kb" } ] } diff --git a/playwright/e2e/custom-template.spec.ts b/playwright/e2e/custom-template.spec.ts new file mode 100644 index 000000000..f1b3c962c --- /dev/null +++ b/playwright/e2e/custom-template.spec.ts @@ -0,0 +1,203 @@ +import { Page } from '@playwright/test'; +import { expect, test } from '../support/test-helpers'; + +test.describe('summary row', () => { + test.describe('simple summary row', () => { + const example = 'simple-summary'; + + test(example, async ({ si, page }) => { + await si.visitExample(example); + + const summaryRow = page.locator('datatable-summary-row'); + await expect(summaryRow).toHaveCount(1); + + const enableSummaryRow = page.locator('#enable-summary'); + + await enableSummaryRow.click(); + await expect(summaryRow).toHaveCount(0); + + await si.runVisualAndA11yTests('no-summary-row', [ + { + id: 'aria-required-children', + enabled: false + } + ]); + + enableSummaryRow.click(); + await expect(summaryRow).toHaveCount(1); + + await si.runVisualAndA11yTests('show-summary-row', [ + { + id: 'aria-required-children', + enabled: false + }, + { + id: 'aria-required-parent', + enabled: false + } + ]); + + const scrollerElement = await page.locator('datatable-scroller').boundingBox(); + let summaryElementBox = await summaryRow.boundingBox(); + + expect(scrollerElement.y).toBe(summaryElementBox.y); + + await si.runVisualAndA11yTests('summary-row-at-top', [ + { + id: 'aria-required-children', + enabled: false + }, + { + id: 'aria-required-parent', + enabled: false + } + ]); + + await page.getByLabel('Position').selectOption('bottom'); + + summaryElementBox = await summaryRow.boundingBox(); + const lastElement = await page.locator('datatable-row-wrapper').last().boundingBox(); + + expect(summaryElementBox.y).toBe(lastElement.y + lastElement.height); + + await si.runVisualAndA11yTests('summary-row-at-bottom', [ + { + id: 'aria-required-children', + enabled: false + } + ]); + + await testSummaryRowData(page); + }); + }); + + test.describe('custom template summary', () => { + const example = 'custom-template-summary'; + + test(example, async ({ si, page }) => { + await si.visitExample(example); + + const summaryRow = page.locator('datatable-summary-row'); + await expect(summaryRow).toHaveCount(1); + + await testSummaryRowData(page); + + await si.runVisualAndA11yTests('custom-template-default', [ + { + id: 'aria-required-children', + enabled: false + }, + { + id: 'aria-required-parent', + enabled: false + } + ]); + }); + }); + + test.describe('server side template summary', () => { + const example = 'paging-summary'; + + test(example, async ({ si, page }) => { + await si.visitExample(example); + + test.slow(); + + await page.waitForSelector('datatable-row-wrapper'); + await expect(page.locator('.empty-row')).toBeHidden(); + + const summaryRow = page.locator('datatable-summary-row'); + + const femaleCells = await page + .locator('datatable-body-cell') + .locator('span[title="female"]') + .all(); + + const maleCells = await page + .locator('datatable-body-cell') + .locator('span[title="male"]') + .all(); + + const genderColumn = summaryRow.locator('datatable-body-cell').nth(1).locator('span'); + const nameColumn = summaryRow.locator('datatable-body-cell').first().locator('span'); + + await expect(genderColumn).toContainText(`${femaleCells.length} females`); + await expect(genderColumn).toContainText(`${maleCells.length} males`); + await expect(nameColumn).toContainText(`${maleCells.length + femaleCells.length} total`); + + await si.runVisualAndA11yTests('custom-template', [ + { + id: 'aria-required-children', + enabled: false + }, + { + id: 'aria-required-parent', + enabled: false + } + ]); + }); + }); + + test.describe('inline html template summary', () => { + const example = 'inline-html-summary'; + + test(example, async ({ si, page }) => { + await si.visitExample(example); + + const summaryRow = page.locator('datatable-summary-row'); + await expect(summaryRow).toHaveCount(1); + + await testSummaryRowData(page); + + const rows = await page.locator('datatable-row-wrapper').locator('datatable-body-row').all(); + + const nameColumn = summaryRow.locator('datatable-body-cell').first().locator('span'); + + expect(rows).toHaveLength(5); + + const names: string[] = []; + + for (const row of rows) { + const fullName = await row.locator('datatable-body-cell').first().innerText(); + names.push(fullName.split(' ')[1]); + } + + expect(names).toHaveLength(rows.length); + + for (let name of names) { + await expect(nameColumn.getByText(name, { exact: true })).toHaveCount(1); + } + + await si.runVisualAndA11yTests('custom-template-lastname-only', [ + { + id: 'aria-required-children', + enabled: false + }, + { + id: 'aria-required-parent', + enabled: false + }, + { + id: 'scrollable-region-focusable', + enabled: false + } + ]); + }); + }); +}); + +const testSummaryRowData = async (page: Page) => { + const summaryRow = page.locator('datatable-summary-row'); + + const femaleCells = await page + .locator('datatable-body-cell') + .locator('span[title="female"]') + .all(); + + const maleCells = await page.locator('datatable-body-cell').locator('span[title="male"]').all(); + + const genderColumn = summaryRow.locator('datatable-body-cell').nth(1).locator('span'); + + await expect(genderColumn).toContainText(`females: ${femaleCells.length}`); + await expect(genderColumn).toContainText(`males: ${maleCells.length}`); +}; diff --git a/playwright/e2e/drag-drop.spec.ts b/playwright/e2e/drag-drop.spec.ts new file mode 100644 index 000000000..0734a8b71 --- /dev/null +++ b/playwright/e2e/drag-drop.spec.ts @@ -0,0 +1,58 @@ +import { expect, test } from '../support/test-helpers'; + +test.describe('drag drop using angular cdk', () => { + const example = 'drag-drop'; + test(example, async ({ si, page }) => { + await si.visitExample(example); + + const loadingIndicator = page.locator('datatable-progress').locator('div[class="bar"]'); + await expect(loadingIndicator).toHaveCount(0); + + const originRow = page.getByRole('row', { name: 'Ethel Price' }); + const destinationRow = page.getByRole('row', { name: 'Georgina Schultz' }); + + const originBoundingBox = await originRow.boundingBox(); + const destinationBoundingBox = await destinationRow.boundingBox(); + + await expect( + page.locator('datatable-row-wrapper').nth(0).locator('span[title="Ethel Price"]') + ).toHaveCount(1); + + await expect( + page.locator('datatable-row-wrapper').nth(4).locator('span[title="Georgina Schultz"]') + ).toHaveCount(1); + + await originRow.click(); + + await page.mouse.move( + originBoundingBox.x + originBoundingBox.width / 2, + originBoundingBox.y + originBoundingBox.height / 2 + ); + + await page.mouse.down(); + + await page.mouse.move( + destinationBoundingBox.x + destinationBoundingBox.width / 2, + destinationBoundingBox.y + destinationBoundingBox.height / 2, + { + steps: 20 + } + ); + + await page.mouse.up(); + + await expect( + page.locator('datatable-row-wrapper').nth(0).locator('span[title="Claudine Neal"]') + ).toHaveCount(1); + + await expect( + page.locator('datatable-row-wrapper').nth(3).locator('span[title="Georgina Schultz"]') + ).toHaveCount(1); + + await expect( + page.locator('datatable-row-wrapper').nth(4).locator('span[title="Ethel Price"]') + ).toHaveCount(1); + + await si.runVisualAndA11yTests('switch-rows'); + }); +}); diff --git a/playwright/e2e/paging.spec.ts b/playwright/e2e/paging.spec.ts new file mode 100644 index 000000000..8884f39d5 --- /dev/null +++ b/playwright/e2e/paging.spec.ts @@ -0,0 +1,227 @@ +import { Page } from '@playwright/test'; +import { expect, test } from '../support/test-helpers'; + +test.describe('paging', () => { + test.describe('client side', () => { + const example = 'client-paging'; + + test(example, async ({ si, page }) => { + await si.visitExample(example); + await pagerTest(page, 10); + + await si.runVisualAndA11yTests('default-paginator'); + }); + }); + + test.describe('server side', () => { + const example = 'server-paging'; + + test(example, async ({ si, page }) => { + await si.visitExample(example); + + await page.waitForSelector('datatable-row-wrapper'); + await pagerTest(page, 20); + await expect(page.locator('.empty-row')).not.toBeVisible(); + await page.waitForSelector('span[title="Tonya Bray"]'); + await expect(page.getByRole('cell', { name: 'Ethel Price' })).not.toBeVisible(); + await si.runVisualAndA11yTests('server-side-paginator'); + }); + }); + + test.describe('paging scrolling with no virtualization', () => { + const example = 'paging-scrolling-novirtualization'; + + test(example, async ({ si, page }) => { + await si.visitExample(example, false); + + await expect(page.locator('ghost-loader')).toBeVisible(); + await page.waitForSelector('datatable-row-wrapper'); + await pagerTest(page, 20); + await page.waitForSelector('span[title="Tonya Bray"]'); + await expect(page.locator('ghost-loader').first()).not.toBeVisible(); + await expect(page.getByRole('cell', { name: 'Ethel Price' })).not.toBeVisible(); + await si.runVisualAndA11yTests('novirtualization'); + }); + }); + + test.describe('server scrolling', () => { + const example = 'server-scrolling'; + + test(example, async ({ si, page }) => { + await si.visitExample(example, false); + + await expect(page.locator('ghost-loader')).toBeVisible(); + await expect(page.locator('.bar')).toBeVisible(); + + await page.waitForSelector('datatable-scroller'); + + const pager = page.locator('datatable-pager'); + expect(pager).not.toBeVisible(); + + await expect(page.locator('ghost-loader')).not.toBeVisible(); + await expect(page.locator('.bar')).not.toBeVisible(); + + await si.runVisualAndA11yTests('infinite-scroll-initial', [ + { + id: 'label', + enabled: false + }, + { + id: 'empty-table-header', + enabled: false + }, + { + id: 'aria-progressbar-name', + enabled: false + }, + { + id: 'aria-required-children', + enabled: false + } + ]); + + await page.getByRole('row', { name: 'Sarah Massey' }).click(); + + await page.mouse.wheel(0, 1000); + + await expect(page.locator('ghost-loader').first()).toBeVisible(); + await expect(page.locator('.bar')).toHaveCount(0); + + await si.runVisualAndA11yTests('infinite-scroll-after-scroll', [ + { + id: 'aria-progressbar-name', + enabled: false + }, + { + id: 'aria-required-children', + enabled: false + } + ]); + }); + }); + + test.describe('virtual server side paging', () => { + const example = 'virtual-paging'; + + test(example + ' paginator test', async ({ si, page }) => { + await si.visitExample(example, false); + await pagerTest(page, 9); + await si.runVisualAndA11yTests('paginator'); + }); + + test(example, async ({ si, page }) => { + await si.visitExample(example, false); + + await expect(page.locator('ghost-loader')).toBeVisible(); + await expect(page.locator('.custom-loading-content')).toBeVisible(); + + await page.waitForSelector('span[title="Claudine Neal"]'); + + await expect(page.locator('ghost-loader').first()).not.toBeVisible(); + await expect(page.locator('.custom-loading-content')).not.toBeVisible(); + + await si.runVisualAndA11yTests('virtual-scroll-initial'); + + await page.getByLabel('page 4').click(); + + await expect(page.locator('ghost-loader').first()).toBeVisible(); + await expect(page.locator('.custom-loading-content')).toBeVisible(); + + await page.waitForSelector('span[title="Freda Mason"]'); + + await si.runVisualAndA11yTests('virtual-server-side-navigate', [ + { + id: 'label', + enabled: false + }, + { + id: 'empty-table-header', + enabled: false + }, + { + id: 'aria-progressbar-name', + enabled: false + }, + { + id: 'aria-required-children', + enabled: false + } + ]); + + await page.getByRole('row', { name: 'Freda Mason' }).click(); + await page.mouse.wheel(0, 500); + + await expect(page.locator('.custom-loading-content')).toBeVisible(); + + await page.waitForSelector('.datatable-body-cell-label'); + + await expect(page.locator('.custom-loading-content')).toHaveCount(0); + + await si.runVisualAndA11yTests('virtual-server-side-scroll'); + }); + }); +}); + +const pagerTest = async ( + page: Page, + numberOfRows: number, + checkForGhostLoader: boolean = false +) => { + const pager = page.locator('datatable-pager'); + expect(pager).toBeTruthy(); + + if (checkForGhostLoader) { + await expect(page.locator('ghost-loader').first()).toBeVisible(); + await expect(page.locator('.custom-loading-content')).toBeVisible(); + } + + const firstPageButton = page.getByLabel('go to first page').locator('..'); + const previousButton = page.getByLabel('go to previous page').locator('..'); + const nextButton = page.getByLabel('go to next page').locator('..'); + const lastButton = page.getByLabel('go to last page').locator('..'); + + await page.waitForSelector('span[title="Ethel Price"]'); + + if (checkForGhostLoader) { + await expect(page.locator('ghost-loader').first()).not.toBeVisible(); + await expect(page.locator('.custom-loading-content')).not.toBeVisible(); + } + + const displayedRows = await page.locator('datatable-row-wrapper').all(); + expect(displayedRows).toHaveLength(numberOfRows); + + await expect(page.getByRole('cell', { name: 'Ethel Price' })).toBeVisible(); + await expect(page.getByRole('cell', { name: 'Beryl Rice' })).toBeVisible(); + + await expect(firstPageButton).toHaveClass(/disabled/); + await expect(previousButton).toHaveClass(/disabled/); + + await expect(nextButton).not.toHaveClass(/disabled/); + await expect(lastButton).not.toHaveClass(/disabled/); + + await lastButton.click(); + + if (checkForGhostLoader) { + await expect(page.locator('ghost-loader').first()).toBeVisible(); + await expect(page.locator('.custom-loading-content')).toBeVisible(); + } + + await page.waitForSelector('span[title="Humphrey Curtis"]'); + + if (checkForGhostLoader) { + await expect(page.locator('ghost-loader').first()).not.toBeVisible(); + await expect(page.locator('.custom-loading-content')).not.toBeVisible(); + } + + await expect(page.getByRole('cell', { name: 'Ethel Price' })).not.toBeVisible(); + await expect(page.getByRole('cell', { name: 'Beryl Rice' })).not.toBeVisible(); + + await expect(firstPageButton).not.toHaveClass(/disabled/); + await expect(previousButton).not.toHaveClass(/disabled/); + + await expect(nextButton).toHaveClass(/disabled/); + await expect(lastButton).toHaveClass(/disabled/); + + await expect(page.getByRole('cell', { name: 'Humphrey Curtis' })).toBeVisible(); + await expect(page.getByRole('cell', { name: 'Christine Compton' })).toBeVisible(); +}; diff --git a/playwright/e2e/resize.spec.ts b/playwright/e2e/resize.spec.ts new file mode 100644 index 000000000..743fafa55 --- /dev/null +++ b/playwright/e2e/resize.spec.ts @@ -0,0 +1,66 @@ +import { expect, test } from '../support/test-helpers'; + +test.describe('resize and pinning', () => { + const example = 'pinning'; + test(example + ' resize column', async ({ si, page }) => { + await si.visitExample(example); + + const nameColumn = page.getByRole('columnheader', { name: 'Name' }); + const genderColumn = page.getByRole('columnheader', { name: 'Gender' }); + const cityColumn = page.getByRole('columnheader', { name: 'City' }); + const stateColumn = page.getByRole('columnheader', { name: 'State' }); + + const originalWidth = await nameColumn.boundingBox(); + + await expect(nameColumn).toHaveAttribute('resizeable'); + await expect(genderColumn).toHaveAttribute('resizeable'); + await expect(cityColumn).toHaveAttribute('resizeable'); + await expect(stateColumn).toHaveAttribute('resizeable'); + + await si.runVisualAndA11yTests('check-resize-attribute'); + + // Resize name column + const resizeHandler = nameColumn.locator('span[class="resize-handle"]'); + const originBoundingBox = await resizeHandler.boundingBox(); + const increaseWidthBy = 300; + + await page.mouse.click(originBoundingBox.x, originBoundingBox.y); + await page.mouse.down(); + await page.mouse.click(originBoundingBox.x + increaseWidthBy, originBoundingBox.y); + await page.mouse.up(); + + const updatedWidth = await nameColumn.boundingBox(); + + expect(updatedWidth.width).toBe(originalWidth.width + increaseWidthBy); + + await si.runVisualAndA11yTests('resize-name-column'); + }); + + test(example + ' pinning column', async ({ si, page }) => { + await si.visitExample(example); + + const nameColumn = page.getByRole('columnheader', { name: 'Name' }); + const genderColumn = page.getByRole('columnheader', { name: 'Gender' }); + const stateColumn = page.getByRole('columnheader', { name: 'State' }); + + const boundingBox = await page.locator('datatable-body').boundingBox(); + + await page.mouse.click(boundingBox.x, boundingBox.height - 2); + await page.mouse.down(); + + await page.mouse.move(boundingBox.x + 1000, boundingBox.height - 2, { steps: 20 }); + + await page.mouse.up(); + + await expect(nameColumn.locator('..')).toHaveCSS('z-index', '9'); + await expect(nameColumn.locator('..')).toHaveCSS('position', 'sticky'); + + await expect(stateColumn.locator('..')).toHaveCSS('z-index', '9'); + await expect(stateColumn.locator('..')).toHaveCSS('position', 'sticky'); + + await expect(genderColumn.locator('..')).not.toHaveCSS('z-index', '9'); + await expect(genderColumn.locator('..')).not.toHaveCSS('position', 'sticky'); + + await si.runVisualAndA11yTests('pinning-name-and-state-column'); + }); +}); diff --git a/playwright/e2e/selection.spec.ts b/playwright/e2e/selection.spec.ts new file mode 100644 index 000000000..2e2baf01d --- /dev/null +++ b/playwright/e2e/selection.spec.ts @@ -0,0 +1,316 @@ +import { expect, test } from '../support/test-helpers'; + +test.describe('selection', () => { + test.describe('cell selection', () => { + const example = 'cell-selection'; + + test(example, async ({ si, page }) => { + await si.visitExample(example, false); + const nameCell = page.getByRole('cell', { name: 'Ethel Price' }); + await expect(nameCell).toBeVisible(); + + const nameCellParentEl = nameCell.locator('..').locator('..'); + + await nameCell.click(); + + await expect(nameCell).toHaveClass(/active/); + await expect(nameCellParentEl).toHaveClass(/active/); + + await si.runVisualAndA11yTests('name-cell-selection'); + + const companyCell = page.getByRole('cell', { name: 'Dogspa' }); + await expect(companyCell).toBeVisible(); + + const companyCellParentEl = companyCell.locator('..').locator('..'); + + await companyCell.click(); + + await expect(companyCell).toHaveClass(/active/); + await expect(companyCellParentEl).toHaveClass(/active/); + + await si.runVisualAndA11yTests('company-cell-selection'); + }); + }); + + test.describe('single row selection', () => { + const example = 'single-selection'; + + test(example, async ({ si, page }) => { + await si.visitExample(example); + const selectedRow = page.getByRole('row', { name: 'Claudine Neal' }); + + await selectedRow.click(); + + const cellsInRow = await selectedRow.locator('datatable-body-cell').all(); + + await expect(selectedRow).toHaveClass(/active/); + expect(cellsInRow).toHaveLength(3); + + await expect(cellsInRow.at(0)).toHaveClass(/active/); + + for (const cell of cellsInRow) { + await expect(cell).toHaveAttribute('ng-reflect-is-selected', 'true'); + } + + const selectedColumnLi = await page.locator('.selected-column').locator('ul > li').all(); + + expect(selectedColumnLi).toHaveLength(1); + + await expect(selectedColumnLi[0]).toContainText('Claudine Neal'); + + await si.runVisualAndA11yTests('row-selection-initial'); + }); + }); + + test.describe('multi row selection', () => { + const example = 'multi-selection'; + + test(example + ' using Shift', async ({ si, page }) => { + await si.visitExample(example); + await page.getByRole('row', { name: 'Ethel Price' }).click(); + + await page.getByRole('row', { name: 'Wilder Gonzales' }).click({ + modifiers: ['Shift'] + }); + + const rows = await page.locator('datatable-body-row.active').all(); + + expect(rows).toHaveLength(4); + + const names = []; + rows.map(async row => { + names.push(await row.locator('datatable-body-cell').first().innerText()); + }); + + const selectedColumnLi = await page.locator('.selected-column').locator('ul > li').all(); + + expect(selectedColumnLi.length).toBe(names.length); + + for (const li of selectedColumnLi) { + const name = await li.innerText(); + const namePresentInSelectedRow = names.includes(name); + expect(namePresentInSelectedRow).toBeTruthy(); + } + + await si.runVisualAndA11yTests('using-shift'); + }); + + test(example + ' using Ctrl', async ({ si, page }) => { + await si.visitExample(example); + await page.getByRole('row', { name: 'Ethel Price' }).click(); + + await page.getByRole('row', { name: 'Wilder Gonzales' }).click({ + modifiers: ['ControlOrMeta'] + }); + + const selectedRows = await page.locator('datatable-body-row.active').all(); + + expect(selectedRows).toHaveLength(2); + + const names = []; + selectedRows.map(async row => { + names.push(await row.locator('datatable-body-cell').first().innerText()); + }); + + const selectedColumnLi = await page.locator('.selected-column').locator('ul > li').all(); + + expect(selectedColumnLi.length).toBe(names.length); + + for (const li of selectedColumnLi) { + const name = await li.innerText(); + const namePresentInSelectedRow = names.includes(name); + expect(namePresentInSelectedRow).toBeTruthy(); + } + + await si.runVisualAndA11yTests('using-ctrl'); + }); + }); + + test.describe('disable row selection', () => { + const example = 'multidisable-selection'; + + test(example, async ({ si, page }) => { + await si.visitExample(example); + + const disabledRow = page.getByRole('row', { name: 'Ethel Price' }); + await disabledRow.click(); + + let selectedRows = await page.locator('datatable-body-row.active').all(); + expect(selectedRows).toHaveLength(0); + + let selectedNamesLi = await page.locator('.selected-column').locator('ul > li').all(); + expect(selectedNamesLi).toHaveLength(1); + expect(await selectedNamesLi.at(0).innerText()).toBe('No Selections'); + + await page.getByRole('row', { name: 'Beryl Rice' }).click(); + + selectedRows = await page.locator('datatable-body-row.active').all(); + selectedNamesLi = await page.locator('.selected-column').locator('ul > li').all(); + + expect(selectedRows).toHaveLength(1); + expect(selectedNamesLi).toHaveLength(1); + + await disabledRow.click(); + + selectedRows = await page.locator('datatable-body-row.active').all(); + selectedNamesLi = await page.locator('.selected-column').locator('ul > li').all(); + + expect(selectedRows).toHaveLength(0); + expect(selectedNamesLi).toHaveLength(1); + expect(await selectedNamesLi.at(0).innerText()).toBe('No Selections'); + + await si.runVisualAndA11yTests('disable-row-selection'); + }); + }); + + test.describe('checkbox selection', () => { + const example = 'chkbox-selection'; + + test(example, async ({ si, page }) => { + await si.visitExample(example); + + const noCheckBoxRow = page.getByRole('row', { name: 'Ethel Price' }); + await expect(noCheckBoxRow).toBeVisible(); + + const noCheckbox = noCheckBoxRow.locator('input[type=checkbox]'); + await expect(noCheckbox).not.toBeVisible(); + + const rowsWithCheckbox = await page.locator('datatable-body-row input[type=checkbox]').all(); + + expect(rowsWithCheckbox).toHaveLength(4); + + for (let row of rowsWithCheckbox) { + await row.check(); + } + + let selectedNamesLi = await page.locator('.selected-column').locator('ul > li').all(); + expect(selectedNamesLi).toHaveLength(4); + + await si.runVisualAndA11yTests('checkbox-selection-all-checked', [ + { + id: 'label', + enabled: false + }, + { + id: 'empty-table-header', + enabled: false + } + ]); + + await rowsWithCheckbox[0].uncheck(); + await rowsWithCheckbox[1].uncheck(); + + selectedNamesLi = await page.locator('.selected-column').locator('ul > li').all(); + expect(selectedNamesLi).toHaveLength(2); + + await si.runVisualAndA11yTests('checkbox-selection-uncheck', [ + { + id: 'label', + enabled: false + }, + { + id: 'empty-table-header', + enabled: false + } + ]); + }); + }); + + test.describe('multi click row selection', () => { + const example = 'multi-click-selection'; + + test(example, async ({ si, page }) => { + await si.visitExample(example); + + await page.getByRole('row', { name: 'Claudine Neal' }).click(); + await page.getByRole('row', { name: 'Beryl Rice' }).click(); + await page.getByRole('row', { name: 'Wilder Gonzales' }).click(); + + let selectedRows = await page.locator('datatable-body-row.active').all(); + expect(selectedRows).toHaveLength(3); + + let selectedNamesLi = await page.locator('.selected-column').locator('ul > li').all(); + expect(selectedNamesLi).toHaveLength(3); + + await page.getByRole('row', { name: 'Beryl Rice' }).click(); + + selectedRows = await page.locator('datatable-body-row.active').all(); + selectedNamesLi = await page.locator('.selected-column').locator('ul > li').all(); + + expect(selectedRows).toHaveLength(2); + expect(selectedNamesLi).toHaveLength(2); + + await page.getByRole('row', { name: 'Claudine Neal' }).click(); + + selectedRows = await page.locator('datatable-body-row.active').all(); + selectedNamesLi = await page.locator('.selected-column').locator('ul > li').all(); + + expect(selectedRows).toHaveLength(1); + expect(selectedNamesLi).toHaveLength(1); + + await si.runVisualAndA11yTests('click-selection'); + }); + }); + + test.describe('multi click with checkbox selection', () => { + const example = 'multi-click-chkbox-selection'; + + test(example + ' using keyboard', async ({ si, page }) => { + await si.visitExample(example); + + const firstRow = page.getByRole('row', { name: 'Ethel Price' }); + await firstRow.focus(); + + await firstRow.locator('input[type=checkbox]').check(); + + // Move to 2nd row. + await page.keyboard.press('Tab'); + await page.keyboard.press('Space'); + + // Move to 4th row as 3rd row is disabled. + await page.keyboard.press('Tab'); + await page.keyboard.press('Space'); + + let selectedRows = await page.locator('datatable-body-row.active').all(); + expect(selectedRows).toHaveLength(3); + + const disabledElement = page.getByRole('row', { name: 'Beryl Rice' }); + + await expect(disabledElement).not.toHaveClass(/active/); + + let selectedNamesLi = await page.locator('.selected-column').locator('ul > li').all(); + expect(selectedNamesLi).toHaveLength(3); + + await si.runVisualAndA11yTests('navigation-using-tab-and-space', [ + { + id: 'label', + enabled: false + }, + { + id: 'empty-table-header', + enabled: false + } + ]); + + await page.keyboard.press('Shift+Tab'); + await page.keyboard.press('Space'); + + selectedRows = await page.locator('datatable-body-row.active').all(); + expect(selectedRows).toHaveLength(2); + + selectedNamesLi = await page.locator('.selected-column').locator('ul > li').all(); + expect(selectedNamesLi).toHaveLength(2); + + await si.runVisualAndA11yTests('backward-navigation-shift+tab+space', [ + { + id: 'label', + enabled: false + }, + { + id: 'empty-table-header', + enabled: false + } + ]); + }); + }); +}); diff --git a/playwright/e2e/sorting.spec.ts b/playwright/e2e/sorting.spec.ts new file mode 100644 index 000000000..9a77981e4 --- /dev/null +++ b/playwright/e2e/sorting.spec.ts @@ -0,0 +1,173 @@ +import { expect, test } from '../support/test-helpers'; + +test.describe('sorting', () => { + test.describe('client side sorting', () => { + const example = 'client-sorting'; + test(example, async ({ si, page }) => { + await si.visitExample(example); + + const companyHeader = page.locator('datatable-header-cell[title="Company"]'); + const companyHeaderIcon = companyHeader.locator('span').nth(2); + const firstRow = page.locator('datatable-body-row').first(); + + await si.runVisualAndA11yTests('default-sorting'); + + await companyHeaderIcon.click(); + + await expect(companyHeader).toHaveClass(/sort-active/); + await expect(companyHeader).toHaveClass(/sort-asc/); + + expect(firstRow.getByRole('cell', { name: 'Accidency' })).toBeTruthy(); + + await si.runVisualAndA11yTests('sorting-asc'); + + await companyHeaderIcon.click(); + + await expect(companyHeader).toHaveClass(/sort-active/); + await expect(companyHeader).toHaveClass(/sort-desc/); + + expect(firstRow.getByRole('cell', { name: 'Zolar' })).toBeTruthy(); + + await si.runVisualAndA11yTests('sorting-desc'); + + await companyHeaderIcon.click(); + + await expect(companyHeader).not.toHaveClass(/sort-active/); + await expect(companyHeader).not.toHaveClass(/sort-asc/); + await expect(companyHeader).not.toHaveClass(/sort-desc/); + expect( + firstRow.getByRole('cell', { name: 'Johnson, Johnson and Partners, LLC CMP DDC' }) + ).toBeTruthy(); + + await si.runVisualAndA11yTests('sorting-unset'); + }); + }); + + test.describe('default sorting', () => { + const example = 'default-sorting'; + test(example, async ({ si, page }) => { + await si.visitExample(example); + + const nameHeader = page.locator('datatable-header-cell[title="Name"]'); + const nameHeaderIcon = nameHeader.locator('span').nth(2); + const firstRow = page.locator('datatable-body-row').first(); + + await expect(nameHeader).toHaveClass(/sort-active/); + await expect(nameHeader).toHaveClass(/sort-desc/); + + expect(firstRow.getByRole('cell', { name: 'Yvonne Parsons' })).toBeTruthy(); + + await si.runVisualAndA11yTests('default-name-sorting-desc'); + + await nameHeaderIcon.click(); + + await expect(nameHeader).toHaveClass(/sort-active/); + await expect(nameHeader).toHaveClass(/sort-asc/); + + expect(firstRow.getByRole('cell', { name: 'Alexander Foley' })).toBeTruthy(); + + await si.runVisualAndA11yTests('sort-name-by-asc'); + + await nameHeaderIcon.click(); + + await expect(nameHeader).not.toHaveClass(/sort-active/); + await expect(nameHeader).not.toHaveClass(/sort-asc/); + await expect(nameHeader).not.toHaveClass(/sort-desc/); + + expect(firstRow.getByRole('cell', { name: 'Ethel Price' })).toBeTruthy(); + + await si.runVisualAndA11yTests('unset-name-sort'); + }); + }); + + test.describe('server side sorting', () => { + const example = 'server-sorting'; + test(example, async ({ si, page }) => { + await si.visitExample(example, false); + + const companyHeader = page.locator('datatable-header-cell[title="Company"]'); + const companyHeaderIcon = companyHeader.locator('span').nth(2); + const firstRow = page.locator('datatable-body-row').first(); + const loadingIndicator = page.locator('datatable-progress').locator('div[class="bar"]'); + + await companyHeaderIcon.click(); + + await expect(companyHeader).toHaveClass(/sort-active/); + await expect(companyHeader).toHaveClass(/sort-asc/); + await expect(loadingIndicator).toBeVisible(); + + await expect(loadingIndicator).toHaveCount(0); + + expect(firstRow.getByRole('cell', { name: 'Aquamate' })).toBeTruthy(); + + await si.runVisualAndA11yTests('sorting-asc'); + + await companyHeaderIcon.click(); + + await expect(companyHeader).toHaveClass(/sort-active/); + await expect(companyHeader).toHaveClass(/sort-desc/); + + await expect(loadingIndicator).toBeVisible(); + + await expect(loadingIndicator).toHaveCount(0); + + expect(firstRow.getByRole('cell', { name: 'Xyqag' })).toBeTruthy(); + + await si.runVisualAndA11yTests('sorting-desc'); + + await companyHeaderIcon.click(); + + await expect(loadingIndicator).toHaveCount(0); + + await expect(companyHeader).toHaveClass(/sort-active/); + await expect(companyHeader).toHaveClass(/sort-asc/); + + await si.runVisualAndA11yTests('sorting-asc-again', [ + { + id: 'aria-progressbar-name', + enabled: false + }, + { + id: 'aria-required-children', + enabled: false + } + ]); + }); + }); + + test.describe('custom sorting comparator', () => { + const example = 'comparator-sorting'; + test(example, async ({ si, page }) => { + await si.visitExample(example, false); + + const companyHeader = page.locator('datatable-header-cell[title="Company"]'); + const companyHeaderIcon = companyHeader.locator('span').nth(2); + const firstRow = page.locator('datatable-body-row').first(); + + await companyHeaderIcon.click(); + + await expect(companyHeader).toHaveClass(/sort-active/); + await expect(companyHeader).toHaveClass(/sort-asc/); + + expect(firstRow.getByRole('cell', { name: 'Aquamate' })).toBeTruthy(); + + await si.runVisualAndA11yTests('comparator-sorting-asc'); + + await companyHeaderIcon.click(); + + await expect(companyHeader).toHaveClass(/sort-active/); + await expect(companyHeader).toHaveClass(/sort-desc/); + + expect(firstRow.getByRole('cell', { name: 'Xyqag' })).toBeTruthy(); + + await si.runVisualAndA11yTests('comparator-sorting-desc'); + + await companyHeaderIcon.click(); + + await expect(companyHeader).toHaveClass(/sort-active/); + await expect(companyHeader).toHaveClass(/sort-asc/); + + await si.runVisualAndA11yTests('comparator-sorting-asc-again'); + }); + }); +}); diff --git a/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/custom-template-summary--custom-template-default-chromium-linux.png b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/custom-template-summary--custom-template-default-chromium-linux.png new file mode 100644 index 000000000..107b5caaf --- /dev/null +++ b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/custom-template-summary--custom-template-default-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:990db595b7bd0d2400ce0ad0f5f6da5721b08ef642483169e15db4c5e705cd6b +size 62231 diff --git a/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/inline-html-summary--custom-template-lastname-only-chromium-linux.png b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/inline-html-summary--custom-template-lastname-only-chromium-linux.png new file mode 100644 index 000000000..50d91bcdd --- /dev/null +++ b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/inline-html-summary--custom-template-lastname-only-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:cc06ec408ac2a1b5e05d1b7f492aa4cb8fe509cfd09f81c06cf67fdbae9a926c +size 63046 diff --git a/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/paging-summary--custom-template-chromium-linux.png b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/paging-summary--custom-template-chromium-linux.png new file mode 100644 index 000000000..6c862e027 --- /dev/null +++ b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/paging-summary--custom-template-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:421a778cf4baade6208089432f90d19d9fd0e937ac3a367b84740c31dc050f0d +size 84782 diff --git a/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--no-summary-row-chromium-linux.png b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--no-summary-row-chromium-linux.png new file mode 100644 index 000000000..00634d325 --- /dev/null +++ b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--no-summary-row-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f7014e029999ff1f6cdafe7ea6bfbd716bd0dfa01aa89e170371e8d0457586f9 +size 63162 diff --git a/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--show-summary-row-chromium-linux.png b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--show-summary-row-chromium-linux.png new file mode 100644 index 000000000..6dc5b77ee --- /dev/null +++ b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--show-summary-row-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5a8023b9f8c3f56cc2dc8c04a621905714ee718cd98d3e3ccc6d5a991a40f3db +size 65711 diff --git a/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--summary-row-at-bottom-chromium-linux.png b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--summary-row-at-bottom-chromium-linux.png new file mode 100644 index 000000000..3feeafa37 --- /dev/null +++ b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--summary-row-at-bottom-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d69a6bb556f72d9f6c3f30bfe1cadbe269601fc364817a1cffc9d0417edcf185 +size 66302 diff --git a/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--summary-row-at-top-chromium-linux.png b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--summary-row-at-top-chromium-linux.png new file mode 100644 index 000000000..6dc5b77ee --- /dev/null +++ b/playwright/snapshots/e2e/custom-template.spec.ts-snapshots/simple-summary--summary-row-at-top-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5a8023b9f8c3f56cc2dc8c04a621905714ee718cd98d3e3ccc6d5a991a40f3db +size 65711 diff --git a/playwright/snapshots/e2e/drag-drop.spec.ts-snapshots/drag-drop--switch-rows-chromium-linux.png b/playwright/snapshots/e2e/drag-drop.spec.ts-snapshots/drag-drop--switch-rows-chromium-linux.png new file mode 100644 index 000000000..0b1c90811 --- /dev/null +++ b/playwright/snapshots/e2e/drag-drop.spec.ts-snapshots/drag-drop--switch-rows-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1b67913555accfa1705644290a61a8e69830457638aad29240e4eb25a0f90216 +size 85428 diff --git a/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--empty-chromium-linux.png b/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--empty-chromium-linux.png index fe256dd1d..65bcb5ebf 100644 --- a/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--empty-chromium-linux.png +++ b/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--empty-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:b14a3c224d86fa54155dd240845a932dc2e01c30afafd3769c61b0f4366d2f58 -size 54076 +oid sha256:bed716e44e3b3e74138e906919e724c5ba411d5289e0db2c86120c67ae079561 +size 54026 diff --git a/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--filtered-chromium-linux.png b/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--filtered-chromium-linux.png index c4f57cc96..f2c7f1669 100644 --- a/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--filtered-chromium-linux.png +++ b/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--filtered-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:bd01858c89860723a60f6ce4c76b9162d54b48d993235631423ff154aee58bff -size 53735 +oid sha256:cee52c5e4af936fd0694cc82109a30aeda02b12c259f09bd1e0357aed7683d5b +size 53679 diff --git a/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--next-page-chromium-linux.png b/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--next-page-chromium-linux.png index 6efa1c0a9..b0cf84f58 100644 --- a/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--next-page-chromium-linux.png +++ b/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter--next-page-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:0f8d48d8e716be0b4aeac8dc579c39b6a5e3f24672a7edf7100f7c631386102f -size 81884 +oid sha256:1858c4d2bbdd1b3beb3f67c517860ebdfe9d3c5700cd264d1eb93f502e510631 +size 81903 diff --git a/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter-chromium-linux.png b/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter-chromium-linux.png index 6b62ef094..f2700fb01 100644 --- a/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter-chromium-linux.png +++ b/playwright/snapshots/e2e/filter.spec.ts-snapshots/filter-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7a2465905fc56c66cf4a22b9b6ba7f792afdb93b3138308a5adcec305a855b0a -size 84244 +oid sha256:00b683a8e35ea64ddb0a8ceb22dbcc7ab604bf4fd226a796d5e7a7db2cfaedbc +size 84181 diff --git a/playwright/snapshots/e2e/paging.spec.ts-snapshots/client-paging--default-paginator-chromium-linux.png b/playwright/snapshots/e2e/paging.spec.ts-snapshots/client-paging--default-paginator-chromium-linux.png new file mode 100644 index 000000000..c70890f01 --- /dev/null +++ b/playwright/snapshots/e2e/paging.spec.ts-snapshots/client-paging--default-paginator-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a19b57f661499abae2fc0a597d3775ee31e2f9225488843ebdcaf0f2fe257fdc +size 77943 diff --git a/playwright/snapshots/e2e/paging.spec.ts-snapshots/paging-scrolling-novirtualization--novirtualization-chromium-linux.png b/playwright/snapshots/e2e/paging.spec.ts-snapshots/paging-scrolling-novirtualization--novirtualization-chromium-linux.png new file mode 100644 index 000000000..351adb35e --- /dev/null +++ b/playwright/snapshots/e2e/paging.spec.ts-snapshots/paging-scrolling-novirtualization--novirtualization-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ad97d3ee5266b9fa08a402ba8694001096a77245467a75f110e25a64b013cd8d +size 73530 diff --git a/playwright/snapshots/e2e/paging.spec.ts-snapshots/server-paging--server-side-paginator-chromium-linux.png b/playwright/snapshots/e2e/paging.spec.ts-snapshots/server-paging--server-side-paginator-chromium-linux.png new file mode 100644 index 000000000..c5cd61077 --- /dev/null +++ b/playwright/snapshots/e2e/paging.spec.ts-snapshots/server-paging--server-side-paginator-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8dd260734fc64171051f2a8af033633af7ed9c867f7b848a0d5ff55759a03424 +size 80213 diff --git a/playwright/snapshots/e2e/paging.spec.ts-snapshots/server-scrolling--infinite-scroll-after-scroll-chromium-linux.png b/playwright/snapshots/e2e/paging.spec.ts-snapshots/server-scrolling--infinite-scroll-after-scroll-chromium-linux.png new file mode 100644 index 000000000..d5c9cca81 --- /dev/null +++ b/playwright/snapshots/e2e/paging.spec.ts-snapshots/server-scrolling--infinite-scroll-after-scroll-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1231d93b5ec06b882bcc7f3a60790a77d5940ffdf1f3f9a8d29885a28a374282 +size 83650 diff --git a/playwright/snapshots/e2e/paging.spec.ts-snapshots/server-scrolling--infinite-scroll-initial-chromium-linux.png b/playwright/snapshots/e2e/paging.spec.ts-snapshots/server-scrolling--infinite-scroll-initial-chromium-linux.png new file mode 100644 index 000000000..4c8d18325 --- /dev/null +++ b/playwright/snapshots/e2e/paging.spec.ts-snapshots/server-scrolling--infinite-scroll-initial-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c86e34ea131aefaf812ed91aaff082d4891381d040e0f5fc7ec0dec4a2e760ed +size 84169 diff --git a/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--paginator-chromium-linux.png b/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--paginator-chromium-linux.png new file mode 100644 index 000000000..ee3dce463 --- /dev/null +++ b/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--paginator-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:5f15d0b9524510bbfc732a380a538f3109164c752d22d881668c8effa74de8d8 +size 75822 diff --git a/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-scroll-initial-chromium-linux.png b/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-scroll-initial-chromium-linux.png new file mode 100644 index 000000000..6ed7b766c --- /dev/null +++ b/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-scroll-initial-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:774c3727808345f4d24ff7dbe1c3b01bdaf7ee7edda30fa4b956a5465d9773df +size 78229 diff --git a/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-server-side-navigate-chromium-linux.png b/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-server-side-navigate-chromium-linux.png new file mode 100644 index 000000000..74c837b67 --- /dev/null +++ b/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-server-side-navigate-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7dfdce0187b6453d5a9f10527616559ad557236a010601435c3565f337e2aa3b +size 77253 diff --git a/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-server-side-scroll-chromium-linux.png b/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-server-side-scroll-chromium-linux.png new file mode 100644 index 000000000..ad8b61548 --- /dev/null +++ b/playwright/snapshots/e2e/paging.spec.ts-snapshots/virtual-paging--virtual-server-side-scroll-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fc60fb2269cfc0e736569a578f0445e6bfe6ceed039b20a99259a2811772891d +size 76278 diff --git a/playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--check-resize-attribute-chromium-linux.png b/playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--check-resize-attribute-chromium-linux.png new file mode 100644 index 000000000..2b3af211a --- /dev/null +++ b/playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--check-resize-attribute-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:c7fa14e60d817c32f648ed3ca2c2c7b1f521983e268c3d7398e9381be3949304 +size 80393 diff --git a/playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--pinning-name-and-state-column-chromium-linux.png b/playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--pinning-name-and-state-column-chromium-linux.png new file mode 100644 index 000000000..a2bbc1a94 --- /dev/null +++ b/playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--pinning-name-and-state-column-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a7c7493ddaa52fda2d480b2043843ed1cbc74cc11da921e2224cc721f8368a4c +size 80728 diff --git a/playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--resize-name-column-chromium-linux.png b/playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--resize-name-column-chromium-linux.png new file mode 100644 index 000000000..669d8bfee --- /dev/null +++ b/playwright/snapshots/e2e/resize.spec.ts-snapshots/pinning--resize-name-column-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:726925446305bf96a6f9a98fbbed6e476ee37231fe7afb866aebaaf733d7d14e +size 72415 diff --git a/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--default-chromium-linux.png b/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--default-chromium-linux.png index 5ad0a1c64..1cbcf0c2b 100644 --- a/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--default-chromium-linux.png +++ b/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--default-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f2a0e6048ffb511c11bf2f6c84c4caff7898de2352227bc35be3d163b3533f7d -size 83189 +oid sha256:42effc172e10bb3fd5fc3ce116d84f11603eaab4e59a965d45dca966ba45cd43 +size 83171 diff --git a/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-collapsed-chromium-linux.png b/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-collapsed-chromium-linux.png index 3dde4b845..bf8d89bb8 100644 --- a/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-collapsed-chromium-linux.png +++ b/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-collapsed-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:2b6478c17ae0cc9bff34bd9804c9c93af50c345828a9e3d85a9ef626cce05811 -size 70169 +oid sha256:1f4b342c457fe1e2932419d638e702e7c8c92bc6a4f3d2044cd13cf0422b156b +size 70160 diff --git a/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-expanded-chromium-linux.png b/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-expanded-chromium-linux.png index 5ad0a1c64..1cbcf0c2b 100644 --- a/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-expanded-chromium-linux.png +++ b/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-expanded-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f2a0e6048ffb511c11bf2f6c84c4caff7898de2352227bc35be3d163b3533f7d -size 83189 +oid sha256:42effc172e10bb3fd5fc3ce116d84f11603eaab4e59a965d45dca966ba45cd43 +size 83171 diff --git a/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-selected-chromium-linux.png b/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-selected-chromium-linux.png index 0c726ed61..618bf99b9 100644 --- a/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-selected-chromium-linux.png +++ b/playwright/snapshots/e2e/row-group.spec.ts-snapshots/row-grouping--group-selected-chromium-linux.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:6797f3a88b8260a8ab262a71944658a7c7392815a9a322d5a6bbbac693b11bbc -size 83702 +oid sha256:af967fbfa5fcde2f23e345581596d385ee83ee2544bce46431304539a2687f77 +size 83744 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/cell-selection--company-cell-selection-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/cell-selection--company-cell-selection-chromium-linux.png new file mode 100644 index 000000000..1c45ea9e2 --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/cell-selection--company-cell-selection-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:fae24068f500a18976e8cd74c2e831ac78a009d18d2316eac87a133c6604c728 +size 85155 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/cell-selection--name-cell-selection-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/cell-selection--name-cell-selection-chromium-linux.png new file mode 100644 index 000000000..a6f58e9c2 --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/cell-selection--name-cell-selection-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:7e92e5d1b263c40c244e1195d213120147844321e40c010a59abdbc668b206c4 +size 84958 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/chkbox-selection--checkbox-selection-all-checked-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/chkbox-selection--checkbox-selection-all-checked-chromium-linux.png new file mode 100644 index 000000000..2ffa10304 --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/chkbox-selection--checkbox-selection-all-checked-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0666b8045f7ef19fb7bafe254c4eef32cd68d4d09ed319757deb6669dc5dcd38 +size 80808 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/chkbox-selection--checkbox-selection-uncheck-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/chkbox-selection--checkbox-selection-uncheck-chromium-linux.png new file mode 100644 index 000000000..0b910fcba --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/chkbox-selection--checkbox-selection-uncheck-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8c35c03b832dc33345f5f6d9ce014fd9cc2dcfa845e7325b9f4d39421e40ccb0 +size 76809 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-chkbox-selection--backward-navigation-shift-tab-space-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-chkbox-selection--backward-navigation-shift-tab-space-chromium-linux.png new file mode 100644 index 000000000..31b1c7512 --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-chkbox-selection--backward-navigation-shift-tab-space-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:694eb27b95cc3666be3d80e290526c94510d66d5899bf6937625dea4b7392bd5 +size 77415 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-chkbox-selection--navigation-using-tab-and-space-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-chkbox-selection--navigation-using-tab-and-space-chromium-linux.png new file mode 100644 index 000000000..b7df027b4 --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-chkbox-selection--navigation-using-tab-and-space-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:4bfa9f92e3c15a43e15ecff21a36f3e5e6338efc644679b6ca174ffda1b32672 +size 79620 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-selection--click-selection-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-selection--click-selection-chromium-linux.png new file mode 100644 index 000000000..a5feef100 --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-click-selection--click-selection-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:70d82ac94f679d5215ae2642cb736f736b0dbe1b9007ac6fea0c536fe1809b0e +size 76412 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-ctrl-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-ctrl-chromium-linux.png new file mode 100644 index 000000000..a1e55c299 --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-ctrl-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:843355c7c885d7e33769f4c5a8f6a24d3968189e3275f429d572f58c1e96bceb +size 76879 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-shift-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-shift-chromium-linux.png new file mode 100644 index 000000000..1f3d528b7 --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multi-selection--using-shift-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:133fe33a825eb753c609e370ac75727ada8d4f0d2727cf1f5cd01504ec3545ec +size 80854 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/multidisable-selection--disable-row-selection-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multidisable-selection--disable-row-selection-chromium-linux.png new file mode 100644 index 000000000..a6c0a4aea --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/multidisable-selection--disable-row-selection-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:9b739986e7747193c7bf96f67f6dbfb710207a5ca3bfc8bae1e73f3a667b14d9 +size 73781 diff --git a/playwright/snapshots/e2e/selection.spec.ts-snapshots/single-selection--row-selection-initial-chromium-linux.png b/playwright/snapshots/e2e/selection.spec.ts-snapshots/single-selection--row-selection-initial-chromium-linux.png new file mode 100644 index 000000000..8c12091b6 --- /dev/null +++ b/playwright/snapshots/e2e/selection.spec.ts-snapshots/single-selection--row-selection-initial-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:0c42969fe8fcd286108136012048621c260efa5ab34eeb7ca6e8c971f0c885bc +size 76934 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--default-sorting-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--default-sorting-chromium-linux.png new file mode 100644 index 000000000..58a63d183 --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--default-sorting-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:a3783fda1077ba5b18816d593d4474f30b754e58dd651b54bb1181253d67e0dd +size 77456 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-asc-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-asc-chromium-linux.png new file mode 100644 index 000000000..a6c76dd5a --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-asc-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:d835893ebbd93d469943aa7466c0672acb705a7dede193c99d3a4efa95c8535d +size 76165 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-desc-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-desc-chromium-linux.png new file mode 100644 index 000000000..cb896d3a1 --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-desc-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:b1b75b1c684150e823f33f1bbc05865fddb9b734eaa143381a792c269a4c67f2 +size 73651 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-unset-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-unset-chromium-linux.png new file mode 100644 index 000000000..8ea69260d --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/client-sorting--sorting-unset-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:88acebcf9173ef5bf3f8e36f709e260de79b6d4f0f6702f0964f88f4b2871fb6 +size 77489 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-asc-again-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-asc-again-chromium-linux.png new file mode 100644 index 000000000..410317cce --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-asc-again-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f348c217d3ce345c06801629b29e302c18b95ac8a27cb2c4119f2541cf00f138 +size 85186 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-asc-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-asc-chromium-linux.png new file mode 100644 index 000000000..410317cce --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-asc-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:f348c217d3ce345c06801629b29e302c18b95ac8a27cb2c4119f2541cf00f138 +size 85186 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-desc-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-desc-chromium-linux.png new file mode 100644 index 000000000..a56502973 --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/comparator-sorting--comparator-sorting-desc-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:1a8a4ba0c462c782f2425f153ff9d3655ff8de6d3de47f59c6ee3616efa81475 +size 83448 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--default-name-sorting-desc-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--default-name-sorting-desc-chromium-linux.png new file mode 100644 index 000000000..9da240c09 --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--default-name-sorting-desc-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:ddcfa56e2be7656d543c72cc0f60ef34cba35221fd2b8c12b5a4f7dda5344d51 +size 74635 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--sort-name-by-asc-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--sort-name-by-asc-chromium-linux.png new file mode 100644 index 000000000..d107a936b --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--sort-name-by-asc-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:2e3048aca73a3d7f04b4da357c428c2d52a2f670ca30934d19840be490be1410 +size 74802 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--unset-name-sort-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--unset-name-sort-chromium-linux.png new file mode 100644 index 000000000..c40e48fbd --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/default-sorting--unset-name-sort-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:be7717021ccd66bd363bbf50670d0da2396032cb1df33b303689490289835f65 +size 77489 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-asc-again-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-asc-again-chromium-linux.png new file mode 100644 index 000000000..4a306cb00 --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-asc-again-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:08ccde74b079348254a361820b285e82348d5600a483e04ee1a08d7563d9f4a8 +size 84377 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-asc-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-asc-chromium-linux.png new file mode 100644 index 000000000..4a306cb00 --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-asc-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:08ccde74b079348254a361820b285e82348d5600a483e04ee1a08d7563d9f4a8 +size 84377 diff --git a/playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-desc-chromium-linux.png b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-desc-chromium-linux.png new file mode 100644 index 000000000..2e96396f1 --- /dev/null +++ b/playwright/snapshots/e2e/sorting.spec.ts-snapshots/server-sorting--sorting-desc-chromium-linux.png @@ -0,0 +1,3 @@ +version https://git-lfs.github.com/spec/v1 +oid sha256:8a86ffb33adc23d5288295c5d2358d6c0c0f5d47ec8883e616930d0ae02b2775 +size 82629 diff --git a/src/app/app.component.scss b/src/app/app.component.scss index e69de29bb..5ddb875f1 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -0,0 +1,5 @@ +$datatable-pager-color: rgba(0, 0, 0, 0.64); + +@import '../../projects/ngx-datatable/src/lib/themes/material.scss'; +@import '../../projects/ngx-datatable/src/lib/themes/dark.scss'; +@import '../../projects/ngx-datatable/src/lib/themes/bootstrap.scss'; diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 79344f580..46754c3b7 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -8,12 +8,7 @@ import { RouterOutlet } from '@angular/router'; templateUrl: './app.component.html', // eslint-disable-next-line @angular-eslint/use-component-view-encapsulation encapsulation: ViewEncapsulation.None, - styleUrls: [ - './app.component.scss', - '../../projects/ngx-datatable/src/lib/themes/material.scss', - '../../projects/ngx-datatable/src/lib/themes/dark.scss', - '../../projects/ngx-datatable/src/lib/themes/bootstrap.scss' - ], + styleUrls: ['./app.component.scss'], providers: [ Location, { diff --git a/src/app/paging/mock-server-results-service.ts b/src/app/paging/mock-server-results-service.ts index 8d9e9ded6..d54e48f7c 100644 --- a/src/app/paging/mock-server-results-service.ts +++ b/src/app/paging/mock-server-results-service.ts @@ -20,7 +20,7 @@ export class MockServerResultsService { public getResults(page: Page): Observable> { return of(companyData) .pipe(map(d => this.getPagedData(page))) - .pipe(delay(1000 * Math.random())); + .pipe(delay(1500 * Math.random())); } /** diff --git a/src/app/paging/scrolling-server.component.ts b/src/app/paging/scrolling-server.component.ts index ae617f91d..3f6ecb35c 100644 --- a/src/app/paging/scrolling-server.component.ts +++ b/src/app/paging/scrolling-server.component.ts @@ -19,7 +19,7 @@ class PagedData { export class MockServerResultsService { public getResults(offset: number, limit: number): Observable> { return of(companyData.slice(offset, offset + limit)).pipe( - delay(new Date(Date.now() + 500)), + delay(new Date(Date.now() + 1500)), map(d => ({ data: d })) ); } diff --git a/src/app/selection/selection-chkbox-template.component.ts b/src/app/selection/selection-chkbox-template.component.ts index 080308a21..e2858cc31 100644 --- a/src/app/selection/selection-chkbox-template.component.ts +++ b/src/app/selection/selection-chkbox-template.component.ts @@ -25,7 +25,7 @@ import { Employee } from '../data.model';