@badisi/wdio-harness 4.3.4 → 4.4.0

package/README.md

@@ -3,7 +3,7 @@
 </h1>
 
 <p align="center">
-    <i>🔬 <a href="https://webdriver.io" alt="wdio">WebdriverIO</a> support for Angular component test harnesses.</i><br/>
+    🔬 <i><a href="https://webdriver.io" alt="wdio">WebdriverIO</a> support for Angular component test harnesses.</i><br/>
 </p>
 
 <p align="center">

package/index.d.mts

@@ -0,0 +1,164 @@
+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.
+ */
+declare class WebdriverIOTestElement implements TestElement {
+  readonly hostElement: WebdriverIO.Element;
+  constructor(hostElement: WebdriverIO.Element);
+  /** Return the host element. */
+  element(): WebdriverIO.Element;
+  /** Blur the element. */
+  blur(): Promise<void>;
+  /** Clear the element's input (for input and textarea elements only). */
+  clear(): Promise<void>;
+  /**
+   * Click the element at the default location for the current environment. If you need to guarantee
+   * the element is clicked at a specific location, consider using `click('center')` or
+   * `click(x, y)` instead.
+   */
+  click(modifiers?: ModifierKeys): Promise<void>;
+  /** Click the element at the element's center. */
+  click(location: "center", modifiers?: ModifierKeys): Promise<void>;
+  /**
+   * Click the element at the specified coordinates relative to the top-left of the element.
+   * @param relativeX Coordinate within the element, along the X-axis at which to click.
+   * @param relativeY Coordinate within the element, along the Y-axis at which to click.
+   * @param modifiers Modifier keys held while clicking
+   */
+  click(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
+  /**
+   * Right clicks on the element at the specified coordinates relative to the top-left of it.
+   * @param relativeX Coordinate within the element, along the X-axis at which to click.
+   * @param relativeY Coordinate within the element, along the Y-axis at which to click.
+   * @param modifiers Modifier keys held while clicking
+   */
+  rightClick(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
+  /** Focus the element. */
+  focus(): Promise<void>;
+  /** Get the computed value of the given CSS property for the element. */
+  getCssValue(property: string): Promise<string>;
+  /** Hovers the mouse over the element. */
+  hover(): Promise<void>;
+  /** Moves the mouse away from the element. */
+  mouseAway(): Promise<void>;
+  /**
+   * Sends the given string to the input as a series of key presses. Also fires input events
+   * and attempts to add the string to the Element's value.
+   */
+  sendKeys(...keys: (string | TestKey)[]): Promise<void>;
+  /**
+   * Sends the given string to the input as a series of key presses. Also fires input events
+   * and attempts to add the string to the Element's value.
+   */
+  sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
+  /** Gets the text from the element. */
+  text(options?: TextOptions): Promise<string>;
+  /**
+   * Sets the value of a `contenteditable` element.
+   * @param value Value to be set on the element.
+   */
+  setContenteditableValue(value: string): Promise<void>;
+  /** Gets the value for the given attribute from the element. */
+  getAttribute(name: string): Promise<string | null>;
+  /** Checks whether the element has the given class. */
+  hasClass(name: string): Promise<boolean>;
+  /** Gets the dimensions of the element. */
+  getDimensions(): Promise<ElementDimensions>;
+  /** Gets the value of a property of an element. */
+  getProperty(name: string): Promise<any>;
+  /** Checks whether this element matches the given selector. */
+  matchesSelector(selector: string): Promise<boolean>;
+  /** Checks whether the element is focused. */
+  isFocused(): Promise<boolean>;
+  /** Sets the value of a property of an input. */
+  setInputValue(value: string): Promise<void>;
+  /** Selects the options at the specified indexes inside of a native `select` element. */
+  selectOptions(...optionIndexes: number[]): Promise<void>;
+  /** Dispatches an event with a particular name. */
+  dispatchEvent(name: string, data?: Record<string, EventData>): Promise<void>;
+  /** Performs a key-down action. */
+  keyDown(value: string): Promise<void>;
+  /** Performs a key-up action. */
+  keyUp(value: string): Promise<void>;
+  /** Dispatches all the events that are part of a click event sequence. */
+  private dispatchClickEventSequence;
+  /** Writes info to the console outputs. */
+  private logAction;
+}
+//#endregion
+//#region src/WebdriverIOHarnessEnvironment.d.ts
+/**
+ * A `HarnessEnvironment` implementation for WebdriverIO.
+ */
+declare class WebdriverIOHarnessEnvironment extends HarnessEnvironment<WebdriverIO.Element> {
+  /**
+   * Keep a reference to the `document` element because `rawRootElement`
+   * will be the root element of the harness's environment.
+   */
+  private documentRoot;
+  protected constructor(rawRootElement: WebdriverIO.Element, options: {
+    documentRoot: WebdriverIO.Element;
+  });
+  /** Creates a `HarnessLoader` rooted at the document root. */
+  static loader(documentRoot: WebdriverIO.Element): Promise<WebdriverIOHarnessEnvironment>;
+  /**
+   * Flushes change detection and async tasks captured in the Angular zone.
+   * In most cases it should not be necessary to call this manually. However, there may be some edge
+   * cases where it is needed to fully flush animation events.
+   */
+  forceStabilize(): Promise<void>;
+  waitForTasksOutsideAngular(): Promise<void>;
+  /** Creates a `ComponentHarness` for the given harness type with the given raw host element. */
+  override createComponentHarness<T extends ComponentHarness>(harnessType: ComponentHarnessConstructor<T>, element: WebdriverIO.Element): T;
+  /** Gets a list of all elements matching the given selector under this environment's root element. */
+  protected getAllRawElements(selector: string): Promise<WebdriverIO.Element[]>;
+  /** Gets the root element for the document. */
+  protected getDocumentRoot(): WebdriverIO.Element;
+  /** Creates a `TestElement` from a raw element. */
+  protected createTestElement(element: WebdriverIO.Element): WebdriverIOTestElement;
+  /** Creates a `HarnessLoader` rooted at the given raw element. */
+  protected createEnvironment(element: WebdriverIO.Element): HarnessEnvironment<WebdriverIO.Element>;
+}
+//#endregion
+//#region src/index.d.ts
+/**
+ * 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[]>;
+/**
+ * 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
+ * multiple matching components are found, a harness for the first one is returned. If no matching
+ * component is found, an error is thrown.
+ * @param query A query for a harness to create
+ * @param element A raw host element for a harness to create
+ * @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>;
+/**
+ * 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>;
+/**
+ * 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 };

package/index.mjs

@@ -0,0 +1,373 @@
+import { $, browser } from "@wdio/globals";
+import { ComponentHarness, HarnessEnvironment, TestKey } from "@angular/cdk/testing";
+import logger from "@wdio/logger";
+//#region src/utils.ts
+const colorize = (msg, color) => process.stdout.isTTY ? `${color}${msg}\x1b[0m` : msg;
+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 = {
+	[TestKey.BACKSPACE]: "Backspace",
+	[TestKey.TAB]: "Tab",
+	[TestKey.ENTER]: "Enter",
+	[TestKey.SHIFT]: "Shift",
+	[TestKey.CONTROL]: "Control",
+	[TestKey.ALT]: "Alt",
+	[TestKey.ESCAPE]: "Escape",
+	[TestKey.PAGE_UP]: "PageUp",
+	[TestKey.PAGE_DOWN]: "PageDown",
+	[TestKey.END]: "End",
+	[TestKey.HOME]: "Home",
+	[TestKey.LEFT_ARROW]: "ArrowLeft",
+	[TestKey.UP_ARROW]: "ArrowUp",
+	[TestKey.RIGHT_ARROW]: "ArrowRight",
+	[TestKey.DOWN_ARROW]: "ArrowDown",
+	[TestKey.INSERT]: "Insert",
+	[TestKey.DELETE]: "Delete",
+	[TestKey.F1]: "F1",
+	[TestKey.F2]: "F2",
+	[TestKey.F3]: "F3",
+	[TestKey.F4]: "F4",
+	[TestKey.F5]: "F5",
+	[TestKey.F6]: "F6",
+	[TestKey.F7]: "F7",
+	[TestKey.F8]: "F8",
+	[TestKey.F9]: "F9",
+	[TestKey.F10]: "F10",
+	[TestKey.F11]: "F11",
+	[TestKey.F12]: "F12",
+	[TestKey.META]: "Meta",
+	[TestKey.COMMA]: ","
+};
+ComponentHarness.prototype.element = function() {
+	return this.locatorFactory.rootElement.element();
+};
+/** 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]);
+	return result;
+};
+/**
+* A `TestElement` implementation for WebdriverIO.
+*/
+var WebdriverIOTestElement = class {
+	constructor(hostElement) {
+		this.hostElement = hostElement;
+	}
+	/** Return the host element. */
+	element() {
+		return this.hostElement;
+	}
+	/** Blur the element. */
+	async blur() {
+		this.logAction("BLUR");
+		return browser.executeScript("arguments[0].blur()", [this.hostElement]);
+	}
+	/** Clear the element's input (for input and textarea elements only). */
+	async clear() {
+		this.logAction("CLEAR");
+		return this.hostElement.clearValue();
+	}
+	async click(...args) {
+		this.logAction("CLICK");
+		return this.dispatchClickEventSequence(args, "left");
+	}
+	async rightClick(...args) {
+		this.logAction("RIGHT_CLICK");
+		return this.dispatchClickEventSequence(args, "right");
+	}
+	/** Focus the element. */
+	async focus() {
+		this.logAction("FOCUS");
+		return browser.executeScript("arguments[0].focus()", [this.hostElement]);
+	}
+	/** Get the computed value of the given CSS property for the element. */
+	async getCssValue(property) {
+		this.logAction("GET_CSS_VALUE");
+		return (await this.hostElement.getCSSProperty(property)).value ?? "";
+	}
+	/** Hovers the mouse over the element. */
+	async hover() {
+		this.logAction("HOVER");
+		return this.hostElement.moveTo();
+	}
+	/** Moves the mouse away from the element. */
+	async mouseAway() {
+		this.logAction("MOUSE_AWAY");
+		return this.hostElement.moveTo({
+			xOffset: -1,
+			yOffset: -1
+		});
+	}
+	async sendKeys(...modifiersAndKeys) {
+		let modifiers;
+		let rest;
+		const first = modifiersAndKeys[0];
+		if (first !== void 0 && typeof first !== "string" && typeof first !== "number") {
+			modifiers = first;
+			rest = modifiersAndKeys.slice(1);
+		} else {
+			modifiers = {};
+			rest = modifiersAndKeys;
+		}
+		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) => {
+			if (modifierKeys.length > 0) return arr.concat(...modifierKeys, k, KeyNULL);
+			return arr.concat(k);
+		}, []);
+		this.logAction("SEND_KEYS", `[${keys.join(", ")}]`);
+		if (keys.length !== 0) {
+			await this.focus();
+			return browser.keys(keys);
+		}
+	}
+	/** Gets the text from the element. */
+	async text(options) {
+		this.logAction("TEXT", options?.exclude ? `{ exclude: ${options?.exclude} }` : void 0);
+		if (options?.exclude) return browser.executeScript(`
+                const clone = arguments[0].cloneNode(true);
+                const exclusions = clone.querySelectorAll(arguments[1]);
+                for (let i = 0; i < exclusions.length; i++) {
+                    exclusions[i].remove();
+                }
+                return (clone.textContent ?? '').trim();
+            `, [this.hostElement, options.exclude]);
+		return browser.executeScript(`return (arguments[0].textContent ?? '').trim()`, [this.hostElement]);
+	}
+	/**
+	* Sets the value of a `contenteditable` element.
+	* @param value Value to be set on the element.
+	*/
+	async setContenteditableValue(value) {
+		const contenteditableAttr = await this.getAttribute("contenteditable");
+		if (contenteditableAttr !== "" && contenteditableAttr !== "true" && contenteditableAttr !== "plaintext-only") throw new Error("setContenteditableValue can only be called on a `contenteditable` element.");
+		return browser.executeScript("arguments[0].textContent = arguments[1];", [this.hostElement, value]);
+	}
+	/** Gets the value for the given attribute from the element. */
+	async getAttribute(name) {
+		this.logAction("GET_ATTRIBUTE", name);
+		return this.hostElement.getAttribute(name);
+	}
+	/** Checks whether the element has the given class. */
+	async hasClass(name) {
+		this.logAction("HAS_CLASS", name);
+		const classes = await this.getAttribute("class") || "";
+		return new Set(classes.split(/\s+/).filter((c) => c)).has(name);
+	}
+	/** Gets the dimensions of the element. */
+	async getDimensions() {
+		this.logAction("GET_DIMENSIONS");
+		const { width, height } = await this.hostElement.getSize();
+		const { x: left, y: top } = await this.hostElement.getLocation();
+		return {
+			width,
+			height,
+			left,
+			top
+		};
+	}
+	/** Gets the value of a property of an element. */
+	async getProperty(name) {
+		this.logAction("GET_PROPERTY", name);
+		return this.hostElement.getProperty(name);
+	}
+	/** Checks whether this element matches the given selector. */
+	async matchesSelector(selector) {
+		this.logAction("MATCHES_SELECTOR", selector);
+		return browser.executeScript(`
+            return (Element.prototype.matches ?? Element.prototype.msMatchesSelector).call(arguments[0], arguments[1])
+        `, [this.hostElement, selector]);
+	}
+	/** Checks whether the element is focused. */
+	async isFocused() {
+		this.logAction("IS_FOCUSED");
+		return this.hostElement.isFocused();
+	}
+	/** Sets the value of a property of an input. */
+	async setInputValue(value) {
+		this.logAction("SET_INPUT_VALUE", value);
+		return this.hostElement.setValue(value);
+	}
+	/** Selects the options at the specified indexes inside of a native `select` element. */
+	async selectOptions(...optionIndexes) {
+		this.logAction("SELECT_OPTIONS", `[${optionIndexes.join(", ")}]`);
+		const options = await this.hostElement.$$("option").getElements();
+		const indexes = new Set(optionIndexes);
+		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 options[i].click();
+				await this.keyUp(keyMap[TestKey.CONTROL]);
+			}
+		}
+	}
+	/** Dispatches an event with a particular name. */
+	async dispatchEvent(name, data) {
+		this.logAction("DISPATCH_EVENT", name);
+		return browser.executeScript(`
+            const event = document.createEvent('Event');
+            event.initEvent(arguments[0]);
+            if (arguments[2]) {
+                Object.assign(event, arguments[2]);
+            }
+            arguments[1]['dispatchEvent'](event);
+        `, [
+			name,
+			this.hostElement,
+			data
+		]);
+	}
+	/** Performs a key-down action. */
+	async keyDown(value) {
+		this.logAction("KEY_DOWN:", value);
+		return browser.performActions([{
+			id: "keyboard",
+			type: "key",
+			actions: [{
+				type: "keyDown",
+				value
+			}]
+		}]);
+	}
+	/** Performs a key-up action. */
+	async keyUp(value) {
+		this.logAction("KEY_UP:", value);
+		return browser.performActions([{
+			id: "keyboard",
+			type: "key",
+			actions: [{
+				type: "keyUp",
+				value
+			}]
+		}]);
+	}
+	/** Dispatches all the events that are part of a click event sequence. */
+	async dispatchClickEventSequence(args, button) {
+		let modifiers = {};
+		if (args.length && typeof args[args.length - 1] === "object") modifiers = args.pop();
+		const modifierKeys = toWebdriverIOModifierKeys(modifiers);
+		const offsetArgs = args.length === 2 ? {
+			xOffset: Number(args[0]),
+			yOffset: Number(args[1])
+		} : void 0;
+		await this.hostElement.moveTo(offsetArgs);
+		for (const modifierKey of modifierKeys) this.keyDown(modifierKey);
+		await this.hostElement.click({ button });
+		for (const modifierKey of modifierKeys) this.keyUp(modifierKey);
+	}
+	/** Writes info to the console outputs. */
+	logAction(action, args) {
+		log$1.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.
+*/
+var WebdriverIOHarnessEnvironment = class WebdriverIOHarnessEnvironment extends HarnessEnvironment {
+	constructor(rawRootElement, options) {
+		super(rawRootElement);
+		this.documentRoot = options.documentRoot;
+	}
+	/** Creates a `HarnessLoader` rooted at the document root. */
+	static async loader(documentRoot) {
+		return new WebdriverIOHarnessEnvironment(documentRoot, { documentRoot });
+	}
+	/**
+	* Flushes change detection and async tasks captured in the Angular zone.
+	* In most cases it should not be necessary to call this manually. However, there may be some edge
+	* cases where it is needed to fully flush animation events.
+	*/
+	async forceStabilize() {}
+	async waitForTasksOutsideAngular() {
+		throw new Error("Method not implemented.");
+	}
+	/** Creates a `ComponentHarness` for the given harness type with the given raw host element. */
+	createComponentHarness(harnessType, element) {
+		return super.createComponentHarness(harnessType, element);
+	}
+	/** 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())}`);
+		return [...await this.rawRootElement.$$(selector).getElements()];
+	}
+	/** Gets the root element for the document. */
+	getDocumentRoot() {
+		return this.documentRoot;
+	}
+	/** Creates a `TestElement` from a raw element. */
+	createTestElement(element) {
+		return new WebdriverIOTestElement(element);
+	}
+	/** Creates a `HarnessLoader` rooted at the given raw element. */
+	createEnvironment(element) {
+		return new WebdriverIOHarnessEnvironment(element, { documentRoot: this.documentRoot });
+	}
+};
+//#endregion
+//#region src/index.ts
+/**
+* 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
+*/
+const getAllHarnesses = async (query) => {
+	return (await createHarnessEnvironment()).getAllHarnesses(query);
+};
+/**
+* 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
+* multiple matching components are found, a harness for the first one is returned. If no matching
+* component is found, an error is thrown.
+* @param query A query for a harness to create
+* @param element A raw host element for a harness to create
+* @return An instance of the given harness type
+* @throws If a matching component instance can't be found
+*/
+const getHarness = async (query, element) => {
+	const env = await createHarnessEnvironment(element);
+	if (element) return env.createComponentHarness(query, element);
+	return env.getHarness(query);
+};
+/**
+* Returns a base harness environment instance.
+* @return An HarnessLoader instance for the current HTML document, rooted at the document's root element
+*/
+const createHarnessEnvironment = async (rootElement) => {
+	return WebdriverIOHarnessEnvironment.loader(rootElement ?? await $("//body").getElement());
+};
+/**
+* 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).
+*/
+const waitForAngular = async () => {
+	await browser.waitUntil(() => browser.executeScript(`
+        return Array.isArray(window.frameworkStabilizers)
+    `, []));
+	await browser.executeAsyncScript(`
+        const done = arguments[0];
+        const promises = window.frameworkStabilizers.map(stabilizer => {
+            // Stabilizer will invoke the resolve function with a
+            // boolean to indicate whether any work is done.
+            return new Promise(resolve => stabilizer(resolve));
+        });
+        Promise.all(promises).then(done);
+    `, []);
+};
+//#endregion
+export { createHarnessEnvironment, getAllHarnesses, getHarness, waitForAngular };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@badisi/wdio-harness",
-    "version": "4.3.4",
+    "version": "4.4.0",
     "description": "WebdriverIO support for Angular component test harnesses.",
     "homepage": "https://github.com/Badisi/wdio-harness",
     "license": "MIT",
@@ -8,19 +8,21 @@
         "name": "Badisi"
     },
     "type": "module",
-    "module": "index.js",
-    "typings": "index.d.ts",
+    "main": "./index.mjs",
+    "module": "./index.mjs",
+    "types": "./index.d.mts",
     "exports": {
         ".": {
-            "import": "./index.js",
-            "types": "./index.d.ts",
-            "default": "./index.js"
+            "import": {
+                "types": "./index.d.mts",
+                "default": "./index.mjs"
+            }
         },
         "./package.json": "./package.json"
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/Badisi/wdio-harness"
+        "url": "git+https://github.com/Badisi/wdio-harness.git"
     },
     "keywords": [
         "angular",
@@ -40,6 +42,7 @@
     },
     "peerDependencies": {
         "@angular/cdk": ">= 13 < 22",
+        "@wdio/globals": ">= 9 < 10",
         "@wdio/logger": ">= 9 < 10",
         "webdriverio": ">= 9 < 10"
     }

package/WebdriverIOHarnessEnvironment.d.ts

@@ -1,34 +0,0 @@
-import { type ComponentHarness, type ComponentHarnessConstructor, HarnessEnvironment } from '@angular/cdk/testing';
-import { WebdriverIOTestElement } from './WebdriverIOTestElement.js';
-/**
- * A `HarnessEnvironment` implementation for WebdriverIO.
- */
-export declare class WebdriverIOHarnessEnvironment extends HarnessEnvironment<WebdriverIO.Element> {
-    /**
-     * Keep a reference to the `document` element because `rawRootElement`
-     * will be the root element of the harness's environment.
-     */
-    private documentRoot;
-    protected constructor(rawRootElement: WebdriverIO.Element, options: {
-        documentRoot: WebdriverIO.Element;
-    });
-    /** Creates a `HarnessLoader` rooted at the document root. */
-    static loader(documentRoot: WebdriverIO.Element): Promise<WebdriverIOHarnessEnvironment>;
-    /**
-     * Flushes change detection and async tasks captured in the Angular zone.
-     * In most cases it should not be necessary to call this manually. However, there may be some edge
-     * cases where it is needed to fully flush animation events.
-     */
-    forceStabilize(): Promise<void>;
-    waitForTasksOutsideAngular(): Promise<void>;
-    /** Creates a `ComponentHarness` for the given harness type with the given raw host element. */
-    createComponentHarness<T extends ComponentHarness>(harnessType: ComponentHarnessConstructor<T>, element: WebdriverIO.Element): T;
-    /** Gets a list of all elements matching the given selector under this environment's root element. */
-    protected getAllRawElements(selector: string): Promise<WebdriverIO.Element[]>;
-    /** Gets the root element for the document. */
-    protected getDocumentRoot(): WebdriverIO.Element;
-    /** Creates a `TestElement` from a raw element. */
-    protected createTestElement(element: WebdriverIO.Element): WebdriverIOTestElement;
-    /** Creates a `HarnessLoader` rooted at the given raw element. */
-    protected createEnvironment(element: WebdriverIO.Element): HarnessEnvironment<WebdriverIO.Element>;
-}

package/WebdriverIOHarnessEnvironment.js

@@ -1,61 +0,0 @@
-import { HarnessEnvironment } from '@angular/cdk/testing';
-import logger from '@wdio/logger';
-import { WebdriverIOTestElement } from './WebdriverIOTestElement.js';
-import { green, magenta } from './utils';
-/** Registers the environment logger. */
-const log = logger('wdio-harness');
-/**
- * A `HarnessEnvironment` implementation for WebdriverIO.
- */
-export class WebdriverIOHarnessEnvironment extends HarnessEnvironment {
-    /**
-     * Keep a reference to the `document` element because `rawRootElement`
-     * will be the root element of the harness's environment.
-     */
-    documentRoot;
-    constructor(rawRootElement, options) {
-        super(rawRootElement);
-        this.documentRoot = options.documentRoot;
-    }
-    /** Creates a `HarnessLoader` rooted at the document root. */
-    static async loader(documentRoot) {
-        return new WebdriverIOHarnessEnvironment(documentRoot, { documentRoot });
-    }
-    /**
-     * Flushes change detection and async tasks captured in the Angular zone.
-     * In most cases it should not be necessary to call this manually. However, there may be some edge
-     * cases where it is needed to fully flush animation events.
-     */
-    async forceStabilize() {
-        /* await browser.executeAsyncScript(`
-            const done = arguments[0];
-            window.requestAnimationFrame(done);
-        `, []);*/
-    }
-    async waitForTasksOutsideAngular() {
-        throw new Error('Method not implemented.');
-    }
-    /** Creates a `ComponentHarness` for the given harness type with the given raw host element. */
-    createComponentHarness(harnessType, element) {
-        return super.createComponentHarness(harnessType, element);
-    }
-    /** 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())}`);
-        return [...(await this.rawRootElement.$$(selector).getElements())];
-    }
-    /** Gets the root element for the document. */
-    getDocumentRoot() {
-        return this.documentRoot;
-    }
-    /** Creates a `TestElement` from a raw element. */
-    createTestElement(element) {
-        return new WebdriverIOTestElement(element);
-    }
-    /** Creates a `HarnessLoader` rooted at the given raw element. */
-    createEnvironment(element) {
-        return new WebdriverIOHarnessEnvironment(element, {
-            documentRoot: this.documentRoot
-        });
-    }
-}

package/WebdriverIOTestElement.d.ts

@@ -1,96 +0,0 @@
-import { type ElementDimensions, type EventData, type ModifierKeys, type TestElement, TestKey, type TextOptions } from '@angular/cdk/testing';
-/** 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.
- */
-export declare class WebdriverIOTestElement implements TestElement {
-    readonly hostElement: WebdriverIO.Element;
-    constructor(hostElement: WebdriverIO.Element);
-    /** Return the host element. */
-    element(): WebdriverIO.Element;
-    /** Blur the element. */
-    blur(): Promise<void>;
-    /** Clear the element's input (for input and textarea elements only). */
-    clear(): Promise<void>;
-    /**
-     * Click the element at the default location for the current environment. If you need to guarantee
-     * the element is clicked at a specific location, consider using `click('center')` or
-     * `click(x, y)` instead.
-     */
-    click(modifiers?: ModifierKeys): Promise<void>;
-    /** Click the element at the element's center. */
-    click(location: 'center', modifiers?: ModifierKeys): Promise<void>;
-    /**
-     * Click the element at the specified coordinates relative to the top-left of the element.
-     * @param relativeX Coordinate within the element, along the X-axis at which to click.
-     * @param relativeY Coordinate within the element, along the Y-axis at which to click.
-     * @param modifiers Modifier keys held while clicking
-     */
-    click(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
-    /**
-     * Right clicks on the element at the specified coordinates relative to the top-left of it.
-     * @param relativeX Coordinate within the element, along the X-axis at which to click.
-     * @param relativeY Coordinate within the element, along the Y-axis at which to click.
-     * @param modifiers Modifier keys held while clicking
-     */
-    rightClick(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
-    /** Focus the element. */
-    focus(): Promise<void>;
-    /** Get the computed value of the given CSS property for the element. */
-    getCssValue(property: string): Promise<string>;
-    /** Hovers the mouse over the element. */
-    hover(): Promise<void>;
-    /** Moves the mouse away from the element. */
-    mouseAway(): Promise<void>;
-    /**
-     * Sends the given string to the input as a series of key presses. Also fires input events
-     * and attempts to add the string to the Element's value.
-     */
-    sendKeys(...keys: (string | TestKey)[]): Promise<void>;
-    /**
-     * Sends the given string to the input as a series of key presses. Also fires input events
-     * and attempts to add the string to the Element's value.
-     */
-    sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
-    /** Gets the text from the element. */
-    text(options?: TextOptions): Promise<string>;
-    /**
-     * Sets the value of a `contenteditable` element.
-     * @param value Value to be set on the element.
-    */
-    setContenteditableValue(value: string): Promise<void>;
-    /** Gets the value for the given attribute from the element. */
-    getAttribute(name: string): Promise<string | null>;
-    /** Checks whether the element has the given class. */
-    hasClass(name: string): Promise<boolean>;
-    /** Gets the dimensions of the element. */
-    getDimensions(): Promise<ElementDimensions>;
-    /** Gets the value of a property of an element. */
-    getProperty(name: string): Promise<any>;
-    /** Checks whether this element matches the given selector. */
-    matchesSelector(selector: string): Promise<boolean>;
-    /** Checks whether the element is focused. */
-    isFocused(): Promise<boolean>;
-    /** Sets the value of a property of an input. */
-    setInputValue(value: string): Promise<void>;
-    /** Selects the options at the specified indexes inside of a native `select` element. */
-    selectOptions(...optionIndexes: number[]): Promise<void>;
-    /** Dispatches an event with a particular name. */
-    dispatchEvent(name: string, data?: Record<string, EventData>): Promise<void>;
-    /** Performs a key-down action. */
-    keyDown(value: string): Promise<void>;
-    /** Performs a key-up action. */
-    keyUp(value: string): Promise<void>;
-    /** Dispatches all the events that are part of a click event sequence. */
-    private dispatchClickEventSequence;
-    /** Writes info to the console outputs. */
-    private logAction;
-}

package/WebdriverIOTestElement.js

@@ -1,290 +0,0 @@
-import { ComponentHarness, TestKey } from '@angular/cdk/testing';
-import { browser } from '@wdio/globals';
-import logger from '@wdio/logger';
-import { green, magenta } from './utils';
-var Button;
-(function (Button) {
-    Button["LEFT"] = "left";
-    Button["MIDDLE"] = "middle";
-    Button["RIGHT"] = "right";
-})(Button || (Button = {}));
-/** Registers the element logger. */
-const log = logger('wdio-harness');
-/** Maps the `TestKey` constants to WebdriverIO's `Key` constants. */
-const keyMap = {
-    [TestKey.BACKSPACE]: 'Backspace',
-    [TestKey.TAB]: 'Tab',
-    [TestKey.ENTER]: 'Enter',
-    [TestKey.SHIFT]: 'Shift',
-    [TestKey.CONTROL]: 'Control',
-    [TestKey.ALT]: 'Alt',
-    [TestKey.ESCAPE]: 'Escape',
-    [TestKey.PAGE_UP]: 'PageUp',
-    [TestKey.PAGE_DOWN]: 'PageDown',
-    [TestKey.END]: 'End',
-    [TestKey.HOME]: 'Home',
-    [TestKey.LEFT_ARROW]: 'ArrowLeft',
-    [TestKey.UP_ARROW]: 'ArrowUp',
-    [TestKey.RIGHT_ARROW]: 'ArrowRight',
-    [TestKey.DOWN_ARROW]: 'ArrowDown',
-    [TestKey.INSERT]: 'Insert',
-    [TestKey.DELETE]: 'Delete',
-    [TestKey.F1]: 'F1',
-    [TestKey.F2]: 'F2',
-    [TestKey.F3]: 'F3',
-    [TestKey.F4]: 'F4',
-    [TestKey.F5]: 'F5',
-    [TestKey.F6]: 'F6',
-    [TestKey.F7]: 'F7',
-    [TestKey.F8]: 'F8',
-    [TestKey.F9]: 'F9',
-    [TestKey.F10]: 'F10',
-    [TestKey.F11]: 'F11',
-    [TestKey.F12]: 'F12',
-    [TestKey.META]: 'Meta',
-    [TestKey.COMMA]: ','
-};
-ComponentHarness.prototype.element = function () {
-    return this.locatorFactory.rootElement.element();
-};
-/** 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]);
-    }
-    return result;
-};
-/**
- * A `TestElement` implementation for WebdriverIO.
- */
-export class WebdriverIOTestElement {
-    hostElement;
-    constructor(hostElement) {
-        this.hostElement = hostElement;
-    }
-    /** Return the host element. */
-    element() {
-        return this.hostElement;
-    }
-    /** Blur the element. */
-    async blur() {
-        this.logAction('BLUR');
-        return browser.executeScript('arguments[0].blur()', [this.hostElement]);
-    }
-    /** Clear the element's input (for input and textarea elements only). */
-    async clear() {
-        this.logAction('CLEAR');
-        return this.hostElement.clearValue();
-    }
-    async click(...args) {
-        this.logAction('CLICK');
-        return this.dispatchClickEventSequence(args, Button.LEFT);
-    }
-    async rightClick(...args) {
-        this.logAction('RIGHT_CLICK');
-        return this.dispatchClickEventSequence(args, Button.RIGHT);
-    }
-    /** Focus the element. */
-    async focus() {
-        this.logAction('FOCUS');
-        return browser.executeScript('arguments[0].focus()', [this.hostElement]);
-    }
-    /** Get the computed value of the given CSS property for the element. */
-    async getCssValue(property) {
-        this.logAction('GET_CSS_VALUE');
-        return (await this.hostElement.getCSSProperty(property)).value ?? '';
-    }
-    /** Hovers the mouse over the element. */
-    async hover() {
-        this.logAction('HOVER');
-        return this.hostElement.moveTo();
-    }
-    /** Moves the mouse away from the element. */
-    async mouseAway() {
-        this.logAction('MOUSE_AWAY');
-        return this.hostElement.moveTo({ xOffset: -1, yOffset: -1 });
-    }
-    async sendKeys(...modifiersAndKeys) {
-        let modifiers;
-        let rest;
-        const first = modifiersAndKeys[0];
-        if (first !== undefined && typeof first !== 'string' && typeof first !== 'number') {
-            modifiers = first;
-            rest = modifiersAndKeys.slice(1);
-        }
-        else {
-            modifiers = {};
-            rest = modifiersAndKeys;
-        }
-        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) => {
-            if (modifierKeys.length > 0) {
-                return arr.concat(...modifierKeys, k, KeyNULL);
-            }
-            return arr.concat(k);
-        }, []);
-        this.logAction('SEND_KEYS', `[${keys.join(', ')}]`);
-        if (keys.length !== 0) {
-            await this.focus();
-            return browser.keys(keys);
-        }
-    }
-    /** Gets the text from the element. */
-    async text(options) {
-        this.logAction('TEXT', options?.exclude ? `{ exclude: ${options?.exclude} }` : undefined);
-        if (options?.exclude) {
-            return browser.executeScript(`
-                const clone = arguments[0].cloneNode(true);
-                const exclusions = clone.querySelectorAll(arguments[1]);
-                for (let i = 0; i < exclusions.length; i++) {
-                    exclusions[i].remove();
-                }
-                return (clone.textContent ?? '').trim();
-            `, [this.hostElement, options.exclude]);
-        }
-        // We don't go through WebdriverIO's `getText`, because it excludes text from hidden elements.
-        return browser.executeScript(`return (arguments[0].textContent ?? '').trim()`, [this.hostElement]);
-    }
-    /**
-     * Sets the value of a `contenteditable` element.
-     * @param value Value to be set on the element.
-    */
-    async setContenteditableValue(value) {
-        const contenteditableAttr = await this.getAttribute('contenteditable');
-        if (contenteditableAttr !== '' &&
-            contenteditableAttr !== 'true' &&
-            contenteditableAttr !== 'plaintext-only') {
-            throw new Error('setContenteditableValue can only be called on a `contenteditable` element.');
-        }
-        return browser.executeScript('arguments[0].textContent = arguments[1];', [this.hostElement, value]);
-    }
-    /** Gets the value for the given attribute from the element. */
-    async getAttribute(name) {
-        this.logAction('GET_ATTRIBUTE', name);
-        return this.hostElement.getAttribute(name);
-    }
-    /** Checks whether the element has the given class. */
-    async hasClass(name) {
-        this.logAction('HAS_CLASS', name);
-        const classes = (await this.getAttribute('class')) || '';
-        return new Set(classes.split(/\s+/).filter(c => c)).has(name);
-    }
-    /** Gets the dimensions of the element. */
-    async getDimensions() {
-        this.logAction('GET_DIMENSIONS');
-        const { width, height } = await this.hostElement.getSize();
-        const { x: left, y: top } = await this.hostElement.getLocation();
-        return { width, height, left, top };
-    }
-    /** Gets the value of a property of an element. */
-    async getProperty(name) {
-        this.logAction('GET_PROPERTY', name);
-        return this.hostElement.getProperty(name);
-    }
-    /** Checks whether this element matches the given selector. */
-    async matchesSelector(selector) {
-        this.logAction('MATCHES_SELECTOR', selector);
-        return browser.executeScript(`
-            return (Element.prototype.matches ?? Element.prototype.msMatchesSelector).call(arguments[0], arguments[1])
-        `, [this.hostElement, selector]);
-    }
-    /** Checks whether the element is focused. */
-    async isFocused() {
-        this.logAction('IS_FOCUSED');
-        return this.hostElement.isFocused();
-    }
-    /** Sets the value of a property of an input. */
-    async setInputValue(value) {
-        this.logAction('SET_INPUT_VALUE', value);
-        return this.hostElement.setValue(value);
-    }
-    /** Selects the options at the specified indexes inside of a native `select` element. */
-    async selectOptions(...optionIndexes) {
-        this.logAction('SELECT_OPTIONS', `[${optionIndexes.join(', ')}]`);
-        const options = await this.hostElement.$$('option').getElements();
-        const indexes = new Set(optionIndexes); // Convert to a set to remove duplicates.
-        if (options.length && indexes.size) {
-            // Reset the value so all the selected states are cleared. We can
-            // reuse the input-specific method since the logic is the same.
-            await this.setInputValue('');
-            for (let i = 0; i < options.length; i++) {
-                if (indexes.has(i)) {
-                    // We have to hold the control key while clicking on options so that multiple can be
-                    // selected in multi-selection mode. The key doesn't do anything for single selection.
-                    await this.keyDown(keyMap[TestKey.CONTROL]);
-                    await options[i].click();
-                    await this.keyUp(keyMap[TestKey.CONTROL]);
-                }
-            }
-        }
-    }
-    /** Dispatches an event with a particular name. */
-    async dispatchEvent(name, data) {
-        this.logAction('DISPATCH_EVENT', name);
-        return browser.executeScript(`
-            const event = document.createEvent('Event');
-            event.initEvent(arguments[0]);
-            if (arguments[2]) {
-                Object.assign(event, arguments[2]);
-            }
-            arguments[1]['dispatchEvent'](event);
-        `, [name, this.hostElement, data]);
-    }
-    /** Performs a key-down action. */
-    async keyDown(value) {
-        this.logAction('KEY_DOWN:', value);
-        return browser.performActions([{
-                id: 'keyboard',
-                type: 'key',
-                actions: [{ type: 'keyDown', value }],
-            }]);
-    }
-    /** Performs a key-up action. */
-    async keyUp(value) {
-        this.logAction('KEY_UP:', value);
-        return browser.performActions([{
-                id: 'keyboard',
-                type: 'key',
-                actions: [{ type: 'keyUp', value }],
-            }]);
-    }
-    // --- HELPER(s) ---
-    /** Dispatches all the events that are part of a click event sequence. */
-    async dispatchClickEventSequence(args, button) {
-        let modifiers = {};
-        if (args.length && typeof args[args.length - 1] === 'object') {
-            modifiers = args.pop();
-        }
-        const modifierKeys = toWebdriverIOModifierKeys(modifiers);
-        // Omitting the offset argument to mouseMove results in clicking the center.
-        // This is the default behavior we want, so we use an empty array of offsetArgs if
-        // no args remain after popping the modifiers from the args passed to this function.
-        const offsetArgs = (args.length === 2 ? { xOffset: Number(args[0]), yOffset: Number(args[1]) } : undefined);
-        await this.hostElement.moveTo(offsetArgs);
-        for (const modifierKey of modifierKeys) {
-            this.keyDown(modifierKey);
-        }
-        await this.hostElement.click({ button });
-        for (const modifierKey of modifierKeys) {
-            this.keyUp(modifierKey);
-        }
-    }
-    /** Writes info to the console outputs. */
-    logAction(action, args) {
-        log.info(`${magenta(action)} ${green(this.hostElement.selector.toString())} ${args ? args : ''}`);
-    }
-}

package/index.d.ts

@@ -1,31 +0,0 @@
-import type { ComponentHarness, HarnessQuery } from '@angular/cdk/testing';
-import { WebdriverIOHarnessEnvironment } from './WebdriverIOHarnessEnvironment.js';
-/**
- * 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
- */
-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
- * multiple matching components are found, a harness for the first one is returned. If no matching
- * component is found, an error is thrown.
- * @param query A query for a harness to create
- * @param element A raw host element for a harness to create
- * @return An instance of the given harness type
- * @throws If a matching component instance can't be found
- */
-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
- */
-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).
- */
-export declare const waitForAngular: () => Promise<void>;

package/index.js

@@ -1,54 +0,0 @@
-import { $, browser } from '@wdio/globals';
-import { WebdriverIOHarnessEnvironment } from './WebdriverIOHarnessEnvironment.js';
-/**
- * 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
- */
-export const getAllHarnesses = async (query) => {
-    return (await createHarnessEnvironment()).getAllHarnesses(query);
-};
-/**
- * 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
- * multiple matching components are found, a harness for the first one is returned. If no matching
- * component is found, an error is thrown.
- * @param query A query for a harness to create
- * @param element A raw host element for a harness to create
- * @return An instance of the given harness type
- * @throws If a matching component instance can't be found
- */
-export const getHarness = async (query, element) => {
-    const env = await createHarnessEnvironment(element);
-    if (element) {
-        return env.createComponentHarness(query, element);
-    }
-    return env.getHarness(query);
-};
-/**
- * Returns a base harness environment instance.
- * @return An HarnessLoader instance for the current HTML document, rooted at the document's root element
- */
-export const createHarnessEnvironment = async (rootElement) => {
-    return WebdriverIOHarnessEnvironment.loader(rootElement ?? await $('//body').getElement());
-};
-/**
- * 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).
- */
-export const waitForAngular = async () => {
-    await browser.waitUntil(() => browser.executeScript(`
-        return Array.isArray(window.frameworkStabilizers)
-    `, []));
-    await browser.executeAsyncScript(`
-        const done = arguments[0];
-        const promises = window.frameworkStabilizers.map(stabilizer => {
-            // Stabilizer will invoke the resolve function with a
-            // boolean to indicate whether any work is done.
-            return new Promise(resolve => stabilizer(resolve));
-        });
-        Promise.all(promises).then(done);
-    `, []);
-};

package/utils.d.ts

@@ -1,3 +0,0 @@
-declare const magenta: (msg: string) => string;
-declare const green: (msg: string) => string;
-export { magenta, green };

package/utils.js

@@ -1,4 +0,0 @@
-const colorize = (msg, color) => process.stdout.isTTY ? `${color}${msg}\x1b[0m` : msg;
-const magenta = (msg) => colorize(msg, '\x1b[35m');
-const green = (msg) => colorize(msg, '\x1b[32m');
-export { magenta, green };