chore: moar test cases

Author: thescientist13

docs/components/banner-cta/banner-cta.test.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './banner-cta.tsx';
+
+describe('Components/Banner CTA', () => {
+  let bannerCta: HTMLElement;
+
+  describe('Default Behavior', () => {
+    const cta = 'npm i -D wc-compiler';
+
+    beforeEach(() => {
+      bannerCta = document.createElement('wcc-banner-cta');
+
+      document.body.appendChild(bannerCta);
+    });
+
+    it('should not be undefined', () => {
+      expect(bannerCta).not.equal(undefined);
+    });
+
+    it('should have the main overview text', () => {
+      const paragraph = bannerCta.querySelectorAll('p');
+
+      expect(paragraph.length).equal(1);
+      expect(paragraph[0].textContent.trim().replace(/\s+/g, ' ')).toContain(
+        'WCC (WC Compiler) is a NodeJS based package for server-rendering native Web Components.',
+      );
+    });
+
+    it('should have the copy to clipboard snippet', () => {
+      const pre = bannerCta.querySelectorAll('pre');
+
+      expect(pre.length).equal(1);
+      expect(pre[0].textContent.trim()).equal(`$ ${cta}`);
+    });
+
+    it('should have the copy to clipboard component', () => {
+      const ctcButton = bannerCta.querySelectorAll('wcc-ctc-button');
+
+      expect(ctcButton.length).equal(1);
+      expect(ctcButton[0].getAttribute('content')).equal(cta);
+    });
+  });
+
+  afterEach(() => {
+    bannerCta.remove();
+    bannerCta = undefined;
+  });
+});

docs/components/banner-splash/banner-splash.test.ts

@@ -0,0 +1,30 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './banner-splash.tsx';
+
+describe('Components/Banner Splash', () => {
+  let bannerSplash: HTMLElement;
+
+  describe('Default Behavior', () => {
+    beforeEach(() => {
+      bannerSplash = document.createElement('wcc-banner-splash');
+
+      document.body.appendChild(bannerSplash);
+    });
+
+    it('should not be undefined', () => {
+      expect(bannerSplash).not.equal(undefined);
+    });
+
+    it('should have to the expected heading text', () => {
+      const heading = bannerSplash.querySelectorAll('h1');
+
+      expect(heading.length).equal(1);
+      expect(heading[0].textContent.trim().replace(/\s+/g, ' ')).equal('SSR for Web Components');
+    });
+  });
+
+  afterEach(() => {
+    bannerSplash.remove();
+    bannerSplash = undefined;
+  });
+});

docs/components/capability-box/capability-box.test.ts

@@ -0,0 +1,61 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './capability-box.tsx';
+
+describe('Components/Capability Box', () => {
+  let capabilityBox: HTMLElement;
+
+  describe('Default Behavior', () => {
+    beforeEach(() => {
+      capabilityBox = document.createElement('wcc-capability-box');
+
+      document.body.appendChild(capabilityBox);
+    });
+
+    it('should not be undefined', () => {
+      expect(capabilityBox).not.equal(undefined);
+    });
+
+    it('should not have any heading text', () => {
+      const heading = capabilityBox.querySelectorAll('h4');
+
+      expect(heading.length).equal(1);
+      expect(heading[0].textContent).equal('');
+    });
+  });
+
+  describe('Custom Text and Heading', () => {
+    const customHeading = 'JSX';
+    const customContent = 'This is a custom feature box';
+
+    beforeEach(() => {
+      capabilityBox = document.createElement('wcc-capability-box');
+      capabilityBox.innerHTML = `<p>${customContent}</p>`;
+      capabilityBox.setAttribute('heading', customHeading);
+
+      document.body.appendChild(capabilityBox);
+    });
+
+    it('should not be undefined', () => {
+      expect(capabilityBox).not.equal(undefined);
+    });
+
+    it('should have the expected text from setting the heading attribute', () => {
+      const heading = capabilityBox.querySelectorAll('h4');
+
+      expect(heading.length).equal(1);
+      expect(heading[0].textContent).equal(customHeading);
+    });
+
+    it('should have the expected inner HTML text', () => {
+      const paragraph = capabilityBox.querySelectorAll('p');
+
+      expect(paragraph.length).equal(1);
+      expect(paragraph[0].textContent).equal(customContent);
+    });
+  });
+
+  afterEach(() => {
+    capabilityBox.remove();
+    capabilityBox = undefined;
+  });
+});

docs/components/capability-box/capability-box.tsx

@@ -6,12 +6,12 @@ export default class CapabilityBox extends HTMLElement {
   }
 
   render() {
-    const heading = this.getAttribute('heading');
+    const heading = this.getAttribute('heading') ?? '';
     const { innerHTML } = this;
 
     return (
       <div class={styles.container}>
-        <span class={styles.heading}>{heading}</span>
+        <h4 class={styles.heading}>{heading}</h4>
         {innerHTML}
       </div>
     );

docs/components/feature-box/feature-box.test.ts

@@ -0,0 +1,73 @@
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import './feature-box.tsx';
+
+describe('Components/Feature Box', () => {
+  let featureBox: HTMLElement;
+
+  describe('Default Behavior', () => {
+    beforeEach(() => {
+      featureBox = document.createElement('wcc-feature-box');
+
+      document.body.appendChild(featureBox);
+    });
+
+    it('should not be undefined', () => {
+      expect(featureBox).not.equal(undefined);
+    });
+
+    it('should not have any heading text', () => {
+      const heading = featureBox.querySelectorAll('h4');
+
+      expect(heading.length).equal(1);
+      expect(heading[0].textContent.trim()).equal('');
+    });
+
+    it('should not have an SVG mapped logo', () => {
+      const logo = featureBox.querySelectorAll('svg');
+
+      expect(logo.length).equal(0);
+    });
+  });
+
+  describe('Custom Text and Heading', () => {
+    const customHeading = 'JSX';
+    const customContent = 'This is a custom feature box';
+
+    beforeEach(() => {
+      featureBox = document.createElement('wcc-feature-box');
+      featureBox.innerHTML = `<p>${customContent}</p>`;
+      featureBox.setAttribute('heading', customHeading);
+
+      document.body.appendChild(featureBox);
+    });
+
+    it('should not be undefined', () => {
+      expect(featureBox).not.equal(undefined);
+    });
+
+    it('should have the expected text from setting the heading attribute', () => {
+      const heading = featureBox.querySelectorAll('h4');
+
+      expect(heading.length).equal(1);
+      expect(heading[0].textContent.trim()).equal(customHeading);
+    });
+
+    it('should have the expected inner HTML text', () => {
+      const paragraph = featureBox.querySelectorAll('p');
+
+      expect(paragraph.length).equal(1);
+      expect(paragraph[0].textContent).equal(customContent);
+    });
+
+    it('should not a mapped SVG logo', () => {
+      const logo = featureBox.querySelectorAll('svg');
+
+      expect(logo.length).equal(1);
+    });
+  });
+
+  afterEach(() => {
+    featureBox.remove();
+    featureBox = undefined;
+  });
+});

docs/components/feature-box/feature-box.tsx

@@ -15,16 +15,16 @@ export default class FeatureBox extends HTMLElement {
   }
 
   render() {
-    const heading = this.getAttribute('heading');
+    const heading = this.getAttribute('heading') ?? '';
     const { innerHTML } = this;
-    const icon = FeatureBox.ICON_MAPPER[heading];
+    const icon = FeatureBox.ICON_MAPPER[heading] ?? '';
 
     return (
       <div class={styles.container}>
-        <span class={styles.heading}>
+        <h4 class={styles.heading}>
           <span class={styles.icon}>{icon}</span>
           <span>{heading}</span>
-        </span>
+        </h4>
         {innerHTML}
       </div>
     );

vitest.config.ts

@@ -108,6 +108,12 @@ export default defineConfig({
       provider: 'v8',
       include: ['./docs/components/**'],
       exclude: ['./docs/components/sandbox/**'],
+      thresholds: {
+        lines: 65,
+        functions: 75,
+        branches: 50,
+        statements: 65,
+      },
     },
   },
   plugins: [transformJsx(), transformRawImports(), transformConstructableStylesheetsPlugin()],