system-testing 1.0.0

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "system-testing",
+  "version": "1.0.0",
+  "description": "System testing with Selenium and browsers.",
+  "keywords": [
+    "system",
+    "testing",
+    "selenium",
+    "chrome"
+  ],
+  "homepage": "https://github.com/kaspernj/system-testing#readme",
+  "bugs": {
+    "url": "https://github.com/kaspernj/system-testing/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kaspernj/system-testing.git"
+  },
+  "license": "ISC",
+  "author": "kasper@diestoeckels.de",
+  "type": "module",
+  "main": "src/index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "dependencies": {
+    "diggerize": "^1.0.9",
+    "htmlfy": "^0.8.1",
+    "mime": "^4.0.7",
+    "moment": "^2.30.1",
+    "ws": "^8.18.3"
+  },
+  "peerDependencies": {
+    "selenium-webdriver": "^4.34.0"
+  }
+}

package/src/system-test-browser-helper.js

@@ -0,0 +1,150 @@
+import {digg} from "diggerize"
+import EventEmitter from "events"
+
+import SystemTestCommunicator from "./system-test-communicator"
+
+const shared = {}
+
+export default class SystemTestBrowserHelper {
+  static current() {
+    if (!shared.systemTestBrowserHelper) {
+      throw new Error("No current SystemTestBrowserHelper set")
+    }
+
+    return shared.systemTestBrowserHelper
+  }
+
+  constructor() {
+    this.communicator = new SystemTestCommunicator({parent: this, onCommand: this.onCommand})
+    this._enabled = false
+    this.events = new EventEmitter()
+
+    shared.systemTestBrowserHelper = this
+  }
+
+  connectOnError() {
+    window.addEventListener("error", (event) => {
+      this.handleError({
+        type: "error",
+        error: event.error,
+        errorClass: event.error?.name,
+        file: event.filename,
+        line: event.lineno,
+        message: event.message || "Unknown error",
+        url: window.location.href
+      })
+    })
+  }
+
+  connectUnhandledRejection() {
+    window.addEventListener("unhandledrejection", (event) => {
+      this.handleError({
+        type: "unhandledrejection",
+        error: event.reason,
+        errorClass: "UnhandledRejection",
+        file: null,
+        line: null,
+        message: event.reason.message || "Unhandled promise rejection",
+        url: window.location.href
+      })
+    })
+  }
+
+  handleError(data) {
+    let backtrace
+
+    if (data.error && data.error.stack) {
+      backtrace = data.error.stack
+    } else if (data.file) {
+      backtrace = [`${data.file}:${data.line}`]
+    }
+
+    data.backtrace = backtrace
+
+    this.communicator.sendCommand(data)
+  }
+
+  connectWebSocket() {
+    this.ws = new WebSocket("ws://localhost:1985") // eslint-disable-line no-undef
+
+    this.communicator.ws = this.ws
+    this.ws.addEventListener("error", digg(this, "communicator", "onError"))
+    this.ws.addEventListener("open", digg(this, "communicator", "onOpen"))
+    this.ws.addEventListener("message", (event) => this.communicator.onMessage(event.data))
+  }
+
+  enableOnBrowser() {
+    this._enabled = true
+    this.connectWebSocket()
+    this.connectOnError()
+    this.connectUnhandledRejection()
+    this.overrideConsoleLog()
+  }
+
+  getEnabled = () => this._enabled
+  getEvents = () => this.events
+
+  fakeConsoleError = (...args) => {
+    this.communicator.sendCommand({type: "console.error", value: this.consoleLogMessage(args)})
+
+    return this.originalConsoleError(...args)
+  }
+
+  fakeConsoleLog = (...args) => {
+    this.communicator.sendCommand({type: "console.log", value: this.consoleLogMessage(args)})
+
+    return this.originalConsoleLog(...args)
+  }
+
+  consoleLogMessage(arg) {
+    if (Array.isArray(arg)) {
+      const result = []
+
+      for (const value of arg) {
+        result.push(this.consoleLogMessage(value))
+      }
+
+      return result
+    } else if (Object.prototype.toString.call(arg) === '[object Object]') {
+      const result = {}
+
+      for (const key in arg) {
+        result[key] = this.consoleLogMessage(arg[key])
+      }
+
+      return result
+    } else if (typeof arg == "object") {
+      return `[object ${arg?.constructor?.name}]`
+    } else {
+      return arg
+    }
+  }
+
+  onCommand = async ({data}) => {
+    if (data.type == "initialize") {
+      this.events.emit("initialize")
+
+      return {result: "initialized"}
+    } else if (data.type == "visit") {
+      this.events.emit("navigate", {path: data.path})
+    } else {
+      throw new Error(`Unknown command type for SystemTestBrowserHelper: ${data.type}`)
+    }
+  }
+
+  overrideConsoleLog() {
+    if (this.originalConsoleError || this.originalConsoleLog) {
+      throw new Error("Console methods has already been overridden!")
+    }
+
+    this.originalConsoleError = console.error
+    this.originalConsoleLog = console.log
+
+    console.error = this.fakeConsoleError
+    console.log = this.fakeConsoleLog
+  }
+
+  async sendQuery(sql) {
+    return await this.communicator.sendCommand({type: "query", sql})
+  }
+}

package/src/system-test-communicator.js

@@ -0,0 +1,79 @@
+export default class SystemTestCommunicator {
+  constructor({onCommand, parent}) {
+    this.onCommand = onCommand
+    this.parent = parent
+    this._sendQueueCount = 0
+    this._sendQueue = []
+    this._responses = {}
+  }
+
+  flushSendQueue() {
+    while (this._sendQueue.length !== 0) {
+      const data = this._sendQueue.shift()
+
+      this.ws.send(JSON.stringify(data))
+    }
+  }
+
+  onError = (error) => {
+    console.error("onWebSocketClientError", error)
+  }
+
+  onMessage = async (rawData) => {
+    const data = JSON.parse(rawData)
+
+    if (data.isTrusted) {
+      // Ignore
+    } else if (data.type == "command") {
+      try {
+        const result = await this.onCommand({data: data.data})
+
+        this.respond(data.id, {result})
+      } catch (error) {
+        this.respond(data.id, {error: error.message})
+      }
+    } else if (data.type == "response") {
+      const response = this._responses[data.id]
+
+      if (!response) {
+        throw new Error(`No such response: ${data.id}`)
+      }
+
+      delete this._responses[data.id]
+
+      if (data.data.error) {
+        response.error(data.data.error)
+      } else {
+        response.resolve(data.data.result)
+      }
+    } else {
+      throw new Error(`Unknown type for SystemTestCommunicator: ${data.type}: ${JSON.stringify(data)}`)
+    }
+  }
+
+  onOpen = () => {
+    this.flushSendQueue()
+  }
+
+  send(data) {
+    this._sendQueue.push(data)
+
+    if (this.ws?.readyState == 1) {
+      this.flushSendQueue()
+    }
+  }
+
+  sendCommand(data) {
+    return new Promise((resolve, error) => {
+      const id = this._sendQueueCount
+
+      this._sendQueueCount += 1
+      this._responses[id] = {resolve, error}
+      this.send({type: "command", id, data})
+    })
+  }
+
+  respond(id, data) {
+    this.send({type: "response", id, data})
+  }
+}

package/src/system-test-http-server.js

@@ -0,0 +1,54 @@
+import fs from "node:fs/promises"
+import http from "node:http"
+import mime from "mime"
+import url from "url"
+
+export default class SystemTestHttpServer {
+  close() {
+    this.httpServer.close()
+  }
+
+  onHttpServerRequest = async (request, response) => {
+    const parsedUrl = url.parse(request.url)
+    let filePath = `${this.basePath}/dist${parsedUrl.pathname}`
+
+    if (filePath.endsWith("/")) {
+      filePath += "index.html"
+    }
+
+    let fileExists
+
+    try {
+      await fs.stat(filePath)
+      fileExists = true
+    } catch (_error) {
+      fileExists = false
+    }
+
+    if (!fileExists) {
+      filePath = `${this.basePath}/dist/index.html`
+    }
+
+    const fileContent = await fs.readFile(filePath)
+    const mimeType = mime.lookup(filePath)
+
+    response.statusCode = 200
+    response.setHeader("Content-Type", mimeType)
+    response.end(fileContent)
+  }
+
+  async start() {
+    this.basePath = await fs.realpath(`${__dirname}/../..`) // eslint-disable-line no-undef
+
+    await this.startHttpServer()
+  }
+
+  startHttpServer() {
+    return new Promise((resolve) => {
+      this.httpServer = http.createServer(this.onHttpServerRequest)
+      this.httpServer.listen(1984, "localhost", () => {
+        resolve()
+      })
+    })
+  }
+}

package/src/system-test.js

@@ -0,0 +1,334 @@
+import {Builder, By} from "selenium-webdriver"
+import chrome from "selenium-webdriver/chrome"
+import {digg} from "diggerize"
+import fs from "node:fs/promises"
+import logging from "selenium-webdriver/lib/logging"
+import moment from "moment"
+import {prettify} from "htmlfy"
+import SystemTestCommunicator from "./system-test-communicator"
+import SystemTestHttpServer from "./system-test-http-server"
+import {WebSocketServer} from "ws"
+
+class ElementNotFoundError extends Error { }
+
+export default class SystemTest {
+  static current() {
+    if (!globalThis.systemTest) {
+      globalThis.systemTest = new SystemTest()
+    }
+
+    return globalThis.systemTest
+  }
+
+  static async run(callback) {
+    const systemTest = this.current()
+
+    await systemTest.communicator.sendCommand({type: "initialize"})
+    await systemTest.visit("/blank")
+    await systemTest.findByTestID("blankText")
+
+    try {
+      await callback(systemTest)
+    } catch (error) {
+      await systemTest.takeScreenshot()
+
+      throw error
+    }
+  }
+
+  constructor() {
+    this.communicator = new SystemTestCommunicator({onCommand: this.onCommand})
+    this._responses = {}
+    this._sendCount = 0
+  }
+
+  async all(selector, args = {}) {
+    const {visible = true} = args
+    const elements = await this.driver.findElements(By.css(selector))
+    const activeElements = []
+
+    for (const element of elements) {
+      let keep = true
+
+      if (visible === true || visible === false) {
+        const isDisplayed = await element.isDisplayed()
+
+        if (visible && !isDisplayed) keep = false
+        if (!visible && isDisplayed) keep = false
+      }
+
+      if (keep) activeElements.push(element)
+    }
+
+    return activeElements
+  }
+
+  // Clicks an element that has children which fills out the element and would otherwise have caused a ElementClickInterceptedError
+  async click(element) {
+    const actions = this.driver.actions({async: true})
+
+    await actions.move({origin: element}).click().perform()
+  }
+
+  async find(selector, args = {}) {
+    const elements = await this.all(selector, args)
+
+    if (elements.length > 1) {
+      throw new Error(`More than 1 elements (${elements.length}) was found by CSS: ${selector}`)
+    }
+
+    if (!elements[0]) {
+      throw new ElementNotFoundError(`Element couldn't be found by CSS: ${selector}`)
+    }
+
+    return elements[0]
+  }
+
+  findByTestID = async (testID, args) => await this.find(`[data-testid='${testID}']`, args)
+
+  async findNoWait(selector) {
+    await this.driverSetTimeouts(0)
+
+    try {
+      return await this.find(selector)
+    } finally {
+      await this.restoreTimeouts()
+    }
+  }
+
+  async getBrowserLogs() {
+    const entries = await this.driver.manage().logs().get(logging.Type.BROWSER)
+    const browserLogs = []
+
+    for (const entry of entries) {
+      const messageMatch = entry.message.match(/^(.+) (\d+):(\d+) (.+)$/)
+      let message
+
+      if (messageMatch) {
+        message = messageMatch[4]
+      } else {
+        message = entry.message
+      }
+
+      browserLogs.push(`${entry.level.name}: ${message}`)
+    }
+
+    return browserLogs
+  }
+
+  async expectNoElement(selector) {
+    let found = false
+
+    try {
+      await this.findNoWait(selector)
+      found = true
+    } catch (error) {
+      if (!error.message.startsWith("Element couldn't be found by CSS:")) {
+        throw error
+      }
+    }
+
+    if (found) {
+      throw new Error(`Expected not to find: ${selector}`)
+    }
+  }
+
+  async notificationMessages() {
+    const notificationMessageElements = await this.all("[data-class='notification-message']")
+    const notificationMessageTexts = []
+
+    for (const notificationMessageElement of notificationMessageElements) {
+      const text = await notificationMessageElement.getText()
+
+      notificationMessageTexts.push(text)
+    }
+
+    return notificationMessageTexts
+  }
+
+  isStarted() {
+    return this._started
+  }
+
+  async getHTML() {
+    return await this.driver.getPageSource()
+  }
+
+  async start() {
+    if (process.env.SYSTEM_TEST_HOST == "expo-dev-server") {
+      this.currentUrl = "http://localhost:8081"
+    } else if (process.env.SYSTEM_TEST_HOST == "dist") {
+      this.currentUrl = "http://localhost:1984"
+      this.systemTestHttpServer = new SystemTestHttpServer()
+
+      await this.systemTestHttpServer.start()
+    } else {
+      throw new Error("Please set SYSTEM_TEST_HOST to 'expo-dev-server' or 'dist'")
+    }
+
+    const options = new chrome.Options()
+
+    options.addArguments("--disable-dev-shm-usage")
+    options.addArguments("--disable-gpu")
+    options.addArguments("--headless=new")
+    options.addArguments("--no-sandbox")
+    options.addArguments("--window-size=1920,1080")
+
+    this.driver = new Builder()
+      .forBrowser("chrome")
+      .setChromeOptions(options)
+      .setCapability("goog:loggingPrefs", {browser: "ALL"})
+      .build()
+
+    this.setTimeouts(4000)
+
+    // Web socket server to communicate with browser
+    await this.startWebSocketServer()
+
+    // Visit the root page and wait for Expo to be loaded and the app to appear
+    await this.driverVisit("/?systemTest=true")
+    await this.find("body > #root")
+    await this.find("[data-component='flash-notifications-container']", {visible: null})
+
+    // Wait for client to connect
+    await this.waitForClientWebSocket()
+
+    this._started = true
+  }
+
+  async restoreTimeouts() {
+    if (!this._timeouts) {
+      throw new Error("Timeouts haven't previously been set")
+    }
+
+    await this.driverSetTimeouts(this._timeouts)
+  }
+
+  async driverSetTimeouts(newTimeout) {
+    await this.driver.manage().setTimeouts({implicit: newTimeout})
+  }
+
+  async setTimeouts(newTimeout) {
+    this._timeouts = newTimeout
+    await this.restoreTimeouts()
+  }
+
+  waitForClientWebSocket() {
+    return new Promise((resolve) => {
+      if (this.ws) {
+        resolve()
+      }
+
+      this.waitForClientWebSocketPromiseResolve = resolve
+    })
+  }
+
+  startWebSocketServer() {
+    this.wss = new WebSocketServer({port: 1985})
+    this.wss.on("connection", this.onWebSocketConnection)
+    this.wss.on("close", this.onWebSocketClose)
+  }
+
+  onCommand = async ({data}) => {
+    const type = data.type
+    let result
+
+    if (type == "console.error") {
+      const errorMessage = data.value[0]
+      let showMessage = true
+
+      if (errorMessage.includes("Minified React error #419")) {
+        showMessage = false
+      }
+
+      if (showMessage) {
+        console.error("Browser error", ...data.value)
+      }
+    } else if (type == "console.log") {
+      console.log("Browser log", ...data.value)
+    } else if (type == "error" || data.type == "unhandledrejection") {
+      this.handleError(data)
+    } else if (type == "query") {
+      await Configuration.current().getDatabasePool().withConnection(async (db) => {
+        result = await db.query(data.sql)
+      })
+    } else {
+      console.error(`onWebSocketClientMessage unknown data (type ${type})`, data)
+    }
+
+    return result
+  }
+
+  onWebSocketConnection = async (ws) => {
+    this.ws = ws
+    this.communicator.ws = ws
+    this.communicator.onOpen()
+    this.ws.on("error", digg(this, "communicator", "onError"))
+    this.ws.on("message", digg(this, "communicator", "onMessage"))
+
+    if (this.waitForClientWebSocketPromiseResolve) {
+      this.waitForClientWebSocketPromiseResolve()
+      delete this.waitForClientWebSocketPromiseResolve
+    }
+  }
+
+  onWebSocketClose = () => {
+    this.ws = null
+    this.communicator.ws = null
+  }
+
+  handleError(data) {
+    if (data.message.includes("Minified React error #419")) {
+      // Ignore this error message
+      return
+    }
+
+    setTimeout(() => { // eslint-disable-line no-undef
+      const error = new Error(`Browser error: ${data.message}`)
+
+      if (data.trace) {
+        const errorTrace = error.trace
+
+        error.trace = `${data.trace}${errorTrace}`
+      }
+
+      throw error
+    }, 0)
+  }
+
+  async stop() {
+    this.systemTestHttpServer?.close()
+    this.wss?.close()
+    await this.driver.quit()
+  }
+
+  async driverVisit(path) {
+    const url = `${this.currentUrl}${path}`
+
+    await this.driver.get(url)
+  }
+
+  async takeScreenshot() {
+    const basePath = await fs.realpath(`${__dirname}/../..`) // eslint-disable-line no-undef
+    const path = `${basePath}/tmp/screenshots`
+
+    await fs.mkdir(path, {recursive: true})
+
+    const imageContent = await this.driver.takeScreenshot()
+    const now = new Date()
+    const screenshotPath = `${path}/${moment(now).format("YYYY-MM-DD-HH-MM-SS")}.png`
+    const htmlPath = `${path}/${moment(now).format("YYYY-MM-DD-HH-MM-SS")}.html`
+    const html = await this.getHTML()
+    const htmlPretty = prettify(html)
+
+    await fs.writeFile(screenshotPath, imageContent, "base64")
+    await fs.writeFile(htmlPath, htmlPretty)
+
+    console.log("Screenshot:", screenshotPath)
+    console.log("HTML:", htmlPath)
+  }
+
+  async visit(path) {
+    await this.communicator.sendCommand({type: "visit", path})
+  }
+}