Editor.test.js

import React from "react"
import ReactDOM from "react-dom"
import puppeteer from "puppeteer"

const selector = "article[contenteditable]"

let browser = null
let page = null

jest.setTimeout(30e3) // 30 seconds.

beforeAll(async () => {
	browser = await puppeteer.launch({ headless: false })
})

beforeEach(async () => {
	page = await browser.newPage()
	await page.setViewport({ width: 1440, height: 900 })
	await page.goto("http://localhost:3000", { waitFor: "domcontentloaded" })
	await page.waitForSelector(selector)
	await page.focus(selector)
})

afterAll(async () => {
	await page.waitFor(25)
	await browser.close()
})

test("can type text (deep check)", async () => {
  await page.keyboard.type("Hello, world!", { delay: 10 })
	const html = await page.$eval(selector, node => node.innerHTML)
	expect(html).toBe("<p>Hello, world!</p>")
})

test("can type text and paragraphs (deep check)", async () => {
  await page.keyboard.type("Hello, world!\n\nHello, world!\n", { delay: 10 })
	const html = await page.$eval(selector, node => node.innerHTML)
	expect(html).toBe("<p>Hello, world!</p><p><br></p><p>Hello, world!</p><p><br></p>")
})

test("can type formatted text", async () => {
  await page.keyboard.type("Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href).", { delay: 10 })
})

test("can type formatted text and paragraphs", async () => {
  await page.keyboard.type("Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href).\n\nText \\escape /* comment */ _emphasis_ **strong** `code` [link](href).\n", { delay: 10 })
})

test("can type formatted headers", async () => {
  await page.keyboard.type("# Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n## Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n### Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n#### Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n##### Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n###### Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n", { delay: 10 })
})

test("can type formatted headers", async () => {
  await page.keyboard.type("# Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n## Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n### Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n#### Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n##### Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n###### Text \\escape /* comment */ _emphasis_ **strong** `code` [link](href)\n", { delay: 10 })
})