@bookklik/senangstart-icons 1.0.7 → 1.0.8

package/tests/build-icon-docs.test.js

@@ -0,0 +1,132 @@
+/**
+ * Tests for build-icon-docs.js
+ * 
+ * Tests documentation generation for icons
+ */
+import { describe, it, expect, beforeAll } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+
+const iconsPath = path.resolve(__dirname, '../src/icons.json');
+const docsIconsDir = path.resolve(__dirname, '../docs/icons');
+const docsIconsDirMs = path.resolve(__dirname, '../docs/ms/icons');
+
+describe('build-icon-docs.js', () => {
+  let icons;
+
+  beforeAll(() => {
+    icons = JSON.parse(fs.readFileSync(iconsPath, 'utf8'));
+  });
+
+  describe('English documentation', () => {
+    it('should have docs/icons directory', () => {
+      expect(fs.existsSync(docsIconsDir)).toBe(true);
+    });
+
+    it('should generate index.md', () => {
+      const indexPath = path.join(docsIconsDir, 'index.md');
+      expect(fs.existsSync(indexPath)).toBe(true);
+    });
+
+    it('should generate a markdown file for each icon', () => {
+      icons.forEach(icon => {
+        const mdPath = path.join(docsIconsDir, `${icon.slug}.md`);
+        expect(fs.existsSync(mdPath)).toBe(true);
+      });
+    });
+
+    it('should have proper frontmatter in icon pages', () => {
+      const sampleIcon = icons[0];
+      const mdPath = path.join(docsIconsDir, `${sampleIcon.slug}.md`);
+      const content = fs.readFileSync(mdPath, 'utf8');
+
+      expect(content).toContain('---');
+      expect(content).toContain(`title: ${sampleIcon.name}`);
+    });
+
+    it('should include usage examples', () => {
+      const sampleIcon = icons[0];
+      const mdPath = path.join(docsIconsDir, `${sampleIcon.slug}.md`);
+      const content = fs.readFileSync(mdPath, 'utf8');
+
+      expect(content).toContain('## Usage');
+      expect(content).toContain(`<ss-icon name="${sampleIcon.slug}">`);
+    });
+
+    it('should include icon details table', () => {
+      const sampleIcon = icons[0];
+      const mdPath = path.join(docsIconsDir, `${sampleIcon.slug}.md`);
+      const content = fs.readFileSync(mdPath, 'utf8');
+
+      expect(content).toContain('## Icon Details');
+      expect(content).toContain('| Property | Value |');
+      expect(content).toContain(`| **Name** | ${sampleIcon.name} |`);
+      expect(content).toContain(`| **Slug** | \`${sampleIcon.slug}\` |`);
+    });
+
+    it('should include SVG path data', () => {
+      const sampleIcon = icons[0];
+      const mdPath = path.join(docsIconsDir, `${sampleIcon.slug}.md`);
+      const content = fs.readFileSync(mdPath, 'utf8');
+
+      expect(content).toContain('## SVG Path');
+      expect(content).toContain(sampleIcon.src);
+    });
+
+    it('should have index with all icons', () => {
+      const indexPath = path.join(docsIconsDir, 'index.md');
+      const content = fs.readFileSync(indexPath, 'utf8');
+
+      expect(content).toContain(`${icons.length}`);
+      expect(content).toContain('icon-grid');
+      
+      // Check that at least some icons are linked
+      const sampleIcon = icons[0];
+      expect(content).toContain(`href="./${sampleIcon.slug}"`);
+    });
+  });
+
+  describe('Malay documentation', () => {
+    it('should have docs/ms/icons directory', () => {
+      expect(fs.existsSync(docsIconsDirMs)).toBe(true);
+    });
+
+    it('should generate index.md in Malay', () => {
+      const indexPath = path.join(docsIconsDirMs, 'index.md');
+      expect(fs.existsSync(indexPath)).toBe(true);
+    });
+
+    it('should generate a markdown file for each icon', () => {
+      icons.forEach(icon => {
+        const mdPath = path.join(docsIconsDirMs, `${icon.slug}.md`);
+        expect(fs.existsSync(mdPath)).toBe(true);
+      });
+    });
+
+    it('should have Malay-translated content', () => {
+      const sampleIcon = icons[0];
+      const mdPath = path.join(docsIconsDirMs, `${sampleIcon.slug}.md`);
+      const content = fs.readFileSync(mdPath, 'utf8');
+
+      expect(content).toContain('## Penggunaan'); // "Usage" in Malay
+      expect(content).toContain('## Butiran Ikon'); // "Icon Details" in Malay
+      expect(content).toContain('## Laluan SVG'); // "SVG Path" in Malay
+    });
+
+    it('should link back to Malay icon library', () => {
+      const sampleIcon = icons[0];
+      const mdPath = path.join(docsIconsDirMs, `${sampleIcon.slug}.md`);
+      const content = fs.readFileSync(mdPath, 'utf8');
+
+      expect(content).toContain('[← Kembali ke Pustaka Ikon](/ms/icons/)');
+    });
+
+    it('should have Malay index with all icons', () => {
+      const indexPath = path.join(docsIconsDirMs, 'index.md');
+      const content = fs.readFileSync(indexPath, 'utf8');
+
+      expect(content).toContain('Pustaka Ikon'); // "Icon Library" in Malay
+      expect(content).toContain(`href="./${icons[0].slug}"`);
+    });
+  });
+});

package/tests/build-pipeline.test.js

@@ -0,0 +1,138 @@
+/**
+ * Integration tests for the build pipeline
+ * 
+ * Tests the complete build output and cross-component consistency
+ */
+import { describe, it, expect, beforeAll } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+
+const projectRoot = path.resolve(__dirname, '..');
+const srcDir = path.join(projectRoot, 'src');
+const svgDir = path.join(srcDir, 'svg');
+const distDir = path.join(projectRoot, 'dist');
+const docsDir = path.join(projectRoot, 'docs');
+
+describe('Build Pipeline Integration', () => {
+  let icons;
+
+  beforeAll(() => {
+    const iconsPath = path.join(srcDir, 'icons.json');
+    icons = JSON.parse(fs.readFileSync(iconsPath, 'utf8'));
+  });
+
+  describe('Source files', () => {
+    it('should have icons.json', () => {
+      expect(fs.existsSync(path.join(srcDir, 'icons.json'))).toBe(true);
+    });
+
+    it('should have all required source files', () => {
+      expect(fs.existsSync(path.join(srcDir, 'index.js'))).toBe(true);
+      expect(fs.existsSync(path.join(srcDir, 'ss-icon.js'))).toBe(true);
+      expect(fs.existsSync(path.join(srcDir, 'ss-loader.js'))).toBe(true);
+    });
+  });
+
+  describe('Generated SVG files', () => {
+    it('should have svg directory', () => {
+      expect(fs.existsSync(svgDir)).toBe(true);
+    });
+
+    it('should have SVG file for each icon in icons.json', () => {
+      icons.forEach(icon => {
+        const svgPath = path.join(svgDir, `${icon.slug}.svg`);
+        expect(fs.existsSync(svgPath)).toBe(true);
+      });
+    });
+
+    it('should have index.js exporting all icons', () => {
+      const indexPath = path.join(svgDir, 'index.js');
+      expect(fs.existsSync(indexPath)).toBe(true);
+
+      const content = fs.readFileSync(indexPath, 'utf8');
+      expect(content).toContain('export default icons');
+    });
+  });
+
+  describe('Generated CSS', () => {
+    it('should have icons.css file', () => {
+      expect(fs.existsSync(path.join(srcDir, 'icons.css'))).toBe(true);
+    });
+
+    it('should have CSS class for each icon', () => {
+      const cssContent = fs.readFileSync(path.join(srcDir, 'icons.css'), 'utf8');
+      
+      icons.forEach(icon => {
+        expect(cssContent).toContain(`.ss-${icon.slug}`);
+      });
+    });
+  });
+
+  describe('Documentation files', () => {
+    it('should have docs directory structure', () => {
+      expect(fs.existsSync(path.join(docsDir, 'icons'))).toBe(true);
+      expect(fs.existsSync(path.join(docsDir, 'ms', 'icons'))).toBe(true);
+    });
+
+    it('should have documentation for each icon', () => {
+      icons.forEach(icon => {
+        const enPath = path.join(docsDir, 'icons', `${icon.slug}.md`);
+        const msPath = path.join(docsDir, 'ms', 'icons', `${icon.slug}.md`);
+        
+        expect(fs.existsSync(enPath)).toBe(true);
+        expect(fs.existsSync(msPath)).toBe(true);
+      });
+    });
+  });
+
+  describe('Icon data consistency', () => {
+    it('should have matching icon counts across all generated files', () => {
+      const svgFiles = fs.readdirSync(svgDir).filter(f => f.endsWith('.svg'));
+      const docFiles = fs.readdirSync(path.join(docsDir, 'icons')).filter(f => f.endsWith('.md') && f !== 'index.md');
+      
+      // All icons in icons.json should have corresponding SVG and doc files
+      // Note: There may be more files than icons if old files weren't cleaned up
+      expect(svgFiles.length).toBeGreaterThanOrEqual(icons.length);
+      expect(docFiles.length).toBeGreaterThanOrEqual(icons.length);
+      
+      // Verify each icon has its files
+      icons.forEach(icon => {
+        expect(svgFiles).toContain(`${icon.slug}.svg`);
+        expect(docFiles).toContain(`${icon.slug}.md`);
+      });
+    });
+
+    it('should have valid SVG path data in icons.json', () => {
+      icons.forEach(icon => {
+        // Check that path commands are valid SVG path syntax
+        expect(icon.src.length).toBeGreaterThan(0);
+        // Should not contain HTML tags or scripts
+        expect(icon.src).not.toContain('<script');
+        expect(icon.src).not.toContain('javascript:');
+      });
+    });
+
+    it('should have normalized slugs (lowercase, hyphenated)', () => {
+      icons.forEach(icon => {
+        expect(icon.slug).toMatch(/^[a-z0-9-]+$/);
+        expect(icon.slug).not.toContain(' ');
+        expect(icon.slug).not.toMatch(/[A-Z]/);
+      });
+    });
+  });
+
+  describe('Build scripts', () => {
+    it('should have all build scripts', () => {
+      expect(fs.existsSync(path.join(projectRoot, 'scripts', 'build.js'))).toBe(true);
+      expect(fs.existsSync(path.join(projectRoot, 'scripts', 'build-svgs.js'))).toBe(true);
+      expect(fs.existsSync(path.join(projectRoot, 'scripts', 'build-css.js'))).toBe(true);
+      expect(fs.existsSync(path.join(projectRoot, 'scripts', 'build-icon-docs.js'))).toBe(true);
+    });
+  });
+
+  describe('Webpack configuration', () => {
+    it('should have webpack.config.js', () => {
+      expect(fs.existsSync(path.join(projectRoot, 'webpack.config.js'))).toBe(true);
+    });
+  });
+});

package/tests/build-svgs.test.js

@@ -0,0 +1,102 @@
+/**
+ * Tests for build-svgs.js
+ * 
+ * Tests SVG file generation from icons.json
+ */
+import { describe, it, expect, beforeAll } from 'vitest';
+import fs from 'fs';
+import path from 'path';
+
+const iconsPath = path.resolve(__dirname, '../src/icons.json');
+const svgDir = path.resolve(__dirname, '../src/svg');
+
+describe('build-svgs.js', () => {
+  let icons;
+
+  beforeAll(() => {
+    icons = JSON.parse(fs.readFileSync(iconsPath, 'utf8'));
+  });
+
+  describe('icons.json validation', () => {
+    it('should be valid JSON array', () => {
+      expect(Array.isArray(icons)).toBe(true);
+      expect(icons.length).toBeGreaterThan(0);
+    });
+
+    it('should have required fields for each icon', () => {
+      icons.forEach((icon, index) => {
+        expect(icon).toHaveProperty('name', expect.any(String));
+        expect(icon).toHaveProperty('slug', expect.any(String));
+        expect(icon).toHaveProperty('src', expect.any(String));
+        expect(icon).toHaveProperty('tags', expect.any(Array));
+      });
+    });
+
+    it('should have unique slugs', () => {
+      const slugs = icons.map(icon => icon.slug);
+      const uniqueSlugs = [...new Set(slugs)];
+      expect(slugs.length).toBe(uniqueSlugs.length);
+    });
+
+    it('should have valid SVG path data in src', () => {
+      icons.forEach(icon => {
+        // SVG path should start with a valid command (M, m, L, l, etc.)
+        expect(icon.src).toMatch(/^[MmLlHhVvCcSsQqTtAaZz0-9\s.,\-]+$/);
+      });
+    });
+
+    it('should have non-empty tags array', () => {
+      icons.forEach(icon => {
+        expect(icon.tags.length).toBeGreaterThan(0);
+      });
+    });
+  });
+
+  describe('SVG file generation', () => {
+    it('should have generated SVG files for all icons', () => {
+      icons.forEach(icon => {
+        const svgPath = path.join(svgDir, `${icon.slug}.svg`);
+        expect(fs.existsSync(svgPath)).toBe(true);
+      });
+    });
+
+    it('should generate valid SVG content', () => {
+      const sampleIcon = icons[0];
+      const svgPath = path.join(svgDir, `${sampleIcon.slug}.svg`);
+      const svgContent = fs.readFileSync(svgPath, 'utf8');
+
+      expect(svgContent).toContain('<svg');
+      expect(svgContent).toContain('viewBox=');
+      expect(svgContent).toContain('xmlns="http://www.w3.org/2000/svg"');
+      expect(svgContent).toContain('<path');
+      expect(svgContent).toContain(sampleIcon.src);
+    });
+
+    it('should apply default SVG attributes', () => {
+      const svgPath = path.join(svgDir, `${icons[0].slug}.svg`);
+      const svgContent = fs.readFileSync(svgPath, 'utf8');
+
+      // Default values from build-svgs.js
+      expect(svgContent).toContain('viewBox="0 0 24 24"');
+      expect(svgContent).toContain('fill="none"');
+      expect(svgContent).toContain('stroke="currentColor"');
+      expect(svgContent).toContain('stroke-width="2"');
+    });
+  });
+
+  describe('index.js generation', () => {
+    it('should have generated src/svg/index.js', () => {
+      const indexPath = path.join(svgDir, 'index.js');
+      expect(fs.existsSync(indexPath)).toBe(true);
+    });
+
+    it('should export all icons', () => {
+      const indexPath = path.join(svgDir, 'index.js');
+      const indexContent = fs.readFileSync(indexPath, 'utf8');
+
+      icons.forEach(icon => {
+        expect(indexContent).toContain(`"${icon.slug}"`);
+      });
+    });
+  });
+});

package/tests/ss-icon.test.js

@@ -0,0 +1,178 @@
+/**
+ * Tests for ss-icon.js Web Component
+ * 
+ * Tests the <ss-icon> custom element functionality
+ * @vitest-environment jsdom
+ */
+import { describe, it, expect, beforeAll, beforeEach, afterEach } from 'vitest';
+
+// Mock the icons module
+const mockIcons = {
+  'home': '<svg viewBox="0 0 24 24"><path d="M2.25 12l8.954-8.955"/></svg>',
+  'check': '<svg viewBox="0 0 24 24" stroke-width="2"><path d="M4.5 12.75l6 6 9-13.5"/></svg>',
+  'plus': '<svg viewBox="0 0 24 24" stroke-width="2"><path d="M12 4.5v15m7.5-7.5h-15"/></svg>'
+};
+
+// Create a simple mock of the SSIcon class for testing
+class SSIcon extends HTMLElement {
+  static get observedAttributes() {
+    return ['icon', 'thickness'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === 'icon' || name === 'thickness') {
+      this.render();
+    }
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  render() {
+    const iconName = this.getAttribute('icon');
+    const iconSvg = mockIcons[iconName];
+
+    if (!iconSvg) {
+      this.shadowRoot.innerHTML = '';
+      return;
+    }
+
+    const thicknessAttr = this.getAttribute('thickness');
+    let finalSvg = iconSvg;
+    if (thicknessAttr) {
+      finalSvg = finalSvg.replace(
+        /stroke-width="[^"]*"/,
+        `stroke-width="${thicknessAttr}"`
+      );
+    }
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-flex;
+          width: 1em;
+          height: 1em;
+          vertical-align: middle;
+        }
+        svg {
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+      ${finalSvg}
+    `;
+  }
+}
+
+describe('ss-icon.js Web Component', () => {
+  beforeAll(() => {
+    // Define the custom element
+    if (!customElements.get('ss-icon')) {
+      customElements.define('ss-icon', SSIcon);
+    }
+  });
+
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  describe('Custom Element Registration', () => {
+    it('should be registered as a custom element', () => {
+      expect(customElements.get('ss-icon')).toBeDefined();
+    });
+
+    it('should be an instance of HTMLElement', () => {
+      const icon = document.createElement('ss-icon');
+      expect(icon instanceof HTMLElement).toBe(true);
+    });
+  });
+
+  describe('Icon Rendering', () => {
+    it('should render SVG when icon attribute is set', () => {
+      const icon = document.createElement('ss-icon');
+      icon.setAttribute('icon', 'home');
+      document.body.appendChild(icon);
+
+      expect(icon.shadowRoot.innerHTML).toContain('<svg');
+      expect(icon.shadowRoot.innerHTML).toContain('M2.25 12l8.954-8.955');
+    });
+
+    it('should render empty when icon attribute is invalid', () => {
+      const icon = document.createElement('ss-icon');
+      icon.setAttribute('icon', 'nonexistent-icon');
+      document.body.appendChild(icon);
+
+      expect(icon.shadowRoot.querySelector('svg')).toBeNull();
+    });
+
+    it('should render empty when icon attribute is missing', () => {
+      const icon = document.createElement('ss-icon');
+      document.body.appendChild(icon);
+
+      expect(icon.shadowRoot.querySelector('svg')).toBeNull();
+    });
+
+    it('should update when icon attribute changes', () => {
+      const icon = document.createElement('ss-icon');
+      icon.setAttribute('icon', 'home');
+      document.body.appendChild(icon);
+
+      expect(icon.shadowRoot.innerHTML).toContain('M2.25 12l8.954-8.955');
+
+      icon.setAttribute('icon', 'check');
+      expect(icon.shadowRoot.innerHTML).toContain('M4.5 12.75l6 6 9-13.5');
+    });
+  });
+
+  describe('Thickness Attribute', () => {
+    it('should apply custom thickness to stroke-width', () => {
+      const icon = document.createElement('ss-icon');
+      icon.setAttribute('icon', 'check');
+      icon.setAttribute('thickness', '3');
+      document.body.appendChild(icon);
+
+      expect(icon.shadowRoot.innerHTML).toContain('stroke-width="3"');
+    });
+
+    it('should update thickness when attribute changes', () => {
+      const icon = document.createElement('ss-icon');
+      icon.setAttribute('icon', 'check');
+      icon.setAttribute('thickness', '2');
+      document.body.appendChild(icon);
+
+      expect(icon.shadowRoot.innerHTML).toContain('stroke-width="2"');
+
+      icon.setAttribute('thickness', '4');
+      expect(icon.shadowRoot.innerHTML).toContain('stroke-width="4"');
+    });
+  });
+
+  describe('Shadow DOM Styles', () => {
+    it('should include scoped styles in shadow DOM', () => {
+      const icon = document.createElement('ss-icon');
+      icon.setAttribute('icon', 'home');
+      document.body.appendChild(icon);
+
+      expect(icon.shadowRoot.innerHTML).toContain('<style>');
+      expect(icon.shadowRoot.innerHTML).toContain(':host');
+      expect(icon.shadowRoot.innerHTML).toContain('display: inline-flex');
+    });
+  });
+
+  describe('Observed Attributes', () => {
+    it('should observe icon and thickness attributes', () => {
+      expect(SSIcon.observedAttributes).toContain('icon');
+      expect(SSIcon.observedAttributes).toContain('thickness');
+    });
+  });
+});