html-browser-tester 0.0.12 → 0.0.14

package/README.md

@@ -1,6 +1,6 @@
 # HTML Browser Tester
 
-HTML Based browser tester without Node.js
+HTML Based browser tester without Node.js, Especially for HTML, CSS tests
 
 ## Install
 

package/lib/browser-test.d.ts

@@ -1,3 +1,4 @@
+import { Spy } from "./spy";
 declare type Option = {
     html: string;
     width?: number;
@@ -17,42 +18,47 @@ export declare class BrowserTester {
     private beforeEachCallbacks;
     private afterEachCallbacks;
     constructor({ html, width, height, }: Option);
+    spyOn<T extends string>(obj: Record<T, Function>, key: T): Spy<T>;
     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;
     it(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;
-        toMatch: (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;
+    expect(...args: 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;
+        toMatch: (...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;
+        toHaveBeenCalled: (...value: unknown[]) => void;
+        toHaveBeenCalledWith: (...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;
-            toMatch: (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;
+            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;
+            toMatch: (...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;
+            toHaveBeenCalled: (...value: unknown[]) => void;
+            toHaveBeenCalledWith: (...value: unknown[]) => void;
         };
     };
     clearTests(): void;

package/lib/browser-test.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BrowserTester = void 0;
 const expect_1 = require("./expect");
+const spy_1 = require("./spy");
 class BrowserTester {
     html = '';
     width;
@@ -20,6 +21,9 @@ class BrowserTester {
             this.height = height;
         }
     }
+    spyOn(obj, key) {
+        return new spy_1.Spy(obj, key);
+    }
     setBrowserSize(width, height) {
         if (width) {
             this.iframe.width = `${width}px`;
@@ -46,15 +50,16 @@ class BrowserTester {
             callback,
         });
     }
-    expect(value) {
-        return this.expects.expect(value);
+    expect(...args) {
+        // @ts-ignore
+        return this.expects.expect(...args);
     }
     clearTests() {
         this.tests = [];
     }
     evaluate(code) {
-        const func = new Function('test', 'it', 'expect', 'beforeEach', 'afterEach', 'setBrowserSize', code);
-        func(this.test.bind(this), this.it.bind(this), this.expect.bind(this), this.beforeEach.bind(this), this.afterEach.bind(this), this.setBrowserSize.bind(this));
+        const func = new Function('test', 'it', 'expect', 'beforeEach', 'afterEach', 'setBrowserSize', 'spyOn', code);
+        func(this.test.bind(this), this.it.bind(this), this.expect.bind(this), this.beforeEach.bind(this), this.afterEach.bind(this), this.setBrowserSize.bind(this), this.spyOn);
     }
     run() {
         return new Promise((resolve) => {

package/lib/expect/assert.d.ts

@@ -13,4 +13,6 @@ export declare const assert: (expected: unknown) => {
     toBeLessThanOrEqual: (result: unknown) => boolean;
     toBeGreaterThanOrEqual: (result: unknown) => boolean;
     toBeInstanceOf: (result: unknown) => boolean;
+    toHaveBeenCalled: () => boolean;
+    toHaveBeenCalledWith: (...args: any[]) => boolean;
 };

package/lib/expect/assert.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.assert = void 0;
+const spy_1 = require("../spy");
 const assert = (expected) => ({
     toBe: (resut) => {
         return expected === resut;
@@ -70,5 +71,25 @@ const assert = (expected) => ({
         }
         return false;
     },
+    toHaveBeenCalled: () => {
+        if (!(expected instanceof spy_1.Spy)) {
+            return false;
+        }
+        if (expected.called) {
+            return true;
+        }
+        return false;
+    },
+    toHaveBeenCalledWith: (...args) => {
+        if (!(expected instanceof spy_1.Spy)) {
+            return false;
+        }
+        if (!expected.calledArgs.length) {
+            return false;
+        }
+        return expected.calledArgs.some(arg => {
+            return arg.every((a, i) => a === args[i]);
+        });
+    }
 });
 exports.assert = assert;

package/lib/expect/index.d.ts

@@ -1,7 +1,7 @@
 import { assert } from './assert';
 declare type AssertKey = keyof ReturnType<typeof assert>;
 declare type TruthyAssertObject = {
-    [T in AssertKey]: (value: unknown) => void;
+    [T in AssertKey]: (...value: unknown[]) => void;
 };
 declare type ReturnObject = TruthyAssertObject & {
     not: TruthyAssertObject;

package/lib/expect/index.js

@@ -10,13 +10,15 @@ class Expect {
             not: {},
         };
         Object.keys(assertedObject).forEach((key) => {
-            returnObject[key] = (result) => {
-                this.expects.push(assertedObject[key](result));
+            returnObject[key] = (...result) => {
+                // @ts-ignore
+                this.expects.push(assertedObject[key](...result));
             };
         });
         Object.keys(assertedObject).forEach((key) => {
-            returnObject.not[key] = (result) => {
-                this.expects.push(!assertedObject[key](result));
+            returnObject.not[key] = (...result) => {
+                // @ts-ignore
+                this.expects.push(!assertedObject[key](...result));
             };
         });
         return returnObject;

package/lib/main.d.ts

@@ -1 +1,6 @@
+declare global {
+    interface Window {
+        console: Console;
+    }
+}
 export {};

package/lib/main.js

@@ -19,6 +19,11 @@ const html = `
     <h1>Title1</h1>
     <h2>Title2</h2>
   </body>
+  <script>
+    function main() {
+      console.log('hello')
+    }
+  </script>
   </html>
 `;
 const main = async () => {
@@ -37,10 +42,13 @@ const main = async () => {
         const h2 = doc.querySelector('h2');
         browserTest.expect(window.getComputedStyle(h2).color).toBe('rgb(255, 0, 0)');
     });
-    // browserTest.test('can insert text to h5', async (window, doc) => {
-    //   const h5 = doc.querySelector('h5') as HTMLHeadingElement
-    //   h5.textContent = 'aaaa'
-    // })
+    browserTest.test('console.log to have been called with `hello`', async (window) => {
+        const spy = browserTest.spyOn(window.console, 'log');
+        // @ts-ignore
+        window.main();
+        browserTest.expect(spy).toHaveBeenCalled();
+        browserTest.expect(spy).toHaveBeenCalledWith('hello');
+    });
     const results = await browserTest.run();
     console.log(results);
 };

package/lib/spy.d.ts

@@ -0,0 +1,8 @@
+export interface SpyObject extends Record<string, any> {
+    (this: Record<string, unknown>, ...args: Array<any>): unknown;
+}
+export declare class Spy<T extends string> {
+    called: boolean;
+    calledArgs: Array<any>[];
+    constructor(obj: Record<T, Function>, methodName: T);
+}

package/lib/spy.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Spy = void 0;
+class Spy {
+    called = false;
+    calledArgs = [];
+    constructor(obj, methodName) {
+        const savedFn = obj[methodName];
+        const spy = this;
+        obj[methodName] = function () {
+            const args = Array.from(arguments);
+            spy.called = true;
+            spy.calledArgs.push(args);
+            savedFn.apply(obj, args);
+        };
+    }
+}
+exports.Spy = Spy;

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.12",
+  "version": "0.0.14",
   "scripts": {
     "dev": "vite",
     "preview": "vite preview",