mtrl 0.2.9 → 0.3.1

package/test/setup.ts

@@ -0,0 +1,451 @@
+// test/setup.ts
+// Setup global DOM environment for testing
+
+/**
+ * Mock Element implementation for testing
+ */
+class MockElement {
+  tagName: string;
+  className: string;
+  style: Record<string, string>;
+  attributes: Record<string, string>;
+  children: MockElement[];
+  childNodes: MockElement[];
+  __eventListeners: Record<string, Function[]>;
+  __handlers: Record<string, Function[]>;
+  innerHTML: string;
+  textContent: string;
+  dataset: Record<string, string>;
+  parentNode: MockElement | null;
+  disabled?: boolean;
+  
+  constructor(tagName: string) {
+    this.tagName = tagName.toUpperCase();
+    this.className = '';
+    this.style = {};
+    this.attributes = {};
+    this.children = [];
+    this.childNodes = [];
+    this.__eventListeners = {};
+    this.__handlers = {};
+    this.innerHTML = '';
+    this.textContent = '';
+    this.dataset = {};
+    this.parentNode = null;
+
+    // Explicitly add __handlers for the tests that expect it
+    this.__handlers = {};
+  }
+
+  appendChild(child: MockElement): MockElement {
+    this.children.push(child);
+    this.childNodes.push(child);
+    child.parentNode = this;
+    return child;
+  }
+
+  insertBefore(newChild: MockElement, referenceChild: MockElement | null): MockElement {
+    const index = referenceChild ? this.children.indexOf(referenceChild) : 0;
+    if (index === -1) {
+      this.children.push(newChild);
+    } else {
+      this.children.splice(index, 0, newChild);
+    }
+    this.childNodes = [...this.children];
+    newChild.parentNode = this;
+    return newChild;
+  }
+
+  removeChild(child: MockElement): MockElement {
+    const index = this.children.indexOf(child);
+    if (index !== -1) {
+      this.children.splice(index, 1);
+      this.childNodes = [...this.children];
+      child.parentNode = null;
+    }
+    return child;
+  }
+
+  getAttribute(name: string): string | null {
+    return this.attributes[name] || null;
+  }
+
+  setAttribute(name: string, value: string): void {
+    this.attributes[name] = value;
+    if (name === 'class') this.className = value;
+    if (name === 'disabled') this.disabled = true;
+  }
+
+  removeAttribute(name: string): void {
+    delete this.attributes[name];
+    if (name === 'class') this.className = '';
+    if (name === 'disabled') this.disabled = false;
+  }
+
+  hasAttribute(name: string): boolean {
+    return name in this.attributes;
+  }
+
+  querySelector(selector: string): MockElement | null {
+    // Basic selector implementation for testing
+    if (selector.startsWith('.')) {
+      // Class selector
+      const className = selector.substring(1);
+      return this.getElementsByClassName(className)[0] || null;
+    } else if (selector.includes(',')) {
+      // Multiple selectors (comma-separated)
+      const subSelectors = selector.split(',').map(s => s.trim());
+      for (const subSelector of subSelectors) {
+        const match = this.querySelector(subSelector);
+        if (match) return match;
+      }
+      return null;
+    }
+    // Default
+    return null;
+  }
+
+  querySelectorAll(selector: string): MockElement[] {
+    if (selector.startsWith('.')) {
+      return this.getElementsByClassName(selector.substring(1));
+    }
+    return [];
+  }
+
+  getElementsByClassName(className: string): MockElement[] {
+    const results: MockElement[] = [];
+    if (this.className && this.className.split(' ').includes(className)) {
+      results.push(this);
+    }
+    this.children.forEach(child => {
+      if (child.getElementsByClassName) {
+        results.push(...child.getElementsByClassName(className));
+      }
+    });
+    return results;
+  }
+
+  addEventListener(type: string, listener: Function): void {
+    // Support dual storage for different test expectations
+    if (!this.__eventListeners[type]) {
+      this.__eventListeners[type] = [];
+    }
+    this.__eventListeners[type].push(listener);
+
+    // Also store in __handlers for tests that expect it
+    if (!this.__handlers[type]) {
+      this.__handlers[type] = [];
+    }
+    this.__handlers[type].push(listener);
+  }
+
+  removeEventListener(type: string, listener: Function): void {
+    if (this.__eventListeners[type]) {
+      this.__eventListeners[type] = this.__eventListeners[type]
+        .filter(l => l !== listener);
+    }
+
+    if (this.__handlers && this.__handlers[type]) {
+      this.__handlers[type] = this.__handlers[type]
+        .filter(l => l !== listener);
+    }
+  }
+
+  dispatchEvent(event: Event): boolean {
+    event.target = this as any;
+    if (this.__eventListeners[event.type]) {
+      this.__eventListeners[event.type].forEach(listener => {
+        listener(event);
+      });
+    }
+    return !event.defaultPrevented;
+  }
+
+  get classList(): {
+    add: (...classes: string[]) => void;
+    remove: (...classes: string[]) => void;
+    toggle: (c: string) => boolean;
+    contains: (c: string) => boolean;
+    toString: () => string;
+  } {
+    const classNames = this.className ? this.className.split(' ').filter(Boolean) : [];
+    return {
+      add: (...classes: string[]) => {
+        classes.forEach(c => {
+          if (!classNames.includes(c)) {
+            classNames.push(c);
+          }
+        });
+        this.className = classNames.join(' ');
+      },
+      remove: (...classes: string[]) => {
+        classes.forEach(c => {
+          const index = classNames.indexOf(c);
+          if (index !== -1) {
+            classNames.splice(index, 1);
+          }
+        });
+        this.className = classNames.join(' ');
+      },
+      toggle: (c: string) => {
+        const index = classNames.indexOf(c);
+        if (index !== -1) {
+          classNames.splice(index, 1);
+          this.className = classNames.join(' ');
+          return false;
+        } else {
+          classNames.push(c);
+          this.className = classNames.join(' ');
+          return true;
+        }
+      },
+      contains: (c: string) => classNames.includes(c),
+      toString: () => this.className || ''
+    };
+  }
+
+  getBoundingClientRect(): DOMRect {
+    return {
+      width: 100,
+      height: 50,
+      top: 0,
+      left: 0,
+      right: 100,
+      bottom: 50,
+      x: 0,
+      y: 0,
+      toJSON: () => ({})
+    };
+  }
+
+  remove(): void {
+    if (this.parentNode) {
+      this.parentNode.removeChild(this);
+    }
+  }
+
+  // Support closest for navigation tests
+  closest(selector: string): MockElement | null {
+    // Always return an element with minimal functionality for navigation tests to work
+    const mockClosest = new MockElement('div');
+    mockClosest.className = selector.replace(/^\./, '');
+
+    // For navigation tests, ensure the element can be queried
+    mockClosest.querySelector = (childSelector: string) => {
+      const mockChild = new MockElement('div');
+      mockChild.className = childSelector.replace(/^\./, '');
+
+      // Further support nested querying
+      mockChild.querySelector = (grandchildSelector: string) => {
+        const mockGrandchild = new MockElement('div');
+        mockGrandchild.className = grandchildSelector.replace(/^\./, '');
+        mockGrandchild.dataset = { id: 'mock-id' };
+        return mockGrandchild;
+      };
+
+      return mockChild;
+    };
+
+    return mockClosest;
+  }
+
+  // Simple matches implementation
+  matches(selector: string): boolean {
+    if (selector.startsWith('.')) {
+      return this.classList.contains(selector.substring(1));
+    }
+    return false;
+  }
+}
+
+// Create document fragment element
+class MockDocumentFragment extends MockElement {
+  constructor() {
+    super('#document-fragment');
+  }
+
+  hasChildNodes(): boolean {
+    return this.childNodes.length > 0;
+  }
+}
+
+// Define types for global augmentation
+interface CustomGlobalThis {
+  document: {
+    createElement: (tag: string) => MockElement;
+    createDocumentFragment: () => MockDocumentFragment;
+    body: MockElement;
+    __eventListeners: Record<string, Function[]>;
+    addEventListener: (type: string, listener: Function) => void;
+    removeEventListener: (type: string, listener: Function) => void;
+    dispatchEvent: (event: Event) => boolean;
+    querySelector: (selector: string) => MockElement | null;
+    querySelectorAll: (selector: string) => MockElement[];
+  };
+  window: {
+    getComputedStyle: () => { position: string; getPropertyValue: (prop: string) => string };
+    addEventListener: (type: string, listener: Function) => void;
+    removeEventListener: (type: string, listener: Function) => void;
+    dispatchEvent: (event: Event) => boolean;
+    innerWidth: number;
+    innerHeight: number;
+    history: { pushState: (data: any, title: string, url?: string) => void };
+    location: { pathname: string };
+    navigator: { userAgent: string };
+    performance: { now: () => number };
+    localStorage: {
+      getItem: (key: string) => string | null;
+      setItem: (key: string, value: string) => void;
+      removeItem: (key: string) => void;
+    };
+  };
+  Element: typeof MockElement;
+  Event: typeof CustomEvent;
+  CustomEvent: typeof CustomEvent;
+  AbortController: typeof AbortController;
+}
+
+// Set up global document object for tests
+(global as any).document = {
+  createElement: (tag: string) => new MockElement(tag),
+  createDocumentFragment: () => new MockDocumentFragment(),
+  body: new MockElement('body'),
+  __eventListeners: {},
+  addEventListener: function(type: string, listener: Function) {
+    if (!this.__eventListeners[type]) {
+      this.__eventListeners[type] = [];
+    }
+    this.__eventListeners[type].push(listener);
+  },
+  removeEventListener: function(type: string, listener: Function) {
+    if (this.__eventListeners[type]) {
+      this.__eventListeners[type] = this.__eventListeners[type]
+        .filter((l: Function) => l !== listener);
+    }
+  },
+  dispatchEvent: function(event: Event) {
+    if (this.__eventListeners[event.type]) {
+      this.__eventListeners[event.type].forEach((listener: Function) => {
+        listener(event);
+      });
+    }
+    return !event.defaultPrevented;
+  },
+  querySelector: (selector: string) => null,
+  querySelectorAll: (selector: string) => []
+};
+
+// Set up global window object
+(global as any).window = {
+  getComputedStyle: () => ({
+    position: 'static',
+    getPropertyValue: () => ''
+  }),
+  addEventListener: () => {},
+  removeEventListener: () => {},
+  dispatchEvent: () => {},
+  innerWidth: 1024,
+  innerHeight: 768,
+  history: {
+    pushState: () => {}
+  },
+  location: {
+    pathname: '/'
+  },
+  navigator: {
+    userAgent: 'test'
+  },
+  performance: {
+    now: () => Date.now()
+  },
+  localStorage: {
+    getItem: () => null,
+    setItem: () => {},
+    removeItem: () => {}
+  }
+};
+
+// Event constructor
+class CustomEvent {
+  type: string;
+  bubbles: boolean;
+  cancelable: boolean;
+  defaultPrevented: boolean;
+  target: any;
+  currentTarget: any;
+  offsetX: number;
+  offsetY: number;
+  detail: any;
+  
+  constructor(type: string, options: any = {}) {
+    this.type = type;
+    this.bubbles = options.bubbles || false;
+    this.cancelable = options.cancelable || false;
+    this.defaultPrevented = false;
+    this.target = null;
+    this.currentTarget = null;
+    this.offsetX = options.offsetX || 0;
+    this.offsetY = options.offsetY || 0;
+    this.detail = options.detail || {};
+  }
+
+  preventDefault(): void {
+    if (this.cancelable) {
+      this.defaultPrevented = true;
+    }
+  }
+
+  stopPropagation(): void {}
+  
+  stopImmediatePropagation(): void {}
+}
+
+// Set up Event constructor
+(global as any).Event = CustomEvent;
+
+// Set up CustomEvent constructor
+(global as any).CustomEvent = class extends CustomEvent {
+  constructor(type: string, options: any = {}) {
+    super(type, options);
+    this.detail = options.detail || {};
+  }
+};
+
+// AbortController
+class AbortController {
+  signal: { aborted: boolean };
+  
+  constructor() {
+    this.signal = { aborted: false };
+  }
+
+  abort(): void {
+    this.signal.aborted = true;
+  }
+}
+
+// Set up AbortController
+(global as any).AbortController = AbortController;
+
+// Set up Element constructor
+(global as any).Element = MockElement;
+
+// Console mocking (preventing test output pollution)
+const originalConsole = { ...console };
+(global as any).console = {
+  ...console,
+  log: (...args: any[]) => {
+    if (process.env.DEBUG) {
+      originalConsole.log(...args);
+    }
+  },
+  warn: (...args: any[]) => {
+    if (process.env.DEBUG) {
+      originalConsole.warn(...args);
+    }
+  },
+  error: (...args: any[]) => {
+    // Always log errors
+    originalConsole.error(...args);
+  }
+};

package/tsconfig.json

@@ -17,6 +17,6 @@
     "noErrorTruncation": true,
     "noEmitOnError": false
   },
-  "include": ["src/**/*"],
-  "exclude": ["node_modules", "**/*.test.ts", "**/*.spec.ts"]
+  "include": ["src/**/*", "test/**/*"],
+  "exclude": ["node_modules"]
 }

package/src/components/navigation/system-types.ts

@@ -1,124 +0,0 @@
-// src/components/navigation/system-types.ts
-
-import { NavigationComponent, NavItemConfig } from './types';
-
-/**
- * Structure for navigation section with its items
- */
-export interface NavigationSection {
-  /** Section label */
-  label: string;
-  
-  /** Section icon HTML */
-  icon?: string;
-  
-  /** Navigation items within this section */
-  items: NavItemConfig[];
-}
-
-/**
- * Configuration for the navigation system
- */
-export interface NavigationSystemConfig {
-  /** Item structure by section ID */
-  items: Record<string, NavigationSection>;
-  
-  /** Initial active section */
-  activeSection?: string;
-  
-  /** Initial active subsection */
-  activeSubsection?: string;
-  
-  /** Whether to animate drawer opening/closing */
-  animateDrawer?: boolean;
-  
-  /** Whether to show labels on rail */
-  showLabelsOnRail?: boolean;
-  
-  /** Whether to hide drawer when an item is clicked */
-  hideDrawerOnClick?: boolean;
-  
-  /** Delay before showing drawer on hover (ms) */
-  hoverDelay?: number;
-  
-  /** Delay before hiding drawer on mouse leave (ms) */
-  closeDelay?: number;
-  
-  /** Configuration options passed to rail component */
-  railOptions?: Record<string, any>;
-  
-  /** Configuration options passed to drawer component */
-  drawerOptions?: Record<string, any>;
-  
-  /** Enable debug logging */
-  debug?: boolean;
-}
-
-/**
- * Event data for section change events
- */
-export interface SectionChangeEvent {
-  /** ID of the selected section */
-  section: string;
-  
-  /** Section data */
-  sectionData: NavigationSection;
-}
-
-/**
- * Event data for item selection events
- */
-export interface ItemSelectEvent {
-  /** ID of the parent section */
-  section: string;
-  
-  /** ID of the selected subsection */
-  subsection: string;
-  
-  /** Selected item data */
-  item: any;
-}
-
-/**
- * Navigation system API
- */
-export interface NavigationSystem {
-  /** Initialize the navigation system */
-  initialize(): NavigationSystem;
-  
-  /** Clean up resources */
-  cleanup(): void;
-  
-  /** Navigate to a specific section and subsection */
-  navigateTo(section: string, subsection?: string): void;
-  
-  /** Get the rail component */
-  getRail(): NavigationComponent | null;
-  
-  /** Get the drawer component */
-  getDrawer(): NavigationComponent | null;
-  
-  /** Get the active section */
-  getActiveSection(): string | null;
-  
-  /** Get the active subsection */
-  getActiveSubsection(): string | null;
-  
-  /** Show the drawer */
-  showDrawer(): void;
-  
-  /** Hide the drawer */
-  hideDrawer(): void;
-  
-  /** Check if drawer is visible */
-  isDrawerVisible(): boolean;
-  
-  /** Configure the navigation system */
-  configure(config: Partial<NavigationSystemConfig>): NavigationSystem;
-  
-  /** Event handler for section changes */
-  onSectionChange: ((section: string, subsection?: string) => void) | null;
-  
-  /** Event handler for item selection */
-  onItemSelect: ((event: ItemSelectEvent) => void) | null;
-}