emoji-picker-element/test/memory/test.js

import puppeteer from 'puppeteer'
import prettyBytes from 'pretty-bytes'
import { markdownTable as table } from 'markdown-table'
import fetch from 'node-fetch'

const scenarios = [
  'blank',
  'picker',
  'compact',
  'full'
]

async function waitForServerReady () {
  while (true) {
    try {
      const resp = await fetch('http://localhost:3000')
      if (resp.status === 200) {
        break
      }
    } catch (err) {}
    console.log('Waiting for localhost:3000 to be available')
    await new Promise(resolve => setTimeout(resolve, 1000))
  }
}

async function measureMemory (scenario) {
  const browser = await puppeteer.launch({
    headless: false // required for performance.measureUserAgentSpecificMemory()
  })
  const page = await browser.newPage()
  await page.goto(`http://localhost:3000?${scenario}=1`, {
    waitUntil: 'networkidle0'
  })
  const bytes = await page.evaluate(async () => {
    // Taking two measurements and returning the second seems more accurate for some reason
    await performance.measureUserAgentSpecificMemory()
    return (await performance.measureUserAgentSpecificMemory()).bytes
  })
  await browser.close()
  return bytes
}

function printBytes (bytes) {
  return `${prettyBytes(bytes)} (${bytes})`
}

async function main () {
  await waitForServerReady()
  const results = []
  for (const scenario of scenarios) {
    const bytes = await measureMemory(scenario)
    const relativeBytes = results.length ? (bytes - results[0].bytes) : 0
    results.push({
      scenario,
      bytes,
      relativeBytes
    })
  }
  console.log(table([
    ['Scenario', 'Bytes', 'Relative to blank page'],
    ...results.map(({ scenario, bytes, relativeBytes }) => (
      [scenario, printBytes(bytes), printBytes(relativeBytes)]
    ))
  ]))
}

main().catch(err => {
  console.error(err)
  process.exit(1)
})