test: clean up visual baselines and verify component behavior

apps/docs/__tests__/visual/Blog_.test.res

@@ -74,29 +74,14 @@ test("desktop blog index shows featured post and cards", async () => {
   let card2 = await screen->getByText("Improving Interop")
   await element(card2)->toBeVisible
 
-  let wrapper = await screen->getByTestId("blog-wrapper")
-  await element(wrapper)->toMatchScreenshot("desktop-blog-index")
-})
-
-test("desktop blog shows category selector", async () => {
-  await viewport(1440, 900)
-
-  let screen = await render(
-    <MemoryRouter initialEntries=["/blog"]>
-      <div dataTestId="blog-wrapper">
-        <Blog posts=mockPosts category=All />
-      </div>
-    </MemoryRouter>,
-  )
-
   let allTab = await screen->getByText("All")
   await element(allTab)->toBeVisible
 
   let archivedTab = await screen->getByText("Archived")
   await element(archivedTab)->toBeVisible
 
   let wrapper = await screen->getByTestId("blog-wrapper")
-  await element(wrapper)->toMatchScreenshot("desktop-blog-category-selector")
+  await element(wrapper)->toMatchScreenshot("desktop-blog-index")
 })
 
 test("mobile blog index", async () => {

apps/docs/__tests__/visual/DocsLayout_.test.res

@@ -28,7 +28,7 @@ let mockToc: TableOfContents.t = {
   ],
 }
 
-test("desktop docs layout shows sidebar with categories", async () => {
+test("desktop docs layout shows categories and active-page table of contents", async () => {
   await viewport(1440, 900)
 
   let screen = await render(
@@ -50,38 +50,19 @@ test("desktop docs layout shows sidebar with categories", async () => {
   let introItem = await screen->getByText("Introduction")
   await element(introItem)->toBeVisible
 
-  let mainContent = await screen->getByTestId("side-layout-children")
-  await element(mainContent)->toBeVisible
-
-  let wrapper = await screen->getByTestId("docs-layout-wrapper")
-  await element(wrapper)->toMatchScreenshot("desktop-docs-layout")
-})
-
-test("desktop docs layout shows table of contents entries", async () => {
-  await viewport(1440, 900)
-
-  let screen = await render(
-    <MemoryRouter initialEntries=["/docs/manual/introduction"]>
-      <div dataTestId="docs-layout-wrapper">
-        <DocsLayout categories=mockCategories activeToc=mockToc>
-          <div> {React.string("This is the documentation content.")} </div>
-        </DocsLayout>
-      </div>
-    </MemoryRouter>,
-  )
-
-  // The TOC entries render inside the sidebar under the active nav item.
-  // Since the test isn't at a matching route, the TOC appears for the first
-  // category item that matches the current location. Verify the layout
-  // renders with the activeToc data by checking sidebar and content are present.
-  let overviewHeading = await screen->getByText("Overview")
-  await element(overviewHeading)->toBeVisible
+  let sidebar = await screen->getByTestId("sidebar-content")
+  for i in 0 to Array.length(mockToc.entries) - 1 {
+    let {TableOfContents.header: header, href} = mockToc.entries->Array.getUnsafe(i)
+    let tocLink = await sidebar->getByText(header)
+    await element(tocLink)->toBeVisible
+    await element(tocLink)->toHaveAttribute("href", "/docs/manual/introduction" ++ href)
+  }
 
   let mainContent = await screen->getByTestId("side-layout-children")
   await element(mainContent)->toBeVisible
 
   let wrapper = await screen->getByTestId("docs-layout-wrapper")
-  await element(wrapper)->toMatchScreenshot("desktop-docs-layout-with-toc")
+  await element(wrapper)->toMatchScreenshot("desktop-docs-layout")
 })
 
 test("mobile docs layout hides sidebar by default", async () => {

apps/docs/__tests__/visual/DocsOverview_.test.res

@@ -24,29 +24,14 @@ test("desktop docs overview shows all section cards", async () => {
   let tools = await screen->getByText("Tools")
   await element(tools)->toBeVisible
 
-  let wrapper = await screen->getByTestId("docs-overview-wrapper")
-  await element(wrapper)->toMatchScreenshot("desktop-docs-overview")
-})
-
-test("desktop docs overview shows ecosystem links", async () => {
-  await viewport(1440, 900)
-
-  let screen = await render(
-    <MemoryRouter initialEntries=["/docs"]>
-      <div dataTestId="docs-overview-wrapper">
-        <DocsOverview.default />
-      </div>
-    </MemoryRouter>,
-  )
-
   let packageIndex = await screen->getByText("Package Index")
   await element(packageIndex)->toBeVisible
 
   let rescriptReact = await screen->getByText("rescript-react")
   await element(rescriptReact)->toBeVisible
 
   let wrapper = await screen->getByTestId("docs-overview-wrapper")
-  await element(wrapper)->toMatchScreenshot("desktop-docs-overview-ecosystem")
+  await element(wrapper)->toMatchScreenshot("desktop-docs-overview")
 })
 
 test("mobile docs overview", async () => {

apps/docs/__tests__/visual/MarkdownComponents_.test.res

@@ -246,18 +246,21 @@ test("renders inline code", async () => {
     <div dataTestId="inline-code-wrapper">
       <Markdown.P>
         {React.string("Use ")}
-        <code
-          className="md-inline-code px-2 py-0.5 text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90/5"
-        >
-          {React.string("Array.map")}
-        </code>
+        <Markdown.Code metastring=None> {React.string("Array.map")} </Markdown.Code>
         {React.string(" to transform elements.")}
       </Markdown.P>
     </div>,
   )
 
   let code = await screen->getByText("Array.map")
   await element(code)->toBeVisible
+  await element(code)->toHaveClass("md-inline-code")
+  await element(code)->toHaveClass("font-mono")
+
+  switch document->WebAPI.Document.querySelector("[data-testid='inline-code-wrapper'] p > code") {
+  | Value(_) => ()
+  | Null => failwith("expected Markdown.Code to render inline code inside the paragraph")
+  }
 
   let wrapper = await screen->getByTestId("inline-code-wrapper")
   await element(wrapper)->toMatchScreenshot("markdown-inline-code")

apps/docs/__tests__/visual/SyntaxLookup_.test.res

@@ -40,7 +40,7 @@ let mockItems: array<SyntaxLookup.item> = [
   },
 ]
 
-test("desktop syntax lookup renders categories and tags", async () => {
+test("desktop syntax lookup renders categories and styles deprecated tags", async () => {
   await viewport(1440, 900)
 
   let screen = await render(
@@ -63,6 +63,22 @@ test("desktop syntax lookup renders categories and tags", async () => {
   let operatorsHeading = await screen->getByText("Operators")
   await element(operatorsHeading)->toBeVisible
 
+  let deprecatedTag = await screen->getByText("|>")
+  await element(deprecatedTag)->toBeVisible
+  await element(deprecatedTag)->toHaveClass("line-through")
+
+  let deprecatedLink = switch document->WebAPI.Document.querySelector(
+    "a[href='/syntax-lookup/operators_deprecated_pipe']",
+  ) {
+  | Value(link) => link
+  | Null => failwith("expected a link for the deprecated pipe operator")
+  }
+  expect(
+    getComputedStyle(~elt=deprecatedLink)->WebAPI.CSSStyleDeclaration.getPropertyValue(
+      "text-decoration-line",
+    ),
+  )->toBe("line-through")
+
   let wrapper = await screen->getByTestId("syntax-lookup-wrapper")
   await element(wrapper)->toMatchScreenshot("desktop-syntax-lookup")
 })
@@ -114,24 +130,6 @@ test("mobile syntax lookup", async () => {
   await element(wrapper)->toMatchScreenshot("mobile-syntax-lookup")
 })
 
-test("deprecated items show with line-through styling", async () => {
-  await viewport(1440, 900)
-
-  let screen = await render(
-    <MemoryRouter initialEntries=["/syntax-lookup"]>
-      <div dataTestId="syntax-lookup-wrapper">
-        <SyntaxLookup mdxSources=mockItems />
-      </div>
-    </MemoryRouter>,
-  )
-
-  let deprecatedTag = await screen->getByText("|>")
-  await element(deprecatedTag)->toBeVisible
-
-  let wrapper = await screen->getByTestId("syntax-lookup-wrapper")
-  await element(wrapper)->toMatchScreenshot("desktop-syntax-lookup-deprecated")
-})
-
 test("syntax lookup detail box shows summary", async () => {
   await viewport(1440, 900)