261 lines
7.9 KiB
JavaScript
261 lines
7.9 KiB
JavaScript
import { expect, fixture, fixtureSync, aTimeout, html } from '@open-wc/testing';
|
|
import { until } from '@lion/core';
|
|
import { icons } from '../src/icons.js';
|
|
|
|
import heartSvg from './heart.svg.js';
|
|
import hammerSvg from './hammer.svg.js';
|
|
import '../lion-icon.js';
|
|
|
|
describe('lion-icon', () => {
|
|
it('supports svg icon as a function which recieves a tag function as an argument and returns a tagged template literal', async () => {
|
|
const iconFunction = tag => tag`<svg data-test-id="svg"></svg>`;
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon .svg=${iconFunction}></lion-icon>
|
|
`,
|
|
);
|
|
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
|
|
});
|
|
|
|
it('supports svg icon as a lit-html template', async () => {
|
|
const icon = html`
|
|
<svg data-test-id="svg"></svg>
|
|
`;
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon .svg=${icon}></lion-icon>
|
|
`,
|
|
);
|
|
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg');
|
|
});
|
|
|
|
it('does not support string svg icon', async () => {
|
|
const errorMessage =
|
|
'icon accepts only lit-html templates or functions like "tag => tag`<svg>...</svg>`"';
|
|
expect(() => {
|
|
fixtureSync(
|
|
html`
|
|
<lion-icon .svg=${'<svg></svg>'}></lion-icon>
|
|
`,
|
|
);
|
|
}).to.throw(Error, errorMessage);
|
|
expect(() => {
|
|
fixtureSync(
|
|
html`
|
|
<lion-icon .svg=${() => '<svg></svg>'}></lion-icon>
|
|
`,
|
|
);
|
|
}).to.throw(Error, errorMessage);
|
|
});
|
|
|
|
it('displays an svg icon with an aria label attribute', async () => {
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
|
|
`,
|
|
);
|
|
|
|
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
|
|
expect(el.getAttribute('role')).to.equal('img');
|
|
expect(el.getAttribute('aria-label')).to.equal('Love');
|
|
expect(el.getAttribute('aria-hidden')).to.equal('false');
|
|
});
|
|
|
|
it('displays an svg icon with an aria hidden attribute', async () => {
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon .svg=${hammerSvg}></lion-icon>
|
|
`,
|
|
);
|
|
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
|
|
expect(el.getAttribute('aria-hidden')).to.equal('true');
|
|
expect(el.hasAttribute('aria-label')).to.equal(false);
|
|
});
|
|
|
|
it('is accessible with an aria label', async () => {
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
|
|
`,
|
|
);
|
|
await expect(el).to.be.accessible();
|
|
});
|
|
|
|
it('is accessible without an aria label', async () => {
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon .svg=${heartSvg}></lion-icon>
|
|
`,
|
|
);
|
|
await expect(el).to.be.accessible();
|
|
});
|
|
|
|
it('expects svg-icons to have the attribute `focusable="false"` so the icon doesn\'t appear in tab-order in IE/Edge', async () => {
|
|
const icon = await fixture(
|
|
html`
|
|
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
|
|
`,
|
|
);
|
|
expect(icon.children[0].getAttribute('focusable')).to.equal('false');
|
|
});
|
|
|
|
it('can change the displayed icon', async () => {
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
|
|
`,
|
|
);
|
|
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
|
|
el.svg = hammerSvg;
|
|
await el.updateComplete;
|
|
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
|
|
});
|
|
|
|
it('can add or remove the aria-label attribute', async () => {
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
|
|
`,
|
|
);
|
|
const elHammer = await fixture(
|
|
html`
|
|
<lion-icon .svg=${hammerSvg}></lion-icon>
|
|
`,
|
|
);
|
|
|
|
// verify initial values
|
|
expect(el.getAttribute('aria-label')).to.equal('Love');
|
|
expect(el.getAttribute('aria-hidden')).to.equal('false');
|
|
|
|
expect(elHammer.getAttribute('aria-hidden')).to.equal('true');
|
|
expect(elHammer.hasAttribute('aria-label')).to.equal(false);
|
|
|
|
// swap label and hidden on both icons
|
|
el.ariaLabel = '';
|
|
elHammer.ariaLabel = 'Hammer';
|
|
|
|
await el.updateComplete;
|
|
expect(el.getAttribute('aria-hidden')).to.equal('true');
|
|
expect(el.hasAttribute('aria-label')).to.equal(false);
|
|
|
|
await elHammer.updateComplete;
|
|
expect(elHammer.getAttribute('aria-label')).to.equal('Hammer');
|
|
expect(elHammer.getAttribute('aria-hidden')).to.equal('false');
|
|
});
|
|
|
|
it('supports dynamic icons using until directive', async () => {
|
|
const svgLoading = new Promise(resolve => {
|
|
window.addEventListener('importDone', resolve);
|
|
});
|
|
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon
|
|
.svg=${until(
|
|
import('./heart.svg.js').then(e => {
|
|
dispatchEvent(new CustomEvent('importDone'));
|
|
return e.default;
|
|
}),
|
|
html``,
|
|
)}
|
|
aria-label="Love"
|
|
></lion-icon>
|
|
`,
|
|
);
|
|
|
|
await svgLoading;
|
|
// We need to await the until directive is resolved and rendered to the dom
|
|
// You can not use updateComplete as until renders on it's own
|
|
await aTimeout();
|
|
|
|
expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
|
|
});
|
|
|
|
it('does not render "undefined" if changed from valid input to undefined', async () => {
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon .svg=${heartSvg}></lion-icon>
|
|
`,
|
|
);
|
|
await el.updateComplete;
|
|
el.svg = undefined;
|
|
await el.updateComplete;
|
|
expect(el.innerHTML).to.equal('<!----><!---->'); // don't use lightDom.to.equal(''), it gives false positives
|
|
});
|
|
|
|
it('does not render "null" if changed from valid input to null', async () => {
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon .svg=${heartSvg}></lion-icon>
|
|
`,
|
|
);
|
|
await el.updateComplete;
|
|
el.svg = null;
|
|
await el.updateComplete;
|
|
expect(el.innerHTML).to.equal('<!----><!---->'); // don't use lightDom.to.equal(''), it gives false positives
|
|
});
|
|
|
|
it('supports icons using an icon id', async () => {
|
|
try {
|
|
icons.addIconResolver('foo', () => heartSvg);
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>
|
|
`,
|
|
);
|
|
|
|
expect(el.children[0].dataset.testId).to.equal('svg-heart');
|
|
} finally {
|
|
icons.removeIconResolver('foo');
|
|
}
|
|
});
|
|
|
|
it('clears rendered icon when icon id is removed', async () => {
|
|
try {
|
|
icons.addIconResolver('foo', () => heartSvg);
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>
|
|
`,
|
|
);
|
|
await el.updateComplete;
|
|
el.removeAttribute('icon-id');
|
|
await el.updateComplete;
|
|
expect(el.children.length).to.equal(0);
|
|
} finally {
|
|
icons.removeIconResolver('foo');
|
|
}
|
|
});
|
|
|
|
it('does not create race conditions when icon changed while resolving icon id', async () => {
|
|
try {
|
|
icons.addIconResolver(
|
|
'foo',
|
|
() => new Promise(resolve => setTimeout(() => resolve(heartSvg), 10)),
|
|
);
|
|
icons.addIconResolver(
|
|
'bar',
|
|
() => new Promise(resolve => setTimeout(() => resolve(hammerSvg), 4)),
|
|
);
|
|
const el = await fixture(
|
|
html`
|
|
<lion-icon icon-id="foo:lorem:ipsum"></lion-icon>
|
|
`,
|
|
);
|
|
|
|
await el.updateComplete;
|
|
el.iconId = 'bar:lorem:ipsum';
|
|
await el.updateComplete;
|
|
await aTimeout(4);
|
|
|
|
// heart is still loading at this point, but hammer came later so that should be later
|
|
expect(el.children[0].dataset.testId).to.equal('svg-hammer');
|
|
await aTimeout(10);
|
|
// heart finished loading, but it should not be rendered because hammer came later
|
|
expect(el.children[0].dataset.testId).to.equal('svg-hammer');
|
|
} finally {
|
|
icons.removeIconResolver('foo');
|
|
icons.removeIconResolver('bar');
|
|
}
|
|
});
|
|
});
|