openmct/e2e/tests/visual/default.visual.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.
 *****************************************************************************/

/*
Collection of Visual Tests set to run in a default context. The tests within this suite
are only meant to run against openmct started by `npm start` within the
`./e2e/playwright-visual.config.js` file.

These should only use functional expect statements to verify assumptions about the state
in a test and not for functional verification of correctness. Visual tests are not supposed
to "fail" on assertions. Instead, they should be used to detect changes between builds or branches.

Note: Larger testsuite sizes are OK due to the setup time associated with these tests.
*/

const { test, expect } = require('../../pluginFixtures');
const percySnapshot = require('@percy/playwright');
const { createDomainObjectWithDefaults } = require('../../appActions');

test.describe('Visual - Default', () => {
  test.beforeEach(async ({ page }) => {
    //Go to baseURL and Hide Tree
    await page.goto('./#/browse/mine?hideTree=true', { waitUntil: 'networkidle' });
  });
  test.use({
    clockOptions: {
      now: 0, //Set browser clock to UNIX Epoch
      shouldAdvanceTime: false //Don't advance the clock
    }
  });

  test('Visual - Root and About', async ({ page, theme }) => {
    // Verify that Create button is actionable
    await expect(page.locator('button:has-text("Create")')).toBeEnabled();

    // Take a snapshot of the Dashboard
    await percySnapshot(page, `Root (theme: '${theme}')`);

    // Click About button
    await page.click('.l-shell__app-logo');

    // Modify the Build information in 'about' to be consistent run-over-run
    const versionInformationLocator = page.locator('ul.t-info.l-info.s-info').first();
    await expect(versionInformationLocator).toBeEnabled();
    await versionInformationLocator.evaluate(
      (node) =>
        (node.innerHTML =
          '<li>Version: visual-snapshot</li> <li>Build Date: Mon Nov 15 2021 08:07:51 GMT-0800 (Pacific Standard Time)</li> <li>Revision: 93049cdbc6c047697ca204893db9603b864b8c9f</li> <li>Branch: master</li>')
    );

    // Take a snapshot of the About modal
    await percySnapshot(page, `About (theme: '${theme}')`);
  });

  test('Visual - Default Condition Set @unstable', async ({ page, theme }) => {
    await createDomainObjectWithDefaults(page, { type: 'Condition Set' });

    // Take a snapshot of the newly created Condition Set object
    await percySnapshot(page, `Default Condition Set (theme: '${theme}')`);
  });

  test('Visual - Default Condition Widget @unstable', async ({ page, theme }) => {
    test.info().annotations.push({
      type: 'issue',
      description: 'https://github.com/nasa/openmct/issues/5349'
    });

    await createDomainObjectWithDefaults(page, { type: 'Condition Widget' });

    // Take a snapshot of the newly created Condition Widget object
    await percySnapshot(page, `Default Condition Widget (theme: '${theme}')`);
  });

  test('Visual - Time Conductor start time is less than end time', async ({ page, theme }) => {
    const year = new Date().getFullYear();

    let startDate = 'xxxx-01-01 01:00:00.000Z';
    startDate = year + startDate.substring(4);

    let endDate = 'xxxx-01-01 02:00:00.000Z';
    endDate = year + endDate.substring(4);

    await page.locator('input[type="text"]').nth(1).fill(endDate.toString());
    await page.locator('input[type="text"]').first().fill(startDate.toString());

    //  verify no error msg
    await percySnapshot(page, `Default Time conductor (theme: '${theme}')`);

    startDate = year + 1 + startDate.substring(4);
    await page.locator('input[type="text"]').first().fill(startDate.toString());
    await page.locator('input[type="text"]').nth(1).click();

    //  verify error msg for start time (unable to capture snapshot of popup)
    await percySnapshot(page, `Start time error (theme: '${theme}')`);

    startDate = year - 1 + startDate.substring(4);
    await page.locator('input[type="text"]').first().fill(startDate.toString());

    endDate = year - 2 + endDate.substring(4);
    await page.locator('input[type="text"]').nth(1).fill(endDate.toString());

    await page.locator('input[type="text"]').first().click();

    //  verify error msg for end time (unable to capture snapshot of popup)
    await percySnapshot(page, `End time error (theme: '${theme}')`);
  });

  test('Visual - Sine Wave Generator Form', async ({ page, theme }) => {
    //Click the Create button
    await page.click('button:has-text("Create")');

    // Click text=Sine Wave Generator
    await page.click('text=Sine Wave Generator');

    await percySnapshot(page, `Default Sine Wave Generator Form (theme: '${theme}')`);

    await page.locator('.field.control.l-input-sm input').first().click();
    await page.locator('.field.control.l-input-sm input').first().fill('');

    // Validate red x mark
    await percySnapshot(page, `removed amplitude property value (theme: '${theme}')`);
  });

  test('Visual - Save Successful Banner @unstable', async ({ page, theme }) => {
    await createDomainObjectWithDefaults(page, { type: 'Timer' });

    await page.locator('.c-message-banner__message').hover({ trial: true });
    await percySnapshot(page, `Banner message shown (theme: '${theme}')`);

    //Wait until Save Banner is gone
    await page.locator('.c-message-banner__close-button').click();
    await page.waitForSelector('.c-message-banner__message', { state: 'detached' });
    await percySnapshot(page, `Banner message gone (theme: '${theme}')`);
  });

  test('Visual - Display Layout Icon is correct', async ({ page, theme }) => {
    //Click the Create button
    await page.click('button:has-text("Create")');

    //Hover on Display Layout option.
    await page.locator('text=Display Layout').hover();
    await percySnapshot(page, `Display Layout Create Menu (theme: '${theme}')`);
  });

  test('Visual - Default Gauge is correct @unstable', async ({ page, theme }) => {
    await createDomainObjectWithDefaults(page, { type: 'Gauge' });

    // Take a snapshot of the newly created Gauge object
    await percySnapshot(page, `Default Gauge (theme: '${theme}')`);
  });
});