features

tests/saving.ts

@@ -0,0 +1,52 @@
+// Watching the unsaved dot without racing the thing that clears it.
+//
+// The dot is on screen from the first keystroke until the autosave lands, which is 500ms after the
+// last one plus however long the write takes. Two specs assert it appears, and both did it by
+// looking for it after the typing had finished, which is a poll against a deadline: the dot is
+// there for half a second, and a run that stalls for half a second between the last keystroke and
+// the first look reads a document that has already been saved and calls it a document that was
+// never dirty. Nothing is wrong with the app in that run. The test just arrived late.
+//
+// So the answer is recorded as it happens rather than asked for afterwards. A MutationObserver
+// installed before the typing starts sees the dot go in, and the assertion is about what was seen.
+// It is also the stronger claim of the two: a poll that happens to land inside the window cannot
+// tell "the dot appeared" from "the dot was already there", and this can.
+
+import { expect, type Page } from "@playwright/test";
+
+declare global {
+  interface Window {
+    /** What the observer below has seen since it was installed. */
+    __dirtyDot: { seen: boolean; visible: boolean };
+  }
+}
+
+/** Starts watching. Anything the dot does before this call is not recorded, so call it first. */
+export function watchDirty(page: Page): Promise<void> {
+  return page.evaluate(() => {
+    const state = { seen: false, visible: false };
+    window.__dirtyDot = state;
+
+    // Painted as well as present: the dot is a span with nothing in it, so a rule that stopped
+    // drawing it would leave every assertion about it passing.
+    const look = (): void => {
+      if (state.seen) return;
+      const dot = document.querySelector(".dirty-dot");
+      if (!dot) return;
+      state.seen = true;
+      state.visible = dot.checkVisibility();
+    };
+
+    new MutationObserver(look).observe(document.body, { subtree: true, childList: true });
+    look();
+  });
+}
+
+/** That the document was marked unsaved at some point since `watchDirty`. */
+export async function dirtyWasShown(page: Page): Promise<void> {
+  await expect
+    .poll(() => page.evaluate(() => window.__dirtyDot), {
+      message: "the unsaved dot was never on screen",
+    })
+    .toEqual({ seen: true, visible: true });
+}