@axinom/mosaic-ui 0.66.0-rc.2 → 0.66.0-rc.20

package/src/components/List/ListRow/Renderers/TagsRenderer/TagsRenderer.spec.tsx

@@ -1,153 +1,236 @@
 import '@testing-library/jest-dom';
-import { render, screen } from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import React from 'react';
+import * as idleCallbackHelpers from '../../../../../helpers/idleCallbackHelpers';
+import { noop } from '../../../../../helpers/utils';
 import { TagsRenderer } from './TagsRenderer';
 
-// Mock ResizeObserver
-global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
-}));
-
-interface RendererWrapperProps {
-  /** Column data */
+// Wrapper component to properly render TagsRenderer
+interface TagsRendererWrapperProps {
   value: unknown;
 }
 
-const RendererWrapper: React.FC<RendererWrapperProps> = ({ value }) => {
+const TagsRendererWrapper: React.FC<TagsRendererWrapperProps> = ({ value }) => {
   return <>{TagsRenderer(value)}</>;
 };
 
-const defaultProps: RendererWrapperProps = {
-  value: [],
+// Helper to trigger ResizeObserver callback
+const triggerResizeObserver = (): void => {
+  const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
+    .calls[0]?.[0];
+  if (resizeObserverCallback) {
+    act(() => {
+      resizeObserverCallback([]);
+    });
+  }
 };
 
 describe('TagsRenderer', () => {
+  let mockResizeObserver: {
+    observe: jest.Mock;
+    unobserve: jest.Mock;
+    disconnect: jest.Mock;
+  };
+  let mockScheduleIdleCallback: jest.SpyInstance;
+  let mockCancelScheduledCallback: jest.SpyInstance;
+
   beforeEach(() => {
-    // Reset mocks
-    jest.clearAllMocks();
-  });
+    // Setup ResizeObserver mock
+    mockResizeObserver = {
+      observe: jest.fn(),
+      unobserve: jest.fn(),
+      disconnect: jest.fn(),
+    };
+
+    global.ResizeObserver = jest
+      .fn()
+      .mockImplementation(() => mockResizeObserver);
+
+    // Setup scheduleIdleCallback mock
+    mockScheduleIdleCallback = jest
+      .spyOn(idleCallbackHelpers, 'scheduleIdleCallback')
+      .mockImplementation((callback) => {
+        callback({
+          didTimeout: false,
+          timeRemaining: () => 50,
+        } as IdleDeadline);
+        return 1;
+      });
+
+    // Setup cancelScheduledCallback mock
+    mockCancelScheduledCallback = jest
+      .spyOn(idleCallbackHelpers, 'cancelScheduledCallback')
+      .mockImplementation(noop);
+
+    // Mock window.getComputedStyle for font size calculations
+    window.getComputedStyle = jest.fn().mockReturnValue({
+      fontSize: '14px',
+    });
 
-  it('renders the component without crashing', () => {
-    const { container } = render(<RendererWrapper value={['test']} />);
-    expect(container.firstChild).toBeInTheDocument();
+    // Mock offsetWidth for container
+    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+      configurable: true,
+      writable: true,
+      value: 300,
+    });
   });
 
-  it('returns empty content when value is not an array', () => {
-    const { container } = render(
-      <RendererWrapper {...defaultProps} value="not-an-array" />,
-    );
-    expect(container.firstChild).toBeNull();
+  afterEach(() => {
+    // Don't use jest.clearAllMocks() as it removes mock implementations
+    // Instead, manually clear just the mock call history
+    mockResizeObserver.observe.mockClear();
+    mockResizeObserver.unobserve.mockClear();
+    mockResizeObserver.disconnect.mockClear();
+    mockScheduleIdleCallback.mockClear();
+    mockCancelScheduledCallback.mockClear();
   });
 
-  it('returns empty content when value is null', () => {
-    const { container } = render(
-      <RendererWrapper {...defaultProps} value={null} />,
-    );
-    expect(container.firstChild).toBeNull();
-  });
+  describe('rendering', () => {
+    it('should render empty container when value is empty array', () => {
+      render(<TagsRendererWrapper value={[]} />);
 
-  it('returns empty content when value is undefined', () => {
-    const { container } = render(
-      <RendererWrapper {...defaultProps} value={undefined} />,
-    );
-    expect(container.firstChild).toBeNull();
-  });
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
+      expect(container).toBeEmptyDOMElement();
+    });
 
-  it('renders tags when array is provided', () => {
-    const mockTags = ['tag1', 'tag2', 'tag3'];
+    it('should render container with title attribute containing all tags', () => {
+      const tags = ['tag1', 'tag2', 'tag3'];
 
-    // Mock container width measurement
-    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
-      configurable: true,
-      value: 300, // Assume container width of 300px
+      render(<TagsRendererWrapper value={tags} />);
+
+      const container = screen.getByTestId('tags-container');
+      expect(container).toHaveAttribute('title', 'tag1, tag2, tag3');
     });
 
-    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+    it('should render tags when array is provided', () => {
+      const tags = ['tag1', 'tag2', 'tag3'];
 
-    // Since we're mocking ResizeObserver, simulate the callback
-    const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
-      .calls[0]?.[0];
+      render(<TagsRendererWrapper value={tags} />);
 
-    if (resizeObserverCallback) {
-      resizeObserverCallback([]);
-    }
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
 
-    // Check that container exists
-    const container = screen.getByTestId('tags-container');
-    expect(container).toBeInTheDocument();
-  });
+      triggerResizeObserver();
 
-  it('displays overflow indicator when configured', () => {
-    const mockTags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+      expect(mockScheduleIdleCallback).toHaveBeenCalled();
+    });
 
-    // Mock container and tag measurements to force overflow
-    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
-      configurable: true,
-      value: 100, // Small container width to force overflow
+    it('should render tags with proper text content', async () => {
+      const tags = ['JavaScript', 'React', 'Testing'];
+      Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+        configurable: true,
+        writable: true,
+        value: 500,
+      });
+
+      render(<TagsRendererWrapper value={tags} />);
+
+      triggerResizeObserver();
+
+      await waitFor(() => {
+        expect(screen.getByText('JavaScript')).toBeInTheDocument();
+        expect(screen.getByText('React')).toBeInTheDocument();
+        expect(screen.getByText('Testing')).toBeInTheDocument();
+      });
     });
+  });
 
-    // Mock document.createElement to control tag width measurements
-    const originalCreateElement = document.createElement;
-    document.createElement = jest.fn().mockImplementation((tagName) => {
-      const element = originalCreateElement.call(document, tagName);
-      if (tagName === 'div') {
-        Object.defineProperty(element, 'offsetWidth', {
-          value: 50, // Each tag is 50px wide
-        });
-      }
-      return element;
+  describe('overflow behavior', () => {
+    it('should handle overflow with small container width', () => {
+      const tags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+
+      Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+        configurable: true,
+        writable: true,
+        value: 100,
+      });
+
+      render(<TagsRendererWrapper value={tags} />);
+
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
+
+      triggerResizeObserver();
+
+      expect(mockScheduleIdleCallback).toHaveBeenCalled();
     });
 
-    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+    it('should display overflow indicator when not all tags fit', async () => {
+      const tags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
 
-    // Simulate ResizeObserver callback
-    const resizeObserverCallback = (global.ResizeObserver as jest.Mock).mock
-      .calls[0]?.[0];
+      Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
+        configurable: true,
+        writable: true,
+        value: 150,
+      });
 
-    if (resizeObserverCallback) {
-      resizeObserverCallback([]);
-    }
+      render(<TagsRendererWrapper value={tags} />);
 
-    // Test passes if no errors occur - the overflow logic depends on real DOM measurements
-    expect(screen.getByTestId('tags-container')).toBeInTheDocument();
+      triggerResizeObserver();
 
-    // Restore
-    document.createElement = originalCreateElement;
-  });
+      // The overflow indicator may or may not appear depending on calculations
+      // This test verifies the component handles the scenario without errors
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
+    });
+
+    it('should handle empty tag list gracefully', () => {
+      render(<TagsRendererWrapper value={[]} />);
 
-  it('handles overflow behavior', () => {
-    const mockTags = ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'];
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
+    });
 
-    render(<RendererWrapper {...defaultProps} value={mockTags} />);
+    it('should handle non-array values gracefully', () => {
+      render(<TagsRendererWrapper value={null} />);
 
-    // Test that the component renders without errors
-    const container = screen.getByTestId('tags-container');
-    expect(container).toBeInTheDocument();
+      const container = screen.getByTestId('tags-container');
+      expect(container).toBeInTheDocument();
+    });
   });
 
-  it('handles empty array', () => {
-    const { container } = render(
-      <RendererWrapper {...defaultProps} value={[]} />,
-    );
-    expect(container.firstChild).toBeNull();
+  describe('ResizeObserver integration', () => {
+    it('should observe container on mount', () => {
+      render(<TagsRendererWrapper value={['tag1', 'tag2']} />);
+
+      expect(mockResizeObserver.observe).toHaveBeenCalledTimes(1);
+    });
+
+    it('should trigger calculations when ResizeObserver fires', () => {
+      render(<TagsRendererWrapper value={['tag1', 'tag2', 'tag3']} />);
+
+      expect(mockScheduleIdleCallback).not.toHaveBeenCalled();
+
+      triggerResizeObserver();
+
+      expect(mockScheduleIdleCallback).toHaveBeenCalled();
+    });
   });
 
-  it('cleans up ResizeObserver on unmount', () => {
-    const mockDisconnect = jest.fn();
-    (global.ResizeObserver as jest.Mock).mockImplementation(() => ({
-      observe: jest.fn(),
-      unobserve: jest.fn(),
-      disconnect: mockDisconnect,
-    }));
+  describe('cleanup', () => {
+    it('should disconnect ResizeObserver on unmount', () => {
+      const { unmount } = render(
+        <TagsRendererWrapper value={['tag1', 'tag2']} />,
+      );
 
-    const { unmount } = render(
-      <RendererWrapper {...defaultProps} value={['tag1', 'tag2']} />,
-    );
+      expect(mockResizeObserver.disconnect).not.toHaveBeenCalled();
 
-    unmount();
+      unmount();
 
-    expect(mockDisconnect).toHaveBeenCalled();
+      expect(mockResizeObserver.disconnect).toHaveBeenCalledTimes(1);
+    });
+
+    it('should cancel idle callback on unmount if pending', () => {
+      const { unmount } = render(
+        <TagsRendererWrapper value={['tag1', 'tag2']} />,
+      );
+
+      triggerResizeObserver();
+
+      unmount();
+
+      expect(mockCancelScheduledCallback).toHaveBeenCalled();
+    });
   });
 });

package/src/components/List/ListRow/Renderers/TagsRenderer/TagsRenderer.tsx

@@ -1,121 +1,175 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  cancelScheduledCallback,
+  scheduleIdleCallback,
+  type IdleCallbackHandle,
+} from '../../../../../helpers';
 import classes from './TagsRenderer.scss';
 
 export const TagsRenderer = (val: unknown): JSX.Element => {
   const containerRef = useRef<HTMLDivElement>(null);
-  const resizeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const [visibleCount, setVisibleCount] = useState<number>(0);
+  const [visibleCount, setVisibleCount] = useState<number | null>(null);
 
-  useEffect(() => {
-    if (!Array.isArray(val) || !containerRef.current || val.length === 0) {
-      setVisibleCount(0);
-      return;
+  const prevValRef = useRef<string[]>([]);
+  const valRef = useRef(val);
+  valRef.current = val; // Update on every render
+
+  // Estimate tag width based on text content without DOM manipulation
+  const estimateTagWidth = useCallback((text: string): number => {
+    const container = containerRef.current;
+    if (!container) {
+      return 0;
     }
 
-    const calculateVisibleItems = (): void => {
-      const container = containerRef.current;
-      if (!container) {
-        return;
-      }
+    // Get computed font size from the container
+    const computedStyle = window.getComputedStyle(container);
+    const fontSize = parseFloat(computedStyle.fontSize) || 14;
+
+    // Average character width is approximately 0.6 of font size for typical fonts
+    // This is a reasonable approximation for most monospace and sans-serif fonts
+    const avgCharWidth = fontSize * 0.55;
+
+    // Tag padding is 5px on each side (10px total) from SCSS
+    const padding = 10;
+
+    // Estimate text width
+    const textWidth = text.length * avgCharWidth;
 
-      const containerWidth = container.offsetWidth;
-      const gap = 5; // Gap between items from SCSS
-      const overflowIndicatorWidth = 60; // Approximate width for "... +X"
-
-      // Measure actual tag widths using hidden temporary elements in the actual container
-      const tagWidths: number[] = [];
-      const tempElements: HTMLDivElement[] = [];
-
-      try {
-        (val as string[]).forEach((item) => {
-          const tempTag = document.createElement('div');
-          tempTag.className = classes.tag;
-          tempTag.textContent = item;
-          tempTag.style.position = 'absolute';
-          tempTag.style.visibility = 'hidden';
-          tempTag.style.pointerEvents = 'none';
-          container.appendChild(tempTag);
-          tempElements.push(tempTag);
-          tagWidths.push(tempTag.offsetWidth);
-        });
-      } finally {
-        // Clean up temporary elements
-        tempElements.forEach((el) => container.removeChild(el));
+    return textWidth + padding;
+  }, []);
+
+  // Shared calculation function that uses valRef for current value
+  const calculateVisibleItems = useCallback((): void => {
+    const currentVal = valRef.current;
+    const container = containerRef.current;
+
+    if (!container || !Array.isArray(currentVal) || currentVal.length === 0) {
+      return;
+    }
+
+    const containerWidth = container.offsetWidth;
+    const gap = 5; // Gap between items from SCSS
+    const overflowIndicatorWidth = 60; // Approximate width for "... +X"
+
+    // Estimate tag widths based on text content
+    const tagWidths: number[] = (currentVal as string[]).map((item) =>
+      estimateTagWidth(item),
+    );
+
+    // Calculate how many items can fit
+    let totalWidth = 0;
+    let newVisibleCount = 0;
+
+    for (let i = 0; i < (currentVal as string[]).length; i++) {
+      const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
+      const wouldNeedOverflow = i < (currentVal as string[]).length - 1;
+      const requiredWidth =
+        totalWidth +
+        itemWidth +
+        (wouldNeedOverflow ? overflowIndicatorWidth + gap : 0);
+
+      if (requiredWidth <= containerWidth) {
+        totalWidth += itemWidth;
+        newVisibleCount++;
+      } else {
+        break;
       }
+    }
 
-      // Calculate how many items can fit
-      let totalWidth = 0;
-      let newVisibleCount = 0;
+    // If we can't fit all items, reserve space for overflow indicator
+    if (
+      newVisibleCount < (currentVal as string[]).length &&
+      newVisibleCount > 0
+    ) {
+      // Re-calculate with overflow indicator space reserved
+      totalWidth = 0;
+      newVisibleCount = 0;
 
-      for (let i = 0; i < val.length; i++) {
+      for (let i = 0; i < (currentVal as string[]).length; i++) {
         const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
-        const wouldNeedOverflow = i < val.length - 1;
         const requiredWidth =
-          totalWidth +
-          itemWidth +
-          (wouldNeedOverflow ? overflowIndicatorWidth + gap : 0);
+          totalWidth + itemWidth + overflowIndicatorWidth + gap;
 
-        if (requiredWidth <= containerWidth) {
+        if (
+          requiredWidth <= containerWidth &&
+          i < (currentVal as string[]).length - 1
+        ) {
           totalWidth += itemWidth;
           newVisibleCount++;
         } else {
           break;
         }
       }
+    }
 
-      // If we can't fit all items, reserve space for overflow indicator
-      if (newVisibleCount < val.length && newVisibleCount > 0) {
-        // Re-calculate with overflow indicator space reserved
-        totalWidth = 0;
-        newVisibleCount = 0;
-
-        for (let i = 0; i < val.length; i++) {
-          const itemWidth = tagWidths[i] + (i > 0 ? gap : 0);
-          const requiredWidth =
-            totalWidth + itemWidth + overflowIndicatorWidth + gap;
-
-          if (requiredWidth <= containerWidth && i < val.length - 1) {
-            totalWidth += itemWidth;
-            newVisibleCount++;
-          } else {
-            break;
-          }
-        }
-      }
+    // Update state with the new visible count
+    setVisibleCount(newVisibleCount);
+  }, [estimateTagWidth]);
 
-      // Update state with the new visible count
-      setVisibleCount(newVisibleCount);
-    };
+  // Effect 1: Handle tag changes (runs when val changes)
+  useEffect(() => {
+    if (!Array.isArray(val) || val.length === 0) {
+      setVisibleCount(0);
+      prevValRef.current = [];
+      return;
+    }
 
-    // Initial calculation
-    calculateVisibleItems();
+    // Check if array contents actually changed
+    const valArray = val as string[];
+    const hasChanged =
+      valArray.length !== prevValRef.current.length ||
+      valArray.some((item, index) => item !== prevValRef.current[index]);
+
+    if (hasChanged) {
+      calculateVisibleItems();
+      prevValRef.current = [...valArray];
+    }
+  }, [val, calculateVisibleItems]);
+
+  // Ref to store the idle callback ID
+  const idleCallbackRef = useRef<IdleCallbackHandle | null>(null);
+
+  // // Effect 2: Set up ResizeObserver (runs once on mount)
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
 
-    // Debounced resize handler
     const debouncedCalculate = (): void => {
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
+      if (idleCallbackRef.current) {
+        cancelScheduledCallback(idleCallbackRef.current);
       }
-      resizeTimeoutRef.current = setTimeout(() => {
+      idleCallbackRef.current = scheduleIdleCallback(() => {
         calculateVisibleItems();
-      }, 100);
+      });
     };
 
+    // const resizeObserver = new ResizeObserver(calculateVisibleItems);
     const resizeObserver = new ResizeObserver(debouncedCalculate);
     resizeObserver.observe(containerRef.current);
 
     return () => {
-      if (resizeTimeoutRef.current) {
-        clearTimeout(resizeTimeoutRef.current);
+      if (idleCallbackRef.current) {
+        cancelScheduledCallback(idleCallbackRef.current);
       }
       resizeObserver.disconnect();
     };
-  }, [val]);
-
-  if (!Array.isArray(val) || val.length === 0) {
-    return <></>;
+  }, [calculateVisibleItems]);
+
+  const stringArray = Array.isArray(val) ? (val as string[]) : [];
+
+  // Don't render items until we've calculated the visible count
+  if (visibleCount === null) {
+    return (
+      <div
+        ref={containerRef}
+        className={classes.container}
+        data-testid="tags-container"
+        title={stringArray.join(', ')}
+      />
+    );
   }
 
-  const stringArray = val as string[];
   const visibleItems = stringArray.slice(0, visibleCount);
   const hiddenItems = stringArray.slice(visibleCount);