[e2e] Refactor and document our extension of existing Playwright API and RFE features (#5537)

e2e/tests/framework/baseFixtures.e2e.spec.js

@@ -0,0 +1,55 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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 testing our use of the playwright framework as it
+relates to how we've extended it (i.e. ./e2e/baseFixtures.js) and assumptions made in our dev environment
+(app.js and ./e2e/webpack-dev-middleware.js)
+*/
+
+const { test } = require('../../baseFixtures.js');
+
+test.describe('baseFixtures tests', () => {
+    test('Verify that tests fail if console.error is thrown @framework', async ({ page }) => {
+        test.fail();
+        //Go to baseURL
+        await page.goto('./', { waitUntil: 'networkidle' });
+
+        //Verify that ../fixtures.js detects console log errors
+        await Promise.all([
+            page.evaluate(() => console.error('This should result in a failure')),
+            page.waitForEvent('console') // always wait for the event to happen while triggering it!
+        ]);
+
+    });
+    test('Verify that tests pass if console.warn is thrown @framework', async ({ page }) => {
+        //Go to baseURL
+        await page.goto('./', { waitUntil: 'networkidle' });
+
+        //Verify that ../fixtures.js detects console log errors
+        await Promise.all([
+            page.evaluate(() => console.warn('This should result in a pass')),
+            page.waitForEvent('console') // always wait for the event to happen while triggering it!
+        ]);
+
+    });
+});

e2e/tests/framework/exampleTemplate.e2e.spec.js

@@ -0,0 +1,124 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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 template is to be used when creating new testsuites. It will be kept up to date with the latest improvements
+* made by the Open MCT team. It will also follow our best pratices as those evolve. Please use this structure as a _reference_ and clear
+* or update any references when creating a new test suite!
+*
+* To illustrate current best practices, we've included a mocked up test suite for Renaming a Timer domain object. In this example
+* this test suite should be cloned and renamed as /e2e/tests/plugins/timer/renameTimer.e2e.spec.js
+*
+* Demonstrated:
+* - Using appActions to leverage existing functions
+* - Structure
+* - @unstable annotation
+* - await, expect, test, describe syntax
+* - Writing a custom function for a test suite
+* - Test stub for unfinished test coverage (test.fixme)
+*
+* The structure should follow
+* 1. imports
+* 2. test.describe()
+* 3. -> test1
+*    -> test2
+*    -> test3(stub)
+* 4. Any custom functions
+*
+*/
+
+//Structure: Some standard Imports. Please update the required pathing
+const { test, expect } = require('../../baseFixtures');
+const { createDomainObjectWithDefaults } = require('../../appActions');
+
+// Structure: Try to keep a single describe block per logical groups of tests. If your test runtime exceeds 5 minutes or 500 lines, it's likely that it will need to be split.
+// Annotations: Please use the @unstable tag so that our automation can pick it up as a part of our test promotion pipeline.
+test.describe('Renaming Timer Object @unstable', () => {
+    //Create a testcase name which will be obvious when it fails in CI
+    test('Can create a new Timer object and rename it from actions Menu', async ({ page }) => {
+        //Open a browser, navigate to the main page, and wait until all networkevents to resolve
+        await page.goto('./', { waitUntil: 'networkidle' });
+        //We provide some helper functions in appActions like createDomainObjectWithDefaults. This example will create a Timer object
+        await createDomainObjectWithDefaults(page, 'Timer');
+        //Assert the object to be created and check it's name in the title
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Timer');
+
+        const newObjectName = "Renamed Timer";
+        //We've created an example of a shared function which pases the page and newObjectName values
+        await renameObjectFrom3DotMenu(page, newObjectName);
+
+        //Assert that the name has changed in the browser bar to the value we assigned above
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText(newObjectName);
+
+    });
+    test('An existing Timer object can be renamed twice', async ({ page }) => {
+        //Open a browser, navigate to the main page, and wait until all networkevents to resolve
+        await page.goto('./', { waitUntil: 'networkidle' });
+        //We provide some helper functions in appActions like createDomainObjectWithDefaults. This example will create a Timer object
+        await createDomainObjectWithDefaults(page, 'Timer');
+        //Expect the object to be created and check it's name in the title
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Timer');
+
+        const newObjectName = "Renamed Timer";
+        const newObjectName2 = "Re-Renamed Timer";
+        //We've created an example of a shared function which pases the page and newObjectName values
+        await renameObjectFrom3DotMenu(page, newObjectName);
+
+        //Assert that the name has changed in the browser bar to the value we assigned above
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText(newObjectName);
+
+        await renameObjectFrom3DotMenu(page, newObjectName2);
+
+        //Assert that the name has changed in the browser bar to the second value
+        await expect(page.locator('.l-browse-bar__object-name')).toContainText(newObjectName2);
+    });
+
+    //If you run out of time to write new tests, please stub in the missing tests in place with a test.fixme and BDD-style test steps. Someone will carry the baton!
+    test.fixme('Can Rename Timer Object from Tree', async ({ page }) => {
+        //Create a new object
+        //Copy this object
+        //Delete first object
+        //Expect copied object to persist
+    });
+});
+
+//Structure: custom functions should be declared last. We are leaning on JSDoc pretty heavily to describe functionality. It is not required, but heavily recommended.
+
+/**
+ * This is an example of a function which is shared between testcases in this test suite. When refactoring, we'll be looking
+ * for common functionality which makes sense to generalize for the entire test framework.
+ * @param {import('@playwright/test').Page} page
+ * @param {string} newNameForTimer New Name for object
+ */
+async function renameObjectFrom3DotMenu(page, newNameForTimer) {
+
+    // Click on 3 Dot Menu
+    await page.locator('button[title="More options"]').click();
+    // Click text=Edit Properties...
+    await page.locator('text=Edit Properties...').click();
+
+    // Rename the object with newNameForTimer variable which is passed into this function
+    await page.locator('text=Properties Title Notes >> input[type="text"]').fill(newNameForTimer);
+
+    // Click Ok button to Save
+    await page.locator('text=OK').click();
+}

e2e/tests/framework/generateVisualTestData.e2e.spec.js

@@ -0,0 +1,84 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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 generating LocalStorage via Session Storage to be used
+in some visual test suites like controlledClock.visual.spec.js. This suite should run to completion
+and generate an artifact named ./e2e/test-data/VisualTestData_storage.json . This will run
+on every Commit to ensure that this object still loads into tests correctly and will retain the
+.e2e.spec.js suffix.
+
+TODO: Provide additional validation of object properties as it grows.
+
+*/
+
+const { test, expect } = require('../../pluginFixtures.js');
+
+test('Generate Visual Test Data @localStorage', async ({ page, context, openmctConfig }) => {
+    const { myItemsFolderName } = openmctConfig;
+
+    //Go to baseURL
+    await page.goto('./', { waitUntil: 'networkidle' });
+
+    await page.locator('button:has-text("Create")').click();
+
+    // add overlay plot with defaults
+    await page.locator('li:has-text("Overlay Plot")').click();
+
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=OK').click(),
+        //Wait for Save Banner to appear1
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // save (exit edit mode)
+    await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
+    await page.locator('text=Save and Finish Editing').click();
+
+    // click create button
+    await page.locator('button:has-text("Create")').click();
+
+    // add sine wave generator with defaults
+    await page.locator('li:has-text("Sine Wave Generator")').click();
+
+    //Add a 5000 ms Delay
+    await page.locator('[aria-label="Loading Delay \\(ms\\)"]').fill('5000');
+
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=OK').click(),
+        //Wait for Save Banner to appear1
+        page.waitForSelector('.c-message-banner__message')
+    ]);
+
+    // focus the overlay plot
+    await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click();
+    await Promise.all([
+        page.waitForNavigation(),
+        page.locator('text=Unnamed Overlay Plot').first().click()
+    ]);
+
+    await expect(page.locator('.l-browse-bar__object-name')).toContainText('Unnamed Overlay Plot');
+    //Save localStorage for future test execution
+    await context.storageState({ path: './e2e/test-data/VisualTestData_storage.json' });
+});

e2e/tests/framework/pluginFixtures.e2e.spec.js

@@ -0,0 +1,45 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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 testing our use of our custom fixtures to verify
+that they are working as expected.
+*/
+
+const { test, expect } = require('../../pluginFixtures.js');
+
+test.describe('pluginFixtures tests', () => {
+    test.use({ domainObjectName: 'Timer' });
+    let timerUUID;
+
+    test('Creates a timer object @framework @unstable', ({ domainObject }) => {
+        const { uuid } = domainObject;
+        const uuidRegexp = /[0-9a-f]{8}-[0-9a-f]{4}-4[0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}/;
+        expect(uuid).toMatch(uuidRegexp);
+        timerUUID = uuid;
+    });
+
+    test('Provides same uuid for subsequent uses of the same object @framework', ({ domainObject }) => {
+        const { uuid } = domainObject;
+        expect(uuid).toEqual(timerUUID);
+    });
+});

e2e/tests/framework/testData.e2e.spec.js

@@ -0,0 +1,36 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2022, 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 template is to be used when verifying Test Data files found in /e2e/test-data/
+*/
+
+const { test } = require('../../baseFixtures');
+
+test.describe('recycled_local_storage @localStorage', () => {
+    //We may want to do some additional level of verification of this file. For now, we just verify that it exists and can be used in a test suite.
+    test.use({ storageState: './e2e/test-data/recycled_local_storage.json' });
+    test('Can use recycled_local_storage file', async ({ page }) => {
+        await page.goto('./', { waitUntil: 'networkidle' });
+    });
+});
+