tests: add more unit tests to cover markdown related components

__tests__/ApiLayout_.test.res

@@ -0,0 +1,87 @@
+open ReactRouter
+open Vitest
+
+let mockCategories: array<SidebarLayout.Sidebar.Category.t> = [
+  {
+    name: "Stdlib",
+    items: [
+      {name: "Array", href: "/docs/manual/api/stdlib/array"},
+      {name: "String", href: "/docs/manual/api/stdlib/string"},
+      {name: "Option", href: "/docs/manual/api/stdlib/option"},
+    ],
+  },
+  {
+    name: "Belt",
+    items: [
+      {name: "Belt.Array", href: "/docs/manual/api/belt/array"},
+      {name: "Belt.Map", href: "/docs/manual/api/belt/map"},
+    ],
+  },
+]
+
+test("desktop API layout shows sidebar categories and version select", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs/manual/api/stdlib/array"]>
+      <div dataTestId="api-layout-wrapper">
+        <ApiLayout categories=mockCategories>
+          <div> {React.string("API documentation for Array module.")} </div>
+        </ApiLayout>
+      </div>
+    </MemoryRouter>,
+  )
+
+  let stdlib = await screen->getByText("Stdlib")
+  await element(stdlib)->toBeVisible
+
+  let belt = await screen->getByTextExact("Belt")
+  await element(belt)->toBeVisible
+
+  let array = await screen->getByTextExact("Array")
+  await element(array)->toBeVisible
+
+  let wrapper = await screen->getByTestId("api-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-api-layout")
+})
+
+test("mobile API layout hides sidebar", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <MemoryRouter initialEntries=["/docs/manual/api/stdlib/array"]>
+      <div dataTestId="api-layout-wrapper">
+        <ApiLayout categories=mockCategories>
+          <div> {React.string("API documentation for Array module.")} </div>
+        </ApiLayout>
+      </div>
+    </MemoryRouter>,
+  )
+
+  let stdlib = await screen->getByText("Stdlib")
+  await element(stdlib)->notToBeVisible
+
+  let content = await screen->getByTestId("side-layout-children")
+  await element(content)->toBeVisible
+
+  let wrapper = await screen->getByTestId("api-layout-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-api-layout")
+})
+
+test("old docs warning shows version info", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="old-docs-warning-wrapper">
+        <ApiLayout.OldDocsWarning version="v11.0.0" route=%raw(`"/docs/manual/v11.0.0/api"`) />
+      </div>
+    </BrowserRouter>,
+  )
+
+  let warningText = await screen->getByText("here")
+  await element(warningText)->toBeVisible
+
+  let wrapper = await screen->getByTestId("old-docs-warning-wrapper")
+  await element(wrapper)->toMatchScreenshot("api-old-docs-warning")
+})

__tests__/ApiOverviewLayout_.test.res

@@ -0,0 +1,112 @@
+open ReactRouter
+open Vitest
+
+test("desktop API overview shows sidebar categories and content", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="api-overview-wrapper">
+        <ApiOverviewLayout.Docs>
+          <div> {React.string("API documentation content.")} </div>
+        </ApiOverviewLayout.Docs>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let overview = await screen->getByText("Overview")
+  await element(overview)->toBeVisible
+
+  let introduction = await screen->getByText("Introduction")
+  await element(introduction)->toBeVisible
+
+  let stdlib = await screen->getByText("Stdlib")
+  await element(stdlib)->toBeVisible
+
+  let additionalLibraries = await screen->getByText("Additional Libraries")
+  await element(additionalLibraries)->toBeVisible
+
+  let belt = await screen->getByText("Belt")
+  await element(belt)->toBeVisible
+
+  let dom = await screen->getByText("Dom")
+  await element(dom)->toBeVisible
+
+  let mainContent = await screen->getByTestId("side-layout-children")
+  await element(mainContent)->toBeVisible
+
+  let wrapper = await screen->getByTestId("api-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-api-overview")
+})
+
+test("mobile API overview hides sidebar", async () => {
+  await viewport(600, 1200)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="api-overview-wrapper">
+        <ApiOverviewLayout.Docs>
+          <div> {React.string("API documentation content.")} </div>
+        </ApiOverviewLayout.Docs>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let introduction = await screen->getByText("Introduction")
+  await element(introduction)->notToBeVisible
+
+  let stdlib = await screen->getByText("Stdlib")
+  await element(stdlib)->notToBeVisible
+
+  let belt = await screen->getByText("Belt")
+  await element(belt)->notToBeVisible
+
+  let wrapper = await screen->getByTestId("api-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-api-overview")
+})
+
+test("desktop API overview shows all category items", async () => {
+  await viewport(1440, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="api-overview-wrapper">
+        <ApiOverviewLayout.Docs>
+          <div>
+            <Markdown.H1> {React.string("API Reference")} </Markdown.H1>
+            <Markdown.P> {React.string("Welcome to the ReScript API documentation.")} </Markdown.P>
+          </div>
+        </ApiOverviewLayout.Docs>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let apiTitle = await screen->getByText("API Reference")
+  await element(apiTitle)->toBeVisible
+
+  let apiDescription = await screen->getByText("Welcome to the ReScript API documentation.")
+  await element(apiDescription)->toBeVisible
+
+  let wrapper = await screen->getByTestId("api-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("desktop-api-overview-with-content")
+})
+
+test("tablet API overview", async () => {
+  await viewport(900, 900)
+
+  let screen = await render(
+    <BrowserRouter>
+      <div dataTestId="api-overview-wrapper">
+        <ApiOverviewLayout.Docs>
+          <div> {React.string("API documentation content.")} </div>
+        </ApiOverviewLayout.Docs>
+      </div>
+    </BrowserRouter>,
+  )
+
+  let overview = await screen->getByText("Overview")
+  await element(overview)->toBeVisible
+
+  let wrapper = await screen->getByTestId("api-overview-wrapper")
+  await element(wrapper)->toMatchScreenshot("tablet-api-overview")
+})

__tests__/Banner_.test.res

@@ -0,0 +1,33 @@
+open Vitest
+
+test("renders banner with content", async () => {
+  await viewport(1440, 500)
+
+  let screen = await render(
+    <div dataTestId="banner-wrapper">
+      <Banner> {React.string("ReScript v12 is now available!")} </Banner>
+    </div>,
+  )
+
+  let text = await screen->getByText("ReScript v12 is now available!")
+  await element(text)->toBeVisible
+
+  let wrapper = await screen->getByTestId("banner-wrapper")
+  await element(wrapper)->toMatchScreenshot("banner-with-content")
+})
+
+test("mobile banner", async () => {
+  await viewport(600, 500)
+
+  let screen = await render(
+    <div dataTestId="banner-wrapper">
+      <Banner> {React.string("ReScript v12 is now available!")} </Banner>
+    </div>,
+  )
+
+  let text = await screen->getByText("ReScript v12 is now available!")
+  await element(text)->toBeVisible
+
+  let wrapper = await screen->getByTestId("banner-wrapper")
+  await element(wrapper)->toMatchScreenshot("mobile-banner")
+})