more frontend test improvements

.github/workflows/FrontendTest.yml

@@ -68,6 +68,7 @@ jobs:
                   options = Pluto.Configuration.from_flat_kwargs(; 
                     port=parse(Int, ENV["PLUTO_PORT"]), 
                     require_secret_for_access=false,
+                    workspace_use_distributed_stdlib=false,
                   )
                   🍭 = Pluto.ServerSession(; options)
                   server = Pluto.run!(🍭)

test/frontend/README.md

@@ -9,13 +9,13 @@ All commands here are executed in this folder (`Pluto.jl/test/frontend`).
 ## Run Pluto.jl server
 
 ```
-PLUTO_PORT=2345; julia --project=/path/to/PlutoDev -e "import Pluto; Pluto.run(port=$PLUTO_PORT, require_secret_for_access=false, require_secret_for_open_links=false, launch_browser=false)"
+PLUTO_PORT=2345; julia --project=/path/to/PlutoDev -e "import Pluto; Pluto.run(port=$PLUTO_PORT, require_secret_for_access=false, launch_browser=false)"
 ```
 
 or if Pluto is dev'ed in your global environment:
 
 ```
-PLUTO_PORT=2345; julia -e "import Pluto; Pluto.run(port=$PLUTO_PORT, require_secret_for_access=false, require_secret_for_open_links=false, launch_browser=false)"
+PLUTO_PORT=2345; julia -e "import Pluto; Pluto.run(port=$PLUTO_PORT, require_secret_for_access=false, launch_browser=false)"
 ```
 
 ## Run tests
@@ -26,13 +26,13 @@ PLUTO_PORT=2345; julia -e "import Pluto; Pluto.run(port=$PLUTO_PORT, require_sec
 
 Add `HEADLESS=false` when running the test command.
 
-`clear && HEADLESS=false PLUTO_PORT=2345 npm run test`
+`clear && HEADLESS=false PLUTO_PORT=1234 npm run test`
 
 ## Run a particular suite of tests
 
 Add `-- -t=name of the suite` to the end of the test command.
 
-`clear && PLUTO_PORT=2345 npm run test -- -t=PlutoAutocomplete`
+`clear && HEADLESS=false PLUTO_PORT=1234 npm run test -- -t=PlutoAutocomplete`
 
 ## To make a test fail on a case that does not crash Pluto
 

test/frontend/__tests__/autocomplete_test.js

@@ -1,5 +1,5 @@
 import puppeteer from "puppeteer"
-import { lastElement, saveScreenshot, createPage } from "../helpers/common"
+import { lastElement, saveScreenshot, createPage, waitForContentToBecome } from "../helpers/common"
 import {
     getCellIds,
     importNotebook,
@@ -81,13 +81,7 @@ describe("PlutoAutocomplete", () => {
 
         // Trigger autocomplete
         await page.keyboard.press("Tab")
-        await page.waitForTimeout(5000)
 
-        // Get suggestions
-        const autocompletedInput = await page.evaluate(
-            (selector) => document.querySelector(selector).textContent.trim(),
-            `pluto-cell[id="${lastPlutoCellId}"] pluto-input .CodeMirror-line`
-        )
-        expect(autocompletedInput).toEqual("my_subtract")
+        expect(await waitForContentToBecome(page, `pluto-cell[id="${lastPlutoCellId}"] pluto-input .CodeMirror-line`, "my_subtract")).toBe("my_subtract")
     })
 })

test/frontend/__tests__/bonds.js

@@ -1,6 +1,6 @@
 import puppeteer from "puppeteer"
 import { saveScreenshot, createPage, paste } from "../helpers/common"
-import { createNewNotebook, getPlutoUrl, setupPlutoBrowser, shutdownCurrentNotebook, waitForPlutoToCalmDown } from "../helpers/pluto"
+import { createNewNotebook, getPlutoUrl, runAllChanged, setupPlutoBrowser, shutdownCurrentNotebook, waitForPlutoToCalmDown } from "../helpers/pluto"
 
 // https://github.com/fonsp/Pluto.jl/issues/928
 describe("Bonds should run once when refreshing page", () => {
@@ -47,11 +47,7 @@ describe("Bonds should run once when refreshing page", () => {
 @bind z html"<input type=range>"
 `
         )
-        await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
-        await page.click(`.runallchanged`)
-
-        await page.waitForSelector(`pluto-cell.running`, { visible: true, timeout: 0 })
-        await waitForPlutoToCalmDown(page)
+        await runAllChanged(page)
 
         await paste(
             page,
@@ -64,9 +60,7 @@ numberoftimes = Ref(0)
         `
         )
 
-        await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
-        await page.click(`.runallchanged`)
-        await waitForPlutoToCalmDown(page)
+        await runAllChanged(page)
         await page.waitForFunction(() => Boolean(document.querySelector("pluto-cell:nth-of-type(5) pluto-output")?.textContent))
         await waitForPlutoToCalmDown(page)
 

test/frontend/__tests__/import_notebook_test.js

@@ -9,6 +9,7 @@ import {
     writeSingleLineInPlutoInput,
     shutdownCurrentNotebook,
     setupPlutoBrowser,
+    runAllChanged,
 } from "../helpers/pluto"
 
 describe("PlutoImportNotebook", () => {
@@ -61,11 +62,7 @@ describe("PlutoImportNotebook", () => {
         // Use the previously defined sum function in the new cell
         lastPlutoCellId = lastElement(await getCellIds(page))
         await writeSingleLineInPlutoInput(page, `pluto-cell[id="${lastPlutoCellId}"] pluto-input`, "sum(2, 3)")
-
-        // Run cells
-
-        await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
-        await page.click(".runallchanged")
+        await runAllChanged(page)
         const lastCellContent = await waitForCellOutput(page, lastPlutoCellId)
         expect(lastCellContent).toBe("5")
     })

test/frontend/__tests__/javascript_api.js

@@ -1,6 +1,14 @@
 import puppeteer from "puppeteer"
 import { saveScreenshot, waitForContentToBecome, createPage, paste } from "../helpers/common"
-import { createNewNotebook, waitForNoUpdateOngoing, getPlutoUrl, shutdownCurrentNotebook, setupPlutoBrowser, waitForPlutoToCalmDown } from "../helpers/pluto"
+import {
+    createNewNotebook,
+    waitForNoUpdateOngoing,
+    getPlutoUrl,
+    shutdownCurrentNotebook,
+    setupPlutoBrowser,
+    waitForPlutoToCalmDown,
+    runAllChanged,
+} from "../helpers/pluto"
 
 describe("JavaScript API", () => {
     /**
@@ -43,12 +51,7 @@ describe("JavaScript API", () => {
 </script>"""
         `
         )
-        await page.waitForSelector(`.runallchanged`, {
-            visible: true,
-            polling: 200,
-            timeout: 0,
-        })
-        await page.click(`.runallchanged`)
+        await runAllChanged(page)
         await waitForPlutoToCalmDown(page, { polling: 100 })
         const initialLastCellContent = await waitForContentToBecome(page, `pluto-cell:last-child pluto-output`, expected)
         expect(initialLastCellContent).toBe(expected)
@@ -64,12 +67,7 @@ describe("JavaScript API", () => {
 </script>"""
         `
         )
-        await page.waitForSelector(`.runallchanged`, {
-            visible: true,
-            polling: 200,
-            timeout: 0,
-        })
-        await page.click(`.runallchanged`)
+        await runAllChanged(page)
         await waitForPlutoToCalmDown(page, { polling: 100 })
         let initialLastCellContent = await waitForContentToBecome(page, `pluto-cell:last-child pluto-output`, expected)
         expect(initialLastCellContent).toBe(expected)
@@ -84,12 +82,7 @@ describe("JavaScript API", () => {
 </script>"""
         `
         )
-        await page.waitForSelector(`.runallchanged`, {
-            visible: true,
-            polling: 200,
-            timeout: 0,
-        })
-        await page.click(`.runallchanged`)
+        await runAllChanged(page)
         await waitForPlutoToCalmDown(page, { polling: 100 })
         initialLastCellContent = await waitForContentToBecome(page, `pluto-cell:last-child pluto-output`, expected)
         expect(initialLastCellContent).toBe(expected)
@@ -117,12 +110,7 @@ describe("JavaScript API", () => {
                 v
         `
         )
-        await page.waitForSelector(`.runallchanged`, {
-            visible: true,
-            polling: 200,
-            timeout: 0,
-        })
-        await page.click(`.runallchanged`)
+        await runAllChanged(page)
         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

@@ -10,22 +10,11 @@ import {
     shutdownCurrentNotebook,
     setupPlutoBrowser,
     waitForPlutoToCalmDown,
+    manuallyEnterCells,
+    runAllChanged,
+    clearPlutoInput,
 } from "../helpers/pluto"
 
-const manuallyEnterCells = async (page, cells) => {
-    const plutoCellIds = []
-    for (const cell of cells) {
-        const plutoCellId = lastElement(await getCellIds(page))
-        plutoCellIds.push(plutoCellId)
-        await page.waitForSelector(`pluto-cell[id="${plutoCellId}"] pluto-input .cm-content`)
-        await writeSingleLineInPlutoInput(page, `pluto-cell[id="${plutoCellId}"] pluto-input`, cell)
-
-        await page.click(`pluto-cell[id="${plutoCellId}"] .add_cell.after`)
-        await page.waitForFunction((nCells) => document.querySelectorAll("pluto-cell").length === nCells, {}, plutoCellIds.length + 1)
-    }
-    return plutoCellIds
-}
-
 describe("PlutoNewNotebook", () => {
     /**
      * Launch a shared browser instance for all tests.
@@ -55,12 +44,6 @@ describe("PlutoNewNotebook", () => {
         browser = null
     })
 
-    it("should create new notebook", async () => {
-        // A pluto-input should exist in a new notebook
-        const plutoInput = await page.evaluate(() => document.querySelector("pluto-input"))
-        expect(plutoInput).not.toBeNull()
-    })
-
     it("should run a single cell", async () => {
         const cellInputSelector = "pluto-input .cm-content"
         await page.waitForSelector(cellInputSelector)
@@ -72,24 +55,12 @@ describe("PlutoNewNotebook", () => {
 
         const content = await waitForContent(page, "pluto-output")
         expect(content).toBe("2")
-    })
 
-    it("should run multiple cells", async () => {
-        const cells = ["a = 1", "b = 2", "c = 3", "a + b + c"]
-        const plutoCellIds = await manuallyEnterCells(page, cells)
-        await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
-        await page.click(`.runallchanged`)
-        await waitForPlutoToCalmDown(page, { polling: 100 })
-        const content = await waitForContentToBecome(page, `pluto-cell[id="${plutoCellIds[3]}"] pluto-output`, "6")
-        expect(content).toBe("6")
-    })
+        await clearPlutoInput(page, "pluto-input")
 
-    it("should reactively re-evaluate dependent cells", async () => {
         const cells = ["a = 1", "b = 2", "c = 3", "a + b + c"]
         const plutoCellIds = await manuallyEnterCells(page, cells)
-        await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
-        await page.click(`.runallchanged`)
-        await waitForPlutoToCalmDown(page, { polling: 100 })
+        await runAllChanged(page)
         const initialLastCellContent = await waitForContentToBecome(page, `pluto-cell[id="${plutoCellIds[3]}"] pluto-output`, "6")
         expect(initialLastCellContent).toBe("6")
 

test/frontend/__tests__/paste_test.disabled

@@ -44,9 +44,7 @@ describe("Paste Functionality", () => {
     it("should *not* create new cell when you paste code into cell", async () => {
         const cells = ["a = 1", "b = 2", "c = 3", "a + b + c"]
         const plutoCellIds = await manuallyEnterCells(page, cells)
-        await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
-        await page.click(`.runallchanged`)
-        await waitForPlutoToCalmDown(page, { polling: 100 })
+        await runAllChanged(page)
         const initialLastCellContent = await waitForContentToBecome(page, `pluto-cell[id="${plutoCellIds[3]}"] pluto-output`, "6")
         expect(initialLastCellContent).toBe("6")
 
@@ -75,9 +73,7 @@ describe("Paste Functionality", () => {
     it("should create new cell when you paste cell into page", async () => {
         const cells = ["a = 1", "b = 2", "c = 3", "a + b + c"]
         const plutoCellIds = await manuallyEnterCells(page, cells)
-        await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
-        await page.click(`.runallchanged`)
-        await waitForPlutoToCalmDown(page, { polling: 100 })
+        await runAllChanged(page)
         const initialLastCellContent = await waitForContentToBecome(page, `pluto-cell[id="${plutoCellIds[3]}"] pluto-output`, "6")
         expect(initialLastCellContent).toBe("6")
 
@@ -117,9 +113,7 @@ describe("Paste Functionality", () => {
     it("should create new cell when you paste cell into cell", async () => {
         const cells = ["a = 1", "b = 2", "c = 3", "a + b + c"]
         const plutoCellIds = await manuallyEnterCells(page, cells)
-        await page.waitForSelector(`.runallchanged`, { visible: true, polling: 200, timeout: 0 })
-        await page.click(`.runallchanged`)
-        await waitForPlutoToCalmDown(page, { polling: 100 })
+        await runAllChanged(page)
         const initialLastCellContent = await waitForContentToBecome(page, `pluto-cell[id="${plutoCellIds[3]}"] pluto-output`, "6")
         expect(initialLastCellContent).toBe("6")
 

test/frontend/__tests__/slide_controls.js

@@ -1,5 +1,15 @@
 import { saveScreenshot, createPage, waitForContent } from "../helpers/common"
-import { createNewNotebook, getPlutoUrl, manuallyEnterCells, setupPlutoBrowser, shutdownCurrentNotebook, waitForPlutoToCalmDown } from "../helpers/pluto"
+import {
+    createNewNotebook,
+    getCellIds,
+    getPlutoUrl,
+    importNotebook,
+    manuallyEnterCells,
+    runAllChanged,
+    setupPlutoBrowser,
+    shutdownCurrentNotebook,
+    waitForPlutoToCalmDown,
+} from "../helpers/pluto"
 
 describe("slideControls", () => {
     let browser = null
@@ -11,7 +21,6 @@ describe("slideControls", () => {
     beforeEach(async () => {
         page = await createPage(browser)
         await page.goto(getPlutoUrl(), { waitUntil: "networkidle0" })
-        await createNewNotebook(page)
     })
     afterEach(async () => {
         await saveScreenshot(page)
@@ -25,11 +34,8 @@ describe("slideControls", () => {
     })
 
     it("should create titles", async () => {
-        const cells = ['md"# Slide 1"', 'md"# Slide 2"']
-        const plutoCellIds = await manuallyEnterCells(page, cells)
-        await page.waitForSelector(".runallchanged", { visible: true, polling: 200, timeout: 0 })
-        await page.click(".runallchanged")
-        await waitForPlutoToCalmDown(page, { polling: 100 })
+        await importNotebook(page, "slides.jl", { permissionToRunCode: false })
+        const plutoCellIds = await getCellIds(page)
         const content = await waitForContent(page, `pluto-cell[id="${plutoCellIds[1]}"] pluto-output`)
         expect(content).toBe("Slide 2")
 
@@ -39,8 +45,10 @@ describe("slideControls", () => {
         expect(await slide_2_title.isIntersectingViewport()).toBe(true)
         expect(await slide_1_title.isIntersectingViewport()).toBe(true)
 
-        /* @ts-ignore */
-        await page.evaluate(() => window.present())
+        await page.click(`.toggle_export[title="Export..."]`)
+        await page.waitForTimeout(500)
+        await page.waitForSelector(".toggle_presentation", { visible: true })
+        await page.click(".toggle_presentation")
 
         await page.click(".changeslide.next")
         expect(await slide_1_title.isIntersectingViewport()).toBe(true)

test/frontend/fixtures/slides.jl

@@ -0,0 +1,23 @@
+### A Pluto.jl notebook ###
+# v0.11.14
+
+using Markdown
+using InteractiveUtils
+
+# ╔═╡ cbcf36de-f360-11ea-0c7f-719e93324b27
+md"# Slide 1"
+
+# ╔═╡ d71c5ee2-f360-11ea-2753-a132fa41871a
+md"# Slide 2"
+
+# ╔═╡ d8f5a4f6-f360-11ea-043d-47667f6a7e76
+
+
+# ╔═╡ dcd9ebb8-f360-11ea-2050-fd2e11d27c6d
+
+
+# ╔═╡ Cell order:
+# ╠═cbcf36de-f360-11ea-0c7f-719e93324b27
+# ╠═d71c5ee2-f360-11ea-2753-a132fa41871a
+# ╠═d8f5a4f6-f360-11ea-043d-47667f6a7e76
+# ╠═dcd9ebb8-f360-11ea-2050-fd2e11d27c6d