search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
269 stars 75 forks source link

Use deep piercing selectors instead of separate selector + shadow selectors in common test helpers #9090

Open jcfranco opened 2 months ago

jcfranco commented 2 months ago

Description

Stencil v4.14.0 added support for deep piercing selectors (E2EPage). We should explore whether our common helpers can be simplified by using a single selector prop vs an additional one for the shadow DOM.

Proposed Advantages

Simplified test helper APIs.

Which Component

Helpers from commonTests using both a selector and shadowSelector prop (or similar).

Relevant Info

No response

Calcite package

benelan commented 2 months ago

Let's also use this issue to change tests that use shadowRoot.querySelector instead of deep piercing. For example, we should be able to change this:

https://github.com/Esri/calcite-design-system/blob/24073661f08f215abd4a470b1c662f1ea7c9156c/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts#L314-L321

to this:

const input = await page.find("calcite-input-date-picker >>> input");

The following utils could also be removed/replaced by the deep piercing selector:

https://github.com/Esri/calcite-design-system/blob/75686b729c2364673fa441dfc1d74b4a96b6384a/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts#L77-L133