angular-grab-monorepo 0.1.3

package/packages/angular-grab/src/core/__tests__/generate-snippet.test.ts

@@ -0,0 +1,149 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { generateSnippet } from '../clipboard/generate-snippet';
+import type { ElementContext, ComponentStackEntry } from '../types';
+
+function makeContext(overrides: Partial<ElementContext> = {}): ElementContext {
+  return {
+    element: document.createElement('div'),
+    html: '<div>hello</div>',
+    componentName: null,
+    filePath: null,
+    line: null,
+    column: null,
+    componentStack: [],
+    selector: 'div',
+    cssClasses: [],
+    ...overrides,
+  };
+}
+
+describe('generateSnippet', () => {
+  it('generates HTML-only snippet when no component info', () => {
+    const ctx = makeContext({ html: '<button>Click</button>' });
+    const result = generateSnippet(ctx, 20);
+    expect(result).toBe('<button>Click</button>');
+  });
+
+  it('includes component name and file path', () => {
+    const ctx = makeContext({
+      html: '<div>test</div>',
+      componentName: 'AppComponent',
+      filePath: 'src/app/app.component.ts',
+      line: 10,
+      column: 5,
+    });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('<div>test</div>');
+    expect(result).toContain('in AppComponent');
+    expect(result).toContain('at src/app/app.component.ts:10:5');
+  });
+
+  it('includes component name without file path', () => {
+    const ctx = makeContext({ componentName: 'MyComponent' });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('in MyComponent');
+    expect(result).not.toContain('at');
+  });
+
+  it('includes file path without component name', () => {
+    const ctx = makeContext({
+      filePath: 'src/app.ts',
+      line: 5,
+    });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('at src/app.ts:5');
+    expect(result).not.toContain('in ');
+  });
+
+  it('includes component stack trace', () => {
+    const stack: ComponentStackEntry[] = [
+      { name: 'ChildComponent', filePath: 'src/child.ts', line: 3, column: 1 },
+      { name: 'ParentComponent', filePath: 'src/parent.ts', line: 10, column: null },
+      { name: 'AppComponent', filePath: 'src/app.ts', line: null, column: null },
+    ];
+    const ctx = makeContext({
+      html: '<span>hi</span>',
+      componentStack: stack,
+    });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('in ChildComponent at src/child.ts:3:1');
+    expect(result).toContain('in ParentComponent at src/parent.ts:10');
+    expect(result).toContain('in AppComponent at src/app.ts');
+  });
+
+  it('prefers component stack over componentName/filePath', () => {
+    const stack: ComponentStackEntry[] = [
+      { name: 'Inner', filePath: 'inner.ts', line: 1, column: null },
+    ];
+    const ctx = makeContext({
+      componentName: 'Outer',
+      filePath: 'outer.ts',
+      line: 99,
+      column: null,
+      componentStack: stack,
+    });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('in Inner at inner.ts:1');
+    expect(result).not.toContain('Outer');
+  });
+
+  it('respects maxLines truncation', () => {
+    const multilineHtml = Array.from({ length: 10 }, (_, i) => `  <line${i}/>`).join('\n');
+    const ctx = makeContext({ html: multilineHtml });
+    const result = generateSnippet(ctx, 3);
+
+    const lines = result.split('\n');
+    // 3 HTML lines + "  ..." truncation line
+    expect(lines.length).toBe(4);
+    expect(lines[3]).toBe('  ...');
+  });
+
+  it('does not truncate when HTML is within maxLines', () => {
+    const html = '<div>\n  <span>hi</span>\n</div>';
+    const ctx = makeContext({ html });
+    const result = generateSnippet(ctx, 10);
+
+    expect(result).not.toContain('...');
+    expect(result).toBe(html);
+  });
+
+  it('cleans Angular attributes from HTML', () => {
+    const html = '<div _nghost-abc-123="">content</div>';
+    const ctx = makeContext({ html });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toBe('<div>content</div>');
+    expect(result).not.toContain('_nghost');
+  });
+
+  it('handles null fields gracefully', () => {
+    const ctx = makeContext({
+      componentName: null,
+      filePath: null,
+      line: null,
+      column: null,
+      componentStack: [],
+    });
+    const result = generateSnippet(ctx, 20);
+
+    // Should just be the HTML, no location info
+    expect(result).toBe('<div>hello</div>');
+  });
+
+  it('handles stack entry with null filePath', () => {
+    const stack: ComponentStackEntry[] = [
+      { name: 'Comp', filePath: null, line: null, column: null },
+    ];
+    const ctx = makeContext({ componentStack: stack });
+    const result = generateSnippet(ctx, 20);
+
+    expect(result).toContain('in Comp');
+    expect(result).not.toContain('at');
+  });
+});

package/packages/angular-grab/src/core/__tests__/plugin-registry.test.ts

@@ -0,0 +1,286 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createPluginRegistry } from '../plugins/plugin-registry';
+import type { Plugin, AngularGrabAPI, ElementContext } from '../types';
+
+function makeMockApi(): AngularGrabAPI {
+  return {
+    activate: vi.fn(),
+    deactivate: vi.fn(),
+    toggle: vi.fn(),
+    isActive: vi.fn(() => false),
+    setOptions: vi.fn(),
+    registerPlugin: vi.fn(),
+    unregisterPlugin: vi.fn(),
+    setComponentResolver: vi.fn(),
+    setSourceResolver: vi.fn(),
+    showToolbar: vi.fn(),
+    hideToolbar: vi.fn(),
+    setThemeMode: vi.fn(),
+    getHistory: vi.fn(() => []),
+    clearHistory: vi.fn(),
+    dispose: vi.fn(),
+  };
+}
+
+function makeContext(overrides: Partial<ElementContext> = {}): ElementContext {
+  return {
+    element: null as any,
+    html: '<div>test</div>',
+    componentName: null,
+    filePath: null,
+    line: null,
+    column: null,
+    componentStack: [],
+    selector: 'div',
+    cssClasses: [],
+    ...overrides,
+  };
+}
+
+describe('createPluginRegistry', () => {
+  it('registers a plugin', () => {
+    const registry = createPluginRegistry();
+    const api = makeMockApi();
+    const plugin: Plugin = { name: 'test-plugin' };
+
+    registry.register(plugin, api);
+
+    expect(registry.getPlugins()).toHaveLength(1);
+    expect(registry.getPlugins()[0].name).toBe('test-plugin');
+  });
+
+  it('calls setup on register and stores cleanup', () => {
+    const registry = createPluginRegistry();
+    const api = makeMockApi();
+    const cleanup = vi.fn();
+    const plugin: Plugin = {
+      name: 'with-setup',
+      setup: vi.fn(() => cleanup),
+    };
+
+    registry.register(plugin, api);
+
+    expect(plugin.setup).toHaveBeenCalledWith(api);
+  });
+
+  it('unregisters a plugin', () => {
+    const registry = createPluginRegistry();
+    const api = makeMockApi();
+    const plugin: Plugin = { name: 'removable' };
+
+    registry.register(plugin, api);
+    expect(registry.getPlugins()).toHaveLength(1);
+
+    registry.unregister('removable');
+    expect(registry.getPlugins()).toHaveLength(0);
+  });
+
+  it('calls cleanup on unregister', () => {
+    const registry = createPluginRegistry();
+    const api = makeMockApi();
+    const cleanup = vi.fn();
+    const plugin: Plugin = {
+      name: 'cleanup-test',
+      setup: () => cleanup,
+    };
+
+    registry.register(plugin, api);
+    registry.unregister('cleanup-test');
+
+    expect(cleanup).toHaveBeenCalledTimes(1);
+  });
+
+  it('re-registers a plugin by unregistering the old one first', () => {
+    const registry = createPluginRegistry();
+    const api = makeMockApi();
+    const cleanup = vi.fn();
+    const plugin1: Plugin = {
+      name: 'dup',
+      setup: () => cleanup,
+    };
+    const plugin2: Plugin = { name: 'dup' };
+
+    registry.register(plugin1, api);
+    registry.register(plugin2, api);
+
+    expect(cleanup).toHaveBeenCalledTimes(1);
+    expect(registry.getPlugins()).toHaveLength(1);
+  });
+
+  it('unregister is a no-op for unknown plugins', () => {
+    const registry = createPluginRegistry();
+    // Should not throw
+    registry.unregister('nonexistent');
+    expect(registry.getPlugins()).toHaveLength(0);
+  });
+
+  describe('callHook', () => {
+    it('calls registered plugin hooks', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const onActivate = vi.fn();
+      const plugin: Plugin = {
+        name: 'hook-test',
+        hooks: { onActivate },
+      };
+
+      registry.register(plugin, api);
+      registry.callHook('onActivate');
+
+      expect(onActivate).toHaveBeenCalledTimes(1);
+    });
+
+    it('calls hooks on all registered plugins', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const onActivate1 = vi.fn();
+      const onActivate2 = vi.fn();
+
+      registry.register({ name: 'p1', hooks: { onActivate: onActivate1 } }, api);
+      registry.register({ name: 'p2', hooks: { onActivate: onActivate2 } }, api);
+      registry.callHook('onActivate');
+
+      expect(onActivate1).toHaveBeenCalledTimes(1);
+      expect(onActivate2).toHaveBeenCalledTimes(1);
+    });
+
+    it('passes arguments to hooks', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const onElementSelect = vi.fn();
+      const ctx = makeContext();
+
+      registry.register({ name: 'args-test', hooks: { onElementSelect } }, api);
+      registry.callHook('onElementSelect', ctx);
+
+      expect(onElementSelect).toHaveBeenCalledWith(ctx);
+    });
+
+    it('handles plugins with no hooks gracefully', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+
+      registry.register({ name: 'no-hooks' }, api);
+
+      // Should not throw
+      expect(() => registry.callHook('onActivate')).not.toThrow();
+    });
+
+    it('handles plugins without the specific hook', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+
+      registry.register(
+        { name: 'partial', hooks: { onDeactivate: vi.fn() } },
+        api,
+      );
+
+      // Should not throw when calling a hook the plugin doesn't have
+      expect(() => registry.callHook('onActivate')).not.toThrow();
+    });
+
+    it('catches and warns on hook errors without stopping other plugins', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+      const onActivate2 = vi.fn();
+
+      registry.register({
+        name: 'bad',
+        hooks: { onActivate: () => { throw new Error('boom'); } },
+      }, api);
+      registry.register({ name: 'good', hooks: { onActivate: onActivate2 } }, api);
+
+      registry.callHook('onActivate');
+
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      expect(onActivate2).toHaveBeenCalledTimes(1);
+      warnSpy.mockRestore();
+    });
+  });
+
+  describe('callTransformHook', () => {
+    it('chains transforms across plugins', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const ctx = makeContext();
+
+      registry.register({
+        name: 'upper',
+        hooks: { transformCopyContent: (text: string) => text.toUpperCase() },
+      }, api);
+      registry.register({
+        name: 'prefix',
+        hooks: { transformCopyContent: (text: string) => `PREFIX:${text}` },
+      }, api);
+
+      const result = registry.callTransformHook('hello', ctx);
+      expect(result).toBe('PREFIX:HELLO');
+    });
+
+    it('returns original text when no plugins have transform', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const ctx = makeContext();
+
+      registry.register({ name: 'no-transform' }, api);
+
+      const result = registry.callTransformHook('original', ctx);
+      expect(result).toBe('original');
+    });
+
+    it('catches transform errors and continues', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const ctx = makeContext();
+      const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
+
+      registry.register({
+        name: 'bad-transform',
+        hooks: { transformCopyContent: () => { throw new Error('fail'); } },
+      }, api);
+      registry.register({
+        name: 'good-transform',
+        hooks: { transformCopyContent: (text: string) => text + '-suffix' },
+      }, api);
+
+      // The bad transform throws, so the input to the good transform is still the original
+      const result = registry.callTransformHook('input', ctx);
+      expect(result).toBe('input-suffix');
+      expect(warnSpy).toHaveBeenCalledTimes(1);
+      warnSpy.mockRestore();
+    });
+  });
+
+  describe('dispose', () => {
+    it('calls all cleanups and clears plugins', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+      const cleanup1 = vi.fn();
+      const cleanup2 = vi.fn();
+
+      registry.register({ name: 'p1', setup: () => cleanup1 }, api);
+      registry.register({ name: 'p2', setup: () => cleanup2 }, api);
+
+      registry.dispose();
+
+      expect(cleanup1).toHaveBeenCalledTimes(1);
+      expect(cleanup2).toHaveBeenCalledTimes(1);
+      expect(registry.getPlugins()).toHaveLength(0);
+    });
+
+    it('ignores errors during cleanup', () => {
+      const registry = createPluginRegistry();
+      const api = makeMockApi();
+
+      registry.register({
+        name: 'err',
+        setup: () => () => { throw new Error('cleanup fail'); },
+      }, api);
+
+      // Should not throw
+      expect(() => registry.dispose()).not.toThrow();
+      expect(registry.getPlugins()).toHaveLength(0);
+    });
+  });
+});

package/packages/angular-grab/src/core/__tests__/store.test.ts

@@ -0,0 +1,118 @@
+import { describe, it, expect, vi } from 'vitest';
+import { createStore } from '../store';
+import type { AngularGrabOptions } from '../types';
+
+function makeOptions(overrides: Partial<AngularGrabOptions> = {}): AngularGrabOptions {
+  return {
+    activationKey: 'Meta+C',
+    activationMode: 'hold',
+    keyHoldDuration: 0,
+    maxContextLines: 20,
+    enabled: true,
+    enableInInputs: false,
+    devOnly: true,
+    showToolbar: true,
+    themeMode: 'dark',
+    ...overrides,
+  };
+}
+
+describe('createStore', () => {
+  it('creates state with correct default values', () => {
+    const opts = makeOptions();
+    const store = createStore(opts);
+
+    expect(store.state.active).toBe(false);
+    expect(store.state.frozen).toBe(false);
+    expect(store.state.hoveredElement).toBeNull();
+    expect(store.state.options).toBe(opts);
+    expect(store.state.toolbar.visible).toBe(true);
+    expect(store.state.toolbar.themeMode).toBe('dark');
+    expect(store.state.toolbar.history).toEqual([]);
+    expect(store.state.toolbar.pendingAction).toBeNull();
+  });
+
+  it('respects showToolbar=false in options', () => {
+    const store = createStore(makeOptions({ showToolbar: false }));
+    expect(store.state.toolbar.visible).toBe(false);
+  });
+
+  it('respects themeMode in options', () => {
+    const store = createStore(makeOptions({ themeMode: 'light' }));
+    expect(store.state.toolbar.themeMode).toBe('light');
+  });
+
+  it('notifies listeners on state changes', () => {
+    const store = createStore(makeOptions());
+    const listener = vi.fn();
+
+    store.subscribe(listener);
+    store.state.active = true;
+
+    expect(listener).toHaveBeenCalledTimes(1);
+    expect(listener).toHaveBeenCalledWith(store.state, 'active');
+  });
+
+  it('does not notify listeners when value has not changed', () => {
+    const store = createStore(makeOptions());
+    const listener = vi.fn();
+
+    store.subscribe(listener);
+    store.state.active = false; // same as default
+
+    expect(listener).not.toHaveBeenCalled();
+  });
+
+  it('subscribe returns an unsubscribe function that works', () => {
+    const store = createStore(makeOptions());
+    const listener = vi.fn();
+
+    const unsub = store.subscribe(listener);
+    store.state.active = true;
+    expect(listener).toHaveBeenCalledTimes(1);
+
+    unsub();
+    store.state.active = false;
+    expect(listener).toHaveBeenCalledTimes(1); // no additional call
+  });
+
+  it('supports multiple listeners', () => {
+    const store = createStore(makeOptions());
+    const listener1 = vi.fn();
+    const listener2 = vi.fn();
+
+    store.subscribe(listener1);
+    store.subscribe(listener2);
+    store.state.frozen = true;
+
+    expect(listener1).toHaveBeenCalledTimes(1);
+    expect(listener2).toHaveBeenCalledTimes(1);
+  });
+
+  it('unsubscribing one listener does not affect others', () => {
+    const store = createStore(makeOptions());
+    const listener1 = vi.fn();
+    const listener2 = vi.fn();
+
+    const unsub1 = store.subscribe(listener1);
+    store.subscribe(listener2);
+
+    unsub1();
+    store.state.active = true;
+
+    expect(listener1).not.toHaveBeenCalled();
+    expect(listener2).toHaveBeenCalledTimes(1);
+  });
+
+  it('passes the proxy state and changed key to listeners', () => {
+    const store = createStore(makeOptions());
+    const listener = vi.fn();
+
+    store.subscribe(listener);
+    store.state.frozen = true;
+
+    const [receivedState, receivedKey] = listener.mock.calls[0];
+    expect(receivedKey).toBe('frozen');
+    expect(receivedState.frozen).toBe(true);
+  });
+});

package/packages/angular-grab/src/core/__tests__/utils.test.ts

@@ -0,0 +1,85 @@
+// @vitest-environment jsdom
+import { describe, it, expect } from 'vitest';
+import { escapeHtml, cleanAngularAttrs } from '../utils';
+
+describe('escapeHtml', () => {
+  it('escapes ampersands', () => {
+    expect(escapeHtml('foo & bar')).toBe('foo & bar');
+  });
+
+  it('escapes angle brackets', () => {
+    expect(escapeHtml('<div>')).toBe('&lt;div&gt;');
+  });
+
+  it('passes through double quotes (not special in text nodes)', () => {
+    // innerHTML only escapes <, >, & in text content — not quotes
+    expect(escapeHtml('"hello"')).toBe('"hello"');
+  });
+
+  it('passes through single quotes (not special in text nodes)', () => {
+    expect(escapeHtml("it's")).toBe("it's");
+  });
+
+  it('escapes multiple special characters together', () => {
+    expect(escapeHtml('<a href="x">&</a>')).toBe(
+      '&lt;a href="x"&gt;&amp;&lt;/a&gt;',
+    );
+  });
+
+  it('returns empty string for empty input', () => {
+    expect(escapeHtml('')).toBe('');
+  });
+
+  it('returns plain text unchanged', () => {
+    expect(escapeHtml('hello world')).toBe('hello world');
+  });
+});
+
+describe('cleanAngularAttrs', () => {
+  it('removes _nghost attributes with values', () => {
+    const html = '<div _nghost-abc-123=""></div>';
+    expect(cleanAngularAttrs(html)).toBe('<div></div>');
+  });
+
+  it('removes _ngcontent attributes with values', () => {
+    const html = '<span _ngcontent-xyz-456=""></span>';
+    expect(cleanAngularAttrs(html)).toBe('<span></span>');
+  });
+
+  it('removes _nghost attributes without values', () => {
+    const html = '<div _nghost-abc-123></div>';
+    expect(cleanAngularAttrs(html)).toBe('<div></div>');
+  });
+
+  it('removes _ngcontent attributes without values', () => {
+    const html = '<span _ngcontent-xyz-456></span>';
+    expect(cleanAngularAttrs(html)).toBe('<span></span>');
+  });
+
+  it('removes multiple Angular attributes from one tag', () => {
+    const html = '<div _nghost-abc-123="" _ngcontent-xyz-456="">text</div>';
+    expect(cleanAngularAttrs(html)).toBe('<div>text</div>');
+  });
+
+  it('removes Angular attributes from nested elements', () => {
+    const html =
+      '<div _nghost-a-1=""><span _ngcontent-b-2="">hi</span></div>';
+    expect(cleanAngularAttrs(html)).toBe('<div><span>hi</span></div>');
+  });
+
+  it('preserves non-Angular attributes', () => {
+    const html = '<div class="foo" id="bar" _nghost-abc-123="">text</div>';
+    expect(cleanAngularAttrs(html)).toBe(
+      '<div class="foo" id="bar">text</div>',
+    );
+  });
+
+  it('returns unchanged HTML when no Angular attributes present', () => {
+    const html = '<div class="test">hello</div>';
+    expect(cleanAngularAttrs(html)).toBe(html);
+  });
+
+  it('handles empty string', () => {
+    expect(cleanAngularAttrs('')).toBe('');
+  });
+});