chore: basic decorateIcons tests

adobe · Sep 13, 2023 · 8455c55 · 8455c55
1 parent 2e82363
commit 8455c55
Show file tree

Hide file tree

Showing 7 changed files with 89 additions and 1 deletion.
diff --git a/src/decorate.js b/src/decorate.js
@@ -84,6 +84,7 @@ export async function decorateIcons(element) {
           };
         }
       } catch (error) {
+        /* c8 ignore next 4 */
         ICONS_CACHE[iconName] = false;
         // eslint-disable-next-line no-console
         console.error(error);

diff --git a/test/decorate/decorateIcons.basic.test.html b/test/decorate/decorateIcons.basic.test.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<body>
+  <div>
+    <span class="icon icon-a"></span>
+    <p><span class="icon icon-b"></span></p>
+    <a href="#"><span class="icon icon-a"></span></a>
+    <p><span class="icon icon-doesnotexist"></span></p>
+  </div>
+  <script type="module">
+    /* eslint-env mocha */
+    import { runTests } from '@web/test-runner-mocha';
+    import { expect } from '@esm-bundle/chai';
+    import { decorateIcons } from '../../src/decorate.js';
+
+    window.hlx = {};
+
+    runTests(() => {
+      it('decorates icons', async () => {
+        window.hlx.codeBasePath = '/test/fixtures';
+
+        await decorateIcons(document.body);
+
+        const icons = document.querySelectorAll('.icon');
+        expect(icons.length).to.equal(4);
+        icons.forEach((icon) => {
+          expect(icon.childElementCount).to.be.equal(1);
+          expect(icon.firstElementChild.tagName).to.be.equal('svg');
+        });
+
+        const sprite = document.getElementById('franklin-svg-sprite');
+        expect(sprite).to.not.be.null;
+        expect(sprite.tagName).to.be.equal('svg');
+        expect(sprite.childElementCount).to.be.equal(2);
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/test/decorate/decorateIcons.styled.test.html b/test/decorate/decorateIcons.styled.test.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+<body>
+  <div>
+    <span class="icon icon-styled"></span>
+  </div>
+  <script type="module">
+    /* eslint-env mocha */
+    import { runTests } from '@web/test-runner-mocha';
+    import { expect } from '@esm-bundle/chai';
+    import { decorateIcons } from '../../src/decorate.js';
+
+    window.hlx = {};
+
+    runTests(() => {
+      it('decorates styled icons', async () => {
+        window.hlx.codeBasePath = '/test/fixtures';
+
+        await decorateIcons(document.body);
+
+        const icons = document.querySelectorAll('.icon');
+        expect(icons.length).to.equal(1);
+        const icon = icons[0];
+        expect(icon.childElementCount).to.be.equal(1);
+        expect(icon.firstElementChild.tagName).to.be.equal('svg');
+        expect(icon.querySelector('.someclass')).to.not.be.null;
+
+        // sprite should be empty
+        const sprite = document.getElementById('franklin-svg-sprite');
+        expect(sprite).to.not.be.null;
+        expect(sprite.tagName).to.be.equal('svg');
+        expect(sprite.childElementCount).to.be.equal(0);
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/test/fixtures/icons/a.svg b/test/fixtures/icons/a.svg
diff --git a/test/fixtures/icons/b.svg b/test/fixtures/icons/b.svg
diff --git a/test/fixtures/icons/styled.svg b/test/fixtures/icons/styled.svg
diff --git a/web-test-runner.config.js b/web-test-runner.config.js
@@ -15,6 +15,6 @@ export default {
     ],
   },
   files: [
-    'test/**/*.test.{html,js}',
+    'test/decorate/*.test.{html,js}',
   ],
 };