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/textfield.test.ts ADDED Viewed

@@ -0,0 +1,400 @@
+// test/components/textfield.test.ts
+import { describe, test, expect, mock } 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.HTMLInputElement = dom.window.HTMLInputElement;
+global.HTMLTextAreaElement = dom.window.HTMLTextAreaElement;
+global.Event = dom.window.Event;
+global.CustomEvent = dom.window.CustomEvent;
+// Import types directly to avoid circular dependencies
+import type {
+  TextfieldComponent,
+  TextfieldConfig,
+  TextfieldVariant,
+  TextfieldTypes,
+  TextfieldSize
+} from '../../src/components/textfield/types';
+// Define constants here to avoid circular dependencies
+const TEXTFIELD_VARIANTS = {
+  FILLED: 'filled',
+  OUTLINED: 'outlined'
+} as const;
+const TEXTFIELD_SIZES = {
+  SMALL: 'small',
+  MEDIUM: 'medium',
+  LARGE: 'large'
+} as const;
+const TEXTFIELD_TYPES = {
+  TEXT: 'text',
+  PASSWORD: 'password',
+  EMAIL: 'email',
+  NUMBER: 'number',
+  TEL: 'tel',
+  URL: 'url',
+  SEARCH: 'search',
+  MULTILINE: 'multiline'
+} as const;
+// Create a mock textfield implementation
+const createTextfield = (config: TextfieldConfig = {}): TextfieldComponent => {
+  // Create base element
+  const element = document.createElement('div');
+  element.className = `mtrl-textfield ${config.class || ''}`;
+  // Add variant class if provided
+  if (config.variant) {
+    element.classList.add(`mtrl-textfield--${config.variant}`);
+  }
+  // Add size class if provided
+  if (config.size) {
+    element.classList.add(`mtrl-textfield--${config.size}`);
+  }
+  // Create input element
+  const input = document.createElement(config.type === TEXTFIELD_TYPES.MULTILINE ? 'textarea' : 'input') as HTMLInputElement | HTMLTextAreaElement;
+  input.className = 'mtrl-textfield-input';
+  if (input instanceof HTMLInputElement) {
+    input.type = config.type || TEXTFIELD_TYPES.TEXT;
+  }
+  input.value = config.value || '';
+  input.placeholder = config.placeholder || '';
+  if (config.name) input.name = config.name;
+  if (config.maxLength) input.maxLength = config.maxLength;
+  if (config.required) input.required = true;
+  if (config.disabled) input.disabled = true;
+  element.appendChild(input);
+  // Create label if provided
+  let label: HTMLLabelElement | null = null;
+  if (config.label) {
+    label = document.createElement('label');
+    label.className = 'mtrl-textfield-label';
+    label.textContent = config.label;
+    element.appendChild(label);
+  }
+  // Event handlers
+  const eventHandlers: Record<string, EventListener[]> = {};
+  // Create the textfield component instance
+  const textfield: TextfieldComponent = {
+    element,
+    input,
+    config,
+    getValue: () => input.value,
+    setValue: (value: string) => {
+      input.value = value || '';
+      return textfield;
+    },
+    setLabel: (text: string) => {
+      if (label) {
+        label.textContent = text;
+      }
+      return textfield;
+    },
+    getLabel: () => label?.textContent || '',
+    setAttribute: (name: string, value: string) => {
+      input.setAttribute(name, value);
+      return textfield;
+    },
+    getAttribute: (name: string) => input.getAttribute(name),
+    removeAttribute: (name: string) => {
+      input.removeAttribute(name);
+      return textfield;
+    },
+    on: (event: string, handler: Function) => {
+      const listener = handler as EventListener;
+      if (!eventHandlers[event]) {
+        eventHandlers[event] = [];
+      }
+      eventHandlers[event].push(listener);
+      input.addEventListener(event, listener);
+      return textfield;
+    },
+    off: (event: string, handler: Function) => {
+      const listener = handler as EventListener;
+      input.removeEventListener(event, listener);
+      if (eventHandlers[event]) {
+        eventHandlers[event] = eventHandlers[event].filter(h => h !== listener);
+      }
+      return textfield;
+    },
+    enable: () => {
+      input.disabled = false;
+      element.classList.remove('mtrl-textfield--disabled');
+      return textfield;
+    },
+    disable: () => {
+      input.disabled = true;
+      element.classList.add('mtrl-textfield--disabled');
+      return textfield;
+    },
+    destroy: () => {
+      // Clean up event listeners
+      Object.entries(eventHandlers).forEach(([event, handlers]) => {
+        handlers.forEach(handler => {
+          input.removeEventListener(event, handler);
+        });
+      });
+      // Clear handlers
+      Object.keys(eventHandlers).forEach(key => {
+        eventHandlers[key] = [];
+      });
+      // Remove from DOM if attached
+      if (element.parentNode) {
+        element.parentNode.removeChild(element);
+      }
+    }
+  };
+  return textfield;
+};
+describe('Textfield Component', () => {
+  test('should create a textfield element', () => {
+    const textfield = createTextfield();
+    expect(textfield.element).toBeDefined();
+    expect(textfield.element.tagName).toBe('DIV');
+    expect(textfield.element.className).toContain('mtrl-textfield');
+  });
+  test('should apply variant class', () => {
+    // Test filled variant
+    const filledTextField = createTextfield({
+      variant: TEXTFIELD_VARIANTS.FILLED
+    });
+    expect(filledTextField.element.className).toContain('mtrl-textfield--filled');
+    // Test outlined variant
+    const outlinedTextField = createTextfield({
+      variant: TEXTFIELD_VARIANTS.OUTLINED
+    });
+    expect(outlinedTextField.element.className).toContain('mtrl-textfield--outlined');
+  });
+  test('should apply size class', () => {
+    // Test small size
+    const smallTextField = createTextfield({
+      size: TEXTFIELD_SIZES.SMALL
+    });
+    expect(smallTextField.element.className).toContain('mtrl-textfield--small');
+    // Test large size
+    const largeTextField = createTextfield({
+      size: TEXTFIELD_SIZES.LARGE
+    });
+    expect(largeTextField.element.className).toContain('mtrl-textfield--large');
+  });
+  test('should set initial value', () => {
+    const initialValue = 'Hello World';
+    const textfield = createTextfield({
+      value: initialValue
+    });
+    expect(textfield.getValue()).toBe(initialValue);
+  });
+  test('should update value', () => {
+    const textfield = createTextfield();
+    const newValue = 'Updated Value';
+    textfield.setValue(newValue);
+    expect(textfield.getValue()).toBe(newValue);
+  });
+  test('should set and get label', () => {
+    const initialLabel = 'Username';
+    const textfield = createTextfield({
+      label: initialLabel
+    });
+    expect(textfield.getLabel()).toBe(initialLabel);
+    // Update label
+    const newLabel = 'New Label';
+    textfield.setLabel(newLabel);
+    expect(textfield.getLabel()).toBe(newLabel);
+  });
+  test('should handle attributes', () => {
+    const textfield = createTextfield();
+    // Set attribute
+    textfield.setAttribute('data-test', 'test-value');
+    expect(textfield.getAttribute('data-test')).toBe('test-value');
+    // Remove attribute
+    textfield.removeAttribute('data-test');
+    expect(textfield.getAttribute('data-test')).toBeNull();
+  });
+  test('should support disabled state', () => {
+    // Create initially enabled
+    const textfield = createTextfield();
+    // Check API methods
+    expect(typeof textfield.disable).toBe('function');
+    expect(typeof textfield.enable).toBe('function');
+    // Disable and check state
+    textfield.disable();
+    expect(textfield.input.disabled).toBe(true);
+    // Enable and check state
+    textfield.enable();
+    expect(textfield.input.disabled).toBe(false);
+    // Test initially disabled through config
+    const disabledTextfield = createTextfield({ disabled: true });
+    expect(disabledTextfield.input.disabled).toBe(true);
+  });
+  test('should support different input types', () => {
+    // Test regular text input
+    const textInput = createTextfield({
+      type: TEXTFIELD_TYPES.TEXT
+    });
+    if (textInput.input instanceof HTMLInputElement) {
+      expect(textInput.input.type).toBe('text');
+    }
+    // Test password input
+    const passwordInput = createTextfield({
+      type: TEXTFIELD_TYPES.PASSWORD
+    });
+    if (passwordInput.input instanceof HTMLInputElement) {
+      expect(passwordInput.input.type).toBe('password');
+    }
+    // Test email input
+    const emailInput = createTextfield({
+      type: TEXTFIELD_TYPES.EMAIL
+    });
+    if (emailInput.input instanceof HTMLInputElement) {
+      expect(emailInput.input.type).toBe('email');
+    }
+    // Test multiline input (textarea)
+    const multilineInput = createTextfield({
+      type: TEXTFIELD_TYPES.MULTILINE
+    });
+    expect(multilineInput.input.tagName).toBe('TEXTAREA');
+  });
+  test('should register event handlers', () => {
+    const textfield = createTextfield();
+    // Create a mock handler
+    const mockHandler = mock(() => {});
+    // Register handler
+    textfield.on('input', mockHandler);
+    // Trigger an input event
+    const inputEvent = new Event('input');
+    textfield.input.dispatchEvent(inputEvent);
+    // Check that handler was called
+    expect(mockHandler.mock.calls.length).toBeGreaterThan(0);
+    // Unregister handler and trigger again
+    textfield.off('input', mockHandler);
+    textfield.input.dispatchEvent(inputEvent);
+    // Handler call count should not increase
+    expect(mockHandler.mock.calls.length).toBe(1);
+  });
+  test('should apply custom class', () => {
+    const customClass = 'custom-textfield';
+    const textfield = createTextfield({
+      class: customClass
+    });
+    expect(textfield.element.className).toContain(customClass);
+  });
+  test('should set placeholder', () => {
+    const placeholder = 'Enter text here';
+    const textfield = createTextfield({
+      placeholder
+    });
+    expect(textfield.input.placeholder).toBe(placeholder);
+  });
+  test('should set required attribute', () => {
+    const textfield = createTextfield({
+      required: true
+    });
+    expect(textfield.input.required).toBe(true);
+  });
+  test('should set name attribute', () => {
+    const name = 'username';
+    const textfield = createTextfield({
+      name
+    });
+    expect(textfield.input.name).toBe(name);
+  });
+  test('should set maxLength attribute', () => {
+    const maxLength = 50;
+    const textfield = createTextfield({
+      maxLength
+    });
+    expect(textfield.input.maxLength).toBe(maxLength);
+  });
+  test('should properly clean up resources on destroy', () => {
+    const textfield = createTextfield();
+    const parentElement = document.createElement('div');
+    parentElement.appendChild(textfield.element);
+    // Destroy the component
+    textfield.destroy();
+    // Check if element was removed
+    expect(parentElement.children.length).toBe(0);
+  });
+});