Refactor fetchPage to page export (#2451)

.eslintrc.cjs

@@ -60,6 +60,7 @@ module.exports = {
       2,
       {
         contexts: ['VariableDeclarator > ArrowFunctionExpression'],
+        enableFixer: false,
         require: {
           ClassDeclaration: true,
           ClassExpression: true,

src/e2e/puppeteer/__tests__/escape-html.ts

@@ -1,15 +1,13 @@
 import sleep from '../../../util/sleep'
 import press from '../helpers/press'
-import { fetchPage } from '../helpers/setup'
 import type from '../helpers/type'
 import waitForEditable from '../helpers/waitForEditable'
+import { page } from '../setup'
 
 vi.setConfig({ testTimeout: 20000 })
 
 /** Custom helper for pasting plain text, avoiding the existing `paste` helper that uses `importText` internally. */
 const pastePlainText = async (text: string) => {
-  const page = fetchPage()
-
   // Load text into clipboard
   await page.evaluate(text => {
     navigator.clipboard.write([
@@ -28,8 +26,6 @@ const pastePlainText = async (text: string) => {
 
 /** Custom helper for pasting HTML, avoiding the existing `paste` helper that uses `importText` internally. */
 const pasteHTML = async (html: string) => {
-  const page = fetchPage()
-
   // Load HTML into clipboard
   await page.evaluate(html => {
     navigator.clipboard.write([

src/e2e/puppeteer/helpers/$.ts

@@ -1,6 +1,6 @@
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /** Performs a querySelector on the document. */
-const $ = (selector: string) => fetchPage().$(selector)
+const $ = (selector: string) => page.$(selector)
 
 export default $

src/e2e/puppeteer/helpers/asBrowserEnvironment.ts

@@ -1,10 +1,10 @@
 import { BrowserEnvironment } from '../../browserEnvironment/types'
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /** Converts a Page to a BrowserEnvironment. */
 const asBrowserEnvironment = (): BrowserEnvironment => ({
   // assert UnwrapPromiseLike<R> to Promise<R>
-  execute: <R>(f: () => R) => fetchPage().evaluate(f) as Promise<R>,
+  execute: <R>(f: () => R) => page.evaluate(f) as Promise<R>,
 })
 
 export default asBrowserEnvironment

src/e2e/puppeteer/helpers/click.ts

@@ -1,5 +1,5 @@
 import { JSHandle } from 'puppeteer'
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 interface Options {
   // Click on the inside edge of the editable
@@ -19,7 +19,6 @@ const click = async (
   nodeHandleOrSelector: JSHandle | string,
   { edge = 'left', offset, x = 0, y = 0 }: Options = {},
 ) => {
-  const page = fetchPage()
   const isMobile = page.viewport()?.isMobile
 
   if (isMobile && (offset || x || y)) {

src/e2e/puppeteer/helpers/clickBullet.ts

@@ -1,11 +1,10 @@
+import { page } from '../setup'
 import getEditable from './getEditable'
-import { fetchPage } from './setup'
 
 /**
  * Click the bullet for the given thought.
  */
 const clickBullet = async (value: string) => {
-  const page = fetchPage()
   const editableNode = await getEditable(value)
 
   if (!editableNode) throw new Error('editable node for the given value not found.')

src/e2e/puppeteer/helpers/down.ts

@@ -1,9 +1,9 @@
 import { KeyInput, Keyboard } from 'puppeteer'
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 type Options = Parameters<Keyboard['down']>[1]
 
 /** Holds down a key on the keyboad. */
-const down = (key: KeyInput, options?: Options) => fetchPage().keyboard.down(key, options)
+const down = (key: KeyInput, options?: Options) => page.keyboard.down(key, options)
 
 export default down

src/e2e/puppeteer/helpers/dragAndDrop.ts

@@ -1,9 +1,7 @@
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /** Performs Drag and Drop functionality in Puppeteer browser. */
 const dragAndDrop = async (selectorDrag: string, selectorDrop: string) => {
-  const page = fetchPage()
-
   // Get the bounding boxes of the drag and drop targets
   const dragStart = await page.$eval(selectorDrag, el => ({
     x: el.getBoundingClientRect().x + el.getBoundingClientRect().width / 2,

src/e2e/puppeteer/helpers/dragAndDropThought.ts

@@ -1,6 +1,6 @@
 import sleep from '../../../util/sleep'
+import { page } from '../setup'
 import getEditable from './getEditable'
-import { fetchPage } from './setup'
 import showMousePointer from './showMousePointer'
 
 interface DragAndDropOptions {
@@ -22,8 +22,6 @@ const dragAndDropThought = async (
   destValue: string,
   { position, mouseUp, dropUncle }: DragAndDropOptions,
 ) => {
-  const page = fetchPage()
-
   const sourceElement = await getEditable(sourceValue)
   const destElement = await getEditable(destValue)
 

src/e2e/puppeteer/helpers/emulate.ts

@@ -1,7 +1,7 @@
 import { Device } from 'puppeteer'
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /** Holds down a key on the keyboad. */
-const emulate = async (device: Device) => await fetchPage().emulate(device)
+const emulate = async (device: Device) => await page.emulate(device)
 
 export default emulate

src/e2e/puppeteer/helpers/getComputedColor.ts

@@ -1,11 +1,11 @@
 import { ElementHandle } from 'puppeteer'
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /**
  * Get computed color.
  */
 const getComputedColor = async (element: ElementHandle) => {
-  const styleHandle = await fetchPage().evaluateHandle(elementHandle => {
+  const styleHandle = await page.evaluateHandle(elementHandle => {
     const cssDeclarationObject = window.getComputedStyle(elementHandle)
     return cssDeclarationObject.color
   }, element)

src/e2e/puppeteer/helpers/getEditable.ts

@@ -1,10 +1,10 @@
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /**
  * Get editable node handle for the given value.
  */
 const getEditable = (value: string) =>
-  fetchPage().evaluateHandle(value => {
+  page.evaluateHandle(value => {
     const xpath = `//div[@data-editable and contains(text(), "${value}")]`
     return document.evaluate(xpath, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null)
       .singleNodeValue as HTMLElement

src/e2e/puppeteer/helpers/getEditingText.ts

@@ -1,10 +1,10 @@
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /**
  * Get the thought value that cursor on.
  */
 const getEditingText = () =>
-  fetchPage().evaluate(() => {
+  page.evaluate(() => {
     return document.querySelector('[data-editing=true] [data-editable]')?.innerHTML
   })
 

src/e2e/puppeteer/helpers/newThought.ts

@@ -1,9 +1,8 @@
-import { fetchPage } from './setup'
+import { page } from '../setup'
 import waitForEditable from './waitForEditable'
 
 /** Creates a new thought by hitting Enter and typing text. Waits for renders between each step. */
 const newThought = async (value?: string) => {
-  const page = fetchPage()
   await page.keyboard.press('Enter')
   await waitForEditable('')
   if (value) {

src/e2e/puppeteer/helpers/openModal.ts

@@ -1,14 +1,14 @@
 import ModalType from '../../../@types/Modal'
 import { WindowEm } from '../../../initialize'
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 const em = window.em as WindowEm
 
 /** Directly opens a Modal. */
 const openModal = async (id: ModalType): Promise<void> => {
   await new Promise(resolve => setTimeout(resolve, 100))
 
-  await fetchPage().evaluate(id => {
+  await page.evaluate(id => {
     em.store.dispatch({ type: 'showModal', id })
   }, id)
 }

src/e2e/puppeteer/helpers/paste.ts

@@ -1,6 +1,6 @@
 import { HOME_TOKEN } from '../../../constants'
 import { WindowEm } from '../../../initialize'
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 const em = window.em as WindowEm
 
@@ -9,7 +9,6 @@ async function paste(pathUnranked: string[], text: string): Promise<void>
 
 /** Import text on given unranked path using exposed testHelpers. */
 async function paste(pathUnranked: string | string[], text?: string): Promise<void> {
-  const page = fetchPage()
   const _pathUnranked = typeof pathUnranked === 'string' ? [HOME_TOKEN] : (pathUnranked as string[])
   const _text = typeof pathUnranked === 'string' ? pathUnranked : text!
   // await new Promise(resolve => setTimeout(resolve, 200))

src/e2e/puppeteer/helpers/press.ts

@@ -1,9 +1,9 @@
 import { KeyInput, Keyboard } from 'puppeteer'
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 type Options = Parameters<Keyboard['press']>[1]
 
 /** Presses a key on the keyboad. */
-const press = (key: KeyInput, options?: Options) => fetchPage().keyboard.press(key, options)
+const press = (key: KeyInput, options?: Options) => page.keyboard.press(key, options)
 
 export default press

src/e2e/puppeteer/helpers/refresh.ts

@@ -1,6 +1,6 @@
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /** Refreshes the page. */
-const refresh = () => fetchPage().evaluate(() => window.location.reload())
+const refresh = () => page.evaluate(() => window.location.reload())
 
 export default refresh

src/e2e/puppeteer/helpers/remove.ts

@@ -1,8 +1,8 @@
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /** Removes the first Node that matches the selector from the DOM. NOOP if the selector is empty. */
 const remove = async (selector: string) => {
-  return fetchPage().evaluate((selector: string) => document.querySelector(selector)?.remove(), selector)
+  return page.evaluate((selector: string) => document.querySelector(selector)?.remove(), selector)
 }
 
 export default remove

src/e2e/puppeteer/helpers/screenshot.ts

@@ -1,10 +1,8 @@
 import { ScreenshotOptions } from 'puppeteer'
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /** Takes a screenshot. Note: Clears the browser selection first, as the timing of the blinking caret differs between runs. */
 const screenshot = async (options?: ScreenshotOptions) => {
-  const page = fetchPage()
-
   await page.evaluate(() => {
     // For some reason, in headless mode, removeAllRanges is not enough to remove the caret. It will show up in the screenshot at the beginning of the focusNode.
     // Blurring the active element works as expected (parallels the implementation of selection.clear).

src/e2e/puppeteer/helpers/scroll.ts

@@ -1,8 +1,8 @@
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /** Scroll to the top of the page. */
 const scroll = async (x: number, y: number) => {
-  await fetchPage().evaluate(
+  await page.evaluate(
     (x: number, y: number) => {
       window.scroll(x, y)
     },

src/e2e/puppeteer/helpers/showMousePointer.ts

@@ -1,8 +1,8 @@
-import { fetchPage } from './setup'
+import { page } from '../setup'
 
 /** Renders a simulated mouse pointer that tracks the actual mouse movements. */
 async function showMousePointer() {
-  await fetchPage().evaluate(() => {
+  await page.evaluate(() => {
     const pointer = document.createElement('puppeteer-mouse-pointer')
     pointer.innerHTML = `
       <svg viewBox="8 3 24 24" width="30">