@aarhus-university/au-lib-react-components 12.5.1 → 12.6.1

package/__tests__/jest/AUDynamicContentComponent.test.tsx

@@ -0,0 +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');
+    });
+  });
+});

package/__tests__/jest/AUErrorComponent.test.tsx

@@ -1,142 +1,142 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
-import { render } from '@testing-library/react';
-import { SerializedError } from '@reduxjs/toolkit';
-import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
-// import userEvent from '@testing-library/user-event';
-import '@testing-library/jest-dom';
-import AUErrorComponent from '../../src/components/AUErrorComponent';
-
-const auError: AU.IError = {
-  header: 'Our own custom error',
-  message: 'With a nice header and descriptive error message',
-  status: 500,
-};
-
-const fetchError1: FetchBaseQueryError = {
-  status: 'FETCH_ERROR',
-  error: 'Sum Ting Wong',
-};
-
-const fetchError2: FetchBaseQueryError = {
-  status: 500,
-  data: {
-    status: 'Error',
-    message: 'Sum Ting Wong',
-  },
-};
-
-const serializedError: SerializedError = {
-  code: '500',
-  message: 'Sum Ting Wong',
-  name: 'Some kind of error',
-  stack: 'Some kind of stack trace',
-};
-
-describe('<AUErrorComponent />', () => {
-  it('renders an AU custom error without a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        error={auError}
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header).toBeInTheDocument();
-    expect(p?.innerHTML).toBe(auError.message);
-  });
-
-  it('renders an AU custom error with a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        error={auError}
-        withStatus
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    expect(header?.innerHTML).toBe(`${auError.status}: ${auError.header}`);
-  });
-
-  it('renders a fetch error without a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        fetchError={fetchError1}
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header).toBe(null);
-    expect(p?.innerHTML).toBe(fetchError1.error);
-  });
-
-  it('renders a fetch error with a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        fetchError={fetchError1}
-        withStatus
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header?.innerHTML).toBe(fetchError1.status);
-    expect(p?.innerHTML).toBe(fetchError1.error);
-  });
-
-  it('renders a fetch error with stringified text without a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        fetchError={fetchError2}
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header).toBe(null);
-    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
-  });
-
-  it('renders a fetch error with stringified text with a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        fetchError={fetchError2}
-        withStatus
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header?.innerHTML).toBe(`${fetchError2.status}`);
-    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
-  });
-
-  it('renders a serialized error with without a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        serializedError={serializedError}
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header).toBe(null);
-    expect(p?.innerHTML).toBe(serializedError.message);
-  });
-
-  it('renders a serialized error with a status code', () => {
-    const { container } = render(
-      <AUErrorComponent
-        serializedError={serializedError}
-        withStatus
-      />,
-    );
-
-    const header = container.querySelector('.notification__header');
-    const p = container.querySelector('.notification__content p');
-    expect(header?.innerHTML).toBe(serializedError.code);
-    expect(p?.innerHTML).toBe(serializedError.message);
-  });
-});
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SerializedError } from '@reduxjs/toolkit';
+import { FetchBaseQueryError } from '@reduxjs/toolkit/dist/query';
+// import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import AUErrorComponent from '../../src/components/AUErrorComponent';
+
+const auError: AU.IError = {
+  header: 'Our own custom error',
+  message: 'With a nice header and descriptive error message',
+  status: 500,
+};
+
+const fetchError1: FetchBaseQueryError = {
+  status: 'FETCH_ERROR',
+  error: 'Sum Ting Wong',
+};
+
+const fetchError2: FetchBaseQueryError = {
+  status: 500,
+  data: {
+    status: 'Error',
+    message: 'Sum Ting Wong',
+  },
+};
+
+const serializedError: SerializedError = {
+  code: '500',
+  message: 'Sum Ting Wong',
+  name: 'Some kind of error',
+  stack: 'Some kind of stack trace',
+};
+
+describe('<AUErrorComponent />', () => {
+  it('renders an AU custom error without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        error={auError}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBeInTheDocument();
+    expect(p?.innerHTML).toBe(auError.message);
+  });
+
+  it('renders an AU custom error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        error={auError}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    expect(header?.innerHTML).toBe(`${auError.status}: ${auError.header}`);
+  });
+
+  it('renders a fetch error without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError1}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(fetchError1.error);
+  });
+
+  it('renders a fetch error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError1}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(fetchError1.status);
+    expect(p?.innerHTML).toBe(fetchError1.error);
+  });
+
+  it('renders a fetch error with stringified text without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError2}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
+  });
+
+  it('renders a fetch error with stringified text with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        fetchError={fetchError2}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(`${fetchError2.status}`);
+    expect(p?.innerHTML).toBe(JSON.stringify(fetchError2.data));
+  });
+
+  it('renders a serialized error with without a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        serializedError={serializedError}
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header).toBe(null);
+    expect(p?.innerHTML).toBe(serializedError.message);
+  });
+
+  it('renders a serialized error with a status code', () => {
+    const { container } = render(
+      <AUErrorComponent
+        serializedError={serializedError}
+        withStatus
+      />,
+    );
+
+    const header = container.querySelector('.notification__header');
+    const p = container.querySelector('.notification__content p');
+    expect(header?.innerHTML).toBe(serializedError.code);
+    expect(p?.innerHTML).toBe(serializedError.message);
+  });
+});