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

[jcfranco]

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

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

[benelan]

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:

calcite-design-system/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

Lines 314 to 321 in 2407366

	const input = (
	await page.waitForFunction(() =>
	document
	.querySelector("calcite-input-date-picker")
	.shadowRoot.querySelector("calcite-input-text")
	.shadowRoot.querySelector("input"),
	)
	).asElement();

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:

calcite-design-system/packages/calcite-components/src/components/input-date-picker/input-date-picker.e2e.ts

Lines 77 to 133 in 75686b7

	async function navigateMonth(page: E2EPage, direction: "previous" | "next"): Promise<void> {
	const linkIndex = direction === "previous" ? 0 : 1;
	await page.evaluate(
	async (MONTH_HEADER_CSS, linkIndex: number): Promise<void> =>
	document
	.querySelector("calcite-input-date-picker")
	.shadowRoot.querySelector("calcite-date-picker")
	.shadowRoot.querySelector("calcite-date-picker-month-header")
	.shadowRoot.querySelectorAll<HTMLAnchorElement>(`.${MONTH_HEADER_CSS.chevron}`)
	[linkIndex].click(),
	MONTH_HEADER_CSS,
	linkIndex,
	);
	await page.waitForChanges();
	}
	async function selectDayInMonth(page: E2EPage, day: number): Promise<void> {
	const dayIndex = day - 1;
	await page.evaluate(
	async (dayIndex: number) =>
	document
	.querySelector<HTMLCalciteInputDatePickerElement>("calcite-input-date-picker")
	.shadowRoot.querySelector<HTMLCalciteDatePickerElement>("calcite-date-picker")
	.shadowRoot.querySelector<HTMLCalciteDatePickerMonthElement>("calcite-date-picker-month")
	.shadowRoot.querySelectorAll<HTMLCalciteDatePickerDayElement>("calcite-date-picker-day[current-month]")
	[dayIndex].click(),
	dayIndex,
	);
	await page.waitForChanges();
	}
	async function getActiveMonth(page: E2EPage): Promise<string> {
	return page.evaluate(
	async (MONTH_HEADER_CSS) =>
	document
	.querySelector("calcite-input-date-picker")
	.shadowRoot.querySelector("calcite-date-picker")
	.shadowRoot.querySelector("calcite-date-picker-month-header")
	.shadowRoot.querySelector(`.${MONTH_HEADER_CSS.month}`).textContent,
	MONTH_HEADER_CSS,
	);
	}
	async function getDateInputValue(page: E2EPage, type: "start" | "end" = "start"): Promise<string> {
	const inputIndex = type === "start" ? 0 : 1;
	return page.evaluate(
	async (inputIndex: number): Promise<string> =>
	document
	.querySelector("calcite-input-date-picker")
	.shadowRoot.querySelectorAll("calcite-input-text")
	[inputIndex].shadowRoot.querySelector("input").value,
	inputIndex,
	);
	}

[geospatialem]

Blocked by #10310

[github-actions]

Issue #10310 has been closed, this issue is ready for re-evaluation.

cc @geospatialem,@DitwanP

[geospatialem]

Spike to determine if the above is still valid and we should pursue it with the move from Stencil to Lit.