@deot/dev-test 2.0.0 → 2.0.1

package/dist/index.cjs.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const devShared = require('@deot/dev-shared');
 const childProcess = require('child_process');
+const puppeteer = require('puppeteer');
 
 function _interopNamespaceDefault(e) {
 	const n = Object.create(null, { [Symbol.toStringTag]: { value: 'Module' } });
@@ -135,4 +136,292 @@ class Command {
   }
 }
 
+class Operater {
+  page;
+  constructor(v) {
+    this.page = v;
+  }
+  /**
+   * @param {string} selector ~
+   * @param {ClickOptions} options ~
+   */
+  async click(selector, options) {
+    await this.page.click(selector, options);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {number} ~
+   */
+  async count(selector) {
+    return (await this.page.$$(selector)).length;
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<string>} ~
+   */
+  async text(selector) {
+    return await this.page.$eval(selector, (node) => node.textContent);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<string>} ~
+   */
+  async value(selector) {
+    return await this.page.$eval(selector, (node) => node.value);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<string>} ~
+   */
+  async html(selector) {
+    return await this.page.$eval(selector, (node) => node.innerHTML);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<string[]>} ~
+   */
+  async classList(selector) {
+    return await this.page.$eval(selector, (node) => [...node.classList]);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<HTMLElement[]>} ~
+   */
+  async children(selector) {
+    return await this.page.$eval(selector, (node) => [...node.children]);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<boolean>} ~
+   */
+  async isVisible(selector) {
+    const display = await this.page.$eval(selector, (node) => {
+      return window.getComputedStyle(node).display;
+    });
+    return display !== "none";
+  }
+  /**
+   *
+   * @param {string} selector ~
+   * @returns {Promise<boolean>} ~
+   */
+  async isChecked(selector) {
+    return await this.page.$eval(
+      selector,
+      (node) => node.checked
+    );
+  }
+  /**
+   *
+   * @param {string} selector ~
+   * @returns {Promise<boolean>} ~
+   */
+  async isFocused(selector) {
+    return await this.page.$eval(selector, (node) => node === document.activeElement);
+  }
+  /**
+   * @param {string} selector ~
+   * @param {string} value$ ~
+   * @returns {Promise<void>} ~
+   */
+  async setValue(selector, value$) {
+    await this.page.$eval(
+      selector,
+      (node, value$$) => {
+        node.value = value$$;
+        node.dispatchEvent(new Event("input"));
+      },
+      value$
+    );
+  }
+  /**
+   * @param {string} selector ~
+   * @param {string} value$ ~
+   * @returns {Promise<void>} ~
+   */
+  async typeValue(selector, value$) {
+    const el = await this.page.$(selector);
+    await el.evaluate((node) => node.value = "");
+    await el.type(value$);
+  }
+  /**
+   * @param {string} selector ~
+   * @param {string} value$ ~
+   * @returns {Promise<void>} ~
+   */
+  async enterValue(selector, value$) {
+    const el = await this.page.$(selector);
+    await el.evaluate((node) => node.value = "");
+    await el.type(value$);
+    await el.press("Enter");
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<void>} ~
+   */
+  async clearValue(selector) {
+    return await this.page.$eval(
+      selector,
+      (node) => {
+        node.value = "";
+      }
+    );
+  }
+  /**
+   *
+   * @param {number} time ~
+   * @returns {Promise<any>} ~
+   */
+  sleep(time) {
+    return this.page.evaluate((time$) => {
+      return new Promise((r) => {
+        setTimeout(r, time$);
+      });
+    }, time);
+  }
+  nextFrame() {
+    return this.page.evaluate(() => {
+      return new Promise((resolve) => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(resolve);
+        });
+      });
+    });
+  }
+}
+
+class Launch {
+  browser;
+  page;
+  operater;
+  _browser;
+  _page;
+  options;
+  constructor() {
+    this.operater = new Proxy({}, {
+      get: () => {
+        throw new Error("operater is not defined. create* invote first");
+      }
+    });
+    this.browser = new Proxy({}, {
+      get: () => {
+        throw new Error("browser is not defined. createBrowser invote first");
+      }
+    });
+    this.page = new Proxy({}, {
+      get: () => {
+        throw new Error("page is not defined. createPage invote first");
+      }
+    });
+    this.options = process.env.CI ? (
+      /* istanbul ignore next */
+      { args: ["--no-sandbox", "--disable-setuid-sandbox"] }
+    ) : {};
+  }
+  createBrowser(force) {
+    if (force || !this._browser) {
+      if (force && this._browser) {
+        this._browser.then((browser) => {
+          browser.isConnected() && browser.close();
+        });
+      }
+      this._browser = puppeteer.launch({
+        ...this.options,
+        headless: "new"
+      });
+      this._browser.then((browser) => {
+        this.browser = browser;
+      });
+    }
+    return this._browser;
+  }
+  async createPage(force) {
+    await this.createBrowser();
+    if (force || !this._page) {
+      if (force && this._page) {
+        this._page.then((page) => {
+          !page.isClosed() && page.close();
+        });
+      }
+      this._page = this.browser.newPage();
+      this._page.then((page) => {
+        this.page = page;
+        this.operater = new Operater(page);
+        page.evaluateOnNewDocument(
+          /* istanbul ignore next */
+          () => {
+            localStorage.clear();
+          }
+        );
+        page.on(
+          "console",
+          /* istanbul ignore next */
+          (e) => {
+            if (e.type() === "error") {
+              const err = e.args()[0];
+              console.error(
+                `Error from Puppeteer-loaded page:
+`,
+                err.remoteObject().description
+              );
+            }
+          }
+        );
+      });
+    }
+    return this._page;
+  }
+}
+
+const TIME_OUT = 30 * 1e3;
+const impl = () => {
+  let launch = new Launch();
+  beforeAll(async () => {
+    await launch.createBrowser();
+  }, 2e4);
+  beforeEach(async () => {
+    await launch.createPage(true);
+  });
+  afterEach(async () => {
+    await launch.page.close();
+  });
+  afterAll(async () => {
+    await launch.browser.close();
+  });
+  return launch;
+};
+
+const e2e = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+	__proto__: null,
+	TIME_OUT,
+	impl
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const sleep = (s) => new Promise((_) => {
+  setTimeout(_, s || 0);
+});
+const expectByPolling = async (poll, expected, options) => {
+  const { maxTries = 30, interval = 50, to } = options || {};
+  for (let tries = 0; tries < maxTries; tries++) {
+    const actual = await poll();
+    const allowMatch = (!to || to === "toMatch") && typeof expected === "string" && typeof actual === "string";
+    if (allowMatch && actual.indexOf(expected) > -1 || actual === expected || tries === maxTries - 1) {
+      allowMatch ? expect(actual).toMatch(expected) : expect(actual)[to || "toBe"](expected);
+      break;
+    } else {
+      await sleep(interval);
+    }
+  }
+};
+
+const utils = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+	__proto__: null,
+	expectByPolling,
+	sleep
+}, Symbol.toStringTag, { value: 'Module' }));
+
 exports.Command = Command;
+exports.E2E = e2e;
+exports.Launch = Launch;
+exports.Operater = Operater;
+exports.Utils = utils;

package/dist/index.d.ts

@@ -1,7 +1,11 @@
 /// <reference types="node" />
 
+import type { Browser } from 'puppeteer';
 import * as childProcess from 'child_process';
+import type { ClickOptions } from 'puppeteer';
 import type { Nullable } from '@deot/dev-shared';
+import type { Page } from 'puppeteer';
+import type { PuppeteerLaunchOptions } from 'puppeteer';
 
 export declare class Command {
     target: Promise<any>;
@@ -24,4 +28,67 @@ export declare class Command {
     press(key: string, timeout?: number): Promise<void>;
 }
 
+declare namespace E2E {
+    export {
+        TIME_OUT,
+        impl
+    }
+}
+export { E2E }
+
+declare const expectByPolling: (poll: () => Promise<any> | any, expected: any, options?: ExpectByPollingOptions) => Promise<void>;
+
+declare interface ExpectByPollingOptions {
+    interval?: number;
+    maxTries?: number;
+    to?: string;
+}
+
+declare const impl: () => Launch;
+
+export declare class Launch {
+    browser: Browser;
+    page: Page;
+    operater: Operater;
+    private _browser;
+    private _page;
+    options: PuppeteerLaunchOptions;
+    constructor();
+    createBrowser(force?: boolean): Promise<Browser>;
+    createPage(force?: boolean): Promise<Page>;
+}
+
+export declare class Operater {
+    page: Page;
+    constructor(v: Page);
+    click(selector: string, options?: ClickOptions): Promise<void>;
+    count(selector: string): Promise<number>;
+    text(selector: string): Promise<string>;
+    value(selector: string): Promise<string>;
+    html(selector: string): Promise<string>;
+    classList(selector: string): Promise<string[]>;
+    children(selector: string): Promise<HTMLElement[]>;
+    isVisible(selector: string): Promise<boolean>;
+    isChecked(selector: string): Promise<boolean>;
+    isFocused(selector: string): Promise<boolean>;
+    setValue(selector: string, value$: string): Promise<void>;
+    typeValue(selector: string, value$: string): Promise<void>;
+    enterValue(selector: string, value$: string): Promise<void>;
+    clearValue(selector: string): Promise<void>;
+    sleep(time: number): Promise<any>;
+    nextFrame(): Promise<unknown>;
+}
+
+declare const sleep: (s?: number) => Promise<unknown>;
+
+declare const TIME_OUT: number;
+
+declare namespace Utils {
+    export {
+        sleep,
+        expectByPolling
+    }
+}
+export { Utils }
+
 export { }

package/dist/index.es.js

@@ -1,5 +1,6 @@
 import { Shell } from '@deot/dev-shared';
 import * as childProcess from 'child_process';
+import puppeteer from 'puppeteer';
 
 const { LOCAL_COMMAND_MAP } = Shell;
 const KEY_MAP = {
@@ -112,4 +113,288 @@ class Command {
   }
 }
 
-export { Command };
+class Operater {
+  page;
+  constructor(v) {
+    this.page = v;
+  }
+  /**
+   * @param {string} selector ~
+   * @param {ClickOptions} options ~
+   */
+  async click(selector, options) {
+    await this.page.click(selector, options);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {number} ~
+   */
+  async count(selector) {
+    return (await this.page.$$(selector)).length;
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<string>} ~
+   */
+  async text(selector) {
+    return await this.page.$eval(selector, (node) => node.textContent);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<string>} ~
+   */
+  async value(selector) {
+    return await this.page.$eval(selector, (node) => node.value);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<string>} ~
+   */
+  async html(selector) {
+    return await this.page.$eval(selector, (node) => node.innerHTML);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<string[]>} ~
+   */
+  async classList(selector) {
+    return await this.page.$eval(selector, (node) => [...node.classList]);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<HTMLElement[]>} ~
+   */
+  async children(selector) {
+    return await this.page.$eval(selector, (node) => [...node.children]);
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<boolean>} ~
+   */
+  async isVisible(selector) {
+    const display = await this.page.$eval(selector, (node) => {
+      return window.getComputedStyle(node).display;
+    });
+    return display !== "none";
+  }
+  /**
+   *
+   * @param {string} selector ~
+   * @returns {Promise<boolean>} ~
+   */
+  async isChecked(selector) {
+    return await this.page.$eval(
+      selector,
+      (node) => node.checked
+    );
+  }
+  /**
+   *
+   * @param {string} selector ~
+   * @returns {Promise<boolean>} ~
+   */
+  async isFocused(selector) {
+    return await this.page.$eval(selector, (node) => node === document.activeElement);
+  }
+  /**
+   * @param {string} selector ~
+   * @param {string} value$ ~
+   * @returns {Promise<void>} ~
+   */
+  async setValue(selector, value$) {
+    await this.page.$eval(
+      selector,
+      (node, value$$) => {
+        node.value = value$$;
+        node.dispatchEvent(new Event("input"));
+      },
+      value$
+    );
+  }
+  /**
+   * @param {string} selector ~
+   * @param {string} value$ ~
+   * @returns {Promise<void>} ~
+   */
+  async typeValue(selector, value$) {
+    const el = await this.page.$(selector);
+    await el.evaluate((node) => node.value = "");
+    await el.type(value$);
+  }
+  /**
+   * @param {string} selector ~
+   * @param {string} value$ ~
+   * @returns {Promise<void>} ~
+   */
+  async enterValue(selector, value$) {
+    const el = await this.page.$(selector);
+    await el.evaluate((node) => node.value = "");
+    await el.type(value$);
+    await el.press("Enter");
+  }
+  /**
+   * @param {string} selector ~
+   * @returns {Promise<void>} ~
+   */
+  async clearValue(selector) {
+    return await this.page.$eval(
+      selector,
+      (node) => {
+        node.value = "";
+      }
+    );
+  }
+  /**
+   *
+   * @param {number} time ~
+   * @returns {Promise<any>} ~
+   */
+  sleep(time) {
+    return this.page.evaluate((time$) => {
+      return new Promise((r) => {
+        setTimeout(r, time$);
+      });
+    }, time);
+  }
+  nextFrame() {
+    return this.page.evaluate(() => {
+      return new Promise((resolve) => {
+        requestAnimationFrame(() => {
+          requestAnimationFrame(resolve);
+        });
+      });
+    });
+  }
+}
+
+class Launch {
+  browser;
+  page;
+  operater;
+  _browser;
+  _page;
+  options;
+  constructor() {
+    this.operater = new Proxy({}, {
+      get: () => {
+        throw new Error("operater is not defined. create* invote first");
+      }
+    });
+    this.browser = new Proxy({}, {
+      get: () => {
+        throw new Error("browser is not defined. createBrowser invote first");
+      }
+    });
+    this.page = new Proxy({}, {
+      get: () => {
+        throw new Error("page is not defined. createPage invote first");
+      }
+    });
+    this.options = process.env.CI ? (
+      /* istanbul ignore next */
+      { args: ["--no-sandbox", "--disable-setuid-sandbox"] }
+    ) : {};
+  }
+  createBrowser(force) {
+    if (force || !this._browser) {
+      if (force && this._browser) {
+        this._browser.then((browser) => {
+          browser.isConnected() && browser.close();
+        });
+      }
+      this._browser = puppeteer.launch({
+        ...this.options,
+        headless: "new"
+      });
+      this._browser.then((browser) => {
+        this.browser = browser;
+      });
+    }
+    return this._browser;
+  }
+  async createPage(force) {
+    await this.createBrowser();
+    if (force || !this._page) {
+      if (force && this._page) {
+        this._page.then((page) => {
+          !page.isClosed() && page.close();
+        });
+      }
+      this._page = this.browser.newPage();
+      this._page.then((page) => {
+        this.page = page;
+        this.operater = new Operater(page);
+        page.evaluateOnNewDocument(
+          /* istanbul ignore next */
+          () => {
+            localStorage.clear();
+          }
+        );
+        page.on(
+          "console",
+          /* istanbul ignore next */
+          (e) => {
+            if (e.type() === "error") {
+              const err = e.args()[0];
+              console.error(
+                `Error from Puppeteer-loaded page:
+`,
+                err.remoteObject().description
+              );
+            }
+          }
+        );
+      });
+    }
+    return this._page;
+  }
+}
+
+const TIME_OUT = 30 * 1e3;
+const impl = () => {
+  let launch = new Launch();
+  beforeAll(async () => {
+    await launch.createBrowser();
+  }, 2e4);
+  beforeEach(async () => {
+    await launch.createPage(true);
+  });
+  afterEach(async () => {
+    await launch.page.close();
+  });
+  afterAll(async () => {
+    await launch.browser.close();
+  });
+  return launch;
+};
+
+const e2e = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+	__proto__: null,
+	TIME_OUT,
+	impl
+}, Symbol.toStringTag, { value: 'Module' }));
+
+const sleep = (s) => new Promise((_) => {
+  setTimeout(_, s || 0);
+});
+const expectByPolling = async (poll, expected, options) => {
+  const { maxTries = 30, interval = 50, to } = options || {};
+  for (let tries = 0; tries < maxTries; tries++) {
+    const actual = await poll();
+    const allowMatch = (!to || to === "toMatch") && typeof expected === "string" && typeof actual === "string";
+    if (allowMatch && actual.indexOf(expected) > -1 || actual === expected || tries === maxTries - 1) {
+      allowMatch ? expect(actual).toMatch(expected) : expect(actual)[to || "toBe"](expected);
+      break;
+    } else {
+      await sleep(interval);
+    }
+  }
+};
+
+const utils = /*#__PURE__*/Object.freeze(/*#__PURE__*/Object.defineProperty({
+	__proto__: null,
+	expectByPolling,
+	sleep
+}, Symbol.toStringTag, { value: 'Module' }));
+
+export { Command, e2e as E2E, Launch, Operater, utils as Utils };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deot/dev-test",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "main": "dist/index.es.js",
   "types": "dist/index.d.ts",
   "type": "module",
@@ -12,6 +12,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@deot/dev-shared": "^2.0.0"
+    "@deot/dev-shared": "^2.0.0",
+    "puppeteer": "^20.7.3"
   }
 }