Improve frontend test stability

frontend/components/BottomRightPanel.js

@@ -94,7 +94,9 @@ export let BottomRightPanel = ({ desired_doc_query, on_update_doc_query, noteboo
                             "helpbox-process": true,
                             "active": open_tab === "process",
                             "busy": show_business_outline,
+                            "something_is_happening": busy || !connected,
                         })}
+                        id="process-status-tab-button"
                         onClick=${() => {
                             set_open_tab(open_tab === "process" ? null : "process")
                         }}

frontend/components/Editor.js

@@ -957,6 +957,10 @@ patch: ${JSON.stringify(
             // console.info("All scripts finished!")
             this.send_queued_bond_changes()
         })
+
+        // @ts-ignore This is for tests
+        document.body._js_init_set = this.js_init_set
+
         /** Is the notebook ready to execute code right now? (i.e. are no cells queued or running?) */
         this.notebook_is_idle = () => {
             return !(

test/frontend/__tests__/autocomplete_test.js

@@ -1,13 +1,11 @@
 import puppeteer from "puppeteer"
-import { lastElement, saveScreenshot, getTestScreenshotPath, createPage } from "../helpers/common"
+import { lastElement, saveScreenshot, createPage } from "../helpers/common"
 import {
     getCellIds,
     importNotebook,
     waitForCellOutput,
     getPlutoUrl,
-    prewarmPluto,
     writeSingleLineInPlutoInput,
-    waitForNoUpdateOngoing,
     shutdownCurrentNotebook,
     setupPlutoBrowser,
 } from "../helpers/pluto"
@@ -42,7 +40,6 @@ describe("PlutoAutocomplete", () => {
 
     it("should get the correct autocomplete suggestions", async () => {
         await importNotebook(page, "autocomplete_notebook.jl")
-        await waitForNoUpdateOngoing(page, { polling: 100 })
         const importedCellIds = await getCellIds(page)
         await Promise.all(importedCellIds.map((cellId) => waitForCellOutput(page, cellId)))
 

test/frontend/__tests__/bonds.js

@@ -1,6 +1,6 @@
 import puppeteer from "puppeteer"
 import { saveScreenshot, createPage, paste } from "../helpers/common"
-import { createNewNotebook, getPlutoUrl, prewarmPluto, setupPlutoBrowser, shutdownCurrentNotebook, waitForNoUpdateOngoing } from "../helpers/pluto"
+import { createNewNotebook, getPlutoUrl, setupPlutoBrowser, shutdownCurrentNotebook, waitForPlutoToCalmDown } from "../helpers/pluto"
 
 // https://github.com/fonsp/Pluto.jl/issues/928
 describe("Bonds should run once when refreshing page", () => {
@@ -51,7 +51,7 @@ describe("Bonds should run once when refreshing page", () => {
         await page.click(`.runallchanged`)
 
         await page.waitForSelector(`pluto-cell.running`, { visible: true, timeout: 0 })
-        await waitForNoUpdateOngoing(page)
+        await waitForPlutoToCalmDown(page)
 
         await paste(
             page,
@@ -66,9 +66,10 @@ numberoftimes = Ref(0)
 
         await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
         await page.click(`.runallchanged`)
+        await waitForPlutoToCalmDown(page)
         await page.waitForFunction(() => Boolean(document.querySelector("pluto-cell:nth-of-type(5) pluto-output")?.textContent))
+        await waitForPlutoToCalmDown(page)
 
-        await waitForNoUpdateOngoing(page)
         let output_after_running_bonds = await page.evaluate(() => {
             return document.querySelector("pluto-cell:nth-of-type(5) pluto-output")?.textContent
         })
@@ -77,7 +78,7 @@ numberoftimes = Ref(0)
         // Let's refresh and see
         await page.reload({ waitUntil: ["networkidle0", "domcontentloaded"] })
         await page.waitForFunction(() => Boolean(document.querySelector("pluto-cell:nth-of-type(5) pluto-output")?.textContent))
-        await waitForNoUpdateOngoing(page)
+        await waitForPlutoToCalmDown(page)
         let output_after_reload = await page.evaluate(() => {
             return document.querySelector("pluto-cell:nth-of-type(5) pluto-output")?.textContent
         })

test/frontend/__tests__/javascript_api.js

@@ -1,19 +1,6 @@
 import puppeteer from "puppeteer"
-import { waitForContent, lastElement, saveScreenshot, getTestScreenshotPath, waitForContentToBecome, createPage, paste, countCells } from "../helpers/common"
-import {
-    createNewNotebook,
-    getCellIds,
-    waitForCellOutput,
-    waitForNoUpdateOngoing,
-    getPlutoUrl,
-    prewarmPluto,
-    waitForCellOutputToChange,
-    keyboardPressInPlutoInput,
-    writeSingleLineInPlutoInput,
-    manuallyEnterCells,
-    shutdownCurrentNotebook,
-    setupPlutoBrowser,
-} from "../helpers/pluto"
+import { saveScreenshot, waitForContentToBecome, createPage, paste } from "../helpers/common"
+import { createNewNotebook, waitForNoUpdateOngoing, getPlutoUrl, shutdownCurrentNotebook, setupPlutoBrowser, waitForPlutoToCalmDown } from "../helpers/pluto"
 
 describe("JavaScript API", () => {
     /**
@@ -62,7 +49,7 @@ describe("JavaScript API", () => {
             timeout: 0,
         })
         await page.click(`.runallchanged`)
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+        await waitForPlutoToCalmDown(page, { polling: 100 })
         const initialLastCellContent = await waitForContentToBecome(page, `pluto-cell:last-child pluto-output`, expected)
         expect(initialLastCellContent).toBe(expected)
     })
@@ -83,7 +70,7 @@ describe("JavaScript API", () => {
             timeout: 0,
         })
         await page.click(`.runallchanged`)
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+        await waitForPlutoToCalmDown(page, { polling: 100 })
         let initialLastCellContent = await waitForContentToBecome(page, `pluto-cell:last-child pluto-output`, expected)
         expect(initialLastCellContent).toBe(expected)
 
@@ -103,7 +90,7 @@ describe("JavaScript API", () => {
             timeout: 0,
         })
         await page.click(`.runallchanged`)
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+        await waitForPlutoToCalmDown(page, { polling: 100 })
         initialLastCellContent = await waitForContentToBecome(page, `pluto-cell:last-child pluto-output`, expected)
         expect(initialLastCellContent).toBe(expected)
     })
@@ -136,7 +123,7 @@ describe("JavaScript API", () => {
             timeout: 0,
         })
         await page.click(`.runallchanged`)
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+        await waitForPlutoToCalmDown(page, { polling: 100 })
         await waitForContentToBecome(page, `pluto-cell:nth-child(2) pluto-output`, "emitter")
         page.waitForTimeout(2000)
 

test/frontend/__tests__/new_notebook_test.js

@@ -3,14 +3,13 @@ import { waitForContent, lastElement, saveScreenshot, waitForContentToBecome, cr
 import {
     createNewNotebook,
     getCellIds,
-    waitForNoUpdateOngoing,
     getPlutoUrl,
-    prewarmPluto,
     waitForCellOutputToChange,
     keyboardPressInPlutoInput,
     writeSingleLineInPlutoInput,
     shutdownCurrentNotebook,
     setupPlutoBrowser,
+    waitForPlutoToCalmDown,
 } from "../helpers/pluto"
 
 const manuallyEnterCells = async (page, cells) => {
@@ -80,7 +79,7 @@ describe("PlutoNewNotebook", () => {
         const plutoCellIds = await manuallyEnterCells(page, cells)
         await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
         await page.click(`.runallchanged`)
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+        await waitForPlutoToCalmDown(page, { polling: 100 })
         const content = await waitForContentToBecome(page, `pluto-cell[id="${plutoCellIds[3]}"] pluto-output`, "6")
         expect(content).toBe("6")
     })
@@ -90,7 +89,7 @@ describe("PlutoNewNotebook", () => {
         const plutoCellIds = await manuallyEnterCells(page, cells)
         await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
         await page.click(`.runallchanged`)
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+        await waitForPlutoToCalmDown(page, { polling: 100 })
         const initialLastCellContent = await waitForContentToBecome(page, `pluto-cell[id="${plutoCellIds[3]}"] pluto-output`, "6")
         expect(initialLastCellContent).toBe("6")
 

test/frontend/__tests__/paste_test.disabled

@@ -14,7 +14,7 @@ import {
     createNewNotebook,
     getCellIds,
     waitForCellOutput,
-    waitForNoUpdateOngoing,
+    waitForPlutoToCalmDown,
     getPlutoUrl,
     prewarmPluto,
     waitForCellOutputToChange,
@@ -46,7 +46,7 @@ describe("Paste Functionality", () => {
         const plutoCellIds = await manuallyEnterCells(page, cells)
         await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
         await page.click(`.runallchanged`)
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+        await waitForPlutoToCalmDown(page, { polling: 100 })
         const initialLastCellContent = await waitForContentToBecome(page, `pluto-cell[id="${plutoCellIds[3]}"] pluto-output`, "6")
         expect(initialLastCellContent).toBe("6")
 
@@ -77,7 +77,7 @@ describe("Paste Functionality", () => {
         const plutoCellIds = await manuallyEnterCells(page, cells)
         await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
         await page.click(`.runallchanged`)
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+        await waitForPlutoToCalmDown(page, { polling: 100 })
         const initialLastCellContent = await waitForContentToBecome(page, `pluto-cell[id="${plutoCellIds[3]}"] pluto-output`, "6")
         expect(initialLastCellContent).toBe("6")
 
@@ -119,7 +119,7 @@ describe("Paste Functionality", () => {
         const plutoCellIds = await manuallyEnterCells(page, cells)
         await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
         await page.click(`.runallchanged`)
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+        await waitForPlutoToCalmDown(page, { polling: 100 })
         const initialLastCellContent = await waitForContentToBecome(page, `pluto-cell[id="${plutoCellIds[3]}"] pluto-output`, "6")
         expect(initialLastCellContent).toBe("6")
 

test/frontend/__tests__/published_to_js.js

@@ -1,16 +1,6 @@
 import puppeteer from "puppeteer"
-import { lastElement, saveScreenshot, getTestScreenshotPath, createPage } from "../helpers/common"
-import {
-    getCellIds,
-    importNotebook,
-    waitForCellOutput,
-    getPlutoUrl,
-    prewarmPluto,
-    writeSingleLineInPlutoInput,
-    waitForNoUpdateOngoing,
-    shutdownCurrentNotebook,
-    setupPlutoBrowser,
-} from "../helpers/pluto"
+import { saveScreenshot, createPage } from "../helpers/common"
+import { importNotebook, getPlutoUrl, shutdownCurrentNotebook, setupPlutoBrowser } from "../helpers/pluto"
 
 describe("published_to_js", () => {
     /**
@@ -42,7 +32,7 @@ describe("published_to_js", () => {
 
     it("Should correctly show published_to_js in cell output, and in logs", async () => {
         await importNotebook(page, "published_to_js.jl")
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+
         let output_of_published = await page.evaluate(() => {
             return document.querySelector("#to_cell_output")?.textContent
         })
@@ -53,6 +43,6 @@ describe("published_to_js", () => {
             return document.querySelector("#to_cell_log")?.textContent
         })
         // This test is currently broken, due to https://github.com/fonsp/Pluto.jl/issues/2092
-        // expect(log_of_published).toBe("[4,5,6] MAGIC!")
+        expect(log_of_published).toBe("[4,5,6] MAGIC!")
     })
 })

test/frontend/__tests__/slide_controls.js

@@ -1,14 +1,5 @@
-import puppeteer from "puppeteer"
 import { saveScreenshot, createPage, waitForContent } from "../helpers/common"
-import {
-    createNewNotebook,
-    getPlutoUrl,
-    manuallyEnterCells,
-    prewarmPluto,
-    setupPlutoBrowser,
-    shutdownCurrentNotebook,
-    waitForNoUpdateOngoing,
-} from "../helpers/pluto"
+import { createNewNotebook, getPlutoUrl, manuallyEnterCells, setupPlutoBrowser, shutdownCurrentNotebook, waitForPlutoToCalmDown } from "../helpers/pluto"
 
 describe("slideControls", () => {
     let browser = null
@@ -38,7 +29,7 @@ describe("slideControls", () => {
         const plutoCellIds = await manuallyEnterCells(page, cells)
         await page.waitForSelector(".runallchanged", { visible: true, polling: 200, timeout: 0 })
         await page.click(".runallchanged")
-        await waitForNoUpdateOngoing(page, { polling: 100 })
+        await waitForPlutoToCalmDown(page, { polling: 100 })
         const content = await waitForContent(page, `pluto-cell[id="${plutoCellIds[1]}"] pluto-output`)
         expect(content).toBe("Slide 2")
 

test/frontend/helpers/pluto.js

@@ -79,6 +79,7 @@ export const createNewNotebook = async (page) => {
     const newNotebookSelector = 'a[href="new"]'
     await page.waitForSelector(newNotebookSelector)
     await clickAndWaitForNavigation(page, newNotebookSelector)
+    await page.waitForTimeout(1000)
     await waitForPlutoToCalmDown(page)
     await page.waitForSelector("pluto-input", { visible: true })
 }
@@ -98,6 +99,7 @@ export const importNotebook = async (page, notebookName) => {
 
     const openFileButton = "pluto-filepicker button"
     await clickAndWaitForNavigation(page, openFileButton)
+    await page.waitForTimeout(1000)
     await waitForPlutoToCalmDown(page)
 }
 
@@ -109,10 +111,22 @@ export const getCellIds = (page) => page.evaluate(() => Array.from(document.quer
 /**
  * @param {Page} page
  */
-export const waitForPlutoToCalmDown = async (page) => {
-    await page.waitForTimeout(1000)
-    //@ts-ignore
-    await page.waitForFunction(() => document?.body?._update_is_ongoing === false && document?.querySelector(`pluto-cell.running, pluto-cell.queued`) === null)
+export const restartProcess = async (page) => {
+    await page.click(`a#restart-process-button`)
+}
+
+export const waitForPlutoToCalmDown = async (/** @type {puppeteer.Page} */ page, /** @type {{ polling: string | number; timeout?: number; }} */ options) => {
+    await page.waitForFunction(
+        () =>
+            //@ts-ignore
+            document?.body?._update_is_ongoing === false &&
+            //@ts-ignore
+            document?.body?._js_init_set?.size === 0 &&
+            document?.body?.classList?.contains("loading") === false &&
+            document?.querySelector(`#process-status-tab-button.something_is_happening`) == null &&
+            document?.querySelector(`pluto-cell.running, pluto-cell.queued`) === null,
+        options
+    )
 }
 
 /**