Merge branch 'develop' into feat/v5-ui-redesign

app/javascript/shared/composables/specs/useExpandableContent.spec.js

@@ -0,0 +1,130 @@
+import { nextTick } from 'vue';
+import { useExpandableContent } from '../useExpandableContent';
+
+// Mock VueUse composables
+vi.mock('@vueuse/core', () => ({
+  useToggle: vi.fn(initialValue => {
+    let value = initialValue;
+    const toggle = newValue => {
+      value = newValue !== undefined ? newValue : !value;
+    };
+    return [{ value }, toggle];
+  }),
+  useResizeObserver: vi.fn((element, callback) => {
+    // Store callback for manual triggering in tests
+    if (element.value) {
+      callback();
+    }
+  }),
+}));
+
+describe('useExpandableContent', () => {
+  let originalGetComputedStyle;
+
+  beforeEach(() => {
+    // Mock window.getComputedStyle
+    originalGetComputedStyle = window.getComputedStyle;
+    window.getComputedStyle = vi.fn(() => ({
+      lineHeight: '20px',
+    }));
+  });
+
+  afterEach(() => {
+    window.getComputedStyle = originalGetComputedStyle;
+    vi.clearAllMocks();
+  });
+
+  it('returns expected properties', () => {
+    const result = useExpandableContent();
+
+    expect(result).toHaveProperty('contentElement');
+    expect(result).toHaveProperty('isExpanded');
+    expect(result).toHaveProperty('needsToggle');
+    expect(result).toHaveProperty('toggleExpanded');
+    expect(result).toHaveProperty('checkOverflow');
+  });
+
+  it('initializes with default values', () => {
+    const { isExpanded, needsToggle } = useExpandableContent();
+
+    expect(isExpanded.value).toBe(false);
+    expect(needsToggle.value).toBe(false);
+  });
+
+  it('checkOverflow sets needsToggle to true when content overflows', async () => {
+    const { contentElement, needsToggle, checkOverflow } =
+      useExpandableContent();
+
+    // Mock element with overflow
+    contentElement.value = {
+      scrollHeight: 100, // Much larger than 2 lines (40px)
+    };
+
+    checkOverflow();
+    await nextTick();
+
+    expect(needsToggle.value).toBe(true);
+  });
+
+  it('checkOverflow sets needsToggle to false when content fits', async () => {
+    const { contentElement, needsToggle, checkOverflow } =
+      useExpandableContent();
+
+    // Mock element without overflow
+    contentElement.value = {
+      scrollHeight: 30, // Less than 2 lines (40px)
+    };
+
+    checkOverflow();
+    await nextTick();
+
+    expect(needsToggle.value).toBe(false);
+  });
+
+  it('respects custom maxLines option', async () => {
+    const { contentElement, needsToggle, checkOverflow } = useExpandableContent(
+      {
+        maxLines: 3,
+      }
+    );
+
+    // Mock element that fits in 3 lines but not 2
+    contentElement.value = {
+      scrollHeight: 50, // Fits in 3 lines (60px) but not 2 lines (40px)
+    };
+
+    checkOverflow();
+    await nextTick();
+
+    expect(needsToggle.value).toBe(false);
+  });
+
+  it('uses defaultLineHeight when computed style is unavailable', async () => {
+    window.getComputedStyle = vi.fn(() => ({
+      lineHeight: 'normal', // Not a valid number
+    }));
+
+    const { contentElement, needsToggle, checkOverflow } = useExpandableContent(
+      {
+        defaultLineHeight: 16,
+      }
+    );
+
+    // Mock element that overflows with 16px line height (32px max)
+    contentElement.value = {
+      scrollHeight: 40,
+    };
+
+    checkOverflow();
+    await nextTick();
+
+    expect(needsToggle.value).toBe(true);
+  });
+
+  it('handles null contentElement gracefully', () => {
+    const { checkOverflow } = useExpandableContent();
+
+    // Should not throw when contentElement is null
+    expect(() => checkOverflow()).not.toThrow();
+  });
+});

app/javascript/shared/composables/useExpandableContent.js

@@ -0,0 +1,62 @@
+import { ref, computed, nextTick, onMounted } from 'vue';
+import { useToggle, useResizeObserver } from '@vueuse/core';
+
+/**
+ * Composable for handling expandable content with "Read more / Read less" functionality.
+ * Detects content overflow and provides toggle state for expansion.
+ *
+ * @param {Object} options - Configuration options
+ * @param {number} [options.maxLines=2] - Maximum number of lines before showing toggle
+ * @param {number} [options.defaultLineHeight=20] - Fallback line height if computed style is unavailable
+ * @param {boolean} [options.useResizeObserverForCheck=false] - Use ResizeObserver for continuous overflow checking
+ * @returns {Object} - Composable state and methods
+ */
+export function useExpandableContent(options = {}) {
+  const {
+    maxLines = 2,
+    defaultLineHeight = 20,
+    useResizeObserverForCheck = false,
+  } = options;
+
+  const contentElement = ref(null);
+  const [isExpanded, toggleExpanded] = useToggle(false);
+  const needsToggle = ref(false);
+
+  const showReadMore = computed(() => needsToggle.value && !isExpanded.value);
+  const showReadLess = computed(() => needsToggle.value && isExpanded.value);
+
+  /**
+   * Checks if content overflows the maximum allowed height
+   * and updates needsToggle accordingly
+   */
+  const checkOverflow = () => {
+    if (!contentElement.value) return;
+
+    const element = contentElement.value;
+    const computedStyle = window.getComputedStyle(element);
+    const lineHeight =
+      parseFloat(computedStyle.lineHeight) || defaultLineHeight;
+    const maxHeight = lineHeight * maxLines;
+
+    needsToggle.value = element.scrollHeight > maxHeight;
+  };
+
+  // Setup overflow checking based on configuration
+  if (useResizeObserverForCheck) {
+    useResizeObserver(contentElement, checkOverflow);
+  } else {
+    onMounted(() => {
+      nextTick(checkOverflow);
+    });
+  }
+
+  return {
+    contentElement,
+    isExpanded,
+    needsToggle,
+    showReadMore,
+    showReadLess,
+    toggleExpanded,
+    checkOverflow,
+  };
+}