test: move test helpers out of vitest bindings

Author: jderochervlk

apps/docs/__tests__/TestUtils.res

@@ -0,0 +1,26 @@
+let getByTextExact = (element, text) => Vitest.getByTextWithOptions(element, text, {"exact": true})
+
+let sleep = ms =>
+  Promise.make((resolve, _) => {
+    let _timeoutId = setTimeout(~handler=() => {
+      resolve()
+    }, ~timeout=ms)
+  })
+
+external imageFromNode: WebAPI.DOMAPI.node => WebAPI.DOMAPI.htmlImageElement = "%identity"
+
+let waitForImages = async (selector: string) => {
+  let root = switch document->WebAPI.Document.querySelector(selector) {
+  | Value(root) => root
+  | Null => failwith(`expected to find screenshot target ${selector}`)
+  }
+
+  let images = root->WebAPI.Element.querySelectorAll("img")
+
+  if images.length > 0 {
+    for i in 0 to images.length - 1 {
+      let image = images->WebAPI.NodeList.item(i)->imageFromNode
+      await image->WebAPI.HTMLImageElement.decode
+    }
+  }
+}

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

@@ -166,7 +166,7 @@ test("desktop blog article with article image shows image", async () => {
   await element(title)->toBeVisible
 
   let wrapper = await screen->getByTestId("blog-article-wrapper")
-  await waitForImages("[data-testid='blog-article-wrapper']")
+  await TestUtils.waitForImages("[data-testid='blog-article-wrapper']")
   await element(wrapper)->toMatchScreenshot("desktop-blog-article-with-image")
 })
 

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

@@ -1,16 +1,6 @@
 open ReactRouter
 open Vitest
 
-@module("vitest")
-external testWithTimeout: (string, unit => promise<unit>, int) => unit = "test"
-
-let sleep = ms =>
-  Promise.make((resolve, _) => {
-    let _timeoutId = setTimeout(~handler=() => {
-      resolve()
-    }, ~timeout=ms)
-  })
-
 let snapshotSection = async (~width, ~height, ~sectionTestId, ~screenshotName) => {
   await viewport(width, height)
 
@@ -29,11 +19,11 @@ let snapshotSection = async (~width, ~height, ~sectionTestId, ~screenshotName) =
 
   if sectionTestId == "landing-other-selling-points" {
     let sourceSelector = `[data-testid="${sectionTestId}"]`
-    await waitForImages(sourceSelector)
+    await TestUtils.waitForImages(sourceSelector)
     // Headless UI's appear transition mutates classes after first render. Since
     // these tests snapshot a cloned outerHTML string, wait for the live section
     // to settle so the clone does not preserve a transient opacity-0 state.
-    await sleep(1100)
+    await TestUtils.sleep(1100)
   }
 
   let sandboxTestId = `${sectionTestId}-snapshot`
@@ -50,7 +40,7 @@ let snapshotSection = async (~width, ~height, ~sectionTestId, ~screenshotName) =
 
   let snapshotTarget = await snapshotScreen->getByTestId(sandboxTestId)
   await element(snapshotTarget)->toBeVisible
-  await waitForImages(`[data-testid="${sandboxTestId}"]`)
+  await TestUtils.waitForImages(`[data-testid="${sandboxTestId}"]`)
   await element(snapshotTarget)->toMatchScreenshot(screenshotName)
   await snapshotScreen->unmount
 }

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

@@ -214,7 +214,7 @@ test("renders Image with caption", async () => {
   await element(caption)->toBeVisible
 
   let wrapper = await screen->getByTestId("image-wrapper")
-  await waitForImages("[data-testid='image-wrapper']")
+  await TestUtils.waitForImages("[data-testid='image-wrapper']")
   await element(wrapper)->toMatchScreenshot("markdown-image")
 })
 
@@ -292,7 +292,7 @@ test("renders Image with small size", async () => {
   await element(caption)->toBeVisible
 
   let wrapper = await screen->getByTestId("image-small-wrapper")
-  await waitForImages("[data-testid='image-small-wrapper']")
+  await TestUtils.waitForImages("[data-testid='image-small-wrapper']")
   await element(wrapper)->toMatchScreenshot("markdown-image-small")
 })
 

packages/shared/src/Vitest.res

@@ -9,6 +9,9 @@ type mock
 @module("vitest")
 external test: (string, unit => promise<unit>) => unit = "test"
 
+@module("vitest")
+external testWithTimeout: (string, unit => promise<unit>, int) => unit = "test"
+
 @module("vitest") @scope("vi")
 external fn: unit => 'a => 'b = "fn"
 
@@ -45,8 +48,6 @@ external getByText: (element, string) => promise<element> = "getByText"
 @send
 external getByTextWithOptions: (element, string, {"exact": bool}) => promise<element> = "getByText"
 
-let getByTextExact = (element, text) => getByTextWithOptions(element, text, {"exact": true})
-
 @send
 external getByLabelText: (element, string) => promise<element> = "getByLabelText"
 
@@ -56,24 +57,6 @@ external getAllByLabelText: (element, string) => promise<array<element>> = "getA
 @send
 external getByRole: (element, [#button]) => promise<element> = "getByRole"
 
-external imageFromNode: WebAPI.DOMAPI.node => WebAPI.DOMAPI.htmlImageElement = "%identity"
-
-let waitForImages = async (selector: string) => {
-  let root = switch document->WebAPI.Document.querySelector(selector) {
-  | Value(root) => root
-  | Null => failwith(`expected to find screenshot target ${selector}`)
-  }
-
-  let images = root->WebAPI.Element.querySelectorAll("img")
-
-  if images.length > 0 {
-    for i in 0 to images.length - 1 {
-      let image = images->WebAPI.NodeList.item(i)->imageFromNode
-      await image->WebAPI.HTMLImageElement.decode
-    }
-  }
-}
-
 /**
  * Actions
  */