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

@@ -0,0 +1,46 @@
+import React from "react"
+import { beforeEach, describe, expect, test, vi } from "vitest"
+import { cleanup, render } from "@testing-library/react"
+
+// mock hooks
+const mockUseArea = vi.fn(() => ({
+  area: "store",
+}))
+
+// mock components
+vi.mock("@/providers/area", () => ({
+  useArea: () => mockUseArea(),
+}))
+vi.mock("docs-ui", async () => {
+  const actual = await vi.importActual<typeof React>("docs-ui")
+  return {
+    ...actual,
+    Feedback: vi.fn(({ extraData }: { extraData: { area: string } }) => (
+      <div data-testid="feedback" data-area={extraData.area}>Feedback</div>
+    )),
+  }
+})
+
+import {Feedback} from ".."
+
+beforeEach(() => {
+  cleanup()
+  vi.clearAllMocks()
+})
+
+describe("render", () => {
+  test("render feedback component for store area", () => {
+    const { getByTestId } = render(<Feedback />)
+    const feedback = getByTestId("feedback")
+    expect(feedback).toBeInTheDocument()
+    expect(feedback).toHaveAttribute("data-area", "store")
+  })
+
+  test("render feedback component for admin area", () => {
+    mockUseArea.mockReturnValue({ area: "admin" })
+    const { getByTestId } = render(<Feedback />)
+    const feedback = getByTestId("feedback")
+    expect(feedback).toBeInTheDocument()
+    expect(feedback).toHaveAttribute("data-area", "admin")
+  })
+})

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

@@ -1,11 +1,12 @@
 "use client"
 
+import React from "react"
 import {
   Feedback as UiFeedback,
   FeedbackProps,
   DocsTrackingEvents,
 } from "docs-ui"
-import { useArea } from "../../providers/area"
+import { useArea } from "@/providers/area"
 
 export const Feedback = (props: Partial<FeedbackProps>) => {
   const { area } = useArea()