iwmlib/test/tests/eventlistener/index.js

/* eslint no-console: ["error", { allow: ["log", "warn", "error"] }] */

const puppeteer = require('puppeteer')
const fse = require('fs-extra')
const _ = require('lodash')

const CYCLES = 5000
const ID = 'index'

;(async () => {
    const browser = await puppeteer.launch({
        headless: true,
        args: ['--disable-web-security'],
        defaultViewport: {
            width: 1920,
            height: 1280,
            hasTouch: false
        }
    })
    const page = (await browser.pages())[0]
    await page.goto(`file://${__dirname}/${ID}.html`)

    const metrics = []

    for (let i = 0; i < CYCLES; i++) {
        console.log(`Cycle ${i + 1} of ${CYCLES}`)

        metrics.push(await page.metrics())

        await page.click('#add') // button 1
        for (let j = 0; j < 5; j++) {
            await page.click('#contentRandom') // button in card
        }
        await page.click('#delete') // button 2
    }

    await writeMetrics(metrics)

    await page.setViewport({
        width: 1920,
        height: 1280
    })

    await page.goto(`file://${__dirname}/../../chart/index.html`)
    await page.pdf({ path: `${__dirname}/../../temp/${ID}_${Date.now()}.pdf`, scale: 0.5, landscape: true })

    await browser.close()
})()

async function writeMetrics(metrics) {
    const first = metrics[0].Timestamp
    const timestamp = metrics.map(it => _.round(it.Timestamp - first, 1))
    const documents = metrics.map(it => it.Documents)
    const frames = metrics.map(it => it.Frames)
    const jsEventListeners = metrics.map(it => it.JSEventListeners)
    const nodes = metrics.map(it => it.Nodes)
    const layoutCount = metrics.map(it => it.LayoutCount)
    const recalcStyleCount = metrics.map(it => it.RecalcStyleCount)
    const layoutDuration = metrics.map(it => it.LayoutDuration)
    const recalcStyleDuration = metrics.map(it => it.RecalcStyleDuration)
    const scriptDuration = metrics.map(it => it.ScriptDuration)
    const taskDuration = metrics.map(it => it.TaskDuration)
    const jsHeapUsedSize = metrics.map(it => it.JSHeapUsedSize / 1024 / 1024)
    const jsHeapTotalSize = metrics.map(it => it.JSHeapTotalSize / 1024 / 1024)

    const labels = `[${timestamp.join(', ')}]`

    await fse.outputFile(
        `${__dirname}/../../chart/data.js`,
        `
        var data = [{
            labels: ${labels},
            datasets: [{
                label: 'Documents',
                backgroundColor: 'rgba(205, 37, 44, 0.2)',
                borderColor: 'rgba(205, 37, 44, 1.00)',
                data: [${documents.join(', ')}]
            }, {
                label: 'Frames',
                backgroundColor: 'rgba(239, 116, 55, 0.2)',
                borderColor: 'rgba(239, 116, 55, 1.00)',
                data: [${frames.join(', ')}]
            }]
        }, {
            labels: ${labels},
            datasets: [{
                label: 'JSEventListeners',
                backgroundColor: 'rgba(248, 189, 64, 0.2)',
                borderColor: 'rgba(248, 189, 64, 1.00)',
                data: [${jsEventListeners.join(', ')}]
            }, {
                label: 'Nodes',
                backgroundColor: 'rgba(181, 202, 62, 0.2)',
                borderColor: 'rgba(181, 202, 62, 1.00)',
                data: [${nodes.join(', ')}]
            }, {
                label: 'LayoutCount',
                backgroundColor: 'rgba(50, 184, 79, 0.2)',
                borderColor: 'rgba(50, 184, 79, 1.00)',
                data: [${layoutCount.join(', ')}]
            }, {
                label: 'RecalcStyleCount',
                backgroundColor: 'rgba(37, 180, 171, 0.2)',
                borderColor: 'rgba(37, 180, 171, 1.00)',
                data: [${recalcStyleCount.join(', ')}]
            }]
        }, {
            labels: ${labels},
            datasets: [{
                label: 'LayoutDuration',
                backgroundColor: 'rgba(45, 134, 203, 0.2)',
                borderColor: 'rgba(45, 134, 203, 1.00)',
                data: [${layoutDuration.join(', ')}]
            }, {
                label: 'RecalcStyleDuration',
                backgroundColor: 'rgba(100, 58, 195, 0.2)',
                borderColor: 'rgba(100, 58, 195, 1.00)',
                data: [${recalcStyleDuration.join(', ')}]
            }, {
                label: 'ScriptDuration',
                backgroundColor: 'rgba(161, 59, 195, 0.2)',
                borderColor: 'rgba(161, 59, 195, 1.00)',
                data: [${scriptDuration.join(', ')}]
            }, {
                label: 'TaksDuration',
                backgroundColor: 'rgba(221, 65, 150, 0.2)',
                borderColor: 'rgba(221, 65, 150, 1.00)',
                data: [${taskDuration.join(', ')}]
            }]
        }, {
            labels: ${labels},
            datasets: [{
                label: 'JSHeapUsedSize',
                backgroundColor: 'rgba(163, 104, 70, 0.2)',
                borderColor: 'rgba(163, 104, 70, 1.00)',
                data: [${jsHeapUsedSize.join(', ')}]
            }, {
                label: 'JSHeapTotalSize',
                backgroundColor: 'rgba(118, 118, 118, 0.2)',
                borderColor: 'rgba(118, 118, 118, 1.00)',
                data: [${jsHeapTotalSize.join(', ')}]
            }]
        }]
    `
    )
}