@badisi/wdio-harness 4.4.0 → 4.4.1

package/README.md

@@ -28,7 +28,7 @@
 
 > A component harness is a class that lets a test interact with a component via a supported API. Each harness's API interacts with a component the same way a user would. By using the harness API, a test insulates itself against updates to the internals of a component, such as changing its DOM structure. The idea for component harnesses comes from the [PageObject](https://martinfowler.com/bliki/PageObject.html) pattern commonly used for integration testing.
 
-[More info](https://material.angular.io/cdk/test-harnesses/overview)
+[More info...](https://material.angular.io/cdk/test-harnesses/overview)
 
 <hr/>
 

package/index.d.mts

@@ -1,14 +1,5 @@
 import { ComponentHarness, ComponentHarnessConstructor, ElementDimensions, EventData, HarnessEnvironment, HarnessQuery, ModifierKeys, TestElement, TestKey, TextOptions } from "@angular/cdk/testing";
 //#region src/WebdriverIOTestElement.d.ts
-/** Module augmentation to expose the host element as a public api */
-declare module "@angular/cdk/testing" {
-  interface ComponentHarness {
-    element(): WebdriverIO.Element;
-  }
-  interface TestElement {
-    element(): WebdriverIO.Element;
-  }
-}
 /**
  * A `TestElement` implementation for WebdriverIO.
  */
@@ -131,13 +122,23 @@ declare class WebdriverIOHarnessEnvironment extends HarnessEnvironment<Webdriver
 }
 //#endregion
 //#region src/index.d.ts
+/** Module augmentation to expose the host element as a public api */
+declare module "@angular/cdk/testing" {
+  interface ComponentHarness {
+    element(): WebdriverIO.Element;
+  }
+  interface TestElement {
+    element(): WebdriverIO.Element;
+  }
+}
+export declare const patchComponentHarness: () => void;
 /**
  * Searches for all instances of the component corresponding to the given harness type under the
  * `HarnessLoader`'s root element, and returns a list of `ComponentHarness` for each instance.
  * @param query A query for a harness to create
  * @return A list of instances of the given harness type
  */
-declare const getAllHarnesses: <T extends ComponentHarness>(query: HarnessQuery<T>) => Promise<T[]>;
+export declare const getAllHarnesses: <T extends ComponentHarness>(query: HarnessQuery<T>) => Promise<T[]>;
 /**
  * Searches for an instance of the component corresponding to the given harness type or host element
  * under the `HarnessLoader`'s root element, and returns a `ComponentHarness` for that instance. If
@@ -148,17 +149,16 @@ declare const getAllHarnesses: <T extends ComponentHarness>(query: HarnessQuery<
  * @return An instance of the given harness type
  * @throws If a matching component instance can't be found
  */
-declare const getHarness: <T extends ComponentHarness>(query: HarnessQuery<T>, element?: WebdriverIO.Element) => Promise<T>;
+export declare const getHarness: <T extends ComponentHarness>(query: HarnessQuery<T>, element?: WebdriverIO.Element) => Promise<T>;
 /**
  * Returns a base harness environment instance.
  * @return An HarnessLoader instance for the current HTML document, rooted at the document's root element
  */
-declare const createHarnessEnvironment: (rootElement?: WebdriverIO.Element) => Promise<WebdriverIOHarnessEnvironment>;
+export declare const createHarnessEnvironment: (rootElement?: WebdriverIO.Element) => Promise<WebdriverIOHarnessEnvironment>;
 /**
  * Returns a promise that resolves when the application is "stable".
  * The promise might be rejected due to timeouts, or async tasks in the client
  * app that never finish (timers, etc).
  */
-declare const waitForAngular: () => Promise<void>;
-//#endregion
-export { createHarnessEnvironment, getAllHarnesses, getHarness, waitForAngular };
+export declare const waitForAngular: () => Promise<void>;
+//#endregion

package/index.mjs

@@ -1,5 +1,5 @@
-import { $, browser } from "@wdio/globals";
 import { ComponentHarness, HarnessEnvironment, TestKey } from "@angular/cdk/testing";
+import { $, browser } from "@wdio/globals";
 import logger from "@wdio/logger";
 //#region src/utils.ts
 const colorize = (msg, color) => process.stdout.isTTY ? `${color}${msg}\x1b[0m` : msg;
@@ -7,10 +7,8 @@ const magenta = (msg) => colorize(msg, "\x1B[35m");
 const green = (msg) => colorize(msg, "\x1B[32m");
 //#endregion
 //#region src/WebdriverIOTestElement.ts
-/** Registers the element logger. */
-const log$1 = logger("wdio-harness");
 /** Maps the `TestKey` constants to WebdriverIO's `Key` constants. */
-const keyMap = {
+const getKey = (key) => ({
 	[TestKey.BACKSPACE]: "Backspace",
 	[TestKey.TAB]: "Tab",
 	[TestKey.ENTER]: "Enter",
@@ -42,17 +40,14 @@ const keyMap = {
 	[TestKey.F12]: "F12",
 	[TestKey.META]: "Meta",
 	[TestKey.COMMA]: ","
-};
-ComponentHarness.prototype.element = function() {
-	return this.locatorFactory.rootElement.element();
-};
+})[key];
 /** Converts a `ModifierKeys` object to a list of WebdriverIO `Key`s. */
 const toWebdriverIOModifierKeys = (modifiers) => {
 	const result = [];
-	if (modifiers.control) result.push(keyMap[TestKey.CONTROL]);
-	if (modifiers.alt) result.push(keyMap[TestKey.ALT]);
-	if (modifiers.shift) result.push(keyMap[TestKey.SHIFT]);
-	if (modifiers.meta) result.push(keyMap[TestKey.META]);
+	if (modifiers.control) result.push(getKey(TestKey.CONTROL));
+	if (modifiers.alt) result.push(getKey(TestKey.ALT));
+	if (modifiers.shift) result.push(getKey(TestKey.SHIFT));
+	if (modifiers.meta) result.push(getKey(TestKey.META));
 	return result;
 };
 /**
@@ -120,7 +115,7 @@ var WebdriverIOTestElement = class {
 		}
 		const KeyNULL = String.fromCharCode(57344);
 		const modifierKeys = toWebdriverIOModifierKeys(modifiers);
-		const keys = rest.map((k) => typeof k === "string" ? k.split("") : [keyMap[k]]).reduce((arr, k) => arr.concat(k), []).reduce((arr, k) => {
+		const keys = rest.map((k) => typeof k === "string" ? k.split("") : [getKey(k)]).reduce((arr, k) => arr.concat(k), []).reduce((arr, k) => {
 			if (modifierKeys.length > 0) return arr.concat(...modifierKeys, k, KeyNULL);
 			return arr.concat(k);
 		}, []);
@@ -205,9 +200,9 @@ var WebdriverIOTestElement = class {
 		if (options.length && indexes.size) {
 			await this.setInputValue("");
 			for (let i = 0; i < options.length; i++) if (indexes.has(i)) {
-				await this.keyDown(keyMap[TestKey.CONTROL]);
+				await this.keyDown(getKey(TestKey.CONTROL));
 				await options[i].click();
-				await this.keyUp(keyMap[TestKey.CONTROL]);
+				await this.keyUp(getKey(TestKey.CONTROL));
 			}
 		}
 	}
@@ -267,13 +262,11 @@ var WebdriverIOTestElement = class {
 	}
 	/** Writes info to the console outputs. */
 	logAction(action, args) {
-		log$1.info(`${magenta(action)} ${green(this.hostElement.selector.toString())} ${args ? args : ""}`);
+		logger("wdio-harness").info(`${magenta(action)} ${green(this.hostElement.selector.toString())} ${args ? args : ""}`);
 	}
 };
 //#endregion
 //#region src/WebdriverIOHarnessEnvironment.ts
-/** Registers the environment logger. */
-const log = logger("wdio-harness");
 /**
 * A `HarnessEnvironment` implementation for WebdriverIO.
 */
@@ -301,7 +294,7 @@ var WebdriverIOHarnessEnvironment = class WebdriverIOHarnessEnvironment extends
 	}
 	/** Gets a list of all elements matching the given selector under this environment's root element. */
 	async getAllRawElements(selector) {
-		log.info(`${magenta("GET_ALL_RAW_ELEMENTS")} ${green(selector.toString())}`);
+		logger("wdio-harness").info(`${magenta("GET_ALL_RAW_ELEMENTS")} ${green(selector.toString())}`);
 		return [...await this.rawRootElement.$$(selector).getElements()];
 	}
 	/** Gets the root element for the document. */
@@ -319,6 +312,16 @@ var WebdriverIOHarnessEnvironment = class WebdriverIOHarnessEnvironment extends
 };
 //#endregion
 //#region src/index.ts
+/** Patches `ComponentHarness.prototype` to expose the host element. */
+let _patched = false;
+const patchComponentHarness = () => {
+	if (!_patched) {
+		_patched = true;
+		ComponentHarness.prototype.element = function() {
+			return this.locatorFactory.rootElement.element();
+		};
+	}
+};
 /**
 * Searches for all instances of the component corresponding to the given harness type under the
 * `HarnessLoader`'s root element, and returns a list of `ComponentHarness` for each instance.
@@ -348,6 +351,7 @@ const getHarness = async (query, element) => {
 * @return An HarnessLoader instance for the current HTML document, rooted at the document's root element
 */
 const createHarnessEnvironment = async (rootElement) => {
+	patchComponentHarness();
 	return WebdriverIOHarnessEnvironment.loader(rootElement ?? await $("//body").getElement());
 };
 /**
@@ -370,4 +374,4 @@ const waitForAngular = async () => {
     `, []);
 };
 //#endregion
-export { createHarnessEnvironment, getAllHarnesses, getHarness, waitForAngular };
+export { createHarnessEnvironment, getAllHarnesses, getHarness, patchComponentHarness, waitForAngular };

package/package.json

@@ -1,22 +1,21 @@
 {
     "name": "@badisi/wdio-harness",
-    "version": "4.4.0",
+    "version": "4.4.1",
     "description": "WebdriverIO support for Angular component test harnesses.",
     "homepage": "https://github.com/Badisi/wdio-harness",
     "license": "MIT",
     "author": {
         "name": "Badisi"
     },
+    "sideEffects": false,
     "type": "module",
     "main": "./index.mjs",
     "module": "./index.mjs",
     "types": "./index.d.mts",
     "exports": {
         ".": {
-            "import": {
-                "types": "./index.d.mts",
-                "default": "./index.mjs"
-            }
+            "types": "./index.d.mts",
+            "default": "./index.mjs"
         },
         "./package.json": "./package.json"
     },