@zendesk/react-measure-timing-hooks/cjs/v3/firstCPUIdle.test.js

react hooks for measuring time to interactive and time to render of components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
require("./testUtility/asciiTimelineSerializer");
const vitest_1 = require("vitest");
const firstCPUIdle_1 = require("./firstCPUIdle");
const makeTimeline_1 = require("./testUtility/makeTimeline");
function getFirstCPUIdleEntry({ fmpTime, entries, }) {
    const processor = (0, firstCPUIdle_1.createCPUIdleProcessor)(fmpTime ?? 0);
    let firstCPUIdle;
    for (const entry of entries) {
        const result = processor.processPerformanceEntry(entry);
        if (result !== undefined) {
            firstCPUIdle = result;
        }
    }
    return firstCPUIdle;
}
(0, vitest_1.describe)('createCPUIdleProcessor', () => {
    (0, vitest_1.it)('No long tasks after FMP, FirstCPUIdle immediately after FMP + quiet window', () => {
        const { entries, fmpTime } = (0, makeTimeline_1.makeEntries)([
            (0, makeTimeline_1.Idle)(200),
            makeTimeline_1.FMP,
            (0, makeTimeline_1.Idle)(4_000),
            (0, makeTimeline_1.LongTask)(400),
        ]);
        (0, vitest_1.expect)(entries).toMatchInlineSnapshot(`
      events    | fmp           task(400)
      timeline  | |-<⋯ +4000 ⋯>-[++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++]
      time (ms) | 200           4200
    `);
        const firstCPUIdle = getFirstCPUIdleEntry({ fmpTime, entries });
        (0, vitest_1.expect)(firstCPUIdle).toEqual({ firstCpuIdle: 200 });
    });
    (0, vitest_1.it)('One light cluster after FMP, FirstCPUIdle at FMP', () => {
        const { entries, fmpTime } = (0, makeTimeline_1.makeEntries)([
            (0, makeTimeline_1.Idle)(200),
            makeTimeline_1.FMP,
            (0, makeTimeline_1.Idle)(100),
            (0, makeTimeline_1.LongTask)(50),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(50),
            (0, makeTimeline_1.LongTask)(50),
            (0, makeTimeline_1.Idle)(2_550),
            makeTimeline_1.Check,
        ]);
        (0, vitest_1.expect)(entries).toMatchInlineSnapshot(`
      events    | fmp                 task(50)            task(50)   task(50)               check
      timeline  | |-------------------[++++++++]----------[++++++++]-[++++++++]-<⋯ +2550 ⋯>-|
      time (ms) | 200                 300                 400        450                    3050
    `);
        const firstCPUIdle = getFirstCPUIdleEntry({ fmpTime, entries });
        (0, vitest_1.expect)(firstCPUIdle).toEqual({ firstCpuIdle: 200 });
    });
    (0, vitest_1.it)('One heavy cluster after FMP, FirstCPUIdle after the cluster', () => {
        const { entries, fmpTime } = (0, makeTimeline_1.makeEntries)([
            (0, makeTimeline_1.Idle)(200),
            makeTimeline_1.FMP,
            (0, makeTimeline_1.Idle)(100),
            (0, makeTimeline_1.LongTask)(50),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(200),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(50),
            (0, makeTimeline_1.Idle)(2_500),
            makeTimeline_1.Check,
        ]);
        (0, vitest_1.expect)(entries).toMatchInlineSnapshot(`
      events    | fmp         task(50)    task(200)                      task(50)            check
      timeline  | |-----------[++++]------[+++++++++++++++++++++++]------[++++]-<⋯ +2500 ⋯>--|
      time (ms) | 200         300         400                            650                 3200
    `);
        const firstCPUIdle = getFirstCPUIdleEntry({ fmpTime, entries });
        (0, vitest_1.expect)(firstCPUIdle).toEqual({ firstCpuIdle: 700 });
    });
    (0, vitest_1.it)('Multiple heavy clusters, FirstCPUIdle updated to end of last cluster', () => {
        const { entries, fmpTime } = (0, makeTimeline_1.makeEntries)([
            (0, makeTimeline_1.Idle)(200),
            makeTimeline_1.FMP,
            (0, makeTimeline_1.Idle)(100),
            (0, makeTimeline_1.LongTask)(200),
            (0, makeTimeline_1.Idle)(400),
            (0, makeTimeline_1.LongTask)(200),
            (0, makeTimeline_1.Idle)(400),
            (0, makeTimeline_1.LongTask)(200),
            (0, makeTimeline_1.Idle)(2_100),
            makeTimeline_1.Check,
        ]);
        (0, vitest_1.expect)(entries).toMatchInlineSnapshot(`
      events    | fmp task(200)                  task(200)                  task(200)              check
      timeline  | |---[+++++++]------------------[+++++++]------------------[+++++++]-<⋯ +2100 ⋯>--|
      time (ms) | 200 300                        900                        1500                   3800
    `);
        const firstCPUIdle = getFirstCPUIdleEntry({ fmpTime, entries });
        const lastLongTask = entries.at(-2);
        const expectedResult = lastLongTask.startTime + lastLongTask.duration;
        (0, vitest_1.expect)(firstCPUIdle).toEqual({ firstCpuIdle: expectedResult });
    });
    (0, vitest_1.it)('Checking before the quiet window has passed - no long tasks processed, FirstCPUIdle not found', () => {
        const { entries, fmpTime } = (0, makeTimeline_1.makeEntries)([(0, makeTimeline_1.Idle)(200), makeTimeline_1.FMP, (0, makeTimeline_1.Idle)(200), makeTimeline_1.Check]);
        (0, vitest_1.expect)(entries).toMatchInlineSnapshot(`
      events    | fmp          check
      timeline  | |-<⋯ +200 ⋯>-|
      time (ms) | 200          400
    `);
        const firstCPUIdle = getFirstCPUIdleEntry({ fmpTime, entries });
        (0, vitest_1.expect)(firstCPUIdle).toEqual({ nextCheck: 2_400 });
    });
    (0, vitest_1.it)('One heavy cluster, followed by two light, value is after 1st heavy cluster', () => {
        const { entries, fmpTime } = (0, makeTimeline_1.makeEntries)([
            (0, makeTimeline_1.Idle)(200),
            makeTimeline_1.FMP,
            (0, makeTimeline_1.Idle)(100),
            (0, makeTimeline_1.LongTask)(200),
            (0, makeTimeline_1.Idle)(100),
            (0, makeTimeline_1.LongTask)(100),
            (0, makeTimeline_1.Idle)(1_000),
            (0, makeTimeline_1.LongTask)(200),
            (0, makeTimeline_1.Idle)(1_000),
            (0, makeTimeline_1.LongTask)(200),
            (0, makeTimeline_1.Idle)(1_550),
            makeTimeline_1.Check,
        ]);
        (0, vitest_1.expect)(entries).toMatchInlineSnapshot(`
      events    | fmp  task(200)       task(100)          task(200)               task(200)               check
      timeline  | |----[+++++++++]-----[+++]-<⋯ +1000 ⋯>--[+++++++++]-<⋯ +1000 ⋯>-[+++++++++]-<⋯ +1550 ⋯>-|
      time (ms) | 200  300             600                1700                    2900                    4650
    `);
        const firstCPUIdle = getFirstCPUIdleEntry({ fmpTime, entries });
        const lastHeavyClusterLongTask = entries.at(2);
        const expectedResult = lastHeavyClusterLongTask.startTime + lastHeavyClusterLongTask.duration;
        (0, vitest_1.expect)(firstCPUIdle).toEqual({ firstCpuIdle: expectedResult });
    });
    (0, vitest_1.it)('Continuous heavy clusters', () => {
        const { entries, fmpTime } = (0, makeTimeline_1.makeEntries)([
            makeTimeline_1.FMP,
            (0, makeTimeline_1.Idle)(200),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(300),
            (0, makeTimeline_1.Idle)(50),
            makeTimeline_1.Check,
        ]);
        (0, vitest_1.expect)(entries).toMatchInlineSnapshot(`
      events    |   task(300) task(300) task(300) task(300) task(300) task(300) task(300) task(300)
      events    | fmp    task(300) task(300) task(300) task(300) task(300) task(300) task(300) check
      timeline  | |-[++]-[++]-[++]-[++]-[++]-[++]-[++]-[++]-[++]-[++]-[++]-[++]-[++]-[++]-[++]-|-
      time (ms) | 0 200  550  900  1250 1600 1950 2300 2650 3000 3350 3700 4050 4400 4750 5100 5450
    `);
        const firstCPUIdle = getFirstCPUIdleEntry({ fmpTime, entries });
        (0, vitest_1.expect)(firstCPUIdle).toEqual({ nextCheck: 7_450 });
    });
    (0, vitest_1.it)('Light cluster followed by a heavy cluster a second later, FirstCPUIdle updated', () => {
        const { entries, fmpTime } = (0, makeTimeline_1.makeEntries)([
            (0, makeTimeline_1.Idle)(200),
            makeTimeline_1.FMP,
            (0, makeTimeline_1.LongTask)(50),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(50),
            (0, makeTimeline_1.LongTask)(50),
            (0, makeTimeline_1.Idle)(1_050),
            (0, makeTimeline_1.LongTask)(50),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(50),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(200),
            (0, makeTimeline_1.Idle)(50),
            (0, makeTimeline_1.LongTask)(200),
            (0, makeTimeline_1.Idle)(2_050),
            makeTimeline_1.Check,
        ]);
        (0, vitest_1.expect)(entries).toMatchInlineSnapshot(`
      events    | task(50)  task(50)            task(50)
      events    | fmp  task(50)            task(50)   task(200)       task(200)                  check
      timeline  | [+]--[+]--[+]-<⋯ +1050 ⋯>[+]--[+]---[+++++++++++]---[+++++++++++]-<⋯ +2050 ⋯>--|
      time (ms) | 200  300  350            1450 1550  1650            1900                       4150
    `);
        const firstCPUIdle = getFirstCPUIdleEntry({ fmpTime, entries });
        const lastLongTask = entries.at(-2);
        const expectedResult = lastLongTask.startTime + lastLongTask.duration;
        (0, vitest_1.expect)(firstCPUIdle).toEqual({ firstCpuIdle: expectedResult });
    });
    (0, vitest_1.it)('A long task overlaps FMP, we consider FirstCPUIdle after the long task', () => {
        const { entries, fmpTime } = (0, makeTimeline_1.makeEntries)([
            (0, makeTimeline_1.Idle)(200),
            makeTimeline_1.FMP,
            (0, makeTimeline_1.LongTask)(110, { start: 150 }), // Overlaps with FMP
            (0, makeTimeline_1.Idle)(2_300),
            makeTimeline_1.Check,
        ]);
        (0, vitest_1.expect)(entries).toMatchInlineSnapshot(`
      events    |
      events    | task(110)                fmp                                        check
      timeline  | [+++++++++++++++++++++++++++++++++++++++++++++++++++++]-<⋯ +2240 ⋯>-|
      timeline  | -------------------------|-<⋯ +2300 ⋯>-------------------------------
      time (ms) | 150                      200                                        2500
    `);
        const firstCPUIdle = getFirstCPUIdleEntry({ fmpTime, entries });
        const lastLongTask = entries.at(-2);
        const expectedResult = lastLongTask.startTime + lastLongTask.duration;
        (0, vitest_1.expect)(firstCPUIdle).toEqual({ firstCpuIdle: expectedResult });
    });
});
//# sourceMappingURL=firstCPUIdle.test.js.map