test: add playwright

.github/workflows/test.yml

@@ -18,6 +18,7 @@ jobs:
           bun-version: 1.1.0
       - name: Install dependencies, build, and test
         run: bun install
+      - run: bunx playwright install
       - run: bun run build
       - run: bun run bundlewatch
       - run: bun run test

index.d.ts

@@ -1,4 +1,4 @@
 export default function diff(
   oldNode: Node,
-  reader: ReadableStreamDefaultReader<Uint8Array>,
+  reader: ReadableStreamDefaultReader<unknown>,
 ): Promise<void>;

package.json

@@ -53,6 +53,7 @@
   "devDependencies": {
     "typescript": "5.4.3",
     "@types/bun": "1.0.12",
-    "bundlewatch": "0.3.3"
+    "bundlewatch": "0.3.3",
+    "playwright": "1.42.1"
   }
 }

src/index.test.ts

@@ -0,0 +1,48 @@
+import { describe, beforeAll, beforeEach, afterEach, afterAll, it, expect } from 'bun:test';
+import { chromium, type Browser, type Page } from 'playwright'; 
+import diff from './index';
+import {join} from 'node:path';
+
+const transpiler = new Bun.Transpiler({ loader: 'ts', target: 'browser' });
+const content = await transpiler.transform((await Bun.file(join(import.meta.dir, 'index.ts')).text()).replace('export default', ''));
+
+describe('Diffing Algorithm Test', () => {
+  let browser: Browser;
+  let page: Page;
+
+  beforeAll(async () => {
+    browser = await chromium.launch();
+  });
+
+  beforeEach(async () => {
+    page = await browser.newPage();
+  })
+
+  afterEach(async () => {
+    await page.close();
+  });
+
+  afterAll(async () => {
+    await browser.close();
+  });
+
+  it('should update the DOM correctly', async () => {
+    await page.setContent('<div id="test">Old Node</div>');
+    await page.evaluate(async ([content]) => {
+      eval(content)
+      const encoder = new TextEncoder();
+      const readable = new ReadableStream({ start: (controller) => {
+        controller.enqueue(encoder.encode('<div id="test">'));
+        controller.enqueue(encoder.encode('New Node Content'));
+        controller.enqueue(encoder.encode("</div>"));
+        controller.close();
+      }});
+      const reader = readable.getReader();
+
+      await diff(document.getElementById('test')!, reader)
+    }, [content]);
+
+    const newNode = await page.$eval('#test', (node: Node) => node.textContent!.trim());
+    expect(newNode).toBe('New Node Content');
+  });
+});

src/index.ts

@@ -18,7 +18,7 @@ const decoder = new TextDecoder();
 
 export default async function diff(
   oldNode: Node,
-  reader: ReadableStreamDefaultReader<Uint8Array>,
+  reader: ReadableStreamDefaultReader<unknown>,
 ) {
   const walker = await htmlStreamWalker(reader);
   const newNode = walker.rootNode!;
@@ -175,7 +175,7 @@ function getKey(node: Node) {
 }
 
 async function htmlStreamWalker(
-  streamReader: ReadableStreamDefaultReader<Uint8Array>,
+  streamReader: ReadableStreamDefaultReader<unknown>,
 ): Promise<Walker> {
   const doc = document.implementation.createHTMLDocument();
   let closed = false;