diff --git a/src/components/icon/icon.test.ts b/src/components/icon/icon.test.ts index 26c2f96a1..6ec2de6ef 100644 --- a/src/components/icon/icon.test.ts +++ b/src/components/icon/icon.test.ts @@ -223,6 +223,23 @@ describe('', () => { expect(svg?.getAttribute('fill')).to.equal('currentColor'); }); + it('Should properly produce a `` element', async function () { + registerIconLibrary('sprite', { + resolver(name) { + return `/docs/assets/images/sprite.svg#${name}`; + }, + mutator(svg) { + return svg.setAttribute('fill', 'currentColor'); + }, + spriteSheet: true, + }); + + const el = await fixture(html``); + + const href = el.shadowRoot!.querySelector('use')?.getAttribute('href'); + expect(href).to.equal('/docs/assets/images/sprite.svg#bad-icon'); + }); + // TODO: svg icons don't emit a "load" or "error" event...if we can figure out how to get the event to emit errors. // Once we figure out how to emit errors / loading perhaps we can actually test this? it.skip("Should produce an error if the icon doesn't exist.", async () => { diff --git a/src/components/icon/icon.ts b/src/components/icon/icon.ts index d55f1f769..03b1ae16e 100644 --- a/src/components/icon/icon.ts +++ b/src/components/icon/icon.ts @@ -119,6 +119,12 @@ export default class WaIcon extends WebAwesomeElement { let fileData: Response; if (library?.spriteSheet) { + // So this looks weird, but because of how SSR works, we need to first wait for the first update to complete. + // After the first update, *then* we can set `this.svg` so we can then query + mutate the element. + if (!this.hasUpdated) { + await this.updateComplete; + } + this.svg = html` `; diff --git a/web-test-runner.config.js b/web-test-runner.config.js index 599e2f43e..35fd84632 100644 --- a/web-test-runner.config.js +++ b/web-test-runner.config.js @@ -32,7 +32,7 @@ export default { testFramework: { config: { timeout: 3000, - retries: 1, + retries: 0, // fails the whole test suite on first failure rather than letting the whole test suite run. bail: process.env['FAIL_FAST'] === 'true', },