Merge pull request #1788 from boltdesignsystem/bugfix/bolt-link-preve…

…nt-empty-href-on-web-component

Prevent empty `href` attribute on web component version of bolt-link

packages/components/bolt-link/__tests__/__snapshots__/link.js.snap

@@ -69,6 +69,70 @@ exports[`link Default <bolt-link> w/o Shadow DOM renders 3`] = `
 </div>
 `;
 
+exports[`link Default <bolt-link> w/o Shadow DOM renders and without url prop 1`] = `
+<div>
+  <bolt-link no-shadow>
+    <a class="c-bolt-link c-bolt-link--display-inline c-bolt-link--valign-center"
+       target="_self"
+    >
+      <slot name="before">
+      </slot>
+      <span class="c-bolt-link__text">
+        This is a link without url prop
+      </span>
+      <slot name="after">
+      </slot>
+    </a>
+  </bolt-link>
+</div>
+`;
+
+exports[`link Default <bolt-link> w/o Shadow DOM renders and without url prop 3`] = `
+<div
+  style=""
+>
+  <bolt-link
+    no-shadow=""
+    style=""
+  >
+    <!---->
+    <!---->
+  </bolt-link>
+  <a
+    class="c-bolt-link c-bolt-link--display-inline c-bolt-link--valign-center"
+    style=""
+    target="_self"
+  >
+    <!---->
+    <!---->
+    <slot
+      name="before"
+      style=""
+    />
+    <!---->
+    <span
+      class="c-bolt-link__text"
+      style=""
+    >
+      <!---->
+      <!---->
+      This is a link without url prop
+      <!---->
+      <!---->
+    </span>
+    <!---->
+    <slot
+      name="after"
+      style=""
+    />
+    <!---->
+    <!---->
+  </a>
+  <!---->
+  <!---->
+</div>
+`;
+
 exports[`link Default <bolt-link> with Shadow DOM renders 1`] = `
 <a href="http://pega.com"
    class="c-bolt-link c-bolt-link--display-inline c-bolt-link--valign-center"
@@ -91,6 +155,27 @@ exports[`link Default <bolt-link> with Shadow DOM renders 2`] = `
 </bolt-link>
 `;
 
+exports[`link Default <bolt-link> with Shadow DOM renders and without url prop 1`] = `
+<a class="c-bolt-link c-bolt-link--display-inline c-bolt-link--valign-center"
+   target="_self"
+>
+  <slot name="before">
+  </slot>
+  <span class="c-bolt-link__text">
+    <slot>
+    </slot>
+  </span>
+  <slot name="after">
+  </slot>
+</a>
+`;
+
+exports[`link Default <bolt-link> with Shadow DOM renders and without url prop 2`] = `
+<bolt-link>
+  Link Test without url attr -- Outer HTML
+</bolt-link>
+`;
+
 exports[`link Default <bolt-link> with Shadow DOM renders with no extra whitespace 1`] = `
 <div style="font-size: 300%;">
   (

packages/components/bolt-link/__tests__/link.js

@@ -189,6 +189,72 @@ describe('link', () => {
     });
   });
 
+  test('Default <bolt-link> w/o Shadow DOM renders and without url prop', async function() {
+    const renderedLinkHTML = await page.evaluate(async () => {
+      document.body.insertAdjacentHTML(
+        'beforeend',
+        '<div><bolt-link no-shadow>This is a link without url prop' +
+          '</bolt-link></div>',
+      );
+      const link = document.querySelector('bolt-link');
+      await link.updateComplete;
+      return link.parentNode.outerHTML;
+    });
+    expect(renderedLinkHTML).toMatchSnapshot();
+
+    const renderedHTML = await html(renderedLinkHTML);
+
+    expect(renderedHTML.hasAttribute('href')).toBe(false);
+    expect(
+      renderedHTML
+        .querySelector('.c-bolt-link')
+        .classList.contains('c-bolt-link--display-inline'),
+    ).toBe(true);
+
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot({
+      failureThreshold: '0.01',
+      failureThresholdType: 'percent',
+    });
+
+    expect(renderedHTML).toMatchSnapshot();
+  });
+
+  test('Default <bolt-link> with Shadow DOM renders and without url prop', async function() {
+    const defaultLinkShadowRoot = await page.evaluate(async () => {
+      document.body.insertAdjacentHTML(
+        'beforeend',
+        '<bolt-link>Link Test without url prop -- Shadow Root HTML</bolt-link>',
+      );
+      const link = document.querySelector('bolt-link');
+      await link.updateComplete;
+      return link.renderRoot.innerHTML;
+    });
+    expect(defaultLinkShadowRoot).toMatchSnapshot();
+
+    const defaultLinkOuter = await page.evaluate(async () => {
+      const link = document.createElement('bolt-link');
+      link.textContent = 'Link Test without url attr -- Outer HTML';
+      document.body.appendChild(link);
+      await link.updateComplete;
+      return link.outerHTML;
+    });
+    expect(defaultLinkOuter).toMatchSnapshot();
+
+    const renderedHTML = await html(defaultLinkOuter);
+    expect(renderedHTML.hasAttribute('href')).toBe(false);
+    expect(renderedHTML.textContent).toEqual(
+      'Link Test without url attr -- Outer HTML',
+    );
+
+    const image = await page.screenshot();
+
+    expect(image).toMatchImageSnapshot({
+      failureThreshold: '0.01',
+      failureThresholdType: 'percent',
+    });
+  });
+
   test('Default <bolt-link> with Shadow DOM renders with no extra whitespace', async function() {
     const defaultLinkOuter = await page.evaluate(async () => {
       // Include huge inline font-size style to increase visibility of any unexpected whitespace

packages/components/bolt-link/src/link.js

@@ -94,7 +94,7 @@ class BoltLink extends BoltActionElement {
     } else {
       // [1]
       // prettier-ignore
-      renderedLink = html`<a href="${this.url}" class="${classes}" target="${anchorTarget}"
+      renderedLink = html`<a href="${ifDefined(hasUrl ? this.url : undefined)}" class="${classes}" target="${anchorTarget}"
           >${innerSlots}</a
         >`;
     }