html-browser-tester 0.0.1

package/.github/release-drafter.yml

@@ -0,0 +1,22 @@
+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

@@ -0,0 +1,47 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -0,0 +1,26 @@
+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/README.md

@@ -0,0 +1,63 @@
+# HTML Browser Tester
+
+HTML Based browser tester without Node.js
+
+## Install
+
+```
+npm install html-browser-tester
+```
+
+## Example
+
+```js
+import { BrowserTester } from 'html-browser-tester'
+
+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>
+      h1 {
+        color: #000;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Title1</h1>
+    <h2>Title2</h2>
+  </body>
+  </html>
+`
+
+const main = async () => {
+  const browserTester = new BrowserTesterer({ html, width: 980, height: 980 })
+
+  browserTester.test('h1,h2 textContent should have right textContent', async (_, doc) => {
+    const h1 = doc.querySelector('h1')
+    const h2 = doc.querySelector('h2')
+    browserTester.expect(h1?.textContent).toBe('Title1')
+    browserTester.expect(h2?.textContent).toBe('Title2')
+  })
+
+  browserTester.test('title should have right textContent', async (_, doc) => {
+    const title = doc.querySelector('title')
+    browserTester.expect(title?.textContent).toBe('Hello')
+  })
+
+  browserTester.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 browserTester.run()
+
+  console.log(results)
+}
+
+main()
+```

package/index.html

@@ -0,0 +1,13 @@
+<!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/package.json

@@ -0,0 +1,16 @@
+{
+  "name": "html-browser-tester",
+  "main": "./lib/browser-test.js",
+  "types": "./lib/browser-test.d.ts",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite",
+    "preview": "vite preview",
+    "build:lib": "tsc"
+  },
+  "devDependencies": {
+    "typescript": "^4.6.4",
+    "vite": "^3.2.3"
+  },
+  "dependencies": {}
+}

package/src/browser-test.ts

@@ -0,0 +1,112 @@
+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

@@ -0,0 +1,62 @@
+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

@@ -0,0 +1,40 @@
+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

@@ -0,0 +1,49 @@
+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

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

package/tsconfig.json

@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ES2022",
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "declaration": true,
+    "declarationDir": "./lib",
+    "moduleResolution": "Node",
+    "strict": true,
+    "outDir": "./lib",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "noEmit": false,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "skipLibCheck": true
+  },
+  "include": ["src"]
+}

package/utility/version-check.js

@@ -0,0 +1,10 @@
+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");
+}