[#66455] add tests for dynamic signal options

[#66455] wait for nonempty text in change room test [#66455] fix change room test [#66455] add missing id in test button
antmicro · Nov 27, 2024 · a632083 · a632083
1 parent e24df57
commit a632083
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 2 deletions.
diff --git a/src/components/Topbar.jsx b/src/components/Topbar.jsx
@@ -217,7 +217,7 @@ export const EditorTopbar = ({ alert, users, text, buttons }) => {
   const textButtons = useMemo(() => buttons.filter((b) => b.text && b.id !== "template-manager"), [buttons]);
 
   return (
-    <Topbar>
+    <Topbar id="topbar">
       <div class="buttons-left">
         {buttonsLeft.map((button) => (
           <TopbarButton className="icon" type="button" key={button.id} title={button.tooltip} name={button.id} onClick={button.action}>
@@ -227,7 +227,7 @@ export const EditorTopbar = ({ alert, users, text, buttons }) => {
         {buttons.find((b) => b.id === "template-manager") && options.templatelist.value && <TemplateManager text={text} />}
       </div>
       <span> {alert && <Alert className="topbar-alert"> {alert} </Alert>} </span>
-      <Title dangerouslySetInnerHTML={{ __html: titleHtml.value }} />
+      <Title id="document-title" dangerouslySetInnerHTML={{ __html: titleHtml.value }} />
       <Avatars users={users} />
       <span>
         {textButtons.map((b) => (

diff --git a/tests/myst-editor.spec.ts b/tests/myst-editor.spec.ts
@@ -506,6 +506,59 @@ test.describe.parallel("With collaboration enabled", () => {
       expect(currentTextB).toContain("2Line");
     });
   });
+
+  test.describe("Dynamic options", () => {
+    test("Can modify UI", async ({ context }) => {
+      const collabOpts = defaultCollabOpts();
+      const page = await openPageWithOpts(context, collabOpts);
+      await page.evaluate(() => {
+        window.myst_editor.demo.state.options.title.value = "Playwright";
+        const btns = window.myst_editor.demo.state.options.includeButtons.value;
+        window.myst_editor.demo.state.options.includeButtons.value = [...btns, { id: "test", text: "test" }];
+        window.myst_editor.demo.state.options.mode.value = "Resolved";
+      });
+
+      const title = await page.locator("#document-title").innerHTML();
+      expect(title).toContain("Playwright");
+      expect(page.locator("#topbar > span > button")).toHaveCount(2);
+      const resolvedVisible = await page.isVisible("#resolved-wrapper");
+      expect(resolvedVisible).toBeTruthy();
+    });
+
+    test("Can change rooms", async ({ context }) => {
+      const collabOpts = defaultCollabOpts();
+      // A, B - room 0
+      const pageA = await openPageWithOpts(context, collabOpts);
+      const pageB = await openPageWithOpts(context, collabOpts);
+
+      await clearEditor(pageA);
+      const text0 = "this is room 0";
+      await insertToMainEditor(pageA, { from: 0, insert: text0 });
+      let currentText = await pageB.waitForFunction((id) => window.myst_editor[id].text, id);
+      expect(await currentText.evaluate((str) => str)).toBe(text0);
+
+      const text1 = "this is room 1";
+      // A - join room 1
+      await pageA.evaluate((id) => {
+        const collab = window.myst_editor[id].state.options.collaboration.value;
+        window.myst_editor[id].state.options.collaboration.value = { ...collab, room: "1" };
+      }, id);
+      await pageA.waitForSelector(".cm-content");
+      await clearEditor(pageA);
+      await insertToMainEditor(pageA, { from: 0, insert: text1 });
+      currentText = await pageB.waitForFunction((id) => window.myst_editor[id].text, id);
+      expect(await currentText.evaluate((str) => str)).toBe(text0);
+
+      // B - join room 1
+      await pageB.evaluate((id) => {
+        const collab = window.myst_editor[id].state.options.collaboration.value;
+        window.myst_editor[id].state.options.collaboration.value = { ...collab, room: "1" };
+      }, id);
+      await pageB.waitForSelector(".cm-content");
+      currentText = await pageB.waitForFunction((id) => window.myst_editor[id].text, id);
+      expect(await currentText.evaluate((str) => str)).toBe(text1);
+    });
+  });
 });
 
 test("dist/MystEditor.js exports src/MystEditor.js module", async () => {