Grids stabilize tests after toolbar KBN changes#34364
Conversation
Signed-off-by: Eldar Iusupzhanov <84278206+Tucchhaa@users.noreply.github.com>
| await removeStylesheetRulesFromPage(); | ||
| }); | ||
|
|
||
| test('HeaderRow should be highlighted when dragging column with allowColumnReordering=false', async (t) => { |
There was a problem hiding this comment.
this test was not flaky, but its test case is similar to the flaky one, so I have added styles to prevent its flakiness in the future
| await removeStylesheetRulesFromPage(); | ||
| }); | ||
|
|
||
| test('The group separator should not appear when dragging a grouped column to the same position', async (t) => { |
There was a problem hiding this comment.
this test was not flaky, but its test case is similar to the flaky one, so I have added styles to prevent its flakiness in the future
| because in e2e tests flaky outline would appear | ||
| */ | ||
| await insertStylesheetRulesToPage(` | ||
| .dx-group-panel-item[tabindex]:focus-visible:not(.dx-toolbar-item) { |
There was a problem hiding this comment.
is this :focus-visible outline reproducible for real users, or does it only appear with TestCafe's synthetic drag events? if it can happen in real usage, it probably belongs in the product SCSS rather than only in the tests
There was a problem hiding this comment.
outline doesn't appear in real usage only in testcafe
| because in e2e tests flaky outline would appear | ||
| */ | ||
| await insertStylesheetRulesToPage(` | ||
| .dx-group-panel-item[tabindex]:focus-visible:not(.dx-toolbar-item) { |
There was a problem hiding this comment.
is [tabindex] intended here instead of [tabindex="0"] like in the toolbar rule? matching items with tabindex="-1" might catch something we don't want
There was a problem hiding this comment.
I think it doesn't matter, the tests only need :focus-visible selector's outline to be suppressed, because datagrid has its own styles for :focus selector. I have removed [tabindex] from the selector.
| Overrides the toolbar items' :focus-visible outline, | ||
| because in e2e tests flaky outline would appear | ||
| */ | ||
| await insertStylesheetRulesToPage(` |
There was a problem hiding this comment.
this override block is repeated 4 times across this file and withGrouping.ts - could it be extracted into a shared constant in domUtils.ts?
There was a problem hiding this comment.
Make sense, I have created a helper func
| await t.drag(dataGrid.getGroupPanel().getHeader(0).element, 200, 35); | ||
| await t.wait(200); | ||
|
|
||
| await t.expect(dataGrid.getHeaders().getHeaderRow(0).isHighlighted()).ok(); |
There was a problem hiding this comment.
is the outline override still needed now that the explicit isHighlighted() wait is in place, or does the flaky outline still appear without it?
There was a problem hiding this comment.
Yes, it's still needed. I have added isHighlighted() to remove t.wait, but it doesn't resolve flakiness
No description provided.