ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(icon): don't use id on svg in tests to not confuse users

Browse source
This commit is contained in:
Mikhail Bashkirov 2019-07-01 17:27:01 +02:00
parent 602d0407d8
commit 0ef6a7c49f
3 changed files with 13 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/icon/test/hammer.svg.js
View file

@ -1 +1 @@
export default '<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="svg-hammer"><path d="M.476 12.915L6.7 6 9 8.556l-6.223 6.915a1.542 1.542 0 0 1-1.15.529 1.54 1.54 0 0 1-1.15-.53c-.636-.706-.636-1.85 0-2.555zm12.638-9.031L16 6.863 12.866 10 4 .919 9.35 0l1.912 1.972.251-.251c.52-.52 2.4 1.363 1.88 1.882l-.279.28z"></path></svg>'; export default '<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-test-id="svg-hammer"><path d="M.476 12.915L6.7 6 9 8.556l-6.223 6.915a1.542 1.542 0 0 1-1.15.529 1.54 1.54 0 0 1-1.15-.53c-.636-.706-.636-1.85 0-2.555zm12.638-9.031L16 6.863 12.866 10 4 .919 9.35 0l1.912 1.972.251-.251c.52-.52 2.4 1.363 1.88 1.882l-.279.28z"></path></svg>';

2
packages/icon/test/heart.svg.js
View file

@ -1 +1 @@
export default '<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="svg-heart"><path d="M8.002 14.867a.828.828 0 0 1-.324-.066C7.36 14.665 0 11.466 0 6.153 0 3.592 1.543.825 4.98 1.01c1.465.077 2.437.828 3.018 1.491.581-.667 1.553-1.414 3.023-1.491.107-.008.207-.008.31-.008C13.58 1.001 16 2.614 16 6.153c0 5.313-7.36 8.512-7.671 8.644a.787.787 0 0 1-.327.07z"></path></svg>'; export default '<svg focusable="false" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" data-test-id="svg-heart"><path d="M8.002 14.867a.828.828 0 0 1-.324-.066C7.36 14.665 0 11.466 0 6.153 0 3.592 1.543.825 4.98 1.01c1.465.077 2.437.828 3.018 1.491.581-.667 1.553-1.414 3.023-1.491.107-.008.207-.008.31-.008C13.58 1.001 16 2.614 16 6.153c0 5.313-7.36 8.512-7.671 8.644a.787.787 0 0 1-.327.07z"></path></svg>';

22
packages/icon/test/lion-icon.test.js
View file

@ -13,7 +13,7 @@ describe('lion-icon', () => {
`, `,
); );
expect(el.children[0].id).to.equal('svg-heart'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
expect(el.getAttribute('role')).to.equal('img'); expect(el.getAttribute('role')).to.equal('img');
expect(el.getAttribute('aria-label')).to.equal('Love'); expect(el.getAttribute('aria-label')).to.equal('Love');
expect(el.getAttribute('aria-hidden')).to.equal('false'); expect(el.getAttribute('aria-hidden')).to.equal('false');
@ -25,7 +25,7 @@ describe('lion-icon', () => {
<lion-icon .svg=${hammerSvg}></lion-icon> <lion-icon .svg=${hammerSvg}></lion-icon>
`, `,
); );
expect(el.children[0].id).to.equal('svg-hammer'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
expect(el.getAttribute('aria-hidden')).to.equal('true'); expect(el.getAttribute('aria-hidden')).to.equal('true');
expect(el.hasAttribute('aria-label')).to.equal(false); expect(el.hasAttribute('aria-label')).to.equal(false);
}); });
@ -45,10 +45,10 @@ describe('lion-icon', () => {
<lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon> <lion-icon .svg=${heartSvg} aria-label="Love"></lion-icon>
`, `,
); );
expect(el.children[0].id).to.equal('svg-heart'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
el.svg = hammerSvg; el.svg = hammerSvg;
await el.updateComplete; await el.updateComplete;
expect(el.children[0].id).to.equal('svg-hammer'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-hammer');
}); });
it('can add or remove the aria-label attribute', async () => { it('can add or remove the aria-label attribute', async () => {
@ -94,7 +94,7 @@ describe('lion-icon', () => {
); );
await el.svg; await el.svg;
await el.updateComplete; await el.updateComplete;
expect(el.children[0].id).to.equal('svg-heart'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
}); });
it('uses the default export, by default', async () => { it('uses the default export, by default', async () => {
@ -105,7 +105,7 @@ describe('lion-icon', () => {
); );
await el.svg; await el.svg;
await el.updateComplete; await el.updateComplete;
expect(el.children[0].id).to.equal('svg-heart'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
}); });
it('supports dynamic icon bundles', async () => { it('supports dynamic icon bundles', async () => {
@ -119,7 +119,7 @@ describe('lion-icon', () => {
); );
await el.svg; await el.svg;
await el.updateComplete; await el.updateComplete;
expect(el.children[0].id).to.equal('svg-heart'); expect(el.children[0].getAttribute('data-test-id')).to.equal('svg-heart');
}); });
it('supports dynamic icons using until directive', async () => { it('supports dynamic icons using until directive', async () => {
@ -147,7 +147,7 @@ describe('lion-icon', () => {
// You can not use updateComplete as until renders on it's own // You can not use updateComplete as until renders on it's own
await aTimeout(); await aTimeout();
expect(el.children[0].id).to.equal('svg-heart'); 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 () => { it('does not render "undefined" if changed from valid input to undefined', async () => {
@ -205,7 +205,7 @@ describe('lion-icon', () => {
await aTimeout(); await aTimeout();
[svg] = icon.children; [svg] = icon.children;
expect(svg).to.exist; expect(svg).to.exist;
expect(svg.id).to.equal('svg-hammer'); expect(svg.getAttribute('data-test-id')).to.equal('svg-hammer');
[icon, resolveHeartSvg, resolveHammerSvg] = await prepareRaceCondition( [icon, resolveHeartSvg, resolveHammerSvg] = await prepareRaceCondition(
Promise.resolve(heartSvg), Promise.resolve(heartSvg),
@ -216,7 +216,7 @@ describe('lion-icon', () => {
await aTimeout(); await aTimeout();
[svg] = icon.children; [svg] = icon.children;
expect(svg).to.exist; expect(svg).to.exist;
expect(svg.id).to.equal('svg-hammer'); expect(svg.getAttribute('data-test-id')).to.equal('svg-hammer');
}); });
it('renders if a resolved promise was replaced by a string', async () => { it('renders if a resolved promise was replaced by a string', async () => {
@ -228,7 +228,7 @@ describe('lion-icon', () => {
await aTimeout(); await aTimeout();
const [svg] = icon.children; const [svg] = icon.children;
expect(svg).to.exist; expect(svg).to.exist;
expect(svg.id).to.equal('svg-hammer'); expect(svg.getAttribute('data-test-id')).to.equal('svg-hammer');
}); });
it('does not render if a resolved promise was replaced by another unresolved promise', async () => { it('does not render if a resolved promise was replaced by another unresolved promise', async () => {