clean up unit tests

Author: nicolethoen

packages/module/src/ConsoleShared/src/components/markdown-extensions/__tests__/accordion-extension.spec.tsx

@@ -1,13 +1,9 @@
 // Generated by Cursor
 // AI-assisted implementation with human review and modifications
-import * as React from 'react';
-
-import { render, screen } from '@testing-library/react';
+import { renderHook } from '@testing-library/react';
 import useAccordionShowdownExtension from '../accordion-extension';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from '../const';
 import { marked } from 'marked';
-// eslint-disable-next-line @typescript-eslint/no-require-imports
-const DOMPurify = require('dompurify');
 
 // Mock marked
 jest.mock('marked', () => ({
@@ -21,298 +17,87 @@ jest.mock('dompurify', () => ({
   sanitize: jest.fn((html) => html),
 }));
 
-// Test component that uses the hook
-interface TestComponentProps {
-  onExtensionReady?: (extension: any) => void;
-}
-
-const TestAccordionComponent: React.FunctionComponent<TestComponentProps> = ({ onExtensionReady }) => {
-  const extension = useAccordionShowdownExtension();
-  
-  React.useEffect(() => {
-    if (onExtensionReady) {
-      onExtensionReady(extension);
-    }
-  }, [extension, onExtensionReady]);
-  
-  return (
-    <div data-testid="test-component">
-      <div data-testid="extension-type">{extension.type}</div>
-      <div data-testid="extension-regex-source">{extension.regex.source}</div>
-      <div data-testid="extension-regex-flags">{extension.regex.flags}</div>
-      <button 
-        data-testid="test-replace-button"
-        onClick={() => {
-          const result = extension.replace(
-            '[Test content]{{accordion &quot;Test Title&quot;}}',
-            'Test content',
-            'accordion',
-            '&quot;Test Title&quot;',
-            'Test Title'
-          );
-          const resultDiv = document.createElement('div');
-          resultDiv.innerHTML = result;
-          resultDiv.setAttribute('data-testid', 'replace-result');
-          document.body.appendChild(resultDiv);
-        }}
-      >
-        Test Replace
-      </button>
-    </div>
-  );
-};
-
 describe('useAccordionShowdownExtension', () => {
   beforeEach(() => {
     jest.clearAllMocks();
-    // Clean up any previous test results
-    const existingResults = document.querySelectorAll('[data-testid="replace-result"]');
-    existingResults.forEach(el => el.remove());
   });
 
-  it('should return extension with correct type', () => {
-    render(<TestAccordionComponent />);
-    expect(screen.getByTestId('extension-type').textContent).toBe('lang');
-  });
+  it('should return a showdown extension with correct properties', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const extension = result.current;
 
-  it('should return extension with global regex', () => {
-    render(<TestAccordionComponent />);
-    expect(screen.getByTestId('extension-regex-flags').textContent).toBe('g');
+    expect(extension.type).toBe('lang');
+    expect(extension.regex).toEqual(/\[(.+)]{{(accordion) (&quot;(.*?)&quot;)}}/g);
+    expect(typeof extension.replace).toBe('function');
   });
 
-  it('should return extension with correct regex pattern for HTML-encoded quotes', () => {
-    render(<TestAccordionComponent />);
-    const regexSource = screen.getByTestId('extension-regex-source').textContent;
-    expect(regexSource).toBe('\\[(.+)]{{(accordion) (&quot;(.*?)&quot;)}}');
+  it('should match accordion syntax with HTML-encoded quotes', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { regex } = result.current;
+    
+    const testText = '[Some content]{{accordion &quot;My Title&quot;}}';
+    const matches = regex.exec(testText);
+    
+    expect(matches).not.toBeNull();
+    expect(matches![1]).toBe('Some content');
+    expect(matches![2]).toBe('accordion');
+    expect(matches![4]).toBe('My Title');
   });
 
-  describe('regex pattern matching', () => {
-    let extension: any;
-
-    beforeEach(() => {
-      const handleExtensionReady = (ext: any) => {
-        extension = ext;
-      };
-      render(<TestAccordionComponent onExtensionReady={handleExtensionReady} />);
-    });
-
-    it('should match accordion syntax with HTML-encoded quotes', () => {
-      const testText = '[Some content here]{{accordion &quot;My Title&quot;}}';
-      const regex = new RegExp(extension.regex);
-      const matches = regex.exec(testText);
-      
-      expect(matches).not.toBeNull();
-      expect(matches![1]).toBe('Some content here');
-      expect(matches![2]).toBe('accordion');
-      expect(matches![3]).toBe('&quot;My Title&quot;');
-      expect(matches![4]).toBe('My Title');
-    });
-
-    it('should match multiple accordions in the same text', () => {
-      const testText = `
-        [First content]{{accordion &quot;First Title&quot;}}
-        Some other text
-        [Second content]{{accordion &quot;Second Title&quot;}}
-      `;
-      
-      const matches = Array.from(testText.matchAll(extension.regex));
-      expect(matches).toHaveLength(2);
-      expect(matches[0][4]).toBe('First Title');
-      expect(matches[1][4]).toBe('Second Title');
-    });
-
-    it('should not match accordion syntax with regular quotes', () => {
-      const testText = '[Some content]{{accordion "My Title"}}';
-      const matches = testText.match(extension.regex);
-      expect(matches).toBeNull();
-    });
-
-    it('should not match malformed accordion syntax', () => {
-      const malformedCases = [
-        'Some content]{{accordion &quot;My Title&quot;}}',
-        '[Some content{{accordion &quot;My Title&quot;}}',
-        '[Some content]{{accordion &quot;My Title&quot;}',
-        '[Some content]{{accordion My Title}}',
-        '[Some content]{{notaccordion &quot;My Title&quot;}}',
-      ];
-
-      malformedCases.forEach(testCase => {
-        const matches = testCase.match(extension.regex);
-        expect(matches).toBeNull();
-      });
-    });
+  it('should not match accordion syntax with regular quotes', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { regex } = result.current;
+    
+    const testText = '[Some content]{{accordion "My Title"}}';
+    expect(testText.match(regex)).toBeNull();
   });
 
-  describe('HTML generation', () => {
-    it('should generate correct accordion HTML structure when replace function is called', () => {
-      render(<TestAccordionComponent />);
-      
-      const testButton = screen.getByTestId('test-replace-button');
-      testButton.click();
-      
-      const result = document.querySelector('[data-testid="replace-result"]');
-      expect(result).not.toBeNull();
-      
-      // Check for PatternFly accordion classes in HTML
-      expect(result!.innerHTML).toContain('pf-v6-c-accordion');
-      expect(result!.innerHTML).toContain('pf-v6-c-accordion__item');
-      expect(result!.innerHTML).toContain('pf-v6-c-accordion__toggle');
-      expect(result!.innerHTML).toContain('pf-v6-c-accordion__expandable-content');
-      
-      // Check for correct IDs
-      expect(result!.innerHTML).toContain(`${ACCORDION_MARKDOWN_BUTTON_ID}-Test-Title`);
-      expect(result!.innerHTML).toContain(`${ACCORDION_MARKDOWN_CONTENT_ID}-Test-Title`);
-      
-      // Check that title is rendered
-      expect(result!.textContent).toContain('Test Title');
-    });
-
-    it('should call marked.parseInline and DOMPurify.sanitize during rendering', () => {
-      let extension: any;
-      const handleExtensionReady = (ext: any) => {
-        extension = ext;
-      };
-      
-      render(<TestAccordionComponent onExtensionReady={handleExtensionReady} />);
-      
-      // Call replace function directly
-      extension.replace(
-        '[**Bold text**]{{accordion &quot;Title&quot;}}',
-        '**Bold text**',
-        'accordion',
-        '&quot;Title&quot;',
-        'Title'
-      );
-
-      expect(marked.parseInline).toHaveBeenCalledWith('**Bold text**');
-      expect(DOMPurify.sanitize).toHaveBeenCalled();
-    });
-
-    it('should handle titles with spaces by replacing them with dashes in IDs', () => {
-      let extension: any;
-      const handleExtensionReady = (ext: any) => {
-        extension = ext;
-      };
-      
-      render(<TestAccordionComponent onExtensionReady={handleExtensionReady} />);
-      
-      const result = extension.replace(
-        '[Content]{{accordion &quot;My Test Title&quot;}}',
-        'Content',
-        'accordion',
-        '&quot;My Test Title&quot;',
-        'My Test Title'
-      );
-
-      expect(result).toContain(`id="${ACCORDION_MARKDOWN_BUTTON_ID}-My-Test-Title"`);
-      expect(result).toContain(`id="${ACCORDION_MARKDOWN_CONTENT_ID}-My-Test-Title"`);
-    });
-
-    it('should handle special characters in titles', () => {
-      let extension: any;
-      const handleExtensionReady = (ext: any) => {
-        extension = ext;
-      };
-      
-      render(<TestAccordionComponent onExtensionReady={handleExtensionReady} />);
-      
-      const result = extension.replace(
-        '[Content]{{accordion &quot;Title with 123 & symbols!&quot;}}',
-        'Content',
-        'accordion',
-        '&quot;Title with 123 & symbols!&quot;',
-        'Title with 123 & symbols!'
-      );
-
-      expect(result).toContain(`id="${ACCORDION_MARKDOWN_BUTTON_ID}-Title-with-123-&amp;-symbols!"`);
-      expect(result).toContain('Title with 123 &amp; symbols!');
-    });
+  it('should generate correct accordion HTML structure', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { replace } = result.current;
+    
+    const html = replace(
+      '[Test content]{{accordion &quot;Test Title&quot;}}',
+      'Test content',
+      'accordion',
+      '&quot;Test Title&quot;',
+      'Test Title'
+    );
+
+    expect(html).toContain('pf-v6-c-accordion');
+    expect(html).toContain('pf-v6-c-accordion__toggle');
+    expect(html).toContain(`${ACCORDION_MARKDOWN_BUTTON_ID}-Test-Title`);
+    expect(html).toContain(`${ACCORDION_MARKDOWN_CONTENT_ID}-Test-Title`);
+    expect(html).toContain('Test Title');
   });
 
-  describe('edge cases', () => {
-    it('should handle empty content', () => {
-      let extension: any;
-      const handleExtensionReady = (ext: any) => {
-        extension = ext;
-      };
-      
-      render(<TestAccordionComponent onExtensionReady={handleExtensionReady} />);
-      
-      const result = extension.replace(
-        '[]{{accordion &quot;Empty&quot;}}',
-        '',
-        'accordion',
-        '&quot;Empty&quot;',
-        'Empty'
-      );
-
-      expect(result).toContain('class="pf-v6-c-accordion"');
-      expect(result).toContain('Empty');
-    });
-
-    it('should handle content with HTML entities', () => {
-      let extension: any;
-      const handleExtensionReady = (ext: any) => {
-        extension = ext;
-      };
-      
-      render(<TestAccordionComponent onExtensionReady={handleExtensionReady} />);
-      
-      const result = extension.replace(
-        '[Content with &lt;tags&gt; &amp; entities]{{accordion &quot;Title&quot;}}',
-        'Content with &lt;tags&gt; &amp; entities',
-        'accordion',
-        '&quot;Title&quot;',
-        'Title'
-      );
-
-      expect(result).toContain('Content with &lt;tags&gt; &amp; entities');
-    });
-
-    it('should handle very long titles', () => {
-      let extension: any;
-      const handleExtensionReady = (ext: any) => {
-        extension = ext;
-      };
-      
-      render(<TestAccordionComponent onExtensionReady={handleExtensionReady} />);
-      
-      const longTitle = 'This is a very long title that might cause issues with ID generation and display';
-      const result = extension.replace(
-        '[Content]{{accordion &quot;' + longTitle + '&quot;}}',
-        'Content',
-        'accordion',
-        '&quot;' + longTitle + '&quot;',
-        longTitle
-      );
-
-      expect(result).toContain(longTitle);
-      expect(result).toContain(`id="${ACCORDION_MARKDOWN_BUTTON_ID}-${longTitle.replace(/\s/g, '-')}"`);
-    });
+  it('should process content through marked and sanitize HTML', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { replace } = result.current;
+    
+    replace(
+      '[**Bold text**]{{accordion &quot;Title&quot;}}',
+      '**Bold text**',
+      'accordion',
+      '&quot;Title&quot;',
+      'Title'
+    );
+
+    expect(marked.parseInline).toHaveBeenCalledWith('**Bold text**');
   });
 
-  describe('memoization', () => {
-    it('should return the same extension object on subsequent renders', () => {
-      let callCount = 0;
-      let firstExtension: any;
-      let secondExtension: any;
-      
-      const handleExtensionReady = (ext: any) => {
-        callCount++;
-        if (callCount === 1) {
-          firstExtension = ext;
-        } else if (callCount === 2) {
-          secondExtension = ext;
-        }
-      };
-      
-      const { rerender } = render(<TestAccordionComponent onExtensionReady={handleExtensionReady} />);
-      rerender(<TestAccordionComponent onExtensionReady={handleExtensionReady} />);
-      
-      expect(callCount).toBeGreaterThanOrEqual(1);
-      expect(firstExtension).toBeDefined();
-      expect(firstExtension.type).toBe('lang');
-      expect(typeof firstExtension.replace).toBe('function');
-    });
+  it('should handle titles with spaces in IDs', () => {
+    const { result } = renderHook(() => useAccordionShowdownExtension());
+    const { replace } = result.current;
+    
+    const html = replace(
+      '[Content]{{accordion &quot;My Test Title&quot;}}',
+      'Content',
+      'accordion',
+      '&quot;My Test Title&quot;',
+      'My Test Title'
+    );
+
+    expect(html).toContain(`${ACCORDION_MARKDOWN_BUTTON_ID}-My-Test-Title`);
   });
 });