refactor: use utility to ensure test-specific data attributes are removed in prod builds

packages/calcite-components/src/components/flow-item/flow-item.e2e.ts

@@ -148,7 +148,7 @@ describe("calcite-flow-item", () => {
 
     await page.$eval("calcite-flow-item", (flowItem: HTMLCalciteFlowItemElement) => {
       const panel = flowItem.shadowRoot.querySelector("calcite-panel");
-      const toggleButton = panel.shadowRoot.querySelector("[data-test=collapse]") as HTMLCalciteActionElement;
+      const toggleButton = panel.shadowRoot.querySelector("[data-test-id=collapse]") as HTMLCalciteActionElement;
       toggleButton.click();
     });
 

packages/calcite-components/src/components/panel/panel.e2e.ts

@@ -86,7 +86,7 @@ describe("calcite-panel", () => {
 
     const element = await page.find("calcite-panel");
     const container = await page.find(`calcite-panel >>> .${CSS.contentWrapper}`);
-    const collapseButtonSelector = `calcite-panel >>> [data-test="collapse"]`;
+    const collapseButtonSelector = `calcite-panel >>> [data-test-id="collapse"]`;
     expect(await page.find(collapseButtonSelector)).toBeNull();
 
     await page.waitForChanges();
@@ -107,7 +107,7 @@ describe("calcite-panel", () => {
 
     const calcitePanelClose = await page.spyOnEvent("calcitePanelClose", "window");
 
-    const closeButton = await page.find("calcite-panel >>> calcite-action[data-test=close]");
+    const closeButton = await page.find("calcite-panel >>> calcite-action[data-test-id=close]");
 
     await closeButton.click();
 
@@ -121,7 +121,7 @@ describe("calcite-panel", () => {
 
     const calcitePanelToggle = await page.spyOnEvent("calcitePanelToggle", "window");
 
-    const toggleButton = await page.find("calcite-panel >>> [data-test=collapse]");
+    const toggleButton = await page.find("calcite-panel >>> [data-test-id=collapse]");
 
     await toggleButton.click();
 

packages/calcite-components/src/components/panel/panel.tsx

@@ -43,6 +43,7 @@ import {
   updateMessages,
 } from "../../utils/t9n";
 import { PanelMessages } from "./assets/panel/t9n";
+import { toTestObject } from "../../utils/component";
 
 /**
  * @slot - A slot for adding custom content.
@@ -428,22 +429,22 @@ export class Panel
       <calcite-action
         aria-expanded={toAriaBoolean(!collapsed)}
         aria-label={collapse}
-        data-test="collapse"
         icon={collapsed ? icons[0] : icons[1]}
         onClick={this.collapse}
         text={collapse}
         title={collapsed ? expand : collapse}
+        {...toTestObject("id", "collapse")}
       />
     ) : null;
 
     const closeNode = closable ? (
       <calcite-action
         aria-label={close}
-        data-test="close"
         icon={ICONS.close}
         onClick={this.close}
         text={close}
         title={close}
+        {...toTestObject("id", "close")}
       />
     ) : null;
 

packages/calcite-components/src/components/tree-item/tree-item.tsx

@@ -33,7 +33,7 @@ import { CSS_UTILITY } from "../../utils/resources";
 import { FlipContext, Scale, SelectionMode } from "../interfaces";
 import { TreeItemSelectDetail } from "./interfaces";
 import { CSS, ICONS, SLOTS } from "./resources";
-import { getIconScale } from "../../utils/component";
+import { getIconScale, toTestObject } from "../../utils/component";
 
 /**
  * @slot - A slot for adding text.
@@ -214,10 +214,10 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
           [CSS.chevron]: true,
           [CSS_UTILITY.rtl]: rtl,
         }}
-        data-test-id="icon"
         icon={ICONS.chevronRight}
         onClick={this.iconClickHandler}
         scale={getIconScale(this.scale)}
+        {...toTestObject("id", "icon")}
       />
     ) : null;
     const defaultSlotNode: VNode = <slot key="default-slot" />;
@@ -228,10 +228,10 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
           <calcite-checkbox
             checked={this.selected}
             class={CSS.checkbox}
-            data-test-id="checkbox"
             indeterminate={this.hasChildren && this.indeterminate}
             scale={this.scale}
             tabIndex={-1}
+            {...toTestObject("id", "checkbox")}
           />
           {defaultSlotNode}
         </label>
@@ -313,9 +313,9 @@ export class TreeItem implements ConditionalSlotComponent, InteractiveComponent
               [CSS.childrenContainer]: true,
               [CSS_UTILITY.rtl]: rtl,
             }}
-            data-test-id="calcite-tree-children"
             onClick={this.childrenClickHandler}
             role={this.hasChildren ? "group" : undefined}
+            {...toTestObject("id", "calcite-tree-children")}
           >
             <slot name={SLOTS.children} />
           </div>

packages/calcite-components/src/utils/component.ts

@@ -1,5 +1,37 @@
 import { Scale } from "../components/interfaces";
+import { Build } from "@stencil/core";
 
 export function getIconScale(componentScale: Scale): Extract<Scale, "s" | "m"> {
   return componentScale === "l" ? "m" : "s";
 }
+
+/**
+ * This util is used to create an object to spread data attributes used in E2E or unit tests.
+ *
+ * Attributes used for testing will get removed when the components are built for production.
+ *
+ * @example
+ *
+ * <calcite-icon
+ *         class={{
+ *           [CSS.chevron]: true,
+ *           [CSS_UTILITY.rtl]: rtl,
+ *         }}
+ *         icon={ICONS.chevronRight}
+ *         onClick={this.iconClickHandler}
+ *         scale={getIconScale(this.scale)}
+ *         {...toTestObject("id", "icon")}
+ *       />
+ *
+ * @param id – the id to use for the data-test attribute
+ * @param value – the value to use for the data-test attribute
+ */
+export function toTestObject(id: string, value: string): object {
+  if (!Build.isTesting) {
+    return null;
+  }
+
+  return {
+    [`data-test-${id}`]: value,
+  };
+}