working on the browser implementation

dnotes · Oct 9, 2024 · a4d6de4 · a4d6de4
1 parent 8f5f661
commit a4d6de4
Show file tree

Hide file tree

Showing 8 changed files with 111 additions and 4 deletions.
diff --git a/packages/browser/README.md b/packages/browser/README.md
@@ -0,0 +1,4 @@
+# Vitest: Browser Mode
+
+This is the library for testing quickpickle using Vitest with browser mode.
+
diff --git a/packages/browser/package.json b/packages/browser/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "browser",
+  "version": "0.0.1",
+  "description": "This is the library for testing quickpickle with Vitest in browser mode",
+  "private": true,
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@vitest/browser": "^2.1.2",
+    "quickpickle": "^1.1.2",
+    "vitest": "^2.1.2"
+  }
+}
diff --git a/packages/browser/tests/browser.feature b/packages/browser/tests/browser.feature
@@ -0,0 +1,5 @@
+Feature: Vitest in "browser" mode
+
+  Scenario: Can we run Vitest in "browser" mode?
+    Given I go to "./browser.test.html"
+    Then I should see "Acid3"
diff --git a/packages/browser/tests/browser.steps.ts b/packages/browser/tests/browser.steps.ts
@@ -0,0 +1,12 @@
+import { Given, When, Then, DataTable } from "quickpickle";
+import { QuickPickleWorld } from "../../main/src/world";
+
+import { page, commands, server } from '@vitest/browser/context'
+
+When('I go to {string}', async (world:QuickPickleWorld,url) => {
+  await commands.readFile(url)
+})
+
+Then('I should see {string}', async (world:QuickPickleWorld,text) => {
+  await page.getByText(text)
+})
diff --git a/packages/browser/tests/browser.test.html b/packages/browser/tests/browser.test.html
@@ -0,0 +1,31 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Browser Test Page</title>
+</head>
+<body>
+    <h1>Browser Test Page</h1>
+
+    <p>This is a simple test page for browser functionality.</p>
+
+    <h2>Test Form</h2>
+    <form id="testForm">
+        <label for="name">Name:</label>
+        <input type="text" id="name" name="name" required><br><br>
+
+        <label for="email">Email:</label>
+        <input type="email" id="email" name="email" required><br><br>
+
+        <label for="message">Message:</label><br>
+        <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>
+
+        <input type="submit" value="Submit">
+    </form>
+
+    <h3>Additional Information</h3>
+    <p>This page is used for testing various browser functionalities and interactions.</p>
+</body>
+</html>
diff --git a/packages/browser/vitest.workspace.ts b/packages/browser/vitest.workspace.ts
@@ -0,0 +1,13 @@
+export default [{
+  test: {
+    include: [ 'tests/*.feature' ],
+    setupFiles: [ 'tests/browser.steps.ts' ],
+    environment: 'jsdom',
+    browser: {
+      enabled: true,
+      name: 'chromium',
+      provider: 'playwright',
+      ui: true,
+    }
+  }
+}]
diff --git a/packages/main/vitest.workspace.ts b/packages/main/vitest.workspace.ts
@@ -12,5 +12,5 @@ export default defineWorkspace([
     test: {
       include : [ './tests/*.test.ts' ],
     }
-  }
+  },
 ])
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,4 @@
		# Vitest: Browser Mode

		This is the library for testing quickpickle using Vitest with browser mode.
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,5 +12,5 @@ export default defineWorkspace([ @@
         test: {
           include : [ './tests/*.test.ts' ],
         }
-      }
+      },
     ])