Loading Functional Tests: Replace assert with expect (#1466)

Follow-up to #1454

This commit continues to migrate from `assert` usage toward Playwright's
`expect`. This commit focuses on the
`src/tests/functional/loading_tests.js` file.

The majority of this diff replaces `hasSelector` with
`expect(…).toBeAttached()` and `expect(…).toHaveAttribute()`.

[assertions]: https://playwright.dev/docs/test-assertions

Author: seanpdoyle

src/tests/functional/loading_tests.js

@@ -1,8 +1,6 @@
-import { test } from "@playwright/test"
-import { assert } from "chai"
+import { expect, test } from "@playwright/test"
 import {
   attributeForSelector,
-  hasSelector,
   nextAttributeMutationNamed,
   nextBeat,
   nextBody,
@@ -18,96 +16,77 @@ test.beforeEach(async ({ page }) => {
 })
 
 test("eager loading within a details element", async ({ page }) => {
-  await nextBeat()
-  assert.ok(await hasSelector(page, "#loading-eager turbo-frame#frame h2"))
-  assert.ok(await hasSelector(page, "#loading-eager turbo-frame[complete]"), "has [complete] attribute")
+  await expect(page.locator("#loading-eager turbo-frame#frame h2")).toBeAttached()
+  await expect(page.locator("#loading-eager turbo-frame"), "has [complete] attribute").toHaveAttribute("complete")
 })
 
 test("lazy loading within a details element", async ({ page }) => {
-  await nextBeat()
-
-  const frameContents = "#loading-lazy turbo-frame h2"
-  assert.notOk(await hasSelector(page, frameContents))
-  assert.ok(await hasSelector(page, "#loading-lazy turbo-frame:not([complete])"))
+  await expect(page.locator("#loading-lazy turbo-frame h2")).not.toBeAttached()
+  await expect(page.locator("#loading-lazy turbo-frame")).not.toHaveAttribute("complete")
 
   await page.click("#loading-lazy summary")
-  await nextBeat()
 
-  const contents = await page.locator(frameContents)
-  assert.equal(await contents.textContent(), "Hello from a frame")
-  assert.ok(await hasSelector(page, "#loading-lazy turbo-frame[complete]"), "has [complete] attribute")
+  await expect(page.locator("#loading-lazy turbo-frame h2")).toHaveText("Hello from a frame")
+  await expect(page.locator("#loading-lazy turbo-frame"), "has [complete] attribute").toHaveAttribute("complete")
 })
 
 test("changing loading attribute from lazy to eager loads frame", async ({ page }) => {
-  const frameContents = "#loading-lazy turbo-frame h2"
-  await nextBeat()
+  const frame = page.locator("#loading-lazy turbo-frame")
 
-  assert.notOk(await hasSelector(page, frameContents))
+  await expect(frame.locator("h2")).not.toBeAttached()
 
-  await page.evaluate(() => document.querySelector("#loading-lazy turbo-frame")?.setAttribute("loading", "eager"))
-  await nextBeat()
+  await frame.evaluate((frame) => frame.setAttribute("loading", "eager"))
 
-  const contents = await page.locator(frameContents)
   await page.click("#loading-lazy summary")
-  assert.equal(await contents.textContent(), "Hello from a frame")
+  await expect(frame.locator("h2")).toHaveText("Hello from a frame")
 })
 
 test("navigating a visible frame with loading=lazy navigates", async ({ page }) => {
   await page.click("#loading-lazy summary")
-  await nextBeat()
 
-  const initialContents = await page.locator("#hello h2")
-  assert.equal(await initialContents.textContent(), "Hello from a frame")
+  await expect(page.locator("#hello h2")).toHaveText("Hello from a frame")
 
   await page.click("#hello a")
-  await nextBeat()
 
-  const navigatedContents = await page.locator("#hello h2")
-  assert.equal(await navigatedContents.textContent(), "Frames: #hello")
+  await expect(page.locator("#hello h2")).toHaveText("Frames: #hello")
 })
 
 test("changing src attribute on a frame with loading=lazy defers navigation", async ({ page }) => {
-  const frameContents = "#loading-lazy turbo-frame h2"
-  await nextBeat()
+  const frame = page.locator("#loading-lazy turbo-frame")
 
-  await page.evaluate(() =>
-    document.querySelector("#loading-lazy turbo-frame")?.setAttribute("src", "/src/tests/fixtures/frames.html")
+  await frame.evaluate((frame) =>
+    frame.setAttribute("src", "/src/tests/fixtures/frames.html")
   )
-  assert.notOk(await hasSelector(page, frameContents))
+  await expect(frame.locator("h2")).not.toBeAttached()
 
   await page.click("#loading-lazy summary")
-  await nextBeat()
 
-  const contents = await page.locator(frameContents)
-  assert.equal(await contents.textContent(), "Frames: #hello")
+  await expect(frame.locator("h2")).toHaveText("Frames: #hello")
 })
 
 test("changing src attribute on a frame with loading=eager navigates", async ({ page }) => {
-  const frameContents = "#loading-eager turbo-frame h2"
-  await nextBeat()
+  const frame = page.locator("#loading-eager turbo-frame")
 
-  await page.evaluate(() =>
-    document.querySelector("#loading-eager turbo-frame")?.setAttribute("src", "/src/tests/fixtures/frames.html")
+  await frame.evaluate((frame) =>
+    frame.setAttribute("src", "/src/tests/fixtures/frames.html")
   )
 
   await page.click("#loading-eager summary")
-  await nextBeat()
 
-  const contents = await page.locator(frameContents)
-  assert.equal(await contents.textContent(), "Frames: #frame")
+  await expect(frame.locator("h2")).toHaveText("Frames: #frame")
 })
 
 test("reloading a frame reloads the content", async ({ page }) => {
   await page.click("#loading-eager summary")
   await nextEventOnTarget(page, "frame", "turbo:frame-load")
 
-  const frameContent = "#loading-eager turbo-frame#frame h2"
-  assert.ok(await hasSelector(page, frameContent))
-  assert.equal(await nextAttributeMutationNamed(page, "frame", "complete"), "", "has [complete] attribute")
+  const frame = page.locator("#loading-eager turbo-frame#frame")
+  await expect(frame.locator("h2")).toBeAttached()
+  expect(await nextAttributeMutationNamed(page, "frame", "complete"), "has [complete] attribute").toEqual("")
 
-  await page.evaluate(() => document.querySelector("#loading-eager turbo-frame")?.reload())
-  assert.ok(await hasSelector(page, frameContent))
-  assert.equal(await nextAttributeMutationNamed(page, "frame", "complete"), null, "clears [complete] attribute")
+  await frame.evaluate((frame) => frame.reload())
+  await expect(frame.locator("h2")).toBeAttached()
+  expect(await nextAttributeMutationNamed(page, "frame", "complete"), "clears [complete] attribute").toEqual(null)
 })
 
 test("navigating away from a page does not reload its frames", async ({ page }) => {
@@ -116,42 +95,42 @@ test("navigating away from a page does not reload its frames", async ({ page })
 
   const eventLogs = await readEventLogs(page)
   const requestLogs = eventLogs.filter(([name]) => name == "turbo:before-fetch-request")
-  assert.equal(requestLogs.length, 1)
+  expect(requestLogs.length).toEqual(1)
 })
 
 test("changing [src] attribute on a [complete] frame with loading=lazy defers navigation", async ({ page }) => {
   await page.click("#loading-lazy summary")
   await nextEventOnTarget(page, "hello", "turbo:frame-load")
 
-  assert.ok(await hasSelector(page, "#loading-lazy turbo-frame[complete]"), "lazy frame is complete")
-  assert.equal(await page.textContent("#hello h2"), "Hello from a frame")
+  await expect(page.locator("#loading-lazy turbo-frame"), "lazy frame is complete").toHaveAttribute("complete")
+  await expect(page.locator("#hello h2")).toHaveText("Hello from a frame")
 
   await page.click("#loading-lazy summary")
   await page.click("#one")
   await nextEventNamed(page, "turbo:load")
   await page.goBack()
   await nextEventNamed(page, "turbo:load")
 
-  assert.ok(await noNextEventOnTarget(page, "hello", "turbo:frame-load"))
+  expect(await noNextEventOnTarget(page, "hello", "turbo:frame-load")).toBeTruthy()
 
   let src = new URL((await attributeForSelector(page, "#hello", "src")) || "")
 
-  assert.ok(await hasSelector(page, "#loading-lazy turbo-frame[complete]"), "lazy frame is complete")
-  assert.equal(src.pathname, "/src/tests/fixtures/frames/hello.html", "lazy frame retains [src]")
+  await expect(page.locator("#loading-lazy turbo-frame"), "lazy frame is complete").toHaveAttribute("complete")
+  expect(src.pathname, "lazy frame retains [src]").toEqual("/src/tests/fixtures/frames/hello.html")
 
   await page.click("#link-lazy-frame")
 
-  assert.ok(await noNextEventOnTarget(page, "hello", "turbo:frame-load"))
-  assert.ok(await hasSelector(page, "#loading-lazy turbo-frame:not([complete])"), "lazy frame is not complete")
+  expect(await noNextEventOnTarget(page, "hello", "turbo:frame-load")).toBeTruthy()
+  await expect(page.locator("#loading-lazy turbo-frame"), "lazy frame is not complete").not.toHaveAttribute("complete")
 
   await page.click("#loading-lazy summary")
   await nextEventOnTarget(page, "hello", "turbo:frame-load")
 
   src = new URL((await attributeForSelector(page, "#hello", "src")) || "")
 
-  assert.equal(await page.textContent("#loading-lazy turbo-frame h2"), "Frames: #hello")
-  assert.ok(await hasSelector(page, "#loading-lazy turbo-frame[complete]"), "lazy frame is complete")
-  assert.equal(src.pathname, "/src/tests/fixtures/frames.html", "lazy frame navigates")
+  await expect(page.locator("#loading-lazy turbo-frame h2")).toHaveText("Frames: #hello")
+  await expect(page.locator("#loading-lazy turbo-frame"), "lazy frame is complete").toHaveAttribute("complete")
+  expect(src.pathname, "lazy frame navigates").toEqual("/src/tests/fixtures/frames.html")
 })
 
 test("navigating away from a page and then back does not reload its frames", async ({ page }) => {
@@ -166,8 +145,8 @@ test("navigating away from a page and then back does not reload its frames", asy
   const requestsOnEagerFrame = requestLogs.filter((record) => record[2] == "frame")
   const requestsOnLazyFrame = requestLogs.filter((record) => record[2] == "hello")
 
-  assert.equal(requestsOnEagerFrame.length, 0, "does not reload eager frame")
-  assert.equal(requestsOnLazyFrame.length, 0, "does not reload lazy frame")
+  expect(requestsOnEagerFrame.length, "does not reload eager frame").toEqual(0)
+  expect(requestsOnLazyFrame.length, "does not reload lazy frame").toEqual(0)
 
   await page.click("#loading-lazy summary")
   await nextEventOnTarget(page, "hello", "turbo:before-fetch-request")
@@ -193,5 +172,5 @@ test("disconnecting and reconnecting a frame does not reload the frame", async (
 
   const eventLogs = await readEventLogs(page)
   const requestLogs = eventLogs.filter(([name]) => name == "turbo:before-fetch-request")
-  assert.equal(requestLogs.length, 0)
+  expect(requestLogs.length).toEqual(0)
 })