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

@@ -0,0 +1,39 @@
+import React from "react"
+import { beforeEach, describe, expect, test, vi } from "vitest"
+import { cleanup, render } from "@testing-library/react"
+
+
+import Space from ".."
+
+beforeEach(() => {
+  vi.clearAllMocks()
+  cleanup()
+})
+
+describe("rendering", () => {
+  test("renders space with default styles", () => {
+    const { getByTestId } = render(<Space />)
+    const spaceElement = getByTestId("space")
+    expect(spaceElement).toBeInTheDocument()
+    expect(spaceElement).toHaveStyle({
+      height: "1px",
+      marginTop: "0px",
+      marginBottom: "0px",
+      marginLeft: "0px",
+      marginRight: "0px",
+    })
+  })
+
+  test("renders space with correct styles", () => {
+    const { getByTestId } = render(<Space top={10} bottom={10} left={10} right={10} />)
+    const spaceElement = getByTestId("space")
+    expect(spaceElement).toBeInTheDocument()
+    expect(spaceElement).toHaveStyle({
+      height: "1px",
+      marginTop: "9px",
+      marginBottom: "9px",
+      marginLeft: "10px",
+      marginRight: "10px",
+    })
+  })
+})

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

@@ -1,3 +1,5 @@
+import React from "react"
+
 type SpaceProps = {
   top?: number
   bottom?: number
@@ -16,6 +18,7 @@ const Space = ({ top = 0, bottom = 0, left = 0, right = 0 }: SpaceProps) => {
         marginLeft: `${left}px`,
         marginRight: `${right}px`,
       }}
+      data-testid="space"
     ></div>
   )
 }