openmct/e2e/tests/functional/example/generator/sineWaveLimitProvider.e2e.spec.js

/*****************************************************************************
 * Open MCT, Copyright (c) 2014-2024, 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 tests which verify the basic operations surrounding conditionSets.
*/

import { expect, test } from '../../../../baseFixtures.js';

test.describe('Sine Wave Generator', () => {
  test('Create new Sine Wave Generator Object and validate create Form Logic', async ({
    page,
    browserName
  }) => {
    // eslint-disable-next-line playwright/no-skipped-test
    test.skip(browserName === 'firefox', 'This test needs to be updated to work with firefox');

    //Go to baseURL
    await page.goto('./', { waitUntil: 'domcontentloaded' });

    //Click the Create button
    await page.getByRole('button', { name: 'Create' }).click();

    // Click Sine Wave Generator
    await page.getByRole('menuitem', { name: 'Sine Wave Generator' }).click();

    // Verify that the each required field has required indicator
    // Title
    await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/req/);

    // Verify that the Notes row does not have a required indicator
    await expect(
      page.locator('.c-form__section div:nth-child(3) .form-row .c-form-row__state-indicator')
    ).not.toContain('.req');
    await page.locator('textarea[type="text"]').fill('Optional Note Text');

    // Period
    await expect(page.locator('div:nth-child(4) .c-form-row__state-indicator')).toHaveClass(/req/);

    // Amplitude
    await expect(page.locator('div:nth-child(5) .c-form-row__state-indicator')).toHaveClass(/req/);

    // Offset
    await expect(page.locator('div:nth-child(6) .c-form-row__state-indicator')).toHaveClass(/req/);

    // Data Rate
    await expect(page.locator('div:nth-child(7) .c-form-row__state-indicator')).toHaveClass(/req/);

    // Phase
    await expect(page.locator('div:nth-child(8) .c-form-row__state-indicator')).toHaveClass(/req/);

    // Randomness
    await expect(page.locator('div:nth-child(9) .c-form-row__state-indicator')).toHaveClass(/req/);

    // Verify that by removing value from required text field shows invalid indicator
    await page
      .locator(
        'text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]'
      )
      .fill('');
    await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/invalid/);

    // Verify that by adding value to empty required text field changes invalid to valid indicator
    await page
      .locator(
        'text=Properties Title Notes Period Amplitude Offset Data Rate (hz) Phase (radians) Ra >> input[type="text"]'
      )
      .fill('New Sine Wave Generator');
    await expect(page.locator('.c-form-row__state-indicator').first()).toHaveClass(/valid/);

    // Verify that by removing value from required number field shows invalid indicator
    await page.locator('.field.control.l-input-sm input').first().fill('');
    await expect(page.locator('div:nth-child(4) .c-form-row__state-indicator')).toHaveClass(
      /invalid/
    );

    // Verify that by adding value to empty required number field changes invalid to valid indicator
    await page.locator('.field.control.l-input-sm input').first().fill('3');
    await expect(page.locator('div:nth-child(4) .c-form-row__state-indicator')).toHaveClass(
      /valid/
    );

    // Verify that can change value of number field by up/down arrows keys
    // Click .field.control.l-input-sm input >> nth=0
    await page.locator('.field.control.l-input-sm input').first().click();
    // Press ArrowUp 3 times to change value from 3 to 6
    await page.locator('.field.control.l-input-sm input').first().press('ArrowUp');
    await page.locator('.field.control.l-input-sm input').first().press('ArrowUp');
    await page.locator('.field.control.l-input-sm input').first().press('ArrowUp');

    const value = page.locator('.field.control.l-input-sm input').first();
    await expect(value).toHaveValue('6');

    //Click save button
    await page.getByLabel('Save').click();

    // Verify that the Sine Wave Generator is displayed and correct
    // Verify object properties
    await expect(page.locator('.l-browse-bar__object-name')).toContainText(
      'New Sine Wave Generator'
    );

    // Verify canvas rendered and can be interacted with
    await page
      .locator('canvas')
      .nth(1)
      .click({
        position: {
          x: 341,
          y: 28
        }
      });

    // Verify that where we click on canvas shows the number we clicked on
    // Note that any number will do, we just care that a number exists
    await expect(page.locator('.value-to-display-nearestValue')).toContainText(
      /[+-]?([0-9]*[.])?[0-9]+/
    );
  });
});