test: enhance InLink component test coverage and refactor class handling logic

- Added tests for className updates under various scenarios, including prop changes and combinations.
- Refactored className logic in `InLink` to properly handle custom classes without default styles.
- Replaced `<a>` tags with `InLink` in ISBD pages for consistent styling and functionality.
- Enhanced className memoization for optimized re-rendering in `InLink`.
- Adjusted tests for smartWrap behavior and preserved accessibility compliance checks.

Author: jonphipps

packages/theme/src/components/InLink/index.tsx

@@ -9,17 +9,17 @@ export interface InLinkProps {
    * URL to link to - will be processed through useBaseUrl
    */
   href: string;
-  
+
   /**
    * Link content
    */
   children: React.ReactNode;
-  
+
   /**
    * CSS class name
    */
   className?: string;
-  
+
   /**
    * Enable smart wrapping before parentheses
    * @default true
@@ -69,27 +69,33 @@ export const InLink: React.FC<InLinkProps> = ({
 }) => {
   // Process URL through useBaseUrl
   const processedHref = useBaseUrl(href);
-  
+
   // Process children for smart wrapping if enabled
   const processedChildren = useMemo(() => {
     if (smartWrap) {
       return processChildrenForSmartWrap(children);
     }
     return children;
   }, [children, smartWrap]);
-  
+
+  // Memoize className computation to ensure proper re-rendering
+  const computedClassName = useMemo(() => {
+    // If custom className is provided, use only that (no default styles)
+    if (className) {
+      return className;
+    }
+    // Otherwise, apply default IFLA link styling
+    return clsx('linkInline', styles.inLink);
+  }, [className]);
+
   return (
     <Link
       to={processedHref}
-      className={clsx(
-        'linkInline',
-        styles.inLink,
-        className
-      )}
+      className={computedClassName}
     >
       {processedChildren}
     </Link>
   );
 };
 
-export default InLink;
+export default InLink;

packages/theme/src/tests/components/InLink-improved.test.tsx

@@ -265,8 +265,8 @@ describe('InLink Component - Real Functionality Tests', () => {
       const link = container.querySelector('a');
       const classes = link?.className.split(' ') || [];
 
-      // Should have base class and additional class
-      expect(classes.length).toBeGreaterThanOrEqual(2);
+      // With custom className, should only have that class (no default styles)
+      expect(classes.length).toBe(1);
       expect(classes).toContain('additional-class');
     });
 

packages/theme/src/tests/components/InLink.test.tsx

@@ -27,54 +27,158 @@ describe('InLink Component', () => {
         has extent of embodied content
       </InLink>
     );
-    
+
     const link = screen.getByText('has extent of embodied content');
     expect(link).toBeInTheDocument();
     expect(link).toHaveAttribute('href', '/docs/attributes/1277.html');
     expect(link).toHaveClass('linkInline');
   });
-  
+
   it('processes URLs with useBaseUrl', () => {
     render(
       <InLink href="docs/attributes/1277.html">
         has extent of embodied content
       </InLink>
     );
-    
+
     const link = screen.getByText('has extent of embodied content');
     expect(link).toHaveAttribute('href', '/docs/attributes/1277.html');
   });
-  
-  it('applies additional className when provided', () => {
+
+  it('applies only custom className when provided (no default styles)', () => {
     render(
       <InLink href="/docs/attributes/1277.html" className="custom-class">
         has extent of embodied content
       </InLink>
     );
-    
+
     const link = screen.getByText('has extent of embodied content');
     expect(link).toHaveClass('custom-class');
+    expect(link).not.toHaveClass('linkInline'); // linkInline should NOT be present with custom class
+    expect(link?.className).not.toMatch(/inLink/); // CSS module class should not be applied
+  });
+
+  it('updates rendered class when className prop changes', () => {
+    const TestComponent = ({ className }: { className: string }) => (
+      <InLink href="/docs/test" className={className}>
+        Test Link
+      </InLink>
+    );
+
+    const { rerender } = render(<TestComponent className="initial-class" />);
+
+    const link = screen.getByText('Test Link');
+    expect(link).toHaveClass('initial-class');
+    expect(link).not.toHaveClass('updated-class');
+
+    // Change the className prop
+    rerender(<TestComponent className="updated-class" />);
+
+    // The component should re-render with the new class
+    expect(link).toHaveClass('updated-class');
+    expect(link).not.toHaveClass('initial-class');
+  });
+
+  it('updates className when multiple props change simultaneously', () => {
+    const TestComponent = ({ className, href, children }: { className: string; href: string; children: string }) => (
+      <InLink href={href} className={className}>
+        {children}
+      </InLink>
+    );
+
+    const { rerender } = render(
+      <TestComponent className="class-one" href="/docs/test1" children="Link One" />
+    );
+
+    let link = screen.getByText('Link One');
+    expect(link).toHaveClass('class-one');
+    expect(link).toHaveAttribute('href', '/docs/test1');
+
+    // Change multiple props including className
+    rerender(
+      <TestComponent className="class-two" href="/docs/test2" children="Link Two" />
+    );
+
+    link = screen.getByText('Link Two');
+    expect(link).toHaveClass('class-two');
+    expect(link).not.toHaveClass('class-one');
+    expect(link).toHaveAttribute('href', '/docs/test2');
+  });
+
+  it('handles className changes with smartWrap enabled and disabled', () => {
+    const TestComponent = ({ className, smartWrap }: { className: string; smartWrap: boolean }) => (
+      <InLink href="/docs/test" className={className} smartWrap={smartWrap}>
+        Text with (parentheses)
+      </InLink>
+    );
+
+    const { rerender } = render(
+      <TestComponent className="smart-wrap-class" smartWrap={true} />
+    );
+
+    const link = screen.getByText(/Text with.*parentheses/);
+    expect(link).toHaveClass('smart-wrap-class');
+    expect(link?.className).not.toMatch(/inLink/); // CSS module class not applied with custom className
+
+    // Change className and smartWrap
+    rerender(
+      <TestComponent className="no-wrap-class" smartWrap={false} />
+    );
+
+    expect(link).toHaveClass('no-wrap-class');
+    expect(link).not.toHaveClass('smart-wrap-class');
+    expect(link?.className).not.toMatch(/inLink/); // CSS module class still not applied
+  });
+
+  it('properly manages default vs custom classes when className changes', () => {
+    const TestComponent = ({ className }: { className?: string }) => (
+      <InLink href="/docs/test" className={className}>
+        Test Link
+      </InLink>
+    );
+
+    const { rerender } = render(<TestComponent className="custom-class" />);
+
+    const link = screen.getByText('Test Link');
+    expect(link).not.toHaveClass('linkInline'); // NOT present with custom class
+    expect(link).toHaveClass('custom-class');
+    expect(link?.className).not.toMatch(/inLink/); // CSS module class not applied
+
+    // Change to different className
+    rerender(<TestComponent className="another-class" />);
+
+    expect(link).not.toHaveClass('linkInline'); // Still not present
+    expect(link).toHaveClass('another-class');
+    expect(link).not.toHaveClass('custom-class');
+    expect(link?.className).not.toMatch(/inLink/); // CSS module class still not applied
+
+    // Remove custom className - default styles should now apply
+    rerender(<TestComponent />);
+
+    expect(link).toHaveClass('linkInline'); // Now present
+    expect(link?.className).toMatch(/inLink/); // CSS module class should now be applied
+    expect(link).not.toHaveClass('another-class');
   });
-  
+
   it('renders with complex children', () => {
     render(
       <InLink href="/docs/attributes/1277.html">
         <span data-testid="child-element">Complex child</span>
       </InLink>
     );
-    
+
     const childElement = screen.getByTestId('child-element');
     expect(childElement).toBeInTheDocument();
     expect(childElement.textContent).toBe('Complex child');
   });
-  
+
   it('preserves href with query parameters', () => {
     render(
       <InLink href="/docs/attributes/1277.html?param=value#section">
         Link with query and hash
       </InLink>
     );
-    
+
     const link = screen.getByText('Link with query and hash');
     expect(link).toHaveAttribute('href', '/docs/attributes/1277.html?param=value#section');
   });
@@ -86,7 +190,7 @@ describe('InLink Component', () => {
           Catalogue of shipwrecked books (2018; William Collins; volume; case binding)
         </InLink>
       );
-      
+
       const link = container.querySelector('a');
       // The text should contain zero-width spaces before parentheses
       expect(link?.textContent).toContain('\u200B(');
@@ -102,7 +206,7 @@ describe('InLink Component', () => {
           Example text (first) and more (second) content
         </InLink>
       );
-      
+
       const link = container.querySelector('a');
       const textContent = link?.textContent || '';
       // Count zero-width spaces - should be 2 (one before each parenthesis)
@@ -116,7 +220,7 @@ describe('InLink Component', () => {
           <span>Text with (parentheses) inside</span>
         </InLink>
       );
-      
+
       const span = container.querySelector('span');
       expect(span?.textContent).toContain('\u200B(');
     });
@@ -127,7 +231,7 @@ describe('InLink Component', () => {
           Text with (parentheses) inside
         </InLink>
       );
-      
+
       const link = container.querySelector('a');
       expect(link?.textContent).not.toContain('\u200B');
       expect(link?.textContent).toBe('Text with (parentheses) inside');
@@ -139,7 +243,7 @@ describe('InLink Component', () => {
           Text without any parentheses
         </InLink>
       );
-      
+
       const link = container.querySelector('a');
       expect(link?.textContent).toBe('Text without any parentheses');
       expect(link?.textContent).not.toContain('\u200B');
@@ -151,7 +255,7 @@ describe('InLink Component', () => {
           Text with empty () parentheses
         </InLink>
       );
-      
+
       const link = container.querySelector('a');
       expect(link?.textContent).toBe('Text with empty \u200B() parentheses');
     });
@@ -162,36 +266,37 @@ describe('InLink Component', () => {
           Start text (with parens) <em>emphasized (text)</em> end
         </InLink>
       );
-      
+
       const link = container.querySelector('a');
       const textContent = link?.textContent || '';
       // Should have 2 zero-width spaces
       const zwsCount = (textContent.match(/\u200B/g) || []).length;
       expect(zwsCount).toBe(2);
-      
+
       // Check that emphasized text is preserved
       const em = container.querySelector('em');
       expect(em).toBeInTheDocument();
       expect(em?.textContent).toContain('\u200B(');
     });
   });
 
-  it('applies correct CSS module classes', () => {
+  it('applies correct CSS module classes when no custom className provided', () => {
     const { container } = render(
       <InLink href="/test">Test Link</InLink>
     );
 
     const link = container.querySelector('a');
     expect(link?.className).toMatch(/inLink/);
+    expect(link).toHaveClass('linkInline');
   });
-  
+
   it('passes accessibility tests', async () => {
     const { container } = render(
       <InLink href="/docs/attributes/1277.html">
         Accessible Link
       </InLink>
     );
-    
+
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
@@ -202,8 +307,8 @@ describe('InLink Component', () => {
         Catalogue of shipwrecked books (2018; William Collins; volume; case binding)
       </InLink>
     );
-    
+
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });
-});
+});