feat: form elements (#95)

QwikDev · Mar 3, 2022 · 9c00b4d · 9c00b4d · vercel · Mar 3, 2022
1 parent 094c070
commit 9c00b4d
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 0 deletions.
diff --git a/src/lib/web-worker/worker-form.ts b/src/lib/web-worker/worker-form.ts
@@ -0,0 +1,10 @@
+import { definePrototypePropertyDescriptor } from '../utils';
+import type { WorkerNode } from '../types';
+import { cachedProps } from './worker-constructors';
+
+export const patchHTMLFormElement = (WorkerHTMLFormElement: any) => {
+  const HTMLFormDescriptorMap: PropertyDescriptorMap & ThisType<WorkerNode> = {};
+
+  definePrototypePropertyDescriptor(WorkerHTMLFormElement, HTMLFormDescriptorMap);
+  cachedProps(WorkerHTMLFormElement, 'elements');
+};
diff --git a/src/lib/web-worker/worker-window.ts b/src/lib/web-worker/worker-window.ts
@@ -68,6 +68,7 @@ import {
 } from './worker-document';
 import { patchElement } from './worker-element';
 import { patchHTMLAnchorElement } from './worker-anchor';
+import { patchHTMLFormElement } from './worker-form';
 import { patchHTMLIFrameElement } from './worker-iframe';
 import { patchHTMLScriptElement } from './worker-script';
 import { patchSvgElement } from './worker-svg';
@@ -311,6 +312,7 @@ export const createWindow = (
         patchDocument(win.Document, isSameOrigin);
         patchDocumentFragment(win.DocumentFragment);
         patchHTMLAnchorElement(win.HTMLAnchorElement);
+        patchHTMLFormElement(win.HTMLFormElement);
         patchHTMLIFrameElement(win.HTMLIFrameElement);
         patchHTMLScriptElement(win.HTMLScriptElement);
         patchSvgElement(win.SVGGraphicsElement);

diff --git a/tests/index.html b/tests/index.html
@@ -78,6 +78,7 @@ <h2>Platform Tests</h2>
       <li><a href="/tests/platform/element-style/">Element Style</a></li>
       <li><a href="/tests/platform/event/">Event</a></li>
       <li><a href="/tests/platform/fetch/">Fetch/XHR</a></li>
+      <li><a href="/tests/platform/form/">Form</a></li>
       <li><a href="/tests/platform/history/">History</a></li>
       <li><a href="/tests/platform/iframe/">IFrame</a></li>
       <li><a href="/tests/platform/image/">Image</a></li>

diff --git a/tests/platform/form/form.spec.ts b/tests/platform/form/form.spec.ts
@@ -0,0 +1,13 @@
+import { test, expect } from '@playwright/test';
+
+test('form', async ({ page }) => {
+  await page.goto('/tests/platform/form/');
+
+  await page.waitForSelector('.completed');
+
+  const testFormMethod = page.locator('#testFormMethod');
+  await expect(testFormMethod).toHaveText('get');
+
+  const testFormElements = page.locator('#testFormElements');
+  await expect(testFormElements).toHaveText('1');
+});
diff --git a/tests/platform/form/index.html b/tests/platform/form/index.html
@@ -0,0 +1,94 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="description" content="Partytown Test Page" />
+    <title>Form</title>
+    <style>
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
+          Apple Color Emoji, Segoe UI Emoji;
+        font-size: 12px;
+      }
+      h1 {
+        margin: 0 0 15px 0;
+      }
+      ul {
+        list-style-type: none;
+        margin: 0;
+        padding: 0;
+      }
+      a {
+        display: block;
+        padding: 16px 8px;
+      }
+      a:link,
+      a:visited {
+        text-decoration: none;
+        color: blue;
+      }
+      a:hover {
+        background-color: #eee;
+      }
+      li {
+        display: flex;
+        margin: 15px 0;
+      }
+      li strong,
+      li code,
+      li button {
+        white-space: nowrap;
+        flex: 1;
+        margin: 0 5px;
+      }
+    </style>
+    <script>
+      partytown = {
+        logCalls: true,
+        logGetters: true,
+        logSetters: true,
+        logStackTraces: false,
+        logScriptExecution: true,
+      };
+    </script>
+    <script src="/~partytown/debug/partytown.js"></script>
+  </head>
+  <body>
+    <h1>Form</h1>
+    <ul>
+      <li>
+        <strong>form, method</strong>
+        <code id="testFormMethod"></code>
+        <script type="text/partytown">
+          (function () {
+            const form = document.createElement('form');
+            document.getElementById('testFormMethod').textContent = form.method;
+          })();
+        </script>
+      </li>
+
+      <li>
+        <strong>form, elements</strong>
+        <code id="testFormElements"></code>
+        <script type="text/partytown">
+          (function () {
+            const form = document.createElement('form');
+            const input = document.createElement('input');
+            form.appendChild(input);
+            document.getElementById('testFormElements').textContent = form.elements.length;
+          })();
+        </script>
+      </li>
+
+      <script type="text/partytown">
+        (function () {
+          document.body.classList.add('completed');
+        })();
+      </script>
+    </ul>
+
+    <hr />
+    <p><a href="/tests/">All Tests</a></p>
+  </body>
+</html>