@badisi/wdio-harness 3.1.4 → 3.1.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 Badisi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,109 @@
+<h1 align="center">
+    @badisi/wdio-harness
+</h1>
+
+<p align="center">
+    <i>🔬 <a href="https://webdriver.io" alt="wdio">WebdriverIO</a> support for Angular component test harnesses.</i><br/>
+</p>
+
+<p align="center">
+    <a href="https://www.npmjs.com/package/@badisi/wdio-harness">
+        <img src="https://img.shields.io/npm/v/@badisi/wdio-harness.svg?color=blue&logo=npm" alt="npm version" /></a>
+    <a href="https://npmcharts.com/compare/@badisi/wdio-harness?minimal=true">
+        <img src="https://img.shields.io/npm/dw/@badisi/wdio-harness.svg?color=7986CB&logo=npm" alt="npm donwloads" /></a>
+    <a href="https://github.com/badisi/wdio-harness/blob/main/LICENSE">
+        <img src="https://img.shields.io/npm/l/@badisi/wdio-harness.svg?color=ff69b4" alt="license" /></a>
+</p>
+
+<p align="center">
+    <a href="https://github.com/Badisi/wdio-harness/actions/workflows/ci_tests.yml">
+        <img src="https://github.com/Badisi/wdio-harness/actions/workflows/ci_tests.yml/badge.svg" alt="build status" /></a>
+    <a href="https://github.com/badisi/wdio-harness/blob/main/CONTRIBUTING.md#-submitting-a-pull-request-pr">
+        <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome" /></a>
+</p>
+
+<hr/>
+
+#### Component test harnesses
+
+> 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)
+
+<hr/>
+
+## Installation
+
+```sh
+npm install @badisi/wdio-harness --save-dev
+```
+
+```sh
+yarn add @badisi/wdio-harness --dev
+```
+
+
+## Usage
+
+__Methods__
+
+- `createHarnessEnvironment(rootElement)` - gets a HarnessLoader instance from a given element (defaults to body)
+- `getHarness(harnessType, element)` - searches for an harness instance from a given ComponentHarness class and element
+- `getHarness(harnessType)` - searches for an harness instance from a given ComponentHarness class
+- `getHarness(query)` - searches for an harness instance from a given HarnessPredicate
+- `getAllHarnesses(query)` - acts like getHarness, but returns an array of harness instances
+- `waitForAngular()` - waits for Angular to finish bootstrapping
+
+__Example__
+
+```ts
+import { MatDatepickerInputHarness } from '@angular/material/datepicker/testing';
+import { getHarness } from '@badisi/wdio-harness';
+
+describe('Angular Material Harness', () => {
+    beforeEach(async () => {
+        await browser.url('http://localhost:4200');
+    });
+
+    it('MatDatePicker', async () => {
+        const datepicker = await getHarness(MatDatepickerInputHarness.with({ selector: '#demo-datepicker-input' }));
+
+        await datepicker.setValue('9/27/1954');
+        expect(await datepicker.getValue()).withContext('Date should be 9/27/1954').toBe('9/27/1954');
+
+        await datepicker.openCalendar();
+        const calendar = await datepicker.getCalendar();
+        await calendar.next();
+        await calendar.selectCell({ text: '20' });
+        expect(await datepicker.getValue()).withContext('Date should be 10/20/1954').toBe('10/20/1954');
+    });
+});
+```
+
+More examples [here][examples].
+
+
+## Development
+
+See the [developer docs][developer].
+
+
+## Contributing
+
+#### > Want to Help ?
+
+Want to file a bug, contribute some code or improve documentation ? Excellent!
+
+But please read up first on the guidelines for [contributing][contributing], and learn about submission process, coding rules and more.
+
+#### > Code of Conduct
+
+Please read and follow the [Code of Conduct][codeofconduct] and help me keep this project open and inclusive.
+
+
+
+
+[developer]: https://github.com/badisi/wdio-harness/blob/main/DEVELOPER.md
+[contributing]: https://github.com/badisi/wdio-harness/blob/main/CONTRIBUTING.md
+[codeofconduct]: https://github.com/badisi/wdio-harness/blob/main/CODE_OF_CONDUCT.md
+[examples]: https://github.com/badisi/wdio-harness/blob/main/projects/tests-e2e/harness.e2e.ts

package/WebdriverIOHarnessEnvironment.d.ts

@@ -0,0 +1,34 @@
+import { ComponentHarness, 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/{src/WebdriverIOHarnessEnvironment.ts → WebdriverIOHarnessEnvironment.js}

@@ -1,79 +1,60 @@
-import { ComponentHarness, ComponentHarnessConstructor, HarnessEnvironment } from '@angular/cdk/testing';
+import { HarnessEnvironment } from '@angular/cdk/testing';
 import logger from '@wdio/logger';
-
 import { WebdriverIOTestElement } from './WebdriverIOTestElement.js';
-
 import colors from '@colors/colors/safe.js';
 const { magenta, green } = colors;
-
 /** Registers the environment logger. */
 const log = logger('wdio-harness');
-
 /**
  * A `HarnessEnvironment` implementation for WebdriverIO.
  */
-export class WebdriverIOHarnessEnvironment extends HarnessEnvironment<WebdriverIO.Element> {
+export class WebdriverIOHarnessEnvironment extends HarnessEnvironment {
     /**
      * Keep a reference to the `document` element because `rawRootElement`
      * will be the root element of the harness's environment.
      */
-    private documentRoot: WebdriverIO.Element;
-
-    protected constructor(
-        rawRootElement: WebdriverIO.Element,
-        options: { documentRoot: WebdriverIO.Element; }
-    ) {
+    documentRoot;
+    constructor(rawRootElement, options) {
         super(rawRootElement);
         this.documentRoot = options.documentRoot;
     }
-
     /** Creates a `HarnessLoader` rooted at the document root. */
-    static async loader(documentRoot: WebdriverIO.Element): Promise<WebdriverIOHarnessEnvironment> {
+    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(): Promise<void> {
+    async forceStabilize() {
         /* await browser.executeAsyncScript(`
             const done = arguments[0];
             window.requestAnimationFrame(done);
         `, []);*/
     }
-
-    async waitForTasksOutsideAngular(): Promise<void> {
+    async waitForTasksOutsideAngular() {
         throw new Error('Method not implemented.');
     }
-
     /** 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 {
+    createComponentHarness(harnessType, element) {
         return super.createComponentHarness(harnessType, element);
     }
-
     /** Gets a list of all elements matching the given selector under this environment's root element. */
-    protected async getAllRawElements(selector: string): Promise<WebdriverIO.Element[]> {
+    async getAllRawElements(selector) {
         log.info(`${magenta('GET_ALL_RAW_ELEMENTS')} ${green(selector.toString())}`);
         return [...(await this.rawRootElement.$$(selector))];
     }
-
     /** Gets the root element for the document. */
-    protected getDocumentRoot(): WebdriverIO.Element {
+    getDocumentRoot() {
         return this.documentRoot;
     }
-
     /** Creates a `TestElement` from a raw element. */
-    protected createTestElement(element: WebdriverIO.Element): WebdriverIOTestElement {
+    createTestElement(element) {
         return new WebdriverIOTestElement(element);
     }
-
     /** Creates a `HarnessLoader` rooted at the given raw element. */
-    protected createEnvironment(element: WebdriverIO.Element): HarnessEnvironment<WebdriverIO.Element> {
+    createEnvironment(element) {
         return new WebdriverIOHarnessEnvironment(element, {
             documentRoot: this.documentRoot
         });

package/WebdriverIOTestElement.d.ts

@@ -0,0 +1,91 @@
+import { ElementDimensions, EventData, ModifierKeys, TestElement, TestKey, 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>;
+    /** 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/{src/WebdriverIOTestElement.ts → WebdriverIOTestElement.js}

@@ -1,30 +1,18 @@
-import {
-    _getTextWithExcludedElements,
-    ElementDimensions,
-    EventData,
-    ModifierKeys,
-    TestElement,
-    TestKey,
-    TextOptions,
-    ComponentHarness
-} from '@angular/cdk/testing';
+import { TestKey, ComponentHarness } from '@angular/cdk/testing';
 import { browser } from '@wdio/globals';
 import logger from '@wdio/logger';
-
 import colors from '@colors/colors/safe.js';
 const { magenta, green } = colors;
-
-enum Button {
-    LEFT = 'left',
-    MIDDLE = 'middle',
-    RIGHT = 'right'
-}
-
+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: Record<number, string> = {
+const keyMap = {
     [TestKey.BACKSPACE]: 'Backspace',
     [TestKey.TAB]: 'Tab',
     [TestKey.ENTER]: 'Enter',
@@ -57,23 +45,12 @@ const keyMap: Record<number, string> = {
     [TestKey.META]: 'Meta',
     [TestKey.COMMA]: ','
 };
-
-/** 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;
-    }
-}
-ComponentHarness.prototype.element = function (this: ComponentHarness): WebdriverIO.Element {
+ComponentHarness.prototype.element = function () {
     return this.locatorFactory.rootElement.element();
 };
-
 /** Converts a `ModifierKeys` object to a list of WebdriverIO `Key`s. */
-const toWebdriverIOModifierKeys = (modifiers: ModifierKeys): string[] => {
-    const result: string[] = [];
+const toWebdriverIOModifierKeys = (modifiers) => {
+    const result = [];
     if (modifiers.control) {
         result.push(keyMap[TestKey.CONTROL]);
     }
@@ -88,130 +65,87 @@ const toWebdriverIOModifierKeys = (modifiers: ModifierKeys): string[] => {
     }
     return result;
 };
-
 /**
  * A `TestElement` implementation for WebdriverIO.
  */
-export class WebdriverIOTestElement implements TestElement {
-    constructor(readonly hostElement: WebdriverIO.Element) { }
-
+export class WebdriverIOTestElement {
+    hostElement;
+    constructor(hostElement) {
+        this.hostElement = hostElement;
+    }
     /** Return the host element. */
-    element(): WebdriverIO.Element {
+    element() {
         return this.hostElement;
     }
-
     /** Blur the element. */
-    async blur(): Promise<void> {
+    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(): Promise<void> {
+    async clear() {
         this.logAction('CLEAR');
         return this.hostElement.clearValue();
     }
-
-    /**
-     * 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.
-     */
-    async click(modifiers?: ModifierKeys): Promise<void>;
-    /** Click the element at the element's center. */
-    async 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
-     */
-    async click(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
-    async click(...args: [ModifierKeys?] | ['center', ModifierKeys?] | [number, number, ModifierKeys?]): Promise<void> {
+    async click(...args) {
         this.logAction('CLICK');
         return this.dispatchClickEventSequence(args, Button.LEFT);
     }
-
-    /**
-     * 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
-     */
-    async rightClick(relativeX: number, relativeY: number, modifiers?: ModifierKeys): Promise<void>;
-    async rightClick(...args: [ModifierKeys?] | ['center', ModifierKeys?] | [number, number, ModifierKeys?]): Promise<void> {
+    async rightClick(...args) {
         this.logAction('RIGHT_CLICK');
         return this.dispatchClickEventSequence(args, Button.RIGHT);
     }
-
     /** Focus the element. */
-    async focus(): Promise<void> {
+    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: string): Promise<string> {
+    async getCssValue(property) {
         this.logAction('GET_CSS_VALUE');
         return (await this.hostElement.getCSSProperty(property)).value ?? '';
     }
-
     /** Hovers the mouse over the element. */
-    async hover(): Promise<void> {
+    async hover() {
         this.logAction('HOVER');
         return this.hostElement.moveTo();
     }
-
     /** Moves the mouse away from the element. */
-    async mouseAway(): Promise<void> {
+    async mouseAway() {
         this.logAction('MOUSE_AWAY');
         return this.hostElement.moveTo({ xOffset: -1, yOffset: -1 });
     }
-
-    /**
-     * 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.
-     */
-    async 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.
-     */
-    async sendKeys(modifiers: ModifierKeys, ...keys: (string | TestKey)[]): Promise<void>;
-    async sendKeys(...modifiersAndKeys: any[]): Promise<void> {
-        let modifiers: ModifierKeys;
-        let rest: (string | TestKey)[];
-
+    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 {
+        }
+        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);
-            }, [] as string[]);
-
+            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?: TextOptions): Promise<string> {
+    async text(options) {
         this.logAction('TEXT', `{ exclude: ${options?.exclude} }`);
         if (options?.exclude) {
             return browser.executeScript(`
@@ -226,66 +160,55 @@ export class WebdriverIOTestElement implements TestElement {
         // 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]);
     }
-
     /** Gets the value for the given attribute from the element. */
-    async getAttribute(name: string): Promise<string | null> {
+    async getAttribute(name) {
         this.logAction('GET_ATTRIBUTE', name);
         return this.hostElement.getAttribute(name);
     }
-
     /** Checks whether the element has the given class. */
-    async hasClass(name: string): Promise<boolean> {
+    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(): Promise<ElementDimensions> {
+    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: string): Promise<any> {
+    async getProperty(name) {
         this.logAction('GET_PROPERTY', name);
         return this.hostElement.getProperty(name);
     }
-
     /** Checks whether this element matches the given selector. */
-    async matchesSelector(selector: string): Promise<boolean> {
+    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(): Promise<boolean> {
+    async isFocused() {
         this.logAction('IS_FOCUSED');
         return this.hostElement.isFocused();
     }
-
     /** Sets the value of a property of an input. */
-    async setInputValue(value: string): Promise<void> {
+    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: number[]): Promise<void> {
+    async selectOptions(...optionIndexes) {
         this.logAction('SELECT_OPTIONS', `[${optionIndexes.join(', ')}]`);
-
         const options = await this.hostElement.$$('option');
         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
@@ -297,9 +220,8 @@ export class WebdriverIOTestElement implements TestElement {
             }
         }
     }
-
     /** Dispatches an event with a particular name. */
-    async dispatchEvent(name: string, data?: Record<string, EventData>): Promise<void> {
+    async dispatchEvent(name, data) {
         this.logAction('DISPATCH_EVENT', name);
         return browser.executeScript(`
             const event = document.createEvent('Event');
@@ -310,44 +232,36 @@ export class WebdriverIOTestElement implements TestElement {
             arguments[1]['dispatchEvent'](event);
         `, [name, this.hostElement, data]);
     }
-
     /** Performs a key-down action. */
-    async keyDown(value: string): Promise<void> {
+    async keyDown(value) {
         this.logAction('KEY_DOWN:', value);
         return browser.performActions([{
-            id: 'keyboard',
-            type: 'key',
-            actions: [{ type: 'keyDown', value }],
-        }]);
+                id: 'keyboard',
+                type: 'key',
+                actions: [{ type: 'keyDown', value }],
+            }]);
     }
-
     /** Performs a key-up action. */
-    async keyUp(value: string): Promise<void> {
+    async keyUp(value) {
         this.logAction('KEY_UP:', value);
         return browser.performActions([{
-            id: 'keyboard',
-            type: 'key',
-            actions: [{ type: 'keyUp', value }],
-        }]);
+                id: 'keyboard',
+                type: 'key',
+                actions: [{ type: 'keyUp', value }],
+            }]);
     }
-
     // --- HELPER(s) ---
-
     /** Dispatches all the events that are part of a click event sequence. */
-    private async dispatchClickEventSequence(
-        args: [ModifierKeys?] | ['center', ModifierKeys?] | [number, number, ModifierKeys?], button: Button,
-    ) {
-        let modifiers: ModifierKeys = {};
+    async dispatchClickEventSequence(args, button) {
+        let modifiers = {};
         if (args.length && typeof args[args.length - 1] === 'object') {
-            modifiers = args.pop() as ModifierKeys;
+            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);
@@ -357,9 +271,8 @@ export class WebdriverIOTestElement implements TestElement {
             this.keyUp(modifierKey);
         }
     }
-
     /** Writes info to the console outputs. */
-    private logAction(action: string, args?: string): void {
+    logAction(action, args) {
         log.info(`${magenta(action)} ${green(this.hostElement.selector.toString())} ${args ? args : ''}`);
     }
 }

package/index.d.ts

@@ -0,0 +1,31 @@
+import { 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/{src/index.ts → index.js}

@@ -1,20 +1,14 @@
-import { ComponentHarness, ComponentHarnessConstructor, HarnessQuery } from '@angular/cdk/testing';
 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 <T extends ComponentHarness>(
-    query: HarnessQuery<T>
-): Promise<T[]> => {
+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
@@ -25,33 +19,26 @@ export const getAllHarnesses = async <T extends ComponentHarness>(
  * @return An instance of the given harness type
  * @throws If a matching component instance can't be found
  */
-export const getHarness = async <T extends ComponentHarness>(
-    query: HarnessQuery<T>,
-    element?: WebdriverIO.Element
-): Promise<T> => {
+export const getHarness = async (query, element) => {
     const env = await createHarnessEnvironment(element);
     if (element) {
-        return env.createComponentHarness(query as ComponentHarnessConstructor<T>, 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?: WebdriverIO.Element
-): Promise<WebdriverIOHarnessEnvironment> => {
+export const createHarnessEnvironment = async (rootElement) => {
     return WebdriverIOHarnessEnvironment.loader(rootElement || await $('body'));
 };
-
 /**
  * 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 (): Promise<void> => {
+export const waitForAngular = async () => {
     await browser.waitUntil(() => browser.executeScript(`
         return Array.isArray(window.frameworkStabilizers)
     `, []));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@badisi/wdio-harness",
-    "version": "3.1.4",
+    "version": "3.1.6",
     "description": "WebdriverIO support for Angular component test harnesses.",
     "homepage": "https://github.com/badisi/wdio-harness",
     "license": "MIT",
@@ -20,7 +20,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "https://github.com/badisi/wdio-harness.git"
+        "url": "git+https://github.com/badisi/wdio-harness.git"
     },
     "keywords": [
         "angular",
@@ -35,10 +35,6 @@
         "webdriver",
         "webdriverio"
     ],
-    "scripts": {
-        "build": "node ./build.mjs",
-        "release": "npm publish ../../dist"
-    },
     "engines": {
         "node": "^16.14.0 || >=18.10.0"
     },
@@ -49,14 +45,5 @@
     },
     "dependencies": {
         "@colors/colors": "^1.6.0"
-    },
-    "devDependencies": {
-        "@angular/cdk": "^18.0.6",
-        "@wdio/logger": "^8.38.0",
-        "webdriverio": "^8.39.1",
-        "cpy": "^11.0.1"
-    },
-    "publishConfig": {
-        "access": "public"
     }
-}
+}

package/build.mjs

@@ -1,77 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/naming-convention, no-underscore-dangle */
-
-import colors from '@colors/colors/safe.js';
-import { existsSync, mkdirSync, rmSync, readFileSync, writeFileSync } from 'fs';
-import { dirname, resolve as pathResolve } from 'path';
-import { fileURLToPath } from 'url';
-import { exec } from 'child_process';
-import cpy from 'cpy';
-
-const { green, magenta } = colors;
-const __dirname = dirname(fileURLToPath(import.meta.url));
-
-const DIST_PATH = pathResolve(__dirname, '../../dist');
-
-const log = str => console.log(magenta(str));
-
-const execCmd = (cmd, opts) => new Promise((resolve, reject) => {
-    exec(cmd, opts, (err, stdout, stderr) => {
-        if (err) {
-            console.error(stdout, stderr);
-            return reject(err);
-        }
-        return resolve(stdout);
-    });
-});
-
-const cleanDir = path => new Promise(resolve => {
-    const exists = existsSync(path);
-    if (exists) {
-        rmSync(path, { recursive: true, cwd: __dirname });
-    }
-    // Gives time to rmSync to unlock the file on Windows
-    setTimeout(() => {
-        mkdirSync(path, { recursive: true, cwd: __dirname });
-        resolve();
-    }, exists ? 1000 : 0);
-});
-
-const copyAssets = async () => {
-    await cpy('../../README.md', DIST_PATH, { flat: true });
-    await cpy('../../LICENSE', DIST_PATH, { flat: true });
-    await cpy('package.json', DIST_PATH, { flat: true });
-};
-
-const customizePackageJson = () => {
-    const pkgJsonPath = pathResolve(DIST_PATH, 'package.json');
-    const pkgJson = JSON.parse(readFileSync(pkgJsonPath, { encoding: 'utf8' }));
-    delete pkgJson.scripts;
-    delete pkgJson.devDependencies;
-    delete pkgJson.publishConfig;
-    writeFileSync(pkgJsonPath, JSON.stringify(pkgJson, null, 4), { encoding: 'utf8' });
-};
-
-const build = async () => {
-    log('> Cleaning..');
-    await cleanDir(DIST_PATH);
-
-    log('> Building library..');
-    await execCmd('tsc --project tsconfig.json', { cwd: __dirname });
-
-    log('> Copying assets..');
-    await copyAssets();
-
-    log('> Customizing package.json..');
-    customizePackageJson();
-
-    log(`> ${green('Done!')}\n`);
-};
-
-void (async () => {
-    try {
-        await build();
-    } catch (err) {
-        console.error(err);
-        process.exit(1);
-    }
-})();

package/tsconfig.json

@@ -1,36 +0,0 @@
-{
-    "compilerOptions": {
-        "baseUrl": "src",
-        "rootDir": "src",
-        "outDir": "../../dist/",
-        "module": "ESNext",
-        "target": "es2022",
-        "moduleResolution": "node",
-        "lib": [
-            "es2020",
-            "dom"
-        ],
-        "allowJs": true,
-        "allowSyntheticDefaultImports": true,
-        "esModuleInterop": true,
-        "declaration": true,
-        "inlineSourceMap": false,
-        "listEmittedFiles": false,
-        "listFiles": false,
-        "noFallthroughCasesInSwitch": true,
-        "pretty": true,
-        "skipLibCheck": true,
-        "strict": true,
-        "traceResolution": false,
-        "importHelpers": true,
-        "strictPropertyInitialization": true,
-        "noUnusedLocals": true,
-        "types": [
-            "node"
-        ]
-    },
-    "compileOnSave": false,
-    "include": [
-        "src/**/*.ts"
-    ]
-}