test: add tests for structured data and hidden language links

Add comprehensive tests for:
- Head component JSON-LD structured data rendering
- HiddenLanguageLinks component crawlable links generation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: jamiehenson

src/components/Layout/HiddenLanguageLinks.test.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import { useLocation } from '@reach/router';
+import HiddenLanguageLinks from './HiddenLanguageLinks';
+import { useLayoutContext } from 'src/contexts/layout-context';
+
+jest.mock('src/contexts/layout-context', () => ({
+  useLayoutContext: jest.fn(),
+}));
+
+jest.mock('@reach/router', () => ({
+  useLocation: jest.fn(),
+}));
+
+const mockUseLayoutContext = useLayoutContext as jest.Mock;
+const mockUseLocation = useLocation as jest.Mock;
+
+describe('HiddenLanguageLinks', () => {
+  beforeEach(() => {
+    mockUseLocation.mockReturnValue({
+      pathname: '/docs/channels',
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('renders nothing when there is only one language', () => {
+    mockUseLayoutContext.mockReturnValue({
+      activePage: {
+        product: 'pubsub',
+        languages: ['javascript'],
+      },
+    });
+
+    const { container } = render(<HiddenLanguageLinks />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders nothing when there are no languages', () => {
+    mockUseLayoutContext.mockReturnValue({
+      activePage: {
+        product: 'pubsub',
+        languages: [],
+      },
+    });
+
+    const { container } = render(<HiddenLanguageLinks />);
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('renders links with correct hrefs for each language when > 1 language is available', () => {
+    mockUseLayoutContext.mockReturnValue({
+      activePage: {
+        product: 'pubsub',
+        languages: ['javascript', 'python', 'flutter'],
+      },
+    });
+
+    const { container } = render(<HiddenLanguageLinks />);
+
+    const links = Array.from(container.querySelectorAll('a'));
+    expect(links).toHaveLength(3);
+
+    const hrefs = links.map((link) => link.getAttribute('href'));
+    expect(hrefs).toContain('/docs/channels?lang=javascript');
+    expect(hrefs).toContain('/docs/channels?lang=python');
+    expect(hrefs).toContain('/docs/channels?lang=flutter');
+  });
+});

src/components/Layout/MDXWrapper.test.tsx

@@ -1,31 +1,33 @@
 import React, { ReactNode } from 'react';
+import { WindowLocation } from '@reach/router';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { Helmet } from 'react-helmet';
 import If from './mdx/If';
 import CodeSnippet from '@ably/ui/core/CodeSnippet';
 import UserContext from 'src/contexts/user-context';
+import MDXWrapper from './MDXWrapper';
 
-// Mock the dependencies we need for testing
-jest.mock('./MDXWrapper', () => {
-  return {
-    __esModule: true,
-    default: ({ children, pageContext }: { children: ReactNode; pageContext: any }) => (
-      <div data-testid="mdx-wrapper">
-        {pageContext?.frontmatter?.title && <h1>{pageContext.frontmatter.title}</h1>}
-        <div data-testid="mdx-content">{children}</div>
-      </div>
-    ),
-  };
-});
+const mockUseLayoutContext = jest.fn(() => ({
+  activePage: { language: 'javascript', languages: ['javascript'], product: 'pubsub' },
+}));
 
 // Mock the layout context
 jest.mock('src/contexts/layout-context', () => ({
-  useLayoutContext: () => ({
-    activePage: { language: 'javascript' },
-  }),
+  useLayoutContext: () => mockUseLayoutContext(),
   LayoutProvider: ({ children }: { children: ReactNode }) => <div data-testid="layout-provider">{children}</div>,
 }));
 
+jest.mock('@reach/router', () => ({
+  useLocation: () => ({ pathname: '/docs/test-page' }),
+}));
+
+jest.mock('src/hooks/use-site-metadata', () => ({
+  useSiteMetadata: () => ({
+    canonicalUrl: (path: string) => `https://example.com${path}`,
+  }),
+}));
+
 // We need to mock minimal implementation of other dependencies that CodeSnippet might use
 jest.mock('@ably/ui/core/Icon', () => {
   return {
@@ -235,3 +237,80 @@ channel.subscribe('event', (message: Ably.Types.Message) => {
     expect(typescriptElement).toBeInTheDocument();
   });
 });
+
+describe('MDXWrapper structured data', () => {
+  const defaultPageContext = {
+    frontmatter: {
+      title: 'Test Page',
+      meta_description: 'Test description',
+    },
+    languages: [],
+    layout: { mdx: true, leftSidebar: true, rightSidebar: true, searchBar: true, template: 'docs' },
+  };
+
+  const defaultLocation = {
+    pathname: '/docs/test-page',
+  } as WindowLocation;
+
+  beforeEach(() => {
+    mockUseLayoutContext.mockReturnValue({
+      activePage: {
+        product: 'pubsub',
+        language: 'javascript',
+        languages: [],
+      },
+    });
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('does not generate structured data when only one language is present', () => {
+    render(
+      <UserContext.Provider value={{ sessionState: { signedIn: false }, apps: [] }}>
+        <MDXWrapper pageContext={defaultPageContext} location={defaultLocation}>
+          <div>Test content</div>
+        </MDXWrapper>
+      </UserContext.Provider>,
+    );
+
+    const helmet = Helmet.peek();
+    const jsonLdScript = helmet.scriptTags?.find((tag: { type?: string }) => tag.type === 'application/ld+json');
+
+    expect(jsonLdScript).toBeUndefined();
+  });
+
+  it('generates TechArticle structured data with multiple languages', () => {
+    mockUseLayoutContext.mockReturnValue({
+      activePage: {
+        product: 'pubsub',
+        language: 'javascript',
+        languages: ['javascript', 'python'],
+      },
+    });
+
+    render(
+      <UserContext.Provider value={{ sessionState: { signedIn: false }, apps: [] }}>
+        <MDXWrapper pageContext={defaultPageContext} location={defaultLocation}>
+          <div>Test content</div>
+        </MDXWrapper>
+      </UserContext.Provider>,
+    );
+
+    const helmet = Helmet.peek();
+    const jsonLdScript = helmet.scriptTags?.find((tag: { type?: string }) => tag.type === 'application/ld+json');
+
+    expect(jsonLdScript).toBeDefined();
+    expect(jsonLdScript?.type).toBe('application/ld+json');
+
+    const structuredData = JSON.parse(jsonLdScript?.innerHTML || '{}');
+    expect(structuredData['@type']).toBe('TechArticle');
+    expect(structuredData.hasPart).toHaveLength(2);
+    expect(structuredData.hasPart[0]['@type']).toBe('SoftwareSourceCode');
+    expect(structuredData.hasPart[0].programmingLanguage).toBe('JavaScript');
+    expect(structuredData.hasPart[1].programmingLanguage).toBe('Python');
+    expect(structuredData.hasPart[0].url).toBe('https://example.com/docs/test-page?lang=javascript');
+    expect(structuredData.hasPart[1].url).toBe('https://example.com/docs/test-page?lang=python');
+  });
+});

src/components/Layout/MDXWrapper.tsx

@@ -33,7 +33,6 @@ import { useSiteMetadata } from 'src/hooks/use-site-metadata';
 import { ProductName } from 'src/templates/template-data';
 import { getMetaTitle } from '../common/meta-title';
 import UserContext from 'src/contexts/user-context';
-import { LanguageKey } from 'src/data/languages/types';
 
 type MDXWrapperProps = PageProps<unknown, PageContextType>;