openmct/e2e/tests/performance/contract/imagery.contract.perf.spec.js

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2023, United States Government
 * as represented by the Administrator of the National Aeronautics and Space
 * Administration. All rights reserved.
 *
 * Open MCT is licensed under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * http://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * Open MCT includes source code licensed under additional open source
 * licenses. See the Open Source Licenses file (LICENSES.md) included with
 * this source code distribution or the Licensing information page available
 * at runtime from the About dialog for additional information.
 *****************************************************************************/

/*
This test suite is dedicated to performance tests to ensure that testability of performance
is not broken upstream on Open MCT. Any assumptions made downstream will be tested here

TODO:
 - Update resolution of performance config
 - Add Performance Observer on init to push all performance marks
 - Move client CDP connection to before or to a fixture
 -

*/

const { test, expect } = require('@playwright/test');

const filePath = 'e2e/test-data/PerformanceDisplayLayout.json';

test.describe('Performance tests', () => {
  test.beforeEach(async ({ page, browser }, testInfo) => {
    // Go to baseURL
    await page.goto('./', { waitUntil: 'networkidle' });

    // Click a:has-text("My Items")
    await page.locator('a:has-text("My Items")').click({
      button: 'right'
    });

    // Click text=Import from JSON
    await page.locator('text=Import from JSON').click();

    // Upload Performance Display Layout.json
    await page.setInputFiles('#fileElem', filePath);

    // Click text=OK
    await page.locator('button:has-text("OK")').click();

    await expect(
      page.locator('a:has-text("Performance Display Layout Display Layout")')
    ).toBeVisible();

    //Create a Chrome Performance Timeline trace to store as a test artifact
    console.log('\n==== Devtools: startTracing ====\n');
    await browser.startTracing(page, {
      path: `${testInfo.outputPath()}-trace.json`,
      screenshots: true
    });
  });
  test.afterEach(async ({ page, browser }) => {
    console.log('\n==== Devtools: stopTracing ====\n');
    await browser.stopTracing();

    /* Measurement Section
        / The following section includes a block of performance measurements.
        */
    //Get time difference between viewlarge actionability and evaluate time
    await page.evaluate(() =>
      window.performance.measure(
        'machine-time-difference',
        'viewlarge.start',
        'viewLarge.start.test'
      )
    );

    //Get StartTime
    const startTime = await page.evaluate(() => window.performance.timing.navigationStart);
    console.log('window.performance.timing.navigationStart', startTime);

    //Get All Performance Marks
    const getAllMarksJson = await page.evaluate(() =>
      JSON.stringify(window.performance.getEntriesByType('mark'))
    );
    const getAllMarks = JSON.parse(getAllMarksJson);
    console.log('window.performance.getEntriesByType("mark")', getAllMarks);

    //Get All Performance Measures
    const getAllMeasuresJson = await page.evaluate(() =>
      JSON.stringify(window.performance.getEntriesByType('measure'))
    );
    const getAllMeasures = JSON.parse(getAllMeasuresJson);
    console.log('window.performance.getEntriesByType("measure")', getAllMeasures);
  });
  /* The following test will navigate to a previously created Performance Display Layout and measure the
    /  following metrics:
    /  - ElementResourceTiming
    /  - Interaction Timing
    */
  test('Embedded View Large for Imagery is performant in Fixed Time', async ({ page, browser }) => {
    const client = await page.context().newCDPSession(page);
    // Tell the DevTools session to record performance metrics
    // https://chromedevtools.github.io/devtools-protocol/tot/Performance/#method-getMetrics
    await client.send('Performance.enable');
    // Go to baseURL
    await page.goto('./');

    // Search Available after Launch
    await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
    await page.evaluate(() => window.performance.mark('search-available'));
    // Fill Search input
    await page
      .locator('[aria-label="OpenMCT Search"] input[type="search"]')
      .fill('Performance Display Layout');
    await page.evaluate(() => window.performance.mark('search-entered'));
    //Search Result Appears and is clicked
    await Promise.all([
      page.waitForNavigation(),
      page.locator('a:has-text("Performance Display Layout")').first().click(),
      page.evaluate(() => window.performance.mark('click-search-result'))
    ]);

    //Time to Example Imagery Frame loads within Display Layout
    await page.waitForSelector('.c-imagery__main-image__bg', { state: 'visible' });
    //Time to Example Imagery object loads
    await page.waitForSelector('.c-imagery__main-image__background-image', { state: 'visible' });

    //Get background-image url from background-image css prop
    const backgroundImage = await page.locator('.c-imagery__main-image__background-image');
    let backgroundImageUrl = await backgroundImage.evaluate((el) => {
      return window
        .getComputedStyle(el)
        .getPropertyValue('background-image')
        .match(/url\(([^)]+)\)/)[1];
    });
    backgroundImageUrl = backgroundImageUrl.slice(1, -1); //forgive me, padre
    console.log('backgroundImageurl ' + backgroundImageUrl);

    //Get ResourceTiming of background-image jpg
    const resourceTimingJson = await page.evaluate(
      (bgImageUrl) => JSON.stringify(window.performance.getEntriesByName(bgImageUrl).pop()),
      backgroundImageUrl
    );
    console.log('resourceTimingJson ' + resourceTimingJson);

    //Open Large view
    await page.locator('button:has-text("Large View")').click(); //This action includes the performance.mark named 'viewLarge.start'
    await page.evaluate(() => window.performance.mark('viewLarge.start.test')); //This is a mark only to compare evaluate timing

    //Time to Imagery Rendered in Large Frame
    await page.waitForSelector('.c-imagery__main-image__bg', { state: 'visible' });
    await page.evaluate(() => window.performance.mark('background-image-frame'));

    //Time to Example Imagery object loads
    await page.waitForSelector('.c-imagery__main-image__background-image', { state: 'visible' });
    await page.evaluate(() => window.performance.mark('background-image-visible'));

    // Get Current number of images in thumbstrip
    await page.waitForSelector('.c-imagery__thumb');
    const thumbCount = await page.locator('.c-imagery__thumb').count();
    console.log('number of thumbs rendered ' + thumbCount);
    await page.locator('.c-imagery__thumb').last().click();

    //Get ResourceTiming of all jpg resources
    const resourceTimingJson2 = await page.evaluate(() =>
      JSON.stringify(window.performance.getEntriesByType('resource'))
    );
    const resourceTiming = JSON.parse(resourceTimingJson2);
    const jpgResourceTiming = resourceTiming.find((element) => element.name.includes('.jpg'));
    console.log('jpgResourceTiming ' + JSON.stringify(jpgResourceTiming));

    // Click Close Icon
    await page.locator('[aria-label="Close"]').click();
    await page.evaluate(() => window.performance.mark('view-large-close-button'));

    //await client.send('HeapProfiler.enable');
    await client.send('HeapProfiler.collectGarbage');

    let performanceMetrics = await client.send('Performance.getMetrics');
    console.log(performanceMetrics.metrics);
  });
});