feat: Support dialogs (#124)

* feat: Support dialogs

* rm logging

* fix(page): add period to end of error message

* Update server.ts

* Update server.ts

* Update page_test.ts

Co-authored-by: Eric Crooks <[email protected]>

Author: ebebbington

src/page.ts

@@ -46,6 +46,67 @@ export class Page {
     return this.#protocol.socket;
   }
 
+  /**
+   * Tells Sinco you are expecting a dialog, so Sinco can listen for the event,
+   * and when `.dialog()` is called, Sinco can accept or decline it at the right time
+   *
+   * @example
+   * ```js
+   * // Note that if `.click()` produces a dialog, do not await it.
+   * await page.expectDialog();
+   * await elem.click();
+   * await page.dialog(true, "my username is Sinco");
+   * ```
+   */
+  public expectDialog() {
+    this.#protocol.notifications.set(
+      "Page.javascriptDialogOpening",
+      deferred(),
+    );
+  }
+
+  /**
+   * Interact with a dialog.
+   *
+   * Will throw if `.expectDialog()` was not called before.
+   * This is so Sino doesn't try to accept/decline a dialog before
+   * it opens.
+   *
+   * @example
+   * ```js
+   * // Note that if `.click()` produces a dialog, do not await it.
+   * await page.expectDialog();
+   * elem.click();
+   * await page.dialog(true, "my username is Sinco");
+   * ```
+   *
+   * @param accept - Whether to accept or dismiss the dialog
+   * @param promptText  - The text to enter into the dialog prompt before accepting. Used only if this is a prompt dialog.
+   */
+  public async dialog(accept: boolean, promptText?: string) {
+    const p = this.#protocol.notifications.get("Page.javascriptDialogOpening");
+    if (!p) {
+      throw new Error(
+        `Trying to accept or decline a dialog without you expecting one. ".expectDialog()" was not called beforehand.`,
+      );
+    }
+    await p;
+    const method = "Page.javascriptDialogClosed";
+    this.#protocol.notifications.set(method, deferred());
+    const body: Protocol.Page.HandleJavaScriptDialogRequest = {
+      accept,
+    };
+    if (promptText) {
+      body.promptText = promptText;
+    }
+    await this.#protocol.send<
+      Protocol.Page.HandleJavaScriptDialogRequest,
+      null
+    >("Page.handleJavaScriptDialog", body);
+    const closedPromise = this.#protocol.notifications.get(method);
+    await closedPromise;
+  }
+
   /**
    * Closes the page. After, you will not be able to interact with it
    */

tests/server.ts

@@ -23,6 +23,22 @@ class PopupsResource extends Drash.Resource {
   }
 }
 
+class DialogsResource extends Drash.Resource {
+  public paths = ["/dialogs"];
+
+  public GET(_r: Drash.Request, res: Drash.Response) {
+    return res.html(`
+      <button type="button" id="button">Click</button>
+      <script>
+        document.querySelector('#button').addEventListener('click', e => {
+          const value = prompt("some text");
+          e.target.textContent = value;
+        })
+      </script>
+    `);
+  }
+}
+
 class FileInputResource extends Drash.Resource {
   public paths = ["/file-input"];
 
@@ -69,6 +85,7 @@ export const server = new Drash.Server({
     PopupsResource,
     WaitForRequestsResource,
     FileInputResource,
+    DialogsResource,
   ],
   protocol: "http",
   port: 1447,

tests/unit/page_test.ts

@@ -268,6 +268,53 @@ for (const browserItem of browserList) {
       });
     });
 
+    await t.step("dialog()", async (t) => {
+      await t.step(`Accepts a dialog`, async () => {
+        const { browser, page } = await buildFor(browserItem.name);
+        server.run();
+        await page.location(server.address + "/dialogs");
+        const elem = await page.querySelector("#button");
+        page.expectDialog();
+        elem.click();
+        await page.dialog(true, "Sinco 4eva");
+        const val = await page.evaluate(
+          `document.querySelector("#button").textContent`,
+        );
+        await browser.close();
+        await server.close();
+        assertEquals(val, "Sinco 4eva");
+      });
+      await t.step(`Throws if a dialog was not expected`, async () => {
+        const { browser, page } = await buildFor(browserItem.name);
+        let errMsg = "";
+        try {
+          await page.dialog(true, "Sinco 4eva");
+        } catch (e) {
+          errMsg = e.message;
+        }
+        await browser.close();
+        assertEquals(
+          errMsg,
+          'Trying to accept or decline a dialog without you expecting one. ".expectDialog()" was not called beforehand.',
+        );
+      });
+      await t.step(`Rejects a dialog`, async () => {
+        const { browser, page } = await buildFor(browserItem.name);
+        server.run();
+        await page.location(server.address + "/dialogs");
+        const elem = await page.querySelector("#button");
+        page.expectDialog();
+        elem.click();
+        await page.dialog(false, "Sinco 4eva");
+        const val = await page.evaluate(
+          `document.querySelector("#button").textContent`,
+        );
+        await browser.close();
+        await server.close();
+        assertEquals(val, "");
+      });
+    });
+
     await t.step("waitForRequest()", async (t) => {
       await t.step(`Should wait for a request via JS`, async () => {
         const { browser, page } = await buildFor(browserItem.name);