npm - mtrl - Versions diffs - 0.3.0 → 0.3.1 - Mend

mtrl 0.3.0 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (60) hide show

package/CLAUDE.md +33 -0
package/index.ts +0 -2
package/package.json +3 -1
package/src/components/navigation/index.ts +4 -1
package/src/components/navigation/types.ts +33 -0
package/src/components/snackbar/index.ts +7 -1
package/src/components/snackbar/types.ts +25 -0
package/src/components/switch/index.ts +5 -1
package/src/components/switch/types.ts +13 -0
package/src/components/textfield/index.ts +7 -1
package/src/components/textfield/types.ts +36 -0
package/test/components/badge.test.ts +545 -0
package/test/components/bottom-app-bar.test.ts +303 -0
package/test/components/button.test.ts +233 -0
package/test/components/card.test.ts +560 -0
package/test/components/carousel.test.ts +951 -0
package/test/components/checkbox.test.ts +462 -0
package/test/components/chip.test.ts +692 -0
package/test/components/datepicker.test.ts +1124 -0
package/test/components/dialog.test.ts +990 -0
package/test/components/divider.test.ts +412 -0
package/test/components/extended-fab.test.ts +672 -0
package/test/components/fab.test.ts +561 -0
package/test/components/list.test.ts +365 -0
package/test/components/menu.test.ts +718 -0
package/test/components/navigation.test.ts +186 -0
package/test/components/progress.test.ts +567 -0
package/test/components/radios.test.ts +699 -0
package/test/components/search.test.ts +1135 -0
package/test/components/segmented-button.test.ts +732 -0
package/test/components/sheet.test.ts +641 -0
package/test/components/slider.test.ts +1220 -0
package/test/components/snackbar.test.ts +461 -0
package/test/components/switch.test.ts +452 -0
package/test/components/tabs.test.ts +1369 -0
package/test/components/textfield.test.ts +400 -0
package/test/components/timepicker.test.ts +592 -0
package/test/components/tooltip.test.ts +630 -0
package/test/components/top-app-bar.test.ts +566 -0
package/test/core/dom.attributes.test.ts +148 -0
package/test/core/dom.classes.test.ts +152 -0
package/test/core/dom.events.test.ts +243 -0
package/test/core/emitter.test.ts +141 -0
package/test/core/ripple.test.ts +99 -0
package/test/core/state.store.test.ts +189 -0
package/test/core/utils.normalize.test.ts +61 -0
package/test/core/utils.object.test.ts +120 -0
package/test/setup.ts +451 -0
package/tsconfig.json +2 -2
package/src/components/snackbar/constants.ts +0 -26
package/test/components/button.test.js +0 -170
package/test/components/checkbox.test.js +0 -238
package/test/components/list.test.js +0 -105
package/test/components/menu.test.js +0 -385
package/test/components/navigation.test.js +0 -227
package/test/components/snackbar.test.js +0 -234
package/test/components/switch.test.js +0 -186
package/test/components/textfield.test.js +0 -314
package/test/core/emitter.test.js +0 -141
package/test/core/ripple.test.js +0 -66

package/test/components/snackbar.test.ts ADDED Viewed

@@ -0,0 +1,461 @@
+// test/components/snackbar.test.ts
+import { describe, test, expect, mock, beforeEach, afterEach } from 'bun:test';
+import { JSDOM } from 'jsdom';
+// Set up JSDOM
+const dom = new JSDOM(`<!DOCTYPE html><html><body></body></html>`);
+global.document = dom.window.document;
+global.window = dom.window;
+global.Element = dom.window.Element;
+global.HTMLElement = dom.window.HTMLElement;
+global.Event = dom.window.Event;
+global.CustomEvent = dom.window.CustomEvent;
+// Import types directly to avoid circular dependencies
+import type {
+  SnackbarComponent,
+  SnackbarConfig,
+  SnackbarEvent,
+  SnackbarVariant,
+  SnackbarPosition
+} from '../../src/components/snackbar/types';
+// Define constants here to avoid circular dependencies
+const SNACKBAR_VARIANTS = {
+  BASIC: 'basic',
+  ACTION: 'action'
+} as const;
+const SNACKBAR_POSITIONS = {
+  CENTER: 'center',
+  START: 'start',
+  END: 'end'
+} as const;
+// Define a mock emit function type
+type EmitFunction = (eventName: string, eventData?: any) => void;
+// Create a mock snackbar implementation
+const createMockSnackbar = (config: SnackbarConfig): SnackbarComponent => {
+  // Default configuration
+  const defaultConfig: SnackbarConfig = {
+    message: '',
+    variant: SNACKBAR_VARIANTS.BASIC,
+    position: SNACKBAR_POSITIONS.CENTER,
+    duration: 4000,
+    prefix: 'mtrl'
+  };
+  // Merge with user configuration
+  const mergedConfig = {
+    ...defaultConfig,
+    ...config
+  };
+  // Create main element
+  const element = document.createElement('div');
+  element.className = `${mergedConfig.prefix}-snackbar`;
+  if (mergedConfig.class) {
+    element.className += ` ${mergedConfig.class}`;
+  }
+  // Add variant class
+  element.className += ` ${mergedConfig.prefix}-snackbar--${mergedConfig.variant}`;
+  // Add position class
+  element.className += ` ${mergedConfig.prefix}-snackbar--${mergedConfig.position}`;
+  // Create message element
+  const messageElement = document.createElement('div');
+  messageElement.className = `${mergedConfig.prefix}-snackbar__message`;
+  messageElement.textContent = mergedConfig.message;
+  element.appendChild(messageElement);
+  // Create action button if specified
+  let actionButton: HTMLButtonElement | undefined;
+  if (mergedConfig.action) {
+    actionButton = document.createElement('button');
+    actionButton.className = `${mergedConfig.prefix}-snackbar__action`;
+    actionButton.textContent = mergedConfig.action;
+    element.appendChild(actionButton);
+  }
+  // Event handlers
+  const eventHandlers: Record<string, Function[]> = {};
+  // Timer implementation
+  const timer = {
+    timeoutId: null as number | null,
+    start: () => {
+      if (mergedConfig.duration === 0) return;
+      if (timer.timeoutId) clearTimeout(timer.timeoutId);
+      timer.timeoutId = setTimeout(() => {
+        snackbar.hide();
+      }, mergedConfig.duration) as unknown as number;
+    },
+    stop: () => {
+      if (timer.timeoutId) {
+        clearTimeout(timer.timeoutId);
+        timer.timeoutId = null;
+      }
+    }
+  };
+  // Position implementation
+  const position = {
+    getPosition: () => mergedConfig.position as SnackbarPosition,
+    setPosition: (pos: SnackbarPosition) => {
+      // Remove old position class
+      element.classList.remove(`${mergedConfig.prefix}-snackbar--${mergedConfig.position}`);
+      // Update position
+      mergedConfig.position = pos;
+      // Add new position class
+      element.classList.add(`${mergedConfig.prefix}-snackbar--${mergedConfig.position}`);
+      return snackbar;
+    }
+  };
+  // Emit function
+  const emit: EmitFunction = (eventName, eventData = {}) => {
+    if (!eventHandlers[eventName]) return;
+    const event = {
+      snackbar,
+      originalEvent: null,
+      preventDefault: () => { event.defaultPrevented = true; },
+      defaultPrevented: false,
+      ...eventData
+    };
+    eventHandlers[eventName].forEach(handler => handler(event));
+  };
+  // Create the snackbar instance
+  const snackbar: SnackbarComponent = {
+    element,
+    config: mergedConfig,
+    actionButton,
+    timer,
+    position,
+    state: 'hidden',
+    emit,
+    show: () => {
+      element.classList.add(`${mergedConfig.prefix}-snackbar--visible`);
+      snackbar.state = 'visible';
+      timer.start();
+      emit('open');
+      return snackbar;
+    },
+    hide: () => {
+      element.classList.remove(`${mergedConfig.prefix}-snackbar--visible`);
+      snackbar.state = 'hidden';
+      timer.stop();
+      emit('close');
+      return snackbar;
+    },
+    setMessage: (message: string) => {
+      mergedConfig.message = message;
+      messageElement.textContent = message;
+      return snackbar;
+    },
+    getMessage: () => mergedConfig.message,
+    setAction: (text: string) => {
+      if (!actionButton) {
+        actionButton = document.createElement('button');
+        actionButton.className = `${mergedConfig.prefix}-snackbar__action`;
+        element.appendChild(actionButton);
+      }
+      actionButton.textContent = text;
+      mergedConfig.action = text;
+      return snackbar;
+    },
+    getAction: () => mergedConfig.action || '',
+    setDuration: (duration: number) => {
+      mergedConfig.duration = duration;
+      return snackbar;
+    },
+    getDuration: () => mergedConfig.duration,
+    setPosition: (newPosition: SnackbarPosition) => {
+      return position.setPosition(newPosition);
+    },
+    getPosition: () => position.getPosition(),
+    on: (event: string, handler: Function) => {
+      if (!eventHandlers[event]) {
+        eventHandlers[event] = [];
+      }
+      eventHandlers[event].push(handler);
+      return snackbar;
+    },
+    off: (event: string, handler: Function) => {
+      if (!eventHandlers[event]) return snackbar;
+      eventHandlers[event] = eventHandlers[event].filter(h => h !== handler);
+      return snackbar;
+    },
+    destroy: () => {
+      timer.stop();
+      // Clear event handlers
+      Object.keys(eventHandlers).forEach(key => {
+        eventHandlers[key] = [];
+      });
+      // Remove from DOM if attached
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    }
+  };
+  return snackbar;
+};
+describe('Snackbar Component', () => {
+  let originalBody: any;
+  let mockBodyAppendChild: ReturnType<typeof mock>;
+  let mockBodyRemoveChild: ReturnType<typeof mock>;
+  beforeEach(() => {
+    // Mock document.body methods for testing
+    originalBody = document.body;
+    mockBodyAppendChild = mock(() => {});
+    mockBodyRemoveChild = mock(() => {});
+    Object.defineProperty(document, 'body', {
+      value: {
+        appendChild: mockBodyAppendChild,
+        removeChild: mockBodyRemoveChild,
+        children: []
+      },
+      writable: true
+    });
+  });
+  afterEach(() => {
+    // Restore original document.body
+    Object.defineProperty(document, 'body', {
+      value: originalBody,
+      writable: true
+    });
+  });
+  test('should create a snackbar element', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Test message'
+    });
+    expect(snackbar.element).toBeDefined();
+    expect(snackbar.element.tagName).toBe('DIV');
+    expect(snackbar.element.className).toContain('mtrl-snackbar');
+  });
+  test('should apply variant class', () => {
+    const variant = SNACKBAR_VARIANTS.ACTION;
+    const snackbar = createMockSnackbar({
+      message: 'Test message',
+      variant
+    });
+    expect(snackbar.config.variant).toBe(variant);
+  });
+  test('should use basic as default variant', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Test message'
+    });
+    expect(snackbar.config.variant).toBe(SNACKBAR_VARIANTS.BASIC);
+  });
+  test('should apply position class', () => {
+    const position = SNACKBAR_POSITIONS.START;
+    const snackbar = createMockSnackbar({
+      message: 'Test message',
+      position
+    });
+    expect(snackbar.config.position).toBe(position);
+  });
+  test('should use center as default position', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Test message'
+    });
+    expect(snackbar.config.position).toBe(SNACKBAR_POSITIONS.CENTER);
+  });
+  test('should set message text', () => {
+    const message = 'Test message';
+    const snackbar = createMockSnackbar({
+      message
+    });
+    expect(snackbar.config.message).toBe(message);
+    expect(typeof snackbar.getMessage).toBe('function');
+  });
+  test('should add action button when specified', () => {
+    const action = 'Undo';
+    const snackbar = createMockSnackbar({
+      message: 'Action completed',
+      action
+    });
+    expect(snackbar.actionButton).toBeDefined();
+    expect(snackbar.actionButton?.textContent).toBe(action);
+  });
+  test('should not add action button when not specified', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Simple message'
+    });
+    expect(snackbar.actionButton).toBeUndefined();
+  });
+  test('should set default duration when not specified', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Test message'
+    });
+    expect(snackbar.config.duration).toBe(4000);
+  });
+  test('should respect custom duration', () => {
+    const duration = 2000;
+    const snackbar = createMockSnackbar({
+      message: 'Test message',
+      duration
+    });
+    expect(snackbar.config.duration).toBe(duration);
+  });
+  test('should allow duration of 0 (no auto-dismiss)', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Test message',
+      duration: 0
+    });
+    expect(snackbar.config.duration).toBe(0);
+  });
+  test('should register event handlers', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Test message'
+    });
+    // Verify event API exists
+    expect(typeof snackbar.on).toBe('function');
+    expect(typeof snackbar.off).toBe('function');
+    // Check event handling
+    const handler = mock(() => {});
+    snackbar.on('dismiss', handler);
+    // Trigger dismiss event
+    if (snackbar.emit) {
+      snackbar.emit('dismiss');
+      expect(handler).toHaveBeenCalled();
+    }
+  });
+  test('should expose show and hide methods', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Test message'
+    });
+    expect(typeof snackbar.show).toBe('function');
+    expect(typeof snackbar.hide).toBe('function');
+  });
+  test('should allow updating message', () => {
+    const initialMessage = 'Initial message';
+    const snackbar = createMockSnackbar({
+      message: initialMessage
+    });
+    expect(snackbar.getMessage()).toBe(initialMessage);
+    const updatedMessage = 'Updated message';
+    snackbar.setMessage(updatedMessage);
+    expect(snackbar.getMessage()).toBe(updatedMessage);
+  });
+  test('should have dismiss timer functionality', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Test message'
+    });
+    expect(snackbar.timer).toBeDefined();
+    expect(typeof snackbar.timer?.start).toBe('function');
+    expect(typeof snackbar.timer?.stop).toBe('function');
+  });
+  test('should have an API for position management', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Test message'
+    });
+    expect(snackbar.position).toBeDefined();
+    if (snackbar.position) {
+      expect(typeof snackbar.position.getPosition).toBe('function');
+      expect(typeof snackbar.position.setPosition).toBe('function');
+    }
+  });
+  test('should clean up resources on destroy', () => {
+    const snackbar = createMockSnackbar({
+      message: 'Test message'
+    });
+    expect(typeof snackbar.destroy).toBe('function');
+    // Mock any internal methods that might be called during destroy
+    if (snackbar.timer) {
+      snackbar.timer.stop = mock(snackbar.timer.stop);
+    }
+    // Call destroy
+    snackbar.destroy();
+    // Check if timer was stopped
+    if (snackbar.timer && typeof snackbar.timer.stop === 'function') {
+      expect(snackbar.timer.stop).toHaveBeenCalled();
+    }
+  });
+  test('should apply custom class', () => {
+    const customClass = 'custom-snackbar';
+    const snackbar = createMockSnackbar({
+      message: 'Test message',
+      class: customClass
+    });
+    expect(snackbar.element.className).toContain(customClass);
+  });
+});