Handle links with specified platform and add tests (#6890)

* Handle links with specified platform and add tests

* Refactor out href logic into hook

* Fix typo

* Remove uncessary comment

* Revert "Refactor out href logic into hook"

This reverts commit 9bb57f7.

* Typo

* Update jest setup to mock router context

* Add comment for doMock

* Remove commented out lines

jest.setup.ts

@@ -1,6 +1,13 @@
+import { createContext } from 'react';
 // Setup file to extend jest-dom, referenced in packages.json under "jest"
 import '@testing-library/jest-dom';
 
+// Adding this doMock help mock next/link in MDXLink.test.tsx
+// From here: https://github.com/vercel/next.js/issues/43769#issuecomment-1735620746
+jest.doMock('next/dist/shared/lib/router-context.shared-runtime.js', () => ({
+  RouterContext: createContext(true)
+}));
+
 if (typeof window.URL.createObjectURL === 'undefined') {
   window.URL.createObjectURL = jest.fn();
 }

src/components/MDXComponents/MDXLink.tsx

@@ -19,16 +19,25 @@ export const MDXLink = ({
     href = href.slice(0, href.indexOf('#'));
   }
 
+  // For setting up a link when passed only a hash link
   if (!href.includes('/') && href.startsWith('#')) {
     hash = href;
     href = baseURI.replace(platform, '[platform]');
   }
 
+  const decodedURI = decodeURI(href);
+
+  // Check to see if we need to add the "platform" query param
+  // We shouldn't add it, if a specific platform is linked in the baseURI
+  const query = decodedURI.includes('[platform]')
+    ? { query: { platform } }
+    : {};
+
   return isInternal ? (
     <Link
       href={{
-        pathname: decodeURI(href),
-        ...(platform && { query: { platform } }),
+        pathname: decodedURI,
+        ...(platform && query),
         hash: hash
       }}
     >

src/components/MDXComponents/__tests__/MDXLink.test.tsx

@@ -0,0 +1,140 @@
+import { render, screen } from '@testing-library/react';
+import { MDXLink } from '../MDXLink';
+
+const routerMock = {
+  __esModule: true,
+  useRouter: () => {
+    return {
+      query: {
+        platform: ''
+      },
+      asPath: ''
+    };
+  }
+};
+
+jest.mock('next/router', () => routerMock);
+
+describe('MDXLink', () => {
+  it('should render external link', () => {
+    const externalUrl = 'https://amazon.com';
+    const linkText = 'External Site';
+
+    render(
+      <MDXLink href={externalUrl} hash={undefined}>
+        {linkText}
+      </MDXLink>
+    );
+
+    const linkElement = screen.getByRole('link', { name: linkText });
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', externalUrl);
+    expect(linkElement).toHaveAttribute('rel', 'noopener noreferrer');
+  });
+
+  it('should render internal link', () => {
+    const href = '/[platform]/build-a-backend/existing-resources/cli';
+    const linkText = 'Internal link';
+
+    routerMock.useRouter = () => {
+      return {
+        query: {
+          platform: 'react'
+        },
+        asPath: '/react/build-a-backend/current-page/'
+      };
+    };
+
+    render(
+      <MDXLink href={href} hash={undefined}>
+        {linkText}
+      </MDXLink>
+    );
+
+    const linkElement = screen.getByRole('link', { name: linkText });
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute(
+      'href',
+      href.replace('[platform]', 'react')
+    );
+  });
+
+  it('should render internal link with hash', () => {
+    const href =
+      '/[platform]/build-a-backend/existing-resources/cli#test-hash-title';
+    const linkText = 'Internal link';
+
+    routerMock.useRouter = () => {
+      return {
+        query: {
+          platform: 'react'
+        },
+        asPath: '/react/build-a-backend/current-page/'
+      };
+    };
+
+    render(
+      <MDXLink href={href} hash={undefined}>
+        {linkText}
+      </MDXLink>
+    );
+
+    const linkElement = screen.getByRole('link', { name: linkText });
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute(
+      'href',
+      href.replace('[platform]', 'react')
+    );
+  });
+
+  it('should render hash only link', () => {
+    const href = '#test-hash-title';
+    const linkText = 'Internal link';
+
+    routerMock.useRouter = () => {
+      return {
+        query: {
+          platform: 'react'
+        },
+        asPath: '/react/build-a-backend/current-page/'
+      };
+    };
+
+    render(
+      <MDXLink href={href} hash={undefined}>
+        {linkText}
+      </MDXLink>
+    );
+
+    const linkElement = screen.getByRole('link', { name: linkText });
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute(
+      'href',
+      '/react/build-a-backend/current-page#test-hash-title'
+    );
+  });
+
+  it('should render with specific platform when specified', () => {
+    const href = '/react/build-a-backend/existing-resources/cli';
+    const linkText = 'Internal link';
+
+    routerMock.useRouter = () => {
+      return {
+        query: {
+          platform: 'react'
+        },
+        asPath: '/react/build-a-backend/current-page/'
+      };
+    };
+
+    render(
+      <MDXLink href={href} hash={undefined}>
+        {linkText}
+      </MDXLink>
+    );
+
+    const linkElement = screen.getByRole('link', { name: linkText });
+    expect(linkElement).toBeInTheDocument();
+    expect(linkElement).toHaveAttribute('href', href);
+  });
+});