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/Section/Container/__tests__/index.test.tsx

@@ -0,0 +1,59 @@
+import React from "react"
+import { beforeEach, describe, expect, test, vi } from "vitest"
+import { cleanup, render } from "@testing-library/react"
+
+// mock components
+vi.mock("@/components/Section/Divider", () => ({
+  default: () => <div data-testid="section-divider">Section Divider</div>,
+}))
+vi.mock("docs-ui", () => ({
+  WideSection: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="wide-section">{children}</div>
+  ),
+}))
+
+import SectionContainer from ".."
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  cleanup()
+})
+
+describe("rendering", () => {
+  test("renders section container with children", () => {
+    const { getByTestId } = render(<SectionContainer>Test</SectionContainer>)
+    const wideSectionElement = getByTestId("wide-section")
+    expect(wideSectionElement).toBeInTheDocument()
+    expect(wideSectionElement).toHaveTextContent("Test")
+  })
+  test("renders section container with no top padding", () => {
+    const { getByTestId } = render(<SectionContainer noTopPadding>Test</SectionContainer>)
+    const sectionContainerElement = getByTestId("section-container")
+    expect(sectionContainerElement).not.toHaveClass("pt-7")
+  })
+  test("renders section container with top padding", () => {
+    const { getByTestId } = render(<SectionContainer noTopPadding={false}>Test</SectionContainer>)
+    const sectionContainerElement = getByTestId("section-container")
+    expect(sectionContainerElement).toHaveClass("pt-7")
+  })
+  test("renders section container with divider", () => {
+    const { getByTestId } = render(<SectionContainer>Test</SectionContainer>)
+    const sectionDividerElement = getByTestId("section-divider")
+    expect(sectionDividerElement).toBeInTheDocument()
+  })
+  test("renders section container with no divider", () => {
+    const { container } = render(<SectionContainer noDivider>Test</SectionContainer>)
+    const sectionDividerElement = container.querySelectorAll("[data-testid='section-divider']")
+    expect(sectionDividerElement).toHaveLength(0)
+  })
+  test("renders section container with className", () => {
+    const { getByTestId } = render(<SectionContainer className="test-class">Test</SectionContainer>)
+    const sectionContainerElement = getByTestId("section-container")
+    expect(sectionContainerElement).toHaveClass("test-class")
+  })
+  test("renders section container with ref", () => {
+    const ref = vi.fn()
+    render(<SectionContainer ref={ref}>Test</SectionContainer>)
+    expect(ref).toHaveBeenCalled()
+  })
+})

www/apps/api-reference/components/Section/Container/index.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import clsx from "clsx"
 import SectionDivider from "../Divider"
 import { forwardRef } from "react"
@@ -23,6 +24,7 @@ const SectionContainer = forwardRef<HTMLDivElement, SectionContainerProps>(
           !noTopPadding && "pt-7",
           className
         )}
+        data-testid="section-container"
       >
         <WideSection>{children}</WideSection>
         {!noDivider && <SectionDivider />}

www/apps/api-reference/components/Section/Divider/index.tsx

@@ -1,3 +1,4 @@
+import React from "react"
 import clsx from "clsx"
 
 type SectionDividerProps = {

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

@@ -0,0 +1,79 @@
+import React from "react"
+import { beforeEach, describe, expect, test, vi } from "vitest"
+import { cleanup, render } from "@testing-library/react"
+
+// mock functions
+const mockSetActivePath = vi.fn()
+const mockPush = vi.fn()
+const mockReplace = vi.fn()
+const mockUseActiveOnScroll = vi.fn((options: unknown) => ({
+  activeItemId: "",
+}))
+const mockUseSidebar = vi.fn(() => ({
+  setActivePath: mockSetActivePath,
+}))
+const mockUseRouter = vi.fn(() => ({
+  push: mockPush,
+  replace: mockReplace,
+}))
+
+// mock components
+vi.mock("docs-ui", () => ({
+  useActiveOnScroll: (options: unknown) => mockUseActiveOnScroll(options),
+  useSidebar: () => mockUseSidebar(),
+}))
+vi.mock("next/navigation", () => ({
+  useRouter: () => mockUseRouter(),
+}))
+
+import Section from ".."
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  cleanup()
+
+  window.history.scrollRestoration = "auto"
+})
+
+describe("rendering", () => {
+  test("passes checkActiveOnScroll prop to useActiveOnScroll", () => {
+    render(<Section checkActiveOnScroll>Test</Section>)
+    expect(mockUseActiveOnScroll).toHaveBeenCalledWith({
+      rootElm: undefined,
+      enable: true,
+      useDefaultIfNoActive: false,
+      maxLevel: 2,
+    })
+  })
+})
+
+describe("effect hooks", () => {
+  test("sets active path when active item id is not empty", () => {
+    mockUseActiveOnScroll.mockReturnValue({
+      activeItemId: "test",
+    })
+    render(<Section>Test</Section>)
+    expect(mockSetActivePath).toHaveBeenCalledWith("test")
+    expect(mockPush).toHaveBeenCalledWith("#test", { scroll: false })
+  })
+
+  test("does not set active path when active item id is empty", () => {
+    mockUseActiveOnScroll.mockReturnValue({
+      activeItemId: "",
+    })
+    render(<Section>Test</Section>)
+    expect(mockSetActivePath).not.toHaveBeenCalled()
+    expect(mockPush).not.toHaveBeenCalled()
+  })
+
+  test("disables scroll restoration when history is available", () => {
+    render(<Section>Test</Section>)
+    expect(history.scrollRestoration).toBe("manual")
+  })
+
+  test("does not disable scroll restoration when history is not available", () => {
+    delete (window.history as any).scrollRestoration
+    render(<Section>Test</Section>)
+    expect(history.scrollRestoration).not.toBe("manual")
+  })
+})

www/apps/api-reference/components/Section/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import React from "react"
 import clsx from "clsx"
 import { useActiveOnScroll, useSidebar } from "docs-ui"
 import { useRouter } from "next/navigation"