Add two tests for scramjet, many more coming soon

package.json

@@ -4,6 +4,7 @@
 	"description": "An experimental web proxy that aims to be the successor to Ultraviolet",
 	"main": "./lib/index.cjs",
 	"types": "./lib/index.d.js",
+	"type": "module",
 	"repository": {
 		"type": "git",
 		"url": "https://github.com/MercuryWorkshop/scramjet"
@@ -16,7 +17,8 @@
 		"pub": "npm publish --no-git-checks --access public",
 		"format": "prettier --config .prettierrc.js --write .",
 		"lint": "eslint ./src/",
-		"lint:fix": "eslint ./src/ --fix"
+		"lint:fix": "eslint ./src/ --fix",
+		"test": "cd tests && npx playwright test"
 	},
 	"files": [
 		"dist",
@@ -50,7 +52,6 @@
 		"typescript": "^5.6.3",
 		"wisp-server-node": "^1.1.7"
 	},
-	"type": "module",
 	"dependencies": {
 		"@mercuryworkshop/bare-mux": "^2.1.5",
 		"dom-serializer": "^2.0.0",

tests/playwright.config.ts

@@ -13,23 +13,16 @@ import { defineConfig, devices } from "@playwright/test";
  */
 export default defineConfig({
   testDir: "./tests",
-  /* Run tests in files in parallel */
   fullyParallel: true,
-  /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
-  /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
-  /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
-  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  retries: 0,
   reporter: "html",
+  timeout: 20000,
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
-    /* Base URL to use in actions like `await page.goto('/')`. */
-    // baseURL: 'http://127.0.0.1:3000',
-
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
     trace: "on-first-retry",
+    actionTimeout: 5000,
   },
 
   /* Configure projects for major browsers */
@@ -38,10 +31,9 @@ export default defineConfig({
       name: "chromium",
       use: { ...devices["Desktop Chrome"] },
     },
-
     // {
-    //   name: 'firefox',
-    //   use: { ...devices['Desktop Firefox'] },
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
     // },
   ],
 
@@ -49,6 +41,6 @@ export default defineConfig({
   webServer: {
     command: "cd .. && pnpm run dev",
     url: "http://127.0.0.1:1337",
-    reuseExistingServer: !process.env.CI,
+    reuseExistingServer: true,
   },
 });

tests/tests/scramjet.spec.ts

@@ -1,12 +1,30 @@
 import { test, expect } from "@playwright/test";
+import { setupPage } from "./setupPage";
 
 test.beforeEach(async ({ page }) => {
-    await page.goto("http://localhost:1337");
+    await page.goto("http://localhost:1337/");
 });
 
-test.describe("Page loaded", () => {
-    test("should display the title", async ({ page }) => {
-        const title = await page.locator("h1").textContent();
-        expect(title).toBe("Percury Unblocker");
+test.describe("YouTube", () => {
+    test("The front page can load.", async ({ page }) => {
+        const frame = await setupPage(page, "https://www.youtube.com/");
+
+        // Wait for the page inside the iframe to load
+
+        const logo = await frame.locator("#logo-icon > span > div").first().waitFor({ state: "visible" });
+        expect(logo).not.toBeNull();
+    });
+
+    test("The search page can load.", async ({ page }) => {
+        const frame = await setupPage(page, "https://www.youtube.com/results?search_query=bad+apple");
+
+        const title = await frame.locator("#video-title > yt-formatted-string").first().textContent({ timeout: 5000 });
+        const thumbnailSelector = "#contents > ytd-video-renderer:nth-child(1) > #dismissible > ytd-thumbnail > a > yt-image > img";
+        await frame.locator(thumbnailSelector).waitFor({ state: "visible" });
+
+        const thumbnailSrc = await frame.locator(thumbnailSelector).getAttribute("src", { timeout: 5000 });
+        
+        expect(title).not.toBeNull();
+        expect(thumbnailSrc).not.toBeNull();
     });
 })

tests/tests/setupPage.ts

@@ -0,0 +1,21 @@
+/* eslint-disable no-async-promise-executor */
+import { expect, FrameLocator, Page } from "@playwright/test";
+
+export function setupPage(page: Page, url: string): Promise<FrameLocator> {
+    return new Promise(async (resolve) => {
+        await page.waitForSelector(".version > b");
+        const bar = page.locator(".bar");
+        const title = await page.locator(".version > b").textContent();
+        const frame = page.frameLocator("iframe");
+        expect(title).toBe("scramjet");
+
+        expect(bar).not.toBeNull();
+
+        await bar.fill(url);
+
+        await page.waitForTimeout(1000);
+        
+        await bar.press("Enter");
+        resolve(frame);
+    });
+}