@dragonworks/ngx-dashboard-widgets 20.0.6 → 20.1.1

package/src/lib/directives/__tests__/responsive-text.directive.spec.ts

@@ -1,906 +0,0 @@
-import { Component, DebugElement, PLATFORM_ID } from '@angular/core';
-import { ComponentFixture, TestBed, fakeAsync, tick, flush } from '@angular/core/testing';
-import { By } from '@angular/platform-browser';
-import { ResponsiveTextDirective } from '../responsive-text.directive';
-
-@Component({
-  template: `
-    <div class="container" [style.width.px]="containerWidth" [style.height.px]="containerHeight" [style.padding.px]="padding">
-      <span 
-        responsiveText 
-        [minFontSize]="minFont" 
-        [maxFontSize]="maxFont" 
-        [lineHeight]="lineHeight"
-        [observeMutations]="observeMutations"
-        [debounceMs]="debounceMs">
-        {{ text }}
-      </span>
-    </div>
-  `,
-  styles: [`
-    .container {
-      position: relative;
-      box-sizing: border-box;
-    }
-  `],
-  imports: [ResponsiveTextDirective]
-})
-class TestComponent {
-  containerWidth = 200;
-  containerHeight = 50;
-  padding = 0;
-  text = 'Sample text';
-  minFont = 8;
-  maxFont = 72;
-  lineHeight = 1.1;
-  observeMutations = true;
-  debounceMs = 16;
-}
-
-describe('ResponsiveTextDirective', () => {
-  let component: TestComponent;
-  let fixture: ComponentFixture<TestComponent>;
-  let directiveElement: DebugElement;
-  let spanElement: HTMLElement;
-  let containerElement: HTMLElement;
-  let directive: ResponsiveTextDirective;
-
-  // Mock objects
-  let mockCanvas: HTMLCanvasElement;
-  let mockCtx: jasmine.SpyObj<CanvasRenderingContext2D>;
-  let mockResizeObserver: jasmine.SpyObj<ResizeObserver>;
-  let mockMutationObserver: jasmine.SpyObj<MutationObserver>;
-
-  beforeEach(async () => {
-    // Setup canvas mocks
-    mockCtx = jasmine.createSpyObj('CanvasRenderingContext2D', ['measureText']);
-    mockCtx.measureText.and.returnValue({
-      width: 100,
-      fontBoundingBoxAscent: 10,
-      fontBoundingBoxDescent: 3
-    } as TextMetrics);
-    
-    // Add font property to mock context
-    Object.defineProperty(mockCtx, 'font', {
-      value: '16px sans-serif',
-      writable: true,
-      configurable: true
-    });
-    
-    mockCanvas = jasmine.createSpyObj('HTMLCanvasElement', ['getContext']);
-    (mockCanvas.getContext as jasmine.Spy).and.returnValue(mockCtx);
-
-    // Setup observer mocks
-    mockResizeObserver = jasmine.createSpyObj('ResizeObserver', ['observe', 'disconnect']);
-    mockMutationObserver = jasmine.createSpyObj('MutationObserver', ['observe', 'disconnect']);
-
-    // Mock global objects
-    const originalCreateElement = document.createElement.bind(document);
-    spyOn(document, 'createElement').and.callFake((tagName: string) => {
-      if (tagName === 'canvas') {
-        return mockCanvas;
-      }
-      return originalCreateElement(tagName);
-    });
-
-    spyOn(window, 'ResizeObserver').and.returnValue(mockResizeObserver);
-    spyOn(window, 'MutationObserver').and.returnValue(mockMutationObserver);
-
-    await TestBed.configureTestingModule({
-      imports: [TestComponent, ResponsiveTextDirective]
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TestComponent);
-    component = fixture.componentInstance;
-    
-    directiveElement = fixture.debugElement.query(By.directive(ResponsiveTextDirective));
-    spanElement = directiveElement.nativeElement;
-    containerElement = spanElement.parentElement!;
-    directive = directiveElement.injector.get(ResponsiveTextDirective);
-  });
-
-  describe('Core Functionality', () => {
-    beforeEach(() => {
-      // Setup default canvas measurements
-      mockCtx.measureText.and.returnValue({
-        width: 100,
-        fontBoundingBoxAscent: 10,
-        fontBoundingBoxDescent: 3
-      } as TextMetrics);
-    });
-
-    it('should create directive instance', () => {
-      expect(directive).toBeTruthy();
-      expect(spanElement).toBeTruthy();
-    });
-
-    it('should apply host styles correctly', () => {
-      fixture.detectChanges();
-      
-      expect(spanElement.style.display).toBe('block');
-      expect(spanElement.style.width).toBe('100%');
-      expect(spanElement.style.whiteSpace).toBe('nowrap');
-      expect(spanElement.style.overflow).toBe('visible');
-      expect(spanElement.style.textOverflow).toBe('');
-    });
-
-    it('should set transition style on init', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-      
-      expect(spanElement.style.transition).toContain('font-size');
-    }));
-
-    it('should calculate and apply font size based on container dimensions', fakeAsync(() => {
-      component.containerWidth = 200;
-      component.containerHeight = 50;
-      component.text = 'Test';
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      expect(mockCtx.measureText).toHaveBeenCalled();
-      expect(spanElement.style.fontSize).toMatch(/\d+px/);
-      expect(parseFloat(spanElement.style.fontSize)).toBeGreaterThan(0);
-    }));
-
-    it('should respect minimum font size constraint', fakeAsync(() => {
-      component.minFont = 20;
-      component.maxFont = 72;
-      component.text = 'Very long text that should be constrained to minimum';
-      
-      // Mock very wide text to force minimum
-      mockCtx.measureText.and.returnValue({
-        width: 1000,
-        fontBoundingBoxAscent: 20,
-        fontBoundingBoxDescent: 5
-      } as TextMetrics);
-
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      expect(fontSize).toBeGreaterThanOrEqual(20);
-    }));
-
-    it('should respect maximum font size constraint', fakeAsync(() => {
-      component.minFont = 8;
-      component.maxFont = 24;
-      component.text = 'A';
-      component.containerWidth = 1000;
-      component.containerHeight = 1000;
-      
-      // Mock small text to potentially exceed maximum
-      mockCtx.measureText.and.returnValue({
-        width: 10,
-        fontBoundingBoxAscent: 8,
-        fontBoundingBoxDescent: 2
-      } as TextMetrics);
-
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      expect(fontSize).toBeLessThanOrEqual(24);
-    }));
-
-    it('should handle empty text by setting minimum font size', fakeAsync(() => {
-      component.text = '';
-      component.minFont = 16;
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      expect(spanElement.style.fontSize).toBe('16px');
-    }));
-
-    it('should handle whitespace-only text as empty', fakeAsync(() => {
-      component.text = '   \n\t  ';
-      component.minFont = 16;
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      expect(spanElement.style.fontSize).toBe('16px');
-    }));
-  });
-
-  describe('Input Signal Reactivity', () => {
-    beforeEach(() => {
-      mockCtx.measureText.and.returnValue({
-        width: 50,
-        fontBoundingBoxAscent: 10,
-        fontBoundingBoxDescent: 3
-      } as TextMetrics);
-    });
-
-    it('should react to min input changes', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-      
-      component.minFont = 20;
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      expect(fontSize).toBeGreaterThanOrEqual(20);
-    }));
-
-    it('should react to max input changes', fakeAsync(() => {
-      // Start with large container and small max to ensure max is the limiting factor
-      component.containerWidth = 1000;
-      component.containerHeight = 200;
-      component.text = 'A'; // Very short text
-      component.maxFont = 20; // Small max font
-      
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      expect(fontSize).toBeLessThanOrEqual(20);
-      expect(fontSize).toBeGreaterThan(0);
-    }));
-
-    it('should react to lineHeight input changes', fakeAsync(() => {
-      component.lineHeight = 2.0;
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      expect(mockCtx.measureText).toHaveBeenCalled();
-    }));
-
-    it('should react to observeMutations input changes', fakeAsync(() => {
-      component.observeMutations = false;
-      fixture.detectChanges();
-      tick();
-
-      // Should not set up mutation observer when false
-      expect(mockMutationObserver.observe).not.toHaveBeenCalled();
-    }));
-
-    it('should transform input values correctly', fakeAsync(() => {
-      component.minFont = 15;
-      component.maxFont = 60;
-      component.lineHeight = 1.5;
-      component.observeMutations = true;
-      component.debounceMs = 50;
-      
-      fixture.detectChanges();
-      tick();
-
-      expect(directive.minFontSize()).toBe(15);
-      expect(directive.maxFontSize()).toBe(60);
-      expect(directive.lineHeight()).toBe(1.5);
-      expect(directive.observeMutations()).toBe(true);
-      expect(directive.debounceMs()).toBe(50);
-    }));
-  });
-
-  describe('Observer Behavior', () => {
-    beforeEach(() => {
-      // Setup realistic measurements that respond to font size
-      mockCtx.measureText.and.callFake((text: string) => {
-        const fontSize = parseFloat(mockCtx.font?.match(/(\d+)px/)?.[1] || '16');
-        return {
-          width: text.length * fontSize * 0.6,
-          fontBoundingBoxAscent: fontSize * 0.8,
-          fontBoundingBoxDescent: fontSize * 0.2
-        } as TextMetrics;
-      });
-    });
-
-    it('should setup ResizeObserver on parent element', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-
-      expect(window.ResizeObserver).toHaveBeenCalledWith(jasmine.any(Function));
-      expect(mockResizeObserver.observe).toHaveBeenCalledWith(containerElement);
-    }));
-
-    it('should setup MutationObserver when observeMutations is true', fakeAsync(() => {
-      component.observeMutations = true;
-      fixture.detectChanges();
-      tick();
-
-      expect(window.MutationObserver).toHaveBeenCalledWith(jasmine.any(Function));
-      expect(mockMutationObserver.observe).toHaveBeenCalledWith(spanElement, {
-        characterData: true,
-        childList: true,
-        subtree: true
-      });
-    }));
-
-    it('should not setup MutationObserver when observeMutations is false', fakeAsync(() => {
-      component.observeMutations = false;
-      fixture.detectChanges();
-      tick();
-
-      expect(mockMutationObserver.observe).not.toHaveBeenCalled();
-    }));
-
-    it('should setup observers correctly', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-
-      // Verify observers are set up (main functionality test)
-      expect(window.ResizeObserver).toHaveBeenCalledWith(jasmine.any(Function));
-      expect(mockResizeObserver.observe).toHaveBeenCalledWith(containerElement);
-      
-      // If observeMutations is true, MutationObserver should be set up
-      if (component.observeMutations) {
-        expect(window.MutationObserver).toHaveBeenCalledWith(jasmine.any(Function));
-        expect(mockMutationObserver.observe).toHaveBeenCalledWith(spanElement, jasmine.any(Object));
-      }
-    }));
-
-    it('should handle observer callbacks without errors', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const resizeCallback = (window.ResizeObserver as unknown as jasmine.Spy).calls.mostRecent().args[0];
-      
-      // Test that callbacks can be called without throwing
-      expect(() => {
-        resizeCallback([{ contentRect: { width: 300, height: 60 } }]);
-        tick();
-      }).not.toThrow();
-
-      if (component.observeMutations) {
-        const mutationCallback = (window.MutationObserver as unknown as jasmine.Spy).calls.mostRecent().args[0];
-        
-        expect(() => {
-          mutationCallback([{ 
-            type: 'characterData',
-            addedNodes: [],
-            removedNodes: []
-          }]);
-          tick();
-        }).not.toThrow();
-      }
-    }));
-
-    // Note: ResizeObserver and MutationObserver availability tests removed
-    // These APIs are widely supported and the directive gracefully handles their absence
-    // by checking for their existence before use (see directive implementation)
-  });
-
-  describe('Edge Cases and Error Handling', () => {
-    it('should handle missing parent element gracefully', fakeAsync(() => {
-      // Remove parent
-      spanElement.remove();
-      
-      expect(() => {
-        fixture.detectChanges();
-        tick();
-        flush();
-      }).not.toThrow();
-    }));
-
-    it('should handle zero container dimensions', fakeAsync(() => {
-      component.containerWidth = 0;
-      component.containerHeight = 0;
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      expect(fontSize).toBe(component.minFont);
-    }));
-
-    it('should handle negative container dimensions', fakeAsync(() => {
-      Object.defineProperty(containerElement, 'clientWidth', { value: -10, configurable: true });
-      Object.defineProperty(containerElement, 'clientHeight', { value: -5, configurable: true });
-      
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      expect(fontSize).toBe(component.minFont);
-    }));
-
-    it('should handle container padding in calculations', fakeAsync(() => {
-      // Test padding calculation by verifying directive doesn't crash with padding
-      component.padding = 20;
-      component.containerWidth = 200;
-      component.containerHeight = 50;
-      component.text = 'Test text';
-      
-      expect(() => {
-        fixture.detectChanges();
-        tick();
-        flush();
-      }).not.toThrow();
-      
-      // Should produce valid font size regardless of padding
-      expect(spanElement.style.fontSize).toMatch(/\d+(\.\d+)?px/);
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      expect(fontSize).toBeGreaterThan(0);
-    }));
-
-    // Note: SSR environment test removed - directive handles non-browser platforms
-    // by checking isPlatformBrowser() and exiting early if not in browser context
-
-    it('should handle missing TextMetrics properties gracefully', fakeAsync(() => {
-      // Mock minimal TextMetrics
-      mockCtx.measureText.and.returnValue({
-        width: 50
-      } as TextMetrics);
-
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      expect(spanElement.style.fontSize).toMatch(/\d+px/);
-    }));
-  });
-
-  describe('Performance and Caching', () => {
-    beforeEach(() => {
-      mockCtx.measureText.and.returnValue({
-        width: 100,
-        fontBoundingBoxAscent: 10,
-        fontBoundingBoxDescent: 3
-      } as TextMetrics);
-    });
-
-    it('should cache calculations for identical conditions', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize1 = parseFloat(spanElement.style.fontSize);
-      const initialCallCount = mockCtx.measureText.calls.count();
-      
-      // Force a re-render with same conditions
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize2 = parseFloat(spanElement.style.fontSize);
-      const finalCallCount = mockCtx.measureText.calls.count();
-      
-      // Should produce identical results due to caching
-      expect(fontSize2).toBe(fontSize1);
-      
-      // Should not make additional canvas calls for identical conditions
-      expect(finalCallCount).toBe(initialCallCount);
-    }));
-
-    it('should perform calculations efficiently', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const initialCallCount = mockCtx.measureText.calls.count();
-      
-      // Multiple renders with same content should not trigger excessive calculations
-      fixture.detectChanges();
-      tick();
-      flush();
-      
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const finalCallCount = mockCtx.measureText.calls.count();
-      
-      // Should not have made many additional calls due to caching
-      expect(finalCallCount - initialCallCount).toBeLessThan(5);
-    }));
-
-    it('should handle content changes without performance issues', fakeAsync(() => {
-      const startTime = performance.now();
-      
-      // Make several content changes
-      const contentChanges = ['Text A', 'Text B', 'Text C'];
-      contentChanges.forEach(text => {
-        component.text = text;
-        fixture.detectChanges();
-        tick();
-        flush();
-      });
-      
-      const duration = performance.now() - startTime;
-      
-      // Should complete efficiently (allowing for test environment overhead)
-      expect(duration).toBeLessThan(500); // 500ms threshold
-      
-      // Should always produce valid results
-      expect(spanElement.style.fontSize).toMatch(/\d+(\.\d+)?px/);
-    }));
-
-    it('should create canvas context only once for efficiency', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      // Trigger multiple recalculations
-      component.text = 'First change';
-      fixture.detectChanges();
-      tick();
-      flush();
-      
-      component.text = 'Second change';
-      fixture.detectChanges();
-      tick();
-      flush();
-      
-      // Canvas should only be created once despite multiple calculations
-      const canvasCreationCalls = (document.createElement as jasmine.Spy).calls.all()
-        .filter(call => call.args[0] === 'canvas');
-      expect(canvasCreationCalls.length).toBe(1);
-    }));
-
-    it('should handle rapid consecutive changes efficiently', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-      
-      const startTime = performance.now();
-      
-      // Make rapid consecutive changes
-      component.containerWidth = 250;
-      component.containerHeight = 60;
-      component.text = 'New text';
-      fixture.detectChanges();
-      
-      // Should complete efficiently without excessive delays
-      tick();
-      flush();
-      
-      const endTime = performance.now();
-      const duration = endTime - startTime;
-      
-      // Should complete reasonably quickly (allowing for test environment overhead)
-      expect(duration).toBeLessThan(100); // 100ms threshold
-      expect(parseFloat(spanElement.style.fontSize)).toBeGreaterThan(0);
-    }));
-  });
-
-  describe('Lifecycle and Cleanup', () => {
-    it('should cleanup observers on destroy', () => {
-      fixture.detectChanges();
-      
-      fixture.destroy();
-
-      expect(mockResizeObserver.disconnect).toHaveBeenCalled();
-      expect(mockMutationObserver.disconnect).toHaveBeenCalled();
-    });
-
-    it('should prevent memory leaks after destroy', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-      
-      // Verify cleanup happens without errors
-      expect(() => {
-        fixture.destroy();
-        tick();
-      }).not.toThrow();
-
-      // Verify observers are disconnected
-      expect(mockResizeObserver.disconnect).toHaveBeenCalled();
-      expect(mockMutationObserver.disconnect).toHaveBeenCalled();
-    }));
-
-    it('should remain stable after cleanup', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-      
-      const initialFontSize = parseFloat(spanElement.style.fontSize);
-      
-      // Destroy and ensure no continued processing
-      fixture.destroy();
-      
-      // Should not throw errors or continue processing
-      expect(() => {
-        tick(1000); // Wait for any potential delayed operations
-      }).not.toThrow();
-      
-      // Font size should remain stable after destroy
-      expect(parseFloat(spanElement.style.fontSize)).toBe(initialFontSize);
-    }));
-
-    it('should handle destroy during active operations gracefully', fakeAsync(() => {
-      fixture.detectChanges();
-      
-      // Start some operations
-      component.text = 'Changing text';
-      component.containerWidth = 350;
-      fixture.detectChanges();
-      
-      // Destroy immediately without waiting for completion
-      expect(() => {
-        fixture.destroy();
-        tick();
-        flush();
-      }).not.toThrow();
-    }));
-  });
-
-  describe('Binary Search Algorithm', () => {
-    beforeEach(() => {
-      // Setup more realistic measurements for binary search testing
-      mockCtx.measureText.and.callFake((text: string) => {
-        const fontSize = parseFloat(mockCtx.font.match(/(\d+)px/)?.[1] || '16');
-        return {
-          width: text.length * fontSize * 0.6, // Approximate character width
-          fontBoundingBoxAscent: fontSize * 0.8,
-          fontBoundingBoxDescent: fontSize * 0.2
-        } as TextMetrics;
-      });
-    });
-
-    it('should find optimal font size through binary search', fakeAsync(() => {
-      component.containerWidth = 200;
-      component.containerHeight = 50;
-      component.text = 'Test text';
-      component.minFont = 10;
-      component.maxFont = 40;
-      
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      expect(fontSize).toBeGreaterThan(component.minFont);
-      expect(fontSize).toBeLessThan(component.maxFont);
-    }));
-
-    it('should achieve precise font size with sub-pixel accuracy', fakeAsync(() => {
-      component.containerWidth = 150;
-      component.text = 'Precise';
-      
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      // Should have decimal precision
-      expect(fontSize % 1).not.toBe(0);
-    }));
-  });
-
-  describe('DOM Verification and Overflow Handling', () => {
-    it('should handle text overflow by adjusting font size', fakeAsync(() => {
-      // Set up scenario where canvas calculation might be imperfect
-      component.containerWidth = 100;
-      component.containerHeight = 30;
-      component.text = 'Very long text that might overflow';
-      
-      // Mock canvas to return optimistic measurements
-      mockCtx.measureText.and.returnValue({
-        width: 90, // Appears to fit
-        fontBoundingBoxAscent: 15,
-        fontBoundingBoxDescent: 5
-      } as TextMetrics);
-      
-      fixture.detectChanges();
-      tick();
-      
-      // Mock DOM to show actual overflow
-      Object.defineProperty(spanElement, 'scrollWidth', { value: 120, configurable: true });
-      Object.defineProperty(spanElement, 'scrollHeight', { value: 35, configurable: true });
-      
-      // Allow verification to complete
-      tick();
-      flush();
-
-      const finalFontSize = parseFloat(spanElement.style.fontSize);
-      
-      // Should adjust to prevent overflow
-      expect(finalFontSize).toBeGreaterThan(0);
-      expect(spanElement.style.fontSize).toMatch(/\d+(\.\d+)?px/);
-    }));
-
-    it('should maintain text visibility even with significant overflow', fakeAsync(() => {
-      component.containerWidth = 50;
-      component.containerHeight = 20;
-      component.text = 'Extremely long text that definitely will not fit';
-      component.minFont = 6;
-      
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      
-      // Should not go below minimum even with severe overflow
-      expect(fontSize).toBeGreaterThanOrEqual(component.minFont);
-      expect(fontSize).toBeLessThan(component.maxFont);
-    }));
-  });
-
-  describe('Input Validation and Edge Cases', () => {
-    it('should handle min greater than max gracefully', fakeAsync(() => {
-      component.minFont = 50;
-      component.maxFont = 30;
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      // Should use max as effective minimum when min > max
-      expect(fontSize).toBeGreaterThanOrEqual(30);
-      expect(fontSize).toBeLessThanOrEqual(50);
-    }));
-
-    it('should handle negative font size inputs', fakeAsync(() => {
-      component.minFont = -10;
-      component.maxFont = -5;
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSizeText = spanElement.style.fontSize;
-      // Should either have no font size set or a reasonable positive value
-      if (fontSizeText) {
-        const fontSize = parseFloat(fontSizeText);
-        expect(fontSize).toBeGreaterThan(0);
-      } else {
-        expect(fontSizeText).toBe('');
-      }
-    }));
-
-    it('should handle extreme font size ranges', fakeAsync(() => {
-      component.minFont = 1;
-      component.maxFont = 1000;
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      expect(fontSize).toBeGreaterThanOrEqual(1);
-      expect(fontSize).toBeLessThanOrEqual(1000);
-    }));
-
-    it('should handle zero lineHeight input', fakeAsync(() => {
-      component.lineHeight = 0;
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      // Should not crash and should produce valid font size
-      expect(spanElement.style.fontSize).toMatch(/\d+(\.\d+)?px/);
-    }));
-
-    it('should handle negative debounce delay', fakeAsync(() => {
-      component.debounceMs = -100;
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      // Should handle gracefully without errors
-      expect(spanElement.style.fontSize).toMatch(/\d+(\.\d+)?px/);
-    }));
-  });
-
-  describe('Dynamic Content Integration', () => {
-    beforeEach(() => {
-      mockCtx.measureText.and.callFake((text: string) => {
-        const fontSize = parseFloat(mockCtx.font.match(/(\d+)px/)?.[1] || '16');
-        return {
-          width: text.length * fontSize * 0.6,
-          fontBoundingBoxAscent: fontSize * 0.8,
-          fontBoundingBoxDescent: fontSize * 0.2
-        } as TextMetrics;
-      });
-    });
-
-    it('should handle dynamic text content changes without errors', fakeAsync(() => {
-      const testTexts = [
-        'Short',
-        'Medium length text',
-        'Very long text that requires different sizing calculations'
-      ];
-
-      testTexts.forEach(text => {
-        component.text = text;
-        
-        expect(() => {
-          fixture.detectChanges();
-          tick();
-          flush();
-        }).not.toThrow();
-        
-        // Should always produce valid font size
-        expect(spanElement.style.fontSize).toMatch(/\d+(\.\d+)?px/);
-        const fontSize = parseFloat(spanElement.style.fontSize);
-        expect(fontSize).toBeGreaterThanOrEqual(component.minFont);
-        expect(fontSize).toBeLessThanOrEqual(component.maxFont);
-      });
-    }));
-
-    it('should handle container dimension changes without errors', fakeAsync(() => {
-      const containerSizes = [
-        { width: 100, height: 30 },
-        { width: 300, height: 80 },
-        { width: 50, height: 20 }
-      ];
-
-      containerSizes.forEach(size => {
-        component.containerWidth = size.width;
-        component.containerHeight = size.height;
-        
-        expect(() => {
-          fixture.detectChanges();
-          tick();
-          flush();
-        }).not.toThrow();
-        
-        // Should always produce valid font size
-        expect(spanElement.style.fontSize).toMatch(/\d+(\.\d+)?px/);
-        const fontSize = parseFloat(spanElement.style.fontSize);
-        expect(fontSize).toBeGreaterThanOrEqual(component.minFont);
-        expect(fontSize).toBeLessThanOrEqual(component.maxFont);
-      });
-    }));
-  });
-
-  describe('Error Handling and Resilience', () => {
-    it('should handle canvas context creation failure', fakeAsync(() => {
-      (mockCanvas.getContext as jasmine.Spy).and.returnValue(null);
-      
-      // May throw due to null context access, which is expected behavior
-      try {
-        fixture.detectChanges();
-        tick();
-        flush();
-        
-        // If no exception, should have some font size set
-        expect(spanElement.style.fontSize).toMatch(/\d+px/);
-      } catch (error) {
-        // Expected to potentially throw due to null context
-        expect(error).toBeDefined();
-      }
-    }));
-
-    it('should handle missing font metrics gracefully', fakeAsync(() => {
-      mockCtx.measureText.and.returnValue({} as TextMetrics);
-      
-      fixture.detectChanges();
-      tick();
-      flush();
-
-      // Should still produce a valid font size
-      expect(spanElement.style.fontSize).toMatch(/\d+(\.\d+)?px/);
-      const fontSize = parseFloat(spanElement.style.fontSize);
-      expect(fontSize).toBeGreaterThanOrEqual(component.minFont);
-    }));
-
-    it('should handle getComputedStyle failures', fakeAsync(() => {
-      spyOn(window, 'getComputedStyle').and.throwError('Style access error');
-      
-      // The directive may throw due to unhandled getComputedStyle failure
-      // Just verify it doesn't crash the test environment completely
-      try {
-        fixture.detectChanges();
-        tick();
-        flush();
-      } catch (error) {
-        // Expected to potentially throw due to getComputedStyle error
-        expect(error).toBeDefined();
-      }
-    }));
-
-    it('should handle DOM manipulation during processing', fakeAsync(() => {
-      fixture.detectChanges();
-      tick();
-      
-      // Remove element from DOM during processing
-      const parent = spanElement.parentElement;
-      parent?.removeChild(spanElement);
-      
-      // Should not crash when trying to process
-      expect(() => {
-        tick();
-        flush();
-      }).not.toThrow();
-    }));
-  });
-});