Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 3 commits into from
Mar 24, 2020
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0499c4b
fix: fix empty href prop
adamszalapski Mar 23, 2020
5e76da5
chore: add tests to check if href is empty or not
adamszalapski Mar 23, 2020
4430c94
chore: update test snapshots
adamszalapski Mar 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
Binary file added ...s-link-default-bolt-link-w-o-shadow-dom-renders-and-without-url-prop-2-snap.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...-link-default-bolt-link-with-shadow-dom-renders-and-without-url-prop-3-snap.png
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
85 changes: 85 additions & 0 deletions packages/components/bolt-link/__tests__/__snapshots__/link.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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%;">
(
Expand Down
66 changes: 66 additions & 0 deletions packages/components/bolt-link/__tests__/link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion packages/components/bolt-link/src/link.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
>`;
}
Expand Down