test: add Playwright coverage and test ids for CpsTableComponent - #845
Open
fateeand wants to merge 1 commit into
Open
test: add Playwright coverage and test ids for CpsTableComponent#845fateeand wants to merge 1 commit into
fateeand wants to merge 1 commit into
Conversation
fateeand
requested review from
TerranceKhumalo-absa,
korel-san and
lukasmatta
as code owners
August 13, 2026 15:42
Contributor
Coverage report for library
Test suite run success2477 tests passing in 76 suites. Report generated by 🧪jest coverage report action from 0cb1ae5 |
Contributor
There was a problem hiding this comment.
Pull request overview
Adds extensive Playwright E2E coverage for CpsTableComponent by introducing stable data-testid hooks across the table and its internal sub-components/directives, plus a few small behavioral/UI tweaks (loader label configurability, row test key resolution, checkbox hover/focus styling), and updates the /table composition demo to exercise more scenarios.
Changes:
- Added many
data-testidattributes acrosscps-tabletemplates, internal components, and directives to enable reliable Playwright selectors. - Expanded Playwright coverage for sorting, filtering, selection, expansion, column visibility, resizing, lazy loading, paginator visibility, and demo interactions.
- Added
loadingLabelinput and updated row test-id key generation to resolve nesteddataKeypaths (PrimeNG-style), plus CSS adjustments for checkbox hover/focus styling.
Reviewed changes
Copilot reviewed 17 out of 17 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-header-selectable/cps-table-header-selectable.directive.ts | Adds a stable test id to the header “select all” checkbox created by the directive. |
| projects/cps-ui-kit/src/lib/components/cps-table/directives/cps-table-column-resizable/cps-table-column-resizable.directive.ts | Adds a test id to the column resizer handle to enable keyboard resize tests. |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.ts | Adds loadingLabel, adjusts passthrough focus behavior, and updates rowTestKey() to resolve nested dataKey paths. |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.spec.ts | Adds unit tests for rowTestKey() behavior (flat + dot-path resolution). |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss | Updates checkbox hover/focus styling rules to address reported UI regressions. |
| projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.html | Adds data-testid hooks throughout the table markup and wires loadingLabel into the loader template. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-row-menu/table-row-menu.component.html | Adds a test id to the row menu button. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-visibility-toggle/table-column-visibility-toggle.component.html | Adds test ids for the columns toggle button, listbox, and items. |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/table-column-filter/table-column-filter.component.html | Adds test ids for filter UI elements (open/close/apply/clear, constraints, match modes). |
| projects/cps-ui-kit/src/lib/components/cps-table/components/internal/cps-sort-icon/cps-sort-icon.component.ts | Adds a test id to the sort icon host for multi-sort badge assertions. |
| projects/composition/src/app/pages/table-page/table-page.examples.ts | Expands /table demo examples (lazy loading, paginator hiding, additional select button, custom sort, initial columns) and switches alerts to notification service in examples. |
| projects/composition/src/app/pages/table-page/table-page.component.ts | Implements backing logic for new demo examples (lazy loading simulation, custom sort, extra toolbar action) and uses notification service. |
| projects/composition/src/app/pages/table-page/table-page.component.scss | Adds spacing utility class for the new paginator demo switch. |
| projects/composition/src/app/pages/table-page/table-page.component.html | Adds test ids to demo tables and introduces new demo tabs (11–15). |
| projects/composition/src/app/api-data/cps-table.json | Documents the new loadingLabel input. |
| playwright/fixtures/composition-components.ts | Updates the composition tab list for the new demo tabs. |
| playwright/cps-ui-kit/components/cps-table.spec.ts | Adds broad Playwright coverage for cps-table and improves selectors via the new test ids. |
Suppressed comments (1)
projects/cps-ui-kit/src/lib/components/cps-table/cps-table.component.scss:465
- These selectors also use the sibling combinator (~) to target the checked checkbox icon on hover/focus. If the input and box are not siblings, the intended icon color override won't apply.
.p-checkbox-checked:not(.p-disabled)
.p-checkbox-input:hover
~ .p-checkbox-box
.p-checkbox-icon,
.p-checkbox-checked:not(.p-disabled)
.p-checkbox-input:focus-visible
~ .p-checkbox-box
.p-checkbox-icon {
color: #ffffff;
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+879
to
+883
| rowTestKey(item: any, rowIndex: number): string { | ||
| return this.dataKey | ||
| ? String(ObjectUtils.resolveFieldData(item, this.dataKey)) | ||
| : `${rowIndex}`; | ||
| } |
Comment on lines
+507
to
+511
| } | ||
|
|
||
| onAdditionalBtnOnSelectClicked(rows: any[]) { | ||
| this._notifService.success(`Archive clicked for ${rows.length} row(s)`); | ||
| } |
Comment on lines
+83
to
+85
| const box = await emptyMessage.boundingBox(); | ||
| expect(box?.height).toBe(352); // 22rem | ||
|
|
Comment on lines
+450
to
454
| .p-checkbox:not(.p-disabled) .p-checkbox-input:hover ~ .p-checkbox-box, | ||
| .p-checkbox:not(.p-disabled) | ||
| .p-checkbox-input:focus-visible | ||
| ~ .p-checkbox-box { | ||
| border-color: $color-calm; |
Contributor
Playwright test results
Details
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
cps-table.spec.tswith 29 tests, covering: sort (single + multi-column badge), per-column filtering, empty/loading states, HTML sanitization, virtual scroll, checkbox selection (row + select-all + header-selectable variant), row expansion, row-menu actions, keyboard-driven row reorder, global filter, toolbar action-button visibility/feedback, column-visibility toggle (internal + external), column resize (keyboard), lazy/server-side loading (init, page-change, same-page dedup),alwaysShowPaginator=false,showAdditionalBtnOnSelect,customSort,initialColumns, and two checkbox hover/focus CSS regressions.cps-table.component.htmland all 6 internal sub-components/directives (cps-sort-icon,table-column-filter,table-row-menu,table-column-visibility-toggle, the resize and header-selectable directives).loadingLabelinput so the loader's text is configurable./tabledemo page:hasToolbar=false+ customemptyMessagelazy/lazyLoadOnInit/onLazyLoad— simulated 600ms server-side fetchalwaysShowPaginator=falseshowAdditionalBtnOnSelectcustomSort/customSortFunctioninitialColumnsTODO: Merge with
Release notes: