@aarhus-university/au-lib-react-components 12.6.2 → 12.6.3

package/__tests__/jest/AUDynamicContentComponent.test.tsx

@@ -1,386 +1,386 @@
-/* eslint-disable react/jsx-props-no-spreading */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom';
-import AUDynamicContentComponent, {
-  IDynamicContentProps,
-  IDynamicContentVideo,
-  IDynamicContentImage,
-  IDynamicContentInfoBox,
-} from '../../src/components/AUDynamicContentComponent';
-
-describe('<AUDynamicContentComponent />', () => {
-  const baseProps: IDynamicContentProps = {
-    name: 'Dynamic Content Section',
-    featuredContentDescription: '<p>This is a description</p>',
-    links: [
-      {
-        title: 'System Link',
-        description: 'A system link description',
-        url: 'https://example.com/system',
-        linkType: 'system',
-      },
-      {
-        title: 'Information Link',
-        description: 'An information link description',
-        url: 'https://example.com/info',
-        linkType: 'information',
-      },
-    ],
-    featuredContent: {
-      type: 'image',
-      url: 'https://example.com/image.jpg',
-      altText: 'Example image',
-    } as IDynamicContentImage,
-  };
-
-  describe('basic rendering', () => {
-    it('renders the component with all required props', () => {
-      const { container } = render(<AUDynamicContentComponent {...baseProps} />);
-
-      expect(screen.getByText('Dynamic Content Section')).toBeInTheDocument();
-      expect(screen.getByText('System Link')).toBeInTheDocument();
-      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
-    });
-
-    it('applies correct ARIA attributes', () => {
-      render(<AUDynamicContentComponent {...baseProps} />);
-
-      const section = screen.getByRole('region');
-      expect(section).toHaveAttribute('aria-labelledby', 'dynamic-content-heading');
-      expect(screen.getByRole('heading', { level: 3 })).toHaveAttribute(
-        'id',
-        'dynamic-content-heading',
-      );
-    });
-
-    it('renders the featured content description as HTML', () => {
-      const { container } = render(<AUDynamicContentComponent {...baseProps} />);
-
-      const description = container.querySelector('.dynamic-content__featured p');
-      expect(description).toBeInTheDocument();
-      expect(description?.textContent).toBe('This is a description');
-    });
-  });
-
-  describe('featured content variants', () => {
-    it('renders a video featured content', () => {
-      // Note: Backend/admin panel validates that video URLs are from Panopto or YouTube-nocookie
-      // This component is a thin client that renders what the backend provides
-      const videoContent: IDynamicContentVideo = {
-        type: 'video',
-        url: 'https://aarhusuniversitet.cloud.panopto.eu/Panopto/Pages/Embed.aspx?id=test-video-id',
-      };
-
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          featuredContent={videoContent}
-        />,
-      );
-
-      const iframe = container.querySelector('iframe');
-      expect(iframe).toBeInTheDocument();
-      expect(iframe).toHaveAttribute('src', 'https://aarhusuniversitet.cloud.panopto.eu/Panopto/Pages/Embed.aspx?id=test-video-id');
-      expect(iframe).toHaveAttribute('title', 'Video player: Dynamic Content Section');
-      expect(iframe).toHaveAttribute('loading', 'lazy');
-      expect(iframe).toHaveAttribute('allowfullscreen');
-    });
-
-    it('renders an image featured content without optional fields', () => {
-      const imageContent: IDynamicContentImage = {
-        type: 'image',
-        url: 'https://example.com/image.jpg',
-        altText: 'Test image',
-      };
-
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          featuredContent={imageContent}
-        />,
-      );
-
-      const img = container.querySelector('img');
-      expect(img).toBeInTheDocument();
-      expect(img).toHaveAttribute('src', 'https://example.com/image.jpg');
-      expect(img).toHaveAttribute('alt', 'Test image');
-      expect(img).toHaveAttribute('loading', 'lazy');
-      expect(container.querySelector('figcaption')).not.toBeInTheDocument();
-      // Check that the image is not wrapped in a link (only links in links section)
-      const featuredDiv = container.querySelector('.dynamic-content__featured');
-      expect(featuredDiv?.querySelector('a')).not.toBeInTheDocument();
-    });
-
-    it('renders an image with caption', () => {
-      const imageContent: IDynamicContentImage = {
-        type: 'image',
-        url: 'https://example.com/image.jpg',
-        altText: 'Test image',
-        caption: 'This is a caption',
-      };
-
-      render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          featuredContent={imageContent}
-        />,
-      );
-
-      const caption = screen.getByText('This is a caption');
-      expect(caption).toBeInTheDocument();
-      expect(caption.tagName).toBe('FIGCAPTION');
-      expect(caption).toHaveClass('text--small');
-    });
-
-    it('renders an image wrapped in a link when linkUrl is provided', () => {
-      const imageContent: IDynamicContentImage = {
-        type: 'image',
-        url: 'https://example.com/image.jpg',
-        altText: 'Test image',
-        linkUrl: 'https://example.com/destination',
-      };
-
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          featuredContent={imageContent}
-        />,
-      );
-
-      const link = container.querySelector('.dynamic-content__featured a');
-      expect(link).toBeInTheDocument();
-      expect(link).toHaveAttribute('href', 'https://example.com/destination');
-      expect(link?.querySelector('img')).toBeInTheDocument();
-    });
-
-    it('renders an infoBox featured content', () => {
-      const infoBoxContent: IDynamicContentInfoBox = {
-        type: 'infoBox',
-        htmlContent: '<div class="info">Important information</div>',
-      };
-
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          featuredContent={infoBoxContent}
-        />,
-      );
-
-      const infoBox = container.querySelector('.dynamic-content__infobox');
-      expect(infoBox).toBeInTheDocument();
-      expect(infoBox?.querySelector('.info')).toBeInTheDocument();
-      expect(screen.getByText('Important information')).toBeInTheDocument();
-    });
-  });
-
-  describe('links rendering', () => {
-    it('renders multiple links with correct styling', () => {
-      render(<AUDynamicContentComponent {...baseProps} />);
-
-      const systemLink = screen.getByText('System Link').closest('a');
-      const infoLink = screen.getByText('Information Link').closest('a');
-
-      expect(systemLink).toHaveClass('button', 'button--block');
-      expect(systemLink).not.toHaveClass('button--dimmed');
-
-      expect(infoLink).toHaveClass('button', 'button--block', 'button--dimmed');
-    });
-
-    it('renders link titles and descriptions', () => {
-      render(<AUDynamicContentComponent {...baseProps} />);
-
-      expect(screen.getByText('System Link')).toHaveClass('card__title');
-      expect(screen.getByText('A system link description')).toHaveClass('card__subtitle');
-      expect(screen.getByText('Information Link')).toHaveClass('card__title');
-      expect(screen.getByText('An information link description')).toHaveClass('card__subtitle');
-    });
-
-    it('renders correct href attributes', () => {
-      render(<AUDynamicContentComponent {...baseProps} />);
-
-      const systemLink = screen.getByText('System Link').closest('a');
-      const infoLink = screen.getByText('Information Link').closest('a');
-
-      expect(systemLink).toHaveAttribute('href', 'https://example.com/system');
-      expect(infoLink).toHaveAttribute('href', 'https://example.com/info');
-    });
-
-    it('does not render links when array is empty', () => {
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          links={[]}
-        />,
-      );
-
-      const linksContainer = container.querySelector('.dynamic-content__links');
-      expect(linksContainer).toBeInTheDocument();
-      expect(linksContainer?.querySelector('a')).not.toBeInTheDocument();
-    });
-
-    it('renders a single link', () => {
-      const singleLinkProps = {
-        ...baseProps,
-        links: [baseProps.links[0]],
-      };
-
-      render(<AUDynamicContentComponent {...singleLinkProps} />);
-
-      expect(screen.getByText('System Link')).toBeInTheDocument();
-      expect(screen.queryByText('Information Link')).not.toBeInTheDocument();
-    });
-  });
-
-  describe('defensive coding - null/undefined handling', () => {
-    it('handles undefined links array gracefully', () => {
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          links={undefined as any}
-        />,
-      );
-
-      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
-      expect(container.querySelector('.dynamic-content__links a')).not.toBeInTheDocument();
-    });
-
-    it('handles null links array gracefully', () => {
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          links={null as any}
-        />,
-      );
-
-      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
-      expect(container.querySelector('.dynamic-content__links a')).not.toBeInTheDocument();
-    });
-
-    it('handles undefined name gracefully', () => {
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          name={undefined as any}
-        />,
-      );
-
-      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
-      expect(container.querySelector('h3')).not.toBeInTheDocument();
-    });
-
-    it('handles empty string name gracefully', () => {
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          name=""
-        />,
-      );
-
-      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
-      expect(container.querySelector('h3')).not.toBeInTheDocument();
-    });
-
-    it('handles undefined featuredContent gracefully', () => {
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          featuredContent={undefined as any}
-        />,
-      );
-
-      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
-      expect(container.querySelector('iframe')).not.toBeInTheDocument();
-      expect(container.querySelector('img')).not.toBeInTheDocument();
-      expect(container.querySelector('.dynamic-content__infobox')).not.toBeInTheDocument();
-    });
-
-    it('handles null featuredContent gracefully', () => {
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          featuredContent={null as any}
-        />,
-      );
-
-      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
-      expect(container.querySelector('iframe')).not.toBeInTheDocument();
-      expect(container.querySelector('img')).not.toBeInTheDocument();
-      expect(container.querySelector('.dynamic-content__infobox')).not.toBeInTheDocument();
-    });
-
-    it('handles undefined featuredContentDescription gracefully', () => {
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          featuredContentDescription={undefined as any}
-        />,
-      );
-
-      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
-      const featuredDiv = container.querySelector('.dynamic-content__featured');
-      expect(featuredDiv).toBeInTheDocument();
-      // Should not have a child div with dangerouslySetInnerHTML
-      const childDivs = Array.from(featuredDiv?.children || []).filter(
-        (child) => child.tagName === 'DIV' && child !== featuredDiv,
-      );
-      expect(childDivs.length).toBe(0);
-    });
-
-    it('handles empty string featuredContentDescription gracefully', () => {
-      const { container } = render(
-        <AUDynamicContentComponent
-          {...baseProps}
-          featuredContentDescription=""
-        />,
-      );
-
-      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
-      const featuredDiv = container.querySelector('.dynamic-content__featured');
-      expect(featuredDiv).toBeInTheDocument();
-      // Should not render the description div when empty
-      const childDivs = Array.from(featuredDiv?.children || []).filter(
-        (child) => child.tagName === 'DIV' && child !== featuredDiv,
-      );
-      expect(childDivs.length).toBe(0);
-    });
-  });
-
-  describe('edge cases', () => {
-    it('renders with minimal valid props', () => {
-      const minimalProps: IDynamicContentProps = {
-        name: 'Minimal',
-        featuredContentDescription: '<p>Description</p>',
-        links: [],
-        featuredContent: {
-          type: 'image',
-          url: 'https://example.com/img.jpg',
-          altText: 'Image',
-        },
-      };
-
-      const { container } = render(<AUDynamicContentComponent {...minimalProps} />);
-
-      expect(screen.getByText('Minimal')).toBeInTheDocument();
-      expect(container.querySelector('img')).toBeInTheDocument();
-      expect(container.querySelector('.dynamic-content__links a')).not.toBeInTheDocument();
-    });
-
-    it('handles all link types correctly', () => {
-      const allTypesProps = {
-        ...baseProps,
-        links: [
-          { ...baseProps.links[0], linkType: 'system' as const },
-          { ...baseProps.links[1], linkType: 'information' as const },
-        ],
-      };
-
-      render(<AUDynamicContentComponent {...allTypesProps} />);
-
-      const links = screen.getAllByRole('link');
-      expect(links[0]).not.toHaveClass('button--dimmed');
-      expect(links[1]).toHaveClass('button--dimmed');
-    });
-  });
-});
+/* eslint-disable react/jsx-props-no-spreading */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import AUDynamicContentComponent, {
+  IDynamicContentProps,
+  IDynamicContentVideo,
+  IDynamicContentImage,
+  IDynamicContentInfoBox,
+} from '../../src/components/AUDynamicContentComponent';
+
+describe('<AUDynamicContentComponent />', () => {
+  const baseProps: IDynamicContentProps = {
+    name: 'Dynamic Content Section',
+    featuredContentDescription: '<p>This is a description</p>',
+    links: [
+      {
+        title: 'System Link',
+        description: 'A system link description',
+        url: 'https://example.com/system',
+        linkType: 'system',
+      },
+      {
+        title: 'Information Link',
+        description: 'An information link description',
+        url: 'https://example.com/info',
+        linkType: 'information',
+      },
+    ],
+    featuredContent: {
+      type: 'image',
+      url: 'https://example.com/image.jpg',
+      altText: 'Example image',
+    } as IDynamicContentImage,
+  };
+
+  describe('basic rendering', () => {
+    it('renders the component with all required props', () => {
+      const { container } = render(<AUDynamicContentComponent {...baseProps} />);
+
+      expect(screen.getByText('Dynamic Content Section')).toBeInTheDocument();
+      expect(screen.getByText('System Link')).toBeInTheDocument();
+      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
+    });
+
+    it('applies correct ARIA attributes', () => {
+      render(<AUDynamicContentComponent {...baseProps} />);
+
+      const section = screen.getByRole('region');
+      expect(section).toHaveAttribute('aria-labelledby', 'dynamic-content-heading');
+      expect(screen.getByRole('heading', { level: 3 })).toHaveAttribute(
+        'id',
+        'dynamic-content-heading',
+      );
+    });
+
+    it('renders the featured content description as HTML', () => {
+      const { container } = render(<AUDynamicContentComponent {...baseProps} />);
+
+      const description = container.querySelector('.dynamic-content__featured p');
+      expect(description).toBeInTheDocument();
+      expect(description?.textContent).toBe('This is a description');
+    });
+  });
+
+  describe('featured content variants', () => {
+    it('renders a video featured content', () => {
+      // Note: Backend/admin panel validates that video URLs are from Panopto or YouTube-nocookie
+      // This component is a thin client that renders what the backend provides
+      const videoContent: IDynamicContentVideo = {
+        type: 'video',
+        url: 'https://aarhusuniversitet.cloud.panopto.eu/Panopto/Pages/Embed.aspx?id=test-video-id',
+      };
+
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          featuredContent={videoContent}
+        />,
+      );
+
+      const iframe = container.querySelector('iframe');
+      expect(iframe).toBeInTheDocument();
+      expect(iframe).toHaveAttribute('src', 'https://aarhusuniversitet.cloud.panopto.eu/Panopto/Pages/Embed.aspx?id=test-video-id');
+      expect(iframe).toHaveAttribute('title', 'Video player: Dynamic Content Section');
+      expect(iframe).toHaveAttribute('loading', 'lazy');
+      expect(iframe).toHaveAttribute('allowfullscreen');
+    });
+
+    it('renders an image featured content without optional fields', () => {
+      const imageContent: IDynamicContentImage = {
+        type: 'image',
+        url: 'https://example.com/image.jpg',
+        altText: 'Test image',
+      };
+
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          featuredContent={imageContent}
+        />,
+      );
+
+      const img = container.querySelector('img');
+      expect(img).toBeInTheDocument();
+      expect(img).toHaveAttribute('src', 'https://example.com/image.jpg');
+      expect(img).toHaveAttribute('alt', 'Test image');
+      expect(img).toHaveAttribute('loading', 'lazy');
+      expect(container.querySelector('figcaption')).not.toBeInTheDocument();
+      // Check that the image is not wrapped in a link (only links in links section)
+      const featuredDiv = container.querySelector('.dynamic-content__featured');
+      expect(featuredDiv?.querySelector('a')).not.toBeInTheDocument();
+    });
+
+    it('renders an image with caption', () => {
+      const imageContent: IDynamicContentImage = {
+        type: 'image',
+        url: 'https://example.com/image.jpg',
+        altText: 'Test image',
+        caption: 'This is a caption',
+      };
+
+      render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          featuredContent={imageContent}
+        />,
+      );
+
+      const caption = screen.getByText('This is a caption');
+      expect(caption).toBeInTheDocument();
+      expect(caption.tagName).toBe('FIGCAPTION');
+      expect(caption).toHaveClass('text--small');
+    });
+
+    it('renders an image wrapped in a link when linkUrl is provided', () => {
+      const imageContent: IDynamicContentImage = {
+        type: 'image',
+        url: 'https://example.com/image.jpg',
+        altText: 'Test image',
+        linkUrl: 'https://example.com/destination',
+      };
+
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          featuredContent={imageContent}
+        />,
+      );
+
+      const link = container.querySelector('.dynamic-content__featured a');
+      expect(link).toBeInTheDocument();
+      expect(link).toHaveAttribute('href', 'https://example.com/destination');
+      expect(link?.querySelector('img')).toBeInTheDocument();
+    });
+
+    it('renders an infoBox featured content', () => {
+      const infoBoxContent: IDynamicContentInfoBox = {
+        type: 'infoBox',
+        htmlContent: '<div class="info">Important information</div>',
+      };
+
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          featuredContent={infoBoxContent}
+        />,
+      );
+
+      const infoBox = container.querySelector('.dynamic-content__infobox');
+      expect(infoBox).toBeInTheDocument();
+      expect(infoBox?.querySelector('.info')).toBeInTheDocument();
+      expect(screen.getByText('Important information')).toBeInTheDocument();
+    });
+  });
+
+  describe('links rendering', () => {
+    it('renders multiple links with correct styling', () => {
+      render(<AUDynamicContentComponent {...baseProps} />);
+
+      const systemLink = screen.getByText('System Link').closest('a');
+      const infoLink = screen.getByText('Information Link').closest('a');
+
+      expect(systemLink).toHaveClass('button', 'button--block');
+      expect(systemLink).not.toHaveClass('button--dimmed');
+
+      expect(infoLink).toHaveClass('button', 'button--block', 'button--dimmed');
+    });
+
+    it('renders link titles and descriptions', () => {
+      render(<AUDynamicContentComponent {...baseProps} />);
+
+      expect(screen.getByText('System Link')).toHaveClass('card__title');
+      expect(screen.getByText('A system link description')).toHaveClass('card__subtitle');
+      expect(screen.getByText('Information Link')).toHaveClass('card__title');
+      expect(screen.getByText('An information link description')).toHaveClass('card__subtitle');
+    });
+
+    it('renders correct href attributes', () => {
+      render(<AUDynamicContentComponent {...baseProps} />);
+
+      const systemLink = screen.getByText('System Link').closest('a');
+      const infoLink = screen.getByText('Information Link').closest('a');
+
+      expect(systemLink).toHaveAttribute('href', 'https://example.com/system');
+      expect(infoLink).toHaveAttribute('href', 'https://example.com/info');
+    });
+
+    it('does not render links when array is empty', () => {
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          links={[]}
+        />,
+      );
+
+      const linksContainer = container.querySelector('.dynamic-content__links');
+      expect(linksContainer).toBeInTheDocument();
+      expect(linksContainer?.querySelector('a')).not.toBeInTheDocument();
+    });
+
+    it('renders a single link', () => {
+      const singleLinkProps = {
+        ...baseProps,
+        links: [baseProps.links[0]],
+      };
+
+      render(<AUDynamicContentComponent {...singleLinkProps} />);
+
+      expect(screen.getByText('System Link')).toBeInTheDocument();
+      expect(screen.queryByText('Information Link')).not.toBeInTheDocument();
+    });
+  });
+
+  describe('defensive coding - null/undefined handling', () => {
+    it('handles undefined links array gracefully', () => {
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          links={undefined as any}
+        />,
+      );
+
+      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
+      expect(container.querySelector('.dynamic-content__links a')).not.toBeInTheDocument();
+    });
+
+    it('handles null links array gracefully', () => {
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          links={null as any}
+        />,
+      );
+
+      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
+      expect(container.querySelector('.dynamic-content__links a')).not.toBeInTheDocument();
+    });
+
+    it('handles undefined name gracefully', () => {
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          name={undefined as any}
+        />,
+      );
+
+      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
+      expect(container.querySelector('h3')).not.toBeInTheDocument();
+    });
+
+    it('handles empty string name gracefully', () => {
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          name=""
+        />,
+      );
+
+      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
+      expect(container.querySelector('h3')).not.toBeInTheDocument();
+    });
+
+    it('handles undefined featuredContent gracefully', () => {
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          featuredContent={undefined as any}
+        />,
+      );
+
+      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
+      expect(container.querySelector('iframe')).not.toBeInTheDocument();
+      expect(container.querySelector('img')).not.toBeInTheDocument();
+      expect(container.querySelector('.dynamic-content__infobox')).not.toBeInTheDocument();
+    });
+
+    it('handles null featuredContent gracefully', () => {
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          featuredContent={null as any}
+        />,
+      );
+
+      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
+      expect(container.querySelector('iframe')).not.toBeInTheDocument();
+      expect(container.querySelector('img')).not.toBeInTheDocument();
+      expect(container.querySelector('.dynamic-content__infobox')).not.toBeInTheDocument();
+    });
+
+    it('handles undefined featuredContentDescription gracefully', () => {
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          featuredContentDescription={undefined as any}
+        />,
+      );
+
+      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
+      const featuredDiv = container.querySelector('.dynamic-content__featured');
+      expect(featuredDiv).toBeInTheDocument();
+      // Should not have a child div with dangerouslySetInnerHTML
+      const childDivs = Array.from(featuredDiv?.children || []).filter(
+        (child) => child.tagName === 'DIV' && child !== featuredDiv,
+      );
+      expect(childDivs.length).toBe(0);
+    });
+
+    it('handles empty string featuredContentDescription gracefully', () => {
+      const { container } = render(
+        <AUDynamicContentComponent
+          {...baseProps}
+          featuredContentDescription=""
+        />,
+      );
+
+      expect(container.querySelector('.dynamic-content')).toBeInTheDocument();
+      const featuredDiv = container.querySelector('.dynamic-content__featured');
+      expect(featuredDiv).toBeInTheDocument();
+      // Should not render the description div when empty
+      const childDivs = Array.from(featuredDiv?.children || []).filter(
+        (child) => child.tagName === 'DIV' && child !== featuredDiv,
+      );
+      expect(childDivs.length).toBe(0);
+    });
+  });
+
+  describe('edge cases', () => {
+    it('renders with minimal valid props', () => {
+      const minimalProps: IDynamicContentProps = {
+        name: 'Minimal',
+        featuredContentDescription: '<p>Description</p>',
+        links: [],
+        featuredContent: {
+          type: 'image',
+          url: 'https://example.com/img.jpg',
+          altText: 'Image',
+        },
+      };
+
+      const { container } = render(<AUDynamicContentComponent {...minimalProps} />);
+
+      expect(screen.getByText('Minimal')).toBeInTheDocument();
+      expect(container.querySelector('img')).toBeInTheDocument();
+      expect(container.querySelector('.dynamic-content__links a')).not.toBeInTheDocument();
+    });
+
+    it('handles all link types correctly', () => {
+      const allTypesProps = {
+        ...baseProps,
+        links: [
+          { ...baseProps.links[0], linkType: 'system' as const },
+          { ...baseProps.links[1], linkType: 'information' as const },
+        ],
+      };
+
+      render(<AUDynamicContentComponent {...allTypesProps} />);
+
+      const links = screen.getAllByRole('link');
+      expect(links[0]).not.toHaveClass('button--dimmed');
+      expect(links[1]).toHaveClass('button--dimmed');
+    });
+  });
+});