Reenable block editing UI tests

frontend/tests/blocks.spec.ts

@@ -0,0 +1,46 @@
+import { expect } from "@playwright/test";
+import { test } from "./util/common";
+import { USERS } from "./util/user";
+import { realmSetup, realms } from "./util/realm";
+import { addBlock, editBlock, testBlocks } from "./util/blocks";
+
+
+for (const realmType of realms) {
+ test(`${realmType} realm moderator block editing`, async ({
+ page, browserName, standardData, activeSearchIndex,
+ }) => {
+ test.skip(browserName === "webkit", "Skip safari because it doesn't allow http logins");
+
+ const userid = realmType === "User" ? "jose" : "sabine";
+ const parentPageName = realmType === "User" ? USERS[userid] : "Support page";
+ await realmSetup(page, userid, realmType, parentPageName, realmType === "Regular");
+
+ await page.getByRole("link", { name: "Edit page content" }).click();
+
+ await test.step("Editing", async () => {
+ await test.step("Blocks can be added", async () => {
+ for (const block of testBlocks) {
+ await addBlock(page, testBlocks.indexOf(block), block);
+ }
+ });
+
+ await test.step("Blocks can be edited", async () => {
+ for (const block of testBlocks) {
+ await editBlock(page, testBlocks.indexOf(block), block);
+ }
+ });
+
+ await test.step("Blocks can be removed", async () => {
+ for (const _ of testBlocks) {
+ await page.getByLabel("Remove block").first().click();
+ await page.getByText("Remove block", { exact: true }).click();
+ }
+
+ await expect(page
+ .getByRole("button", { name: "Insert a new block here" }))
+ .toHaveCount(1);
+ });
+ });
+ });
+}
+

frontend/tests/fixtures/standard.sql

@@ -267,6 +267,8 @@ insert into realms (parent, path_segment, name, child_order)
 values (0, 'support', 'Support page', 'alphabetic:asc');
 insert into realms (parent, path_segment, name, child_order)
 values (0, 'love', 'WILL DERIVE', 'alphabetic:desc');
+insert into realms (parent, path_segment, name, child_order)
+values (0, 'empty', 'Empty', 'alphabetic:desc');
 
 insert into realms (parent, path_segment, name, index, child_order)
 values ((select id from realms where full_path = '/animals'), 'cats', 'Cats', 2, 'alphabetic:asc');

frontend/tests/util/blocks.ts

@@ -200,39 +200,42 @@ export const editBlock = async (page: Page, pos: number, block: Block) => {
  break;
  }
  case "video": {
+ const newVideo = "Currently live!!";
  await test.step("Video can be changed", async () => {
  const input = page.getByRole("combobox");
- await input.pressSequentially("Dual Stream Cats");
- await page.getByRole("option", { name: "Dual Stream Cats"}).click();
+ await input.pressSequentially(newVideo);
+ await page.getByRole("option", { name: newVideo }).click();
 
  await page.keyboard.press("Enter");
 
  await expect(page
- .getByRole("heading", { name: "Video Of A Tabby Cat" })
- .first())
+ .getByRole("heading", { name: newVideo }))
  .toBeVisible();
  });
 
  await test.step("Title can be hidden", async () => {
  await editButton.click();
- await page.getByText("Show title").click();
+ await page.getByLabel("Show title").setChecked(false);
  await saveButton.click();
 
- await expect(page.getByRole("heading")).toHaveCount(0);
+ await expect(page
+ .getByRole("heading", { name: newVideo }))
+ .not
+ .toBeVisible();
+ });
+ break;
+ }
+ case "text": {
+ await test.step("Text can be changed", async () => {
+ await editText(page, "The lazy dog jumps over the quick brown fox.");
+ });
+ break;
+ }
+ case "title": {
+ await test.step("Title can be changed", async () => {
+ await editText(page, "Nice test you have there. Would be a shame if...");
  });
  break;
  }
- // case "text": {
- // await test.step("Text can be changed", async () => {
- // await editText(page, "The lazy dog jumps over the quick brown fox.");
- // });
- // break;
- // }
- // case "title": {
- // await test.step("Title can be changed", async () => {
- // await editText(page, "Super unique title");
- // });
- // break;
- // }
  }
 };

frontend/tests/util/realm.ts

@@ -27,22 +27,33 @@ const createUserRealm = async (page: Page, userid: UserId) => {
  * - Post-conditions: If `realmType` is `user`: User realm created, user
  * is on the page that Tobira forwards to immediately after creating the realm.
  * Otherwise, if `realmType` is `regular`, nothing was created but the user
- * is on a non-root realm page ("/support").
+ * is on a non-root realm page ("/support" or "/empty").
  */
 export const realmSetup = async (
  page: Page,
  userid: UserId,
  realmType: Realm,
  parentPageName: string,
+ empty?: boolean,
 ) => {
  await test.step("Setup", async () => {
  await page.goto("/");
  await login(page, userid);
 
  // Go to a non-root realm
  if (realmType === "Regular") {
- await page.locator("nav").getByRole("link", { name: parentPageName }).click();
- await expect(page).toHaveURL("/support");
+ if (empty) {
+ // This is an unfortunate workaround.
+ // The `nth()` locator used in block tests sometimes resolves to the wrong
+ // element if there is already a block present.
+ // I believe this is a bug in playwright. To prevent that from happening,
+ // the block tests should always be starting with an empty realm.
+ await page.locator("nav").getByRole("link", { name: "Empty" }).click();
+ await expect(page).toHaveURL("/empty");
+ } else {
+ await page.locator("nav").getByRole("link", { name: parentPageName }).click();
+ await expect(page).toHaveURL("/support");
+ }
  }
 
  // Create user realm