docs: added tests for components in api-reference project (#14428)

* add tests (WIP)

* added test for h2

* finished adding tests

* fixes

* fixes

* fixes

www/apps/api-reference/components/MDXComponents/Security/Description/__tests__/index.test.tsx

@@ -0,0 +1,104 @@
+import React from "react"
+import { beforeEach, describe, expect, test, vi } from "vitest"
+import { cleanup, getByTestId, render, waitFor } from "@testing-library/react"
+import { OpenAPI } from "types"
+
+// mock data
+const mockHttpSecuritySchema: OpenAPI.SecuritySchemeObject = {
+  type: "http",
+  scheme: "bearer",
+  description: "Authentication using Bearer token",
+  "x-displayName": "Bearer Token",
+}
+const mockApiKeySecuritySchema: OpenAPI.SecuritySchemeObject = {
+  type: "apiKey",
+  name: "Authorization",
+  description: "Authentication using API key",
+  "x-displayName": "API Key",
+  in: "header",
+}
+
+// mock components
+vi.mock("@/components/MDXContent/Client", () => ({
+  default: ({ content }: { content: string }) => (
+    <div data-testid="mdx-content-client">{content}</div>
+  ),
+}))
+vi.mock("@/components/MDXContent/Server", () => ({
+  default: ({ content }: { content: string }) => (
+    <div data-testid="mdx-content-server">{content}</div>
+  ),
+}))
+vi.mock("@/utils/get-security-schema-type-name", () => ({
+  default: vi.fn(() => "security-schema-type"),
+}))
+vi.mock("docs-ui", () => ({
+  Loading: () => <div>Loading</div>,
+}))
+
+import SecurityDescription from ".."
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  cleanup()
+})
+
+describe("rendering", () => {
+  test("renders security information for http security scheme", () => {
+    const { getByTestId } = render(
+      <SecurityDescription securitySchema={mockHttpSecuritySchema} />
+    )
+    const titleElement = getByTestId("title")
+    expect(titleElement).toBeInTheDocument()
+    expect(titleElement).toHaveTextContent(mockHttpSecuritySchema["x-displayName"] as string)
+    const securitySchemeTypeElement = getByTestId("security-scheme-type")
+    expect(securitySchemeTypeElement).toBeInTheDocument()
+    expect(securitySchemeTypeElement).toHaveTextContent("security-schema-type")
+    const securitySchemeTypeDetailsElement = getByTestId("security-scheme-type-details")
+    expect(securitySchemeTypeDetailsElement).toBeInTheDocument()
+    expect(securitySchemeTypeDetailsElement).toHaveTextContent("HTTP Authorization Scheme")
+    const securitySchemeTypeDetailsValueElement = getByTestId("security-scheme-type-details-value")
+    expect(securitySchemeTypeDetailsValueElement).toBeInTheDocument()
+    expect(securitySchemeTypeDetailsValueElement).toHaveTextContent(mockHttpSecuritySchema.scheme)
+  })
+
+  test("renders security information for api key security scheme", () => {
+    const { getByTestId } = render(
+      <SecurityDescription securitySchema={mockApiKeySecuritySchema} />
+    )
+    const titleElement = getByTestId("title")
+    expect(titleElement).toBeInTheDocument()
+    expect(titleElement).toHaveTextContent(mockApiKeySecuritySchema["x-displayName"] as string)
+    const securitySchemeTypeElement = getByTestId("security-scheme-type")
+    expect(securitySchemeTypeElement).toBeInTheDocument()
+    expect(securitySchemeTypeElement).toHaveTextContent("security-schema-type")
+    const securitySchemeTypeDetailsElement = getByTestId("security-scheme-type-details")
+    expect(securitySchemeTypeDetailsElement).toBeInTheDocument()
+    expect(securitySchemeTypeDetailsElement).toHaveTextContent("Cookie parameter name")
+    const securitySchemeTypeDetailsValueElement = getByTestId("security-scheme-type-details-value")
+    expect(securitySchemeTypeDetailsValueElement).toBeInTheDocument()
+    expect(securitySchemeTypeDetailsValueElement).toHaveTextContent(mockApiKeySecuritySchema.name)
+  })
+
+  test("render description with server component", async () => {
+    const { getByTestId } = render(
+      <SecurityDescription securitySchema={mockHttpSecuritySchema} isServer={true} />
+    )
+    await waitFor(() => {
+      const mdxContentServerElement = getByTestId("mdx-content-server")
+      expect(mdxContentServerElement).toBeInTheDocument()
+      expect(mdxContentServerElement).toHaveTextContent(mockHttpSecuritySchema.description as string)
+    })
+  })
+
+  test("render description with client component", async () => {
+    const { getByTestId } = render(
+      <SecurityDescription securitySchema={mockHttpSecuritySchema} isServer={false} />
+    )
+    await waitFor(() => {
+      const mdxContentClientElement = getByTestId("mdx-content-client")
+      expect(mdxContentClientElement).toBeInTheDocument()
+      expect(mdxContentClientElement).toHaveTextContent(mockHttpSecuritySchema.description as string)
+    })
+  })
+})

www/apps/api-reference/components/MDXComponents/Security/Description/index.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import type { MDXContentClientProps } from "@/components/MDXContent/Client"
 import type { MDXContentServerProps } from "@/components/MDXContent/Server"
 import type { OpenAPI } from "types"
@@ -7,14 +8,14 @@ import { Loading } from "docs-ui"
 import dynamic from "next/dynamic"
 
 const MDXContentClient = dynamic<MDXContentClientProps>(
-  async () => import("../../../MDXContent/Client"),
+  async () => import("@/components/MDXContent/Client"),
   {
     loading: () => <Loading />,
   }
 ) as React.FC<MDXContentClientProps>
 
 const MDXContentServer = dynamic<MDXContentServerProps>(
-  async () => import("../../../MDXContent/Server"),
+  async () => import("@/components/MDXContent/Server"),
   {
     loading: () => <Loading />,
   }
@@ -31,22 +32,25 @@ const SecurityDescription = ({
 }: SecurityDescriptionProps) => {
   return (
     <>
-      <h2>{securitySchema["x-displayName"] as string}</h2>
+      <h2 data-testid="title">{securitySchema["x-displayName"] as string}</h2>
       {isServer && <MDXContentServer content={securitySchema.description} />}
       {!isServer && <MDXContentClient content={securitySchema.description} />}
-      <p>
+      <p data-testid="security-scheme-type">
         <strong>Security Scheme Type:</strong>{" "}
         {getSecuritySchemaTypeName(securitySchema)}
       </p>
       {(securitySchema.type === "http" || securitySchema.type === "apiKey") && (
-        <p className={clsx("bg-medusa-bg-subtle", "p-1")}>
+        <p
+          className={clsx("bg-medusa-bg-subtle", "p-1")}
+          data-testid="security-scheme-type-details"
+        >
           <strong>
             {securitySchema.type === "http"
               ? "HTTP Authorization Scheme"
               : "Cookie parameter name"}
             :
           </strong>{" "}
-          <code>
+          <code data-testid="security-scheme-type-details-value">
             {securitySchema.type === "http"
               ? securitySchema.scheme
               : securitySchema.name}

www/apps/api-reference/components/MDXComponents/Security/__tests__/index.test.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+import { beforeEach, describe, expect, test, vi } from "vitest"
+import { cleanup, render, waitFor } from "@testing-library/react"
+import { OpenAPI } from "types"
+
+// mock data
+const mockSpecs: OpenAPI.OpenAPIV3.Document = {
+  openapi: "3.0.0",
+  info: {
+    title: "Test API",
+    version: "1.0.0",
+  },
+  paths: {},
+  components: {
+    securitySchemes: {
+      bearer: {
+        type: "http",
+        scheme: "bearer",
+      },
+    },
+  },
+}
+
+const mockSpecsWithRef: OpenAPI.OpenAPIV3.Document = {
+  ...mockSpecs,
+  components: {
+    securitySchemes: {
+      bearer: {
+        $ref: "#/components/securitySchemes/bearer",
+      },
+    },
+  },
+}
+
+// mock components
+vi.mock("@/components/MDXComponents/Security/Description", () => ({
+  default: ({ securitySchema }: { securitySchema: OpenAPI.SecuritySchemeObject }) => (
+    <div data-testid="security-description">{securitySchema.type}</div>
+  ),
+}))
+
+import Security from ".."
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  cleanup()
+})
+
+describe("rendering", () => {
+  test("does not render when specs is not provided", () => {
+    const { container } = render(<Security />)
+    const securityDescriptionElements = container.querySelectorAll("[data-testid='security-description']")
+    expect(securityDescriptionElements).toHaveLength(0)
+  })
+  test("renders security information for specs", async () => {
+    const { getByTestId } = render(<Security specs={mockSpecs} />)
+    await waitFor(() => {
+      const securityDescriptionElement = getByTestId("security-description")
+      expect(securityDescriptionElement).toBeInTheDocument()
+      expect(securityDescriptionElement).toHaveTextContent("http")
+    })
+  })
+
+  test("does not render when security scheme is a $ref", () => {
+    const { container } = render(<Security specs={mockSpecsWithRef} />)
+    const securityDescriptionElements = container.querySelectorAll("[data-testid='security-description']")
+    expect(securityDescriptionElements).toHaveLength(0)
+  })
+})

www/apps/api-reference/components/MDXComponents/Security/index.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import dynamic from "next/dynamic"
 import type { OpenAPI } from "types"
 import type { SecurityDescriptionProps } from "./Description"