fix: solve error with anchor without href (#523)

Author: franpeza

src/lib/web-worker/worker-anchor.ts

@@ -16,6 +16,13 @@ export const patchHTMLAnchorElement = (WorkerHTMLAnchorElement: any, env: WebWor
 
         if (typeof value !== 'string') {
           href = getter(this, ['href']);
+          if (href === '') {
+            if (anchorProp === 'protocol') {
+              return ':';
+            }
+            return '';
+          }
+
           setInstanceStateValue(this, StateProp.url, href);
           value = (new URL(href) as any)[anchorProp];
         }

tests/platform/anchor/anchor.spec.ts

@@ -7,6 +7,12 @@ test('anchor', async ({ page }) => {
   const testAnchor = page.locator('#testAnchor');
   await expect(testAnchor).toHaveText('/tests/platform/anchor/some/other/path');
 
+  await page.waitForSelector('.emptyAnchorContainer');
+  const emptyAnchorContainer = page.locator('#emptyAnchorContainer');
+  await expect(emptyAnchorContainer).toHaveText(
+    'Anchor properties: {"hash":"","host":"","hostname":"","href":"","origin":"","pathname":"","port":"","protocol":":","search":""}'
+  );
+
   await page.waitForSelector('.testAnchorConstructor');
   const testAnchorConstructor = page.locator('#testAnchorConstructor');
   await expect(testAnchorConstructor).toHaveText('HTMLAnchorElement HTMLAnchorElement');
@@ -34,7 +40,7 @@ test('anchor', async ({ page }) => {
   await page.waitForSelector('.testSetHref2');
   const testSetHref2 = page.locator('#testSetHref2');
   const desiredLocalUrl = new URL(page.url());
-  desiredLocalUrl.pathname = '/local-pathname'
+  desiredLocalUrl.pathname = '/local-pathname';
   await expect(testSetHref2).toHaveText(desiredLocalUrl.toString());
 
   await page.waitForSelector('.testGetSearch');

tests/platform/anchor/index.html

@@ -76,6 +76,26 @@ <h1>Anchor</h1>
         </script>
       </li>
 
+      <li>
+        <strong>get empty a.href properties</strong>
+        <div id="emptyAnchorContainer"></div>
+        <script type="text/partytown">
+          (function () {
+            try {
+              const container = document.getElementById('emptyAnchorContainer');
+              container.className = 'emptyAnchorContainer';
+              const elm = document.createElement('a');
+              const { hash, host, hostname, href, origin, pathname, port, protocol, search } = elm;
+              elm.href = pathname;
+              container.textContent = 'Anchor properties: ' + JSON.stringify({ hash, host, hostname, href, origin, pathname, port, protocol, search });
+            } catch (err) {
+                container.textContent = 'An error ocurred: ' + err.message;
+                console.error(err);
+            }
+          })();
+        </script>
+      </li>
+
       <li>
         <strong>constructor.name</strong>
         <div><a id="testAnchorConstructor"></a></div>
@@ -183,8 +203,8 @@ <h1>Anchor</h1>
       <li>
         <strong>get <a id="getSearch" href="https://builder.io/?a=42&b=23">search</a></strong>
         <div>
-          <strong>search:</strong><span id="testGetSearch"></span>
-          <strong>href:</strong><span id="testGetSearchHref"></span>
+          <strong>search:</strong><span id="testGetSearch"></span> <strong>href:</strong
+          ><span id="testGetSearchHref"></span>
         </div>
         <script type="text/partytown">
           (function () {
@@ -203,8 +223,8 @@ <h1>Anchor</h1>
       <li>
         <strong>set <a id="setSearch" href="https://builder.io/?a=42&b=23">search</a></strong>
         <div>
-          <strong>search:</strong><span id="testSetSearch"></span>
-          <strong>href:</strong><span id="testSetSearchHref"></span>
+          <strong>search:</strong><span id="testSetSearch"></span> <strong>href:</strong
+          ><span id="testSetSearchHref"></span>
         </div>
         <script type="text/partytown">
           (function () {