html-browser-tester 0.0.3 → 0.0.5

package/lib/browser-test.d.ts

@@ -0,0 +1,58 @@
+declare type Option = {
+    html: string;
+    width?: number;
+    height?: number;
+};
+declare type Result = {
+    description: string;
+    result: boolean;
+};
+export declare class BrowserTester {
+    private html;
+    private width?;
+    private height?;
+    private iframe;
+    private tests;
+    private expects;
+    private beforeEachCallbacks;
+    private afterEachCallbacks;
+    constructor({ html, width, height, }: Option);
+    setBrowserSize(width: number, height: number): void;
+    beforeEach(callback: (window: Window, doc: Document) => Promise<void>): void;
+    afterEach(callback: (window: Window, doc: Document) => Promise<void>): void;
+    test(description: string, callback: (window: Window, doc: Document) => Promise<void>): void;
+    expect(value: unknown): {
+        toBe: (value: unknown) => void;
+        toBeTruthy: (value: unknown) => void;
+        toBeFalsy: (value: unknown) => void;
+        toBeNull: (value: unknown) => void;
+        toBeUndefined: (value: unknown) => void;
+        toBeDefined: (value: unknown) => void;
+        toBeNaN: (value: unknown) => void;
+        toContain: (value: unknown) => void;
+        toBeLessThan: (value: unknown) => void;
+        toBeGreaterThan: (value: unknown) => void;
+        toBeLessThanOrEqual: (value: unknown) => void;
+        toBeGreaterThanOrEqual: (value: unknown) => void;
+        toBeInstanceOf: (value: unknown) => void;
+    } & {
+        not: {
+            toBe: (value: unknown) => void;
+            toBeTruthy: (value: unknown) => void;
+            toBeFalsy: (value: unknown) => void;
+            toBeNull: (value: unknown) => void;
+            toBeUndefined: (value: unknown) => void;
+            toBeDefined: (value: unknown) => void;
+            toBeNaN: (value: unknown) => void;
+            toContain: (value: unknown) => void;
+            toBeLessThan: (value: unknown) => void;
+            toBeGreaterThan: (value: unknown) => void;
+            toBeLessThanOrEqual: (value: unknown) => void;
+            toBeGreaterThanOrEqual: (value: unknown) => void;
+            toBeInstanceOf: (value: unknown) => void;
+        };
+    };
+    clearTests(): void;
+    run(): Promise<Result[]>;
+}
+export {};

package/lib/browser-test.js

@@ -0,0 +1,86 @@
+import { Expect } from "./expect";
+export class BrowserTester {
+    html = '';
+    width;
+    height;
+    iframe;
+    tests = [];
+    expects = new Expect();
+    beforeEachCallbacks = [];
+    afterEachCallbacks = [];
+    constructor({ html = '', width, height, }) {
+        this.html = html;
+        if (width) {
+            this.width = width;
+        }
+        if (height) {
+            this.height = height;
+        }
+    }
+    setBrowserSize(width, height) {
+        if (width) {
+            this.iframe.width = `${width}px`;
+        }
+        if (height) {
+            this.iframe.height = `${height}px`;
+        }
+    }
+    beforeEach(callback) {
+        this.beforeEachCallbacks.push(callback);
+    }
+    afterEach(callback) {
+        this.afterEachCallbacks.push(callback);
+    }
+    test(description, callback) {
+        this.tests.push({
+            description,
+            callback,
+        });
+    }
+    expect(value) {
+        return this.expects.expect(value);
+    }
+    clearTests() {
+        this.tests = [];
+    }
+    run() {
+        return new Promise((resolve) => {
+            const blob = new Blob([this.html], { type: "text/html" });
+            const url = URL.createObjectURL(blob);
+            const iframe = document.createElement('iframe');
+            const body = document.querySelector('body');
+            this.iframe = iframe;
+            iframe.style.opacity = '0';
+            iframe.style.pointerEvents = 'none';
+            iframe.src = url;
+            if (this.width && this.height) {
+                iframe.width = `${this.width}px`;
+                iframe.height = `${this.height}px`;
+            }
+            const iframeCallback = async () => {
+                const results = [];
+                for (const t of this.tests) {
+                    for (const b of this.beforeEachCallbacks) {
+                        await b(iframe.contentWindow, iframe.contentDocument);
+                    }
+                    await t.callback(iframe.contentWindow, iframe.contentDocument);
+                    const { description } = t;
+                    results.push({
+                        description,
+                        result: this.expects.isAllPassed()
+                    });
+                    this.expects.clean();
+                    for (const a of this.afterEachCallbacks) {
+                        await a(iframe.contentWindow, iframe.contentDocument);
+                    }
+                }
+                iframe.removeEventListener('load', iframeCallback);
+                URL.revokeObjectURL(url);
+                iframe.remove();
+                resolve(results);
+            };
+            iframe.addEventListener('load', iframeCallback);
+            body.appendChild(iframe);
+        });
+    }
+}

package/lib/expect/assert.d.ts

@@ -0,0 +1,15 @@
+export declare const assert: (expected: unknown) => {
+    toBe: (resut: unknown) => boolean;
+    toBeTruthy: (result: unknown) => boolean;
+    toBeFalsy: (result: unknown) => boolean;
+    toBeNull: (result: unknown) => boolean;
+    toBeUndefined: (result: unknown) => boolean;
+    toBeDefined: (result: unknown) => boolean;
+    toBeNaN: (result: unknown) => boolean;
+    toContain: (result: unknown) => boolean;
+    toBeLessThan: (result: unknown) => boolean;
+    toBeGreaterThan: (result: unknown) => boolean;
+    toBeLessThanOrEqual: (result: unknown) => boolean;
+    toBeGreaterThanOrEqual: (result: unknown) => boolean;
+    toBeInstanceOf: (result: unknown) => boolean;
+};

package/lib/expect/assert.js

@@ -0,0 +1,62 @@
+export const assert = (expected) => ({
+    toBe: (resut) => {
+        return expected === resut;
+    },
+    toBeTruthy: (result) => {
+        return result === true;
+    },
+    toBeFalsy: (result) => {
+        return result === false;
+    },
+    toBeNull: (result) => {
+        return result === null;
+    },
+    toBeUndefined: (result) => {
+        return result === undefined;
+    },
+    toBeDefined: (result) => {
+        return result !== undefined;
+    },
+    toBeNaN: (result) => {
+        return result === NaN;
+    },
+    toContain: (result) => {
+        if (Array.isArray(expected)) {
+            expected.some(item => item === result);
+        }
+        return false;
+    },
+    toBeLessThan: (result) => {
+        if (typeof expected === 'number' && typeof result === 'number') {
+            return expected < result;
+        }
+        return false;
+    },
+    toBeGreaterThan: (result) => {
+        if (typeof expected === 'number' && typeof result === 'number') {
+            return expected > result;
+        }
+        return false;
+    },
+    toBeLessThanOrEqual: (result) => {
+        if (typeof expected === 'number' && typeof result === 'number') {
+            return expected <= result;
+        }
+        return false;
+    },
+    toBeGreaterThanOrEqual: (result) => {
+        if (typeof expected === 'number' && typeof result === 'number') {
+            return expected >= result;
+        }
+        return false;
+    },
+    toBeInstanceOf: (result) => {
+        if (typeof result !== 'function') {
+            return false;
+        }
+        if (expected instanceof result) {
+            return true;
+        }
+        return false;
+    },
+});

package/lib/expect/index.d.ts

@@ -0,0 +1,15 @@
+import { assert } from './assert';
+declare type AssertKey = keyof ReturnType<typeof assert>;
+declare type TruthyAssertObject = {
+    [T in AssertKey]: (value: unknown) => void;
+};
+declare type ReturnObject = TruthyAssertObject & {
+    not: TruthyAssertObject;
+};
+export declare class Expect {
+    private expects;
+    expect(expected: unknown): ReturnObject;
+    clean(): void;
+    isAllPassed(): boolean;
+}
+export {};

package/lib/expect/index.js

@@ -0,0 +1,27 @@
+import { assert } from './assert';
+export class Expect {
+    expects = [];
+    expect(expected) {
+        const assertedObject = assert(expected);
+        const returnObject = {
+            not: {},
+        };
+        Object.keys(assertedObject).forEach((key) => {
+            returnObject[key] = (result) => {
+                this.expects.push(assertedObject[key](result));
+            };
+        });
+        Object.keys(assertedObject).forEach((key) => {
+            returnObject.not[key] = (result) => {
+                this.expects.push(!assertedObject[key](result));
+            };
+        });
+        return returnObject;
+    }
+    clean() {
+        this.expects = [];
+    }
+    isAllPassed() {
+        return this.expects.every(e => e);
+    }
+}

package/lib/main.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/main.js

@@ -0,0 +1,41 @@
+import { BrowserTester } from "./browser-test";
+const html = `
+  <!DOCTYPE html>
+  <html lang="ja">
+  <head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Hello</title>
+    <style>
+      h2 {
+        color: red;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Title1</h1>
+    <h2>Title2</h2>
+  </body>
+  </html>
+`;
+const main = async () => {
+    const browserTest = new BrowserTester({ html, width: 980, height: 980 });
+    browserTest.test('h1,h2 textContent should have right textContent', async (_, doc) => {
+        const h1 = doc.querySelector('h1');
+        const h2 = doc.querySelector('h2');
+        browserTest.expect(h1?.textContent).toBe('Title1');
+        browserTest.expect(h2?.textContent).toBe('Title2');
+    });
+    browserTest.test('title should have right textContent', async (_, doc) => {
+        const title = doc.querySelector('title');
+        browserTest.expect(title?.textContent).toBe('Hello');
+    });
+    browserTest.test('h2 should have red text', async (window, doc) => {
+        const h2 = doc.querySelector('h2');
+        browserTest.expect(window.getComputedStyle(h2).color).toBe('rgb(255, 0, 0)');
+    });
+    const results = await browserTest.run();
+    console.log(results);
+};
+main();

package/package.json

@@ -2,7 +2,7 @@
   "name": "html-browser-tester",
   "main": "./lib/browser-test.js",
   "types": "./lib/browser-test.d.ts",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",

package/.github/release-drafter.yml

@@ -1,22 +0,0 @@
-name-template: 'v$RESOLVED_VERSION 🌈'
-tag-template: 'v$RESOLVED_VERSION'
-exclude-labels:
-  - 'release'
-  - 'auto'
-categories:
-  - title: '🚀 Features'
-    labels:
-      - 'feature'
-      - 'enhancement'
-  - title: '🐛 Bug Fixes'
-    labels:
-      - 'fix'
-      - 'bugfix'
-      - 'bug'
-  - title: '🧰 Maintenance'
-    label: 'chore'
-change-template: '- $TITLE @$AUTHOR (#$NUMBER)'
-change-title-escapes: '\<*_&' # You can add # and @ to disable mentions, and add ` to disable code blocks.
-template: |
-  ## Changes
-  $CHANGES

package/.github/workflows/pr.yml

@@ -1,47 +0,0 @@
-name: PR
-env:
-  CI: true
-# preview環境更新および、stage環境やproduction環境の更新を行うworkflow
-on:
-  push:
-    branches:
-      - master
-      - develop
-  pull_request:
-    branches:
-      - master
-      - develop
-    types:
-      - opened
-      - synchronize
-      - closed
-      - labeled
-      - unlabeled
-    tags:
-      - "!*"
-jobs:
-  release:
-    name: Setup
-    runs-on: ubuntu-latest
-    steps:
-      - name: check label
-        if: |
-          github.event_name == 'pull_request' && 
-          !contains(github.event.pull_request.labels.*.name, 'fix') && 
-          !contains(github.event.pull_request.labels.*.name, 'bugfix')  && 
-          !contains(github.event.pull_request.labels.*.name, 'enhancement')  && 
-          !contains(github.event.pull_request.labels.*.name, 'chore')  && 
-          !contains(github.event.pull_request.labels.*.name, 'feature')  && 
-          !contains(github.event.pull_request.labels.*.name, 'release') &&
-          !contains(github.event.pull_request.labels.*.name, 'auto')
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-          URL: ${{ github.event.pull_request.comments_url }}
-        run: |
-          echo "Please add one of the following labels: fix, bugfix, enhancement, chore, feature, release" >> comments
-          sed -i -z 's/\n/\\n/g' comments
-          curl -X POST \
-              -H "Authorization: token ${GITHUB_TOKEN}" \
-              -d "{\"body\": \"$(cat comments)\"}" \
-              ${URL}
-          exit 1

package/.github/workflows/publish.yml

@@ -1,53 +0,0 @@
-name: Publish
-env:
-  CI: true
-# masterブランチにpushした時のみ実行するワークフロー
-on:
-  push:
-    branches:
-      - master
-    tags:
-      - "!*"
-
-jobs:
-  release:
-    name: Setup
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v1
-      - name: setup Node
-        uses: actions/setup-node@v1
-        with:
-          node-version: 16.x
-          registry-url: 'https://registry.npmjs.org'
-      - name: install
-        run: yarn --frozen-lockfile
-      # まだtagがないバージョンなら、Git Tagをpushする
-      - name: package-version
-        run: node -p -e '`PACKAGE_VERSION=${require("./package.json").version}`' >> $GITHUB_ENV
-      - name: package-version-to-git-tag
-        uses: pkgdeps/action-package-version-to-git-tag@v1
-        with:
-          github_token: ${{ secrets.GITHUB_TOKEN }}
-          github_repo: ${{ github.repository }}
-          git_commit_sha: ${{ github.sha }}
-          git_tag_prefix: ""
-          version: ${{ env.PACKAGE_VERSION }}
-      - name: get-npm-version
-        id: package-version
-        uses: martinbeentjes/npm-get-version-action@master
-      - name: create draft
-        uses: release-drafter/release-drafter@v5
-        with:
-          version: ${{ steps.package-version.outputs.current-version }}
-          name: ${{ steps.package-version.outputs.current-version }}
-          tag: ${{ steps.package-version.outputs.current-version }}
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      - name: build lib
-        run: npm run build:lib
-      - name: publish to npm
-        run: npm publish
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/version-check.yml

@@ -1,26 +0,0 @@
-name: Version Check
-on:
-  pull_request:
-    branches:
-      - master
-    types:
-      - opened
-      - synchronize
-
-jobs:
-  auto-bumping:
-    runs-on: ubuntu-latest
-    steps:
-    - name: checkout
-      uses: actions/checkout@v1
-    - name: setup Node
-      uses: actions/setup-node@v1
-      with:
-        node-version: 16.x
-        registry-url: 'https://npm.pkg.github.com'
-    - name: install
-      run: yarn --frozen-lockfile
-    - name: version check
-      run: BRANCH_NAME=$HEAD_BRANCH node ./utility/version-check.js
-      env:
-        HEAD_BRANCH: ${{ github.head_ref }}

package/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + TS</title>
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

package/src/browser-test.ts

@@ -1,112 +0,0 @@
-import { Expect } from "./expect";
-
-type Option = {
-  html: string;
-  width?: number;
-  height?: number;
-}
-
-type Result = {
-  description: string;
-  result: boolean;
-}
-
-type Test = {
-  description: string;
-  callback: (window: Window, doc: Document) => Promise<void>
-}
-
-export class BrowserTester {
-  private html = '';
-  private width?: number;
-  private height?: number;
-  private iframe!: HTMLIFrameElement;
-  private tests: Test[] = []
-  private expects = new Expect()
-  private beforeEachCallbacks: ((window: Window, doc: Document) => Promise<void>)[] = []
-  private afterEachCallbacks: ((window: Window, doc: Document) => Promise<void>)[] = []
-
-  constructor({
-    html = '',
-    width,
-    height,
-  }: Option) {
-    this.html = html
-    if (width) {
-      this.width = width
-    }
-    if (height) {
-      this.height = height
-    }
-  }
-
-  setBrowserSize(width: number, height: number) {
-    if (width) {
-      this.iframe.width = `${width}px`
-    }
-    if (height) {
-      this.iframe.height = `${height}px`
-    }
-  }
-
-  beforeEach(callback: (window: Window, doc: Document) => Promise<void>) {
-    this.beforeEachCallbacks.push(callback)
-  }
-
-  afterEach(callback: (window: Window, doc: Document) => Promise<void>) {
-    this.afterEachCallbacks.push(callback)
-  }
-
-  test(description: string, callback: (window: Window, doc: Document) => Promise<void>) {
-    this.tests.push({
-      description,
-      callback,
-    })
-  }
-
-  expect(value: unknown) {
-    return this.expects.expect(value)
-  }
-
-  run() {
-    return new Promise<Result[]>((resolve) => {
-      const blob = new Blob(
-        [this.html],
-        { type: "text/html" }
-      );
-      const url = URL.createObjectURL(blob);
-      const iframe = document.createElement('iframe')
-      const body = document.querySelector('body') as HTMLBodyElement
-      this.iframe = iframe
-      iframe.src = url
-      if (this.width && this.height) {
-        iframe.width = `${this.width}px`
-        iframe.height = `${this.height}px`
-      }
-      const iframeCallback = async () => {
-        const results: Result[] = []
-        for (const t of this.tests) {
-          for (const b of this.beforeEachCallbacks) {
-            await b(iframe.contentWindow as Window, iframe.contentDocument as Document)
-          }
-          await t.callback(iframe.contentWindow as Window, iframe.contentDocument as Document)
-          const { description } = t
-          results.push({
-            description,
-            result: this.expects.isAllPassed()
-          })
-          this.expects.clean()
-          for (const a of this.afterEachCallbacks) {
-            await a(iframe.contentWindow as Window, iframe.contentDocument as Document)
-          }
-        }
-        iframe.removeEventListener('load', iframeCallback)
-        URL.revokeObjectURL(url)
-        iframe.remove()
-        resolve(results)
-      }
-      iframe.addEventListener('load', iframeCallback)
-      body.appendChild(iframe)
-    })
-  }
-}

package/src/expect/assert.ts

@@ -1,62 +0,0 @@
-export const assert = (expected: unknown) => ({
-  toBe: (resut: unknown) => {
-    return expected === resut
-  },
-  toBeTruthy: (result: unknown) => {
-    return result === true
-  },
-  toBeFalsy: (result: unknown) => {
-    return result === false
-  },
-  toBeNull: (result: unknown) => {
-    return result === null
-  },
-  toBeUndefined: (result: unknown) => {
-    return result === undefined
-  },
-  toBeDefined: (result: unknown) => {
-    return result !== undefined
-  },
-  toBeNaN: (result: unknown) => {
-    return result === NaN
-  },
-  toContain: (result: unknown) => {
-    if (Array.isArray(expected)) {
-      expected.some(item => item === result)
-    }
-    return false
-  },
-  toBeLessThan: (result: unknown) => {
-    if (typeof expected === 'number' && typeof result === 'number') {
-      return expected < result
-    }
-    return false
-  },
-  toBeGreaterThan: (result: unknown) => {
-    if (typeof expected === 'number' && typeof result === 'number') {
-      return expected > result
-    }
-    return false
-  },
-  toBeLessThanOrEqual: (result: unknown) => {
-    if (typeof expected === 'number' && typeof result === 'number') {
-      return expected <= result
-    }
-    return false
-  },
-  toBeGreaterThanOrEqual: (result: unknown) => {
-    if (typeof expected === 'number' && typeof result === 'number') {
-      return expected >= result
-    }
-    return false
-  },
-  toBeInstanceOf: (result: unknown) => {
-    if (typeof result !== 'function') {
-      return false
-    }
-    if (expected instanceof result) {
-      return true
-    }
-    return false
-  },
-})

package/src/expect/index.ts

@@ -1,40 +0,0 @@
-import { assert } from './assert';
-
-type AssertKey = keyof ReturnType<typeof assert>
-type TruthyAssertObject = { [T in AssertKey]: (value: unknown) => void }
-
-type ReturnObject = 
-  TruthyAssertObject
-  & {
-    not: TruthyAssertObject
-  }
-
-export class Expect {
-  private expects: boolean[] = []
-
-  expect(expected: unknown) {
-    const assertedObject = assert(expected)
-    const returnObject = {
-      not: {},
-    } as ReturnObject;
-    (Object.keys(assertedObject) as AssertKey[]).forEach((key) => {
-      returnObject[key] = (result: unknown) => {
-        this.expects.push(assertedObject[key](result))
-      }
-    })
-    ;(Object.keys(assertedObject) as AssertKey[]).forEach((key) => {
-      returnObject.not[key] = (result: unknown) => {
-        this.expects.push(!assertedObject[key](result))
-      }
-    })
-    return returnObject;
-  }
-
-  clean() {
-    this.expects = []
-  }
-
-  isAllPassed() {
-    return this.expects.every(e => e)
-  }
-}

package/src/main.ts

@@ -1,49 +0,0 @@
-import { BrowserTester } from "./browser-test";
-
-const html = `
-  <!DOCTYPE html>
-  <html lang="ja">
-  <head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Hello</title>
-    <style>
-      h2 {
-        color: red;
-      }
-    </style>
-  </head>
-  <body>
-    <h1>Title1</h1>
-    <h2>Title2</h2>
-  </body>
-  </html>
-`
-
-const main = async () => {
-  const browserTest = new BrowserTester({ html, width: 980, height: 980 })
-
-  browserTest.test('h1,h2 textContent should have right textContent', async (_, doc) => {
-    const h1 = doc.querySelector('h1')
-    const h2 = doc.querySelector('h2')
-    browserTest.expect(h1?.textContent).toBe('Title1')
-    browserTest.expect(h2?.textContent).toBe('Title2')
-  })
-
-  browserTest.test('title should have right textContent', async (_, doc) => {
-    const title = doc.querySelector('title')
-    browserTest.expect(title?.textContent).toBe('Hello')
-  })
-
-  browserTest.test('h2 should have red text', async (window, doc) => {
-    const h2 = doc.querySelector('h2') as HTMLHeadingElement
-    browserTest.expect(window.getComputedStyle(h2).color).toBe('rgb(255, 0, 0)')
-  })
-
-  const results = await browserTest.run()
-
-  console.log(results)
-}
-
-main()

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/utility/version-check.js

@@ -1,10 +0,0 @@
-const pkg = require("../package.json");
-
-const branch = process.env.BRANCH_NAME;
-const [type, version] = branch.split("/");
-
-console.log(pkg.version, version);
-
-if (pkg.version !== version) {
-  throw new Error("version not matched");
-}