refactor: add util type for asserting on global test props (#3285)

Esri · Oct 19, 2021 · 30288ae · 30288ae
1 parent f3030ce
commit 30288ae
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 10 deletions.
diff --git a/src/components/calcite-color-picker/calcite-color-picker.e2e.ts b/src/components/calcite-color-picker/calcite-color-picker.e2e.ts
@@ -4,7 +4,7 @@ import { CSS, DEFAULT_COLOR, DEFAULT_STORAGE_KEY_PREFIX, DIMENSIONS, TEXT } from
 import { E2EElement, E2EPage, EventSpy, newE2EPage } from "@stencil/core/testing";
 import { ColorValue } from "./interfaces";
 import SpyInstance = jest.SpyInstance;
-import { selectText } from "../../tests/utils";
+import { GlobalTestProps, selectText } from "../../tests/utils";
 
 describe("calcite-color-picker", () => {
   let consoleSpy: SpyInstance;
@@ -474,10 +474,9 @@ describe("calcite-color-picker", () => {
     await page.waitForChanges();
     x = 0;
 
-    type TestWindow = {
+    type TestWindow = GlobalTestProps<{
       internalColor: HTMLCalciteColorPickerElement["color"];
-    } & Window &
-      typeof globalThis;
+    }>;
 
     await page.evaluateHandle(() => {
       const color = document.querySelector("calcite-color-picker");

diff --git a/src/components/calcite-tree/calcite-tree.e2e.ts b/src/components/calcite-tree/calcite-tree.e2e.ts
@@ -1,6 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, HYDRATED_ATTR, defaults } from "../../tests/commonTests";
-import { html } from "../../tests/utils";
+import { GlobalTestProps, html } from "../../tests/utils";
 import { CSS } from "../calcite-tree-item/resources";
 import { TreeSelectionMode } from "./interfaces";
 
@@ -244,10 +244,9 @@ describe("calcite-tree", () => {
 
         const [item1, item2] = await page.findAll("calcite-tree-item");
 
-        type TestWindow = {
+        type TestWindow = GlobalTestProps<{
           selectedIds: string[];
-        } & Window &
-          typeof globalThis;
+        }>;
 
         await page.evaluateHandle(() =>
           document.addEventListener("calciteTreeSelect", ({ detail }: CustomEvent) => {

diff --git a/src/tests/commonTests.ts b/src/tests/commonTests.ts
@@ -3,12 +3,12 @@ import { JSX } from "../components";
 import { toHaveNoViolations } from "jest-axe";
 import axe from "axe-core";
 import { config } from "../../stencil.config";
-import { html } from "./utils";
+import { GlobalTestProps, html } from "./utils";
 
 expect.extend(toHaveNoViolations);
 
 type CalciteComponentTag = keyof JSX.IntrinsicElements;
-type AxeOwningWindow = Window & { axe: typeof axe } & typeof globalThis;
+type AxeOwningWindow = GlobalTestProps<{ axe: typeof axe }>;
 type ComponentHTML = string;
 type TagOrHTML = CalciteComponentTag | ComponentHTML;
 

diff --git a/src/tests/utils.ts b/src/tests/utils.ts
@@ -2,6 +2,11 @@ import { E2EElement, E2EPage } from "@stencil/core/testing";
 import { BoundingBox, JSONObject } from "puppeteer";
 import dedent from "dedent";
 
+/**
+ * Util to help type global props for testing.
+ */
+export type GlobalTestProps<T> = T & Window & typeof globalThis;
+
 type DragAndDropSelector = string | SelectorOptions;
 
 type PointerPosition = {