Evan Almloff
176e67e5b7
* switch to a Document trait and introduce Script/Head/Style/Meta components * Fix desktop title * Insert special elements into the head during the inital SSR render * Make all head component attributes optional * hydrate head elements * improve the server streaming head warning * Document fullstack head hydration approach * deduplicate head elements by href * move Link into head::Link * document head components * add meta and title examples * Fix a few doc examples * fix formatting * Add title to playwright tests * serde is optional on web, but it is enabled by hydrate * remove leftover console log
60 lines
2.6 KiB
JavaScript
60 lines
2.6 KiB
JavaScript
// @ts-check
|
|
const { test, expect } = require("@playwright/test");
|
|
|
|
test("nested suspense resolves", async ({ page }) => {
|
|
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");
|
|
});
|