dioxus/packages/playwright-tests/nested-suspense.spec.js
2024-07-24 12:48:30 -07:00

63 lines
2.8 KiB
JavaScript

// @ts-check
const { test, expect } = require("@playwright/test");
const { timeout } = require("./playwright.config");
test("nested suspense resolves", async ({ page }) => {
// Wait for the dev server to reload
await page.goto("http://localhost:5050");
// Then wait for the page to start loading
await page.goto("http://localhost:5050", { waitUntil: "commit" });
// On the client, we should see some loading text
const main = page.locator("#main");
await expect(main).toContainText("Loading 0...");
// Expect the page to contain the suspense result from the server
const mainMessageDiv = page.locator("#children-0");
const mainMessageTitle = page.locator("#title-0");
await expect(mainMessageTitle).toContainText("The robot says hello world");
const mainMessageBody = page.locator("#body-0");
await expect(mainMessageBody).toContainText(
"The robot becomes sentient and says hello world"
);
// And expect the title to have resolved on the client
await expect(page).toHaveTitle("The robot says hello world");
// And more loading text for the nested suspense
await expect(mainMessageDiv).toContainText("Loading 1...");
await expect(mainMessageDiv).toContainText("Loading 2...");
await expect(mainMessageDiv).toContainText("Loading 3...");
const nestedMessageDiv1 = page.locator("#children-1");
const nestedMessageTitle1 = page.locator("#title-1");
await expect(nestedMessageTitle1).toContainText("The world says hello back");
const nestedMessageBody1 = page.locator("#body-1");
await expect(nestedMessageBody1).toContainText(
"In a stunning turn of events, the world collectively unites and says hello back"
);
const nestedMessageDiv2 = page.locator("#children-2");
await expect(nestedMessageDiv2).toBeEmpty();
const nestedMessageTitle2 = page.locator("#title-2");
await expect(nestedMessageTitle2).toContainText("Goodbye Robot");
const nestedMessageBody2 = page.locator("#body-2");
await expect(nestedMessageBody2).toContainText("The robot says goodbye");
const nestedMessageDiv3 = page.locator("#children-3");
await expect(nestedMessageDiv3).toBeEmpty();
const nestedMessageTitle3 = page.locator("#title-3");
await expect(nestedMessageTitle3).toContainText("Goodbye World");
const nestedMessageBody3 = page.locator("#body-3");
await expect(nestedMessageBody3).toContainText("The world says goodbye");
// Even more loading text for the deeply nested suspense
await expect(nestedMessageDiv1).toContainText("Loading 4...");
const nestedMessageDiv4 = page.locator("#children-4");
await expect(nestedMessageDiv4).toBeEmpty();
const nestedMessageTitle4 = page.locator("#title-4");
await expect(nestedMessageTitle4).toContainText("Hello World");
const nestedMessageBody4 = page.locator("#body-4");
await expect(nestedMessageBody4).toContainText("The world says hello again");
});