What problem does this address?
As seen in some tests:
|
// Should show the blue line indicator somewhere. |
|
const indicator = await page.$( |
|
'.block-editor-block-list__insertion-point-indicator' |
|
); |
The insertion-point-indicator currently is just a div with a special class name block-editor-block-list__insertion-point-indicator which is an implementation detail.
|
<div className="block-editor-block-list__insertion-point-indicator" /> |
As discussed in #27260, we should avoid testing implementation details in our tests. Instead, there's often a better alternative, let it be text, aria-label, or other accessible attributes.
What is your proposed solution?
Since the insertion-point-indicator is just a visual cue of where to insert a new block, I can't think of any good accessible attributes for it. I believe we should fallback to the last resort: test IDs. As popularized by RTL, querying by test IDs is a good solution for elements like the insertion-point-indicator.
We can simply add a test ID like to the div like:
-<div className="block-editor-block-list__insertion-point-indicator" />
+<div className="block-editor-block-list__insertion-point-indicator" data-testid="insertion-point-indicator" />
Then we can query it by getByTestId('insertion-point-indicator') or page.$('[data-testid="insertion-point-indicator"]')
What problem does this address?
As seen in some tests:
gutenberg/packages/e2e-tests/specs/editor/various/adding-blocks.test.js
Lines 327 to 330 in e1c3dcf
The
insertion-point-indicatorcurrently is just a div with a special class nameblock-editor-block-list__insertion-point-indicatorwhich is an implementation detail.gutenberg/packages/block-editor/src/components/block-list/insertion-point.js
Line 145 in e1c3dcf
As discussed in #27260, we should avoid testing implementation details in our tests. Instead, there's often a better alternative, let it be text, aria-label, or other accessible attributes.
What is your proposed solution?
Since the
insertion-point-indicatoris just a visual cue of where to insert a new block, I can't think of any good accessible attributes for it. I believe we should fallback to the last resort: test IDs. As popularized by RTL, querying by test IDs is a good solution for elements like theinsertion-point-indicator.We can simply add a test ID like to the div like:
Then we can query it by
getByTestId('insertion-point-indicator')orpage.$('[data-testid="insertion-point-indicator"]')