diff options
author | Jamie V <jamie.j.vigliotta@nasa.gov> | 2022-09-21 01:43:48 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-09-21 01:43:48 +0300 |
commit | 9a727cac2e4a8c57bca6d12b81c364f45f61a758 (patch) | |
tree | 6ec75aa71f16242fdf508ba935aea0cf1cac02c3 /e2e | |
parent | be5472ebdbb5e2fb4cf7b1ceaff0b8d388a287cd (diff) |
[Notebook] Dropping item into "drop area" in notebook not working (#5791)
* notebook embed visual test initial
* waiting for createNewEmbed util function to finish before adding embed
* removing debug code
* adding unstable tag to visual test
* added e2e embed tests for existing and new entriesupdated some test utils as well
* removing test artifacts
* removing more test artifacts
* adding test data back in
* removing debug code
* adding back in test artifacts
* updated test I broke
* removing focused test
* removing unsed variable
* fix lint issues
* adding unstable tag for new e2e tests
Diffstat (limited to 'e2e')
-rw-r--r-- | e2e/appActions.js | 12 | ||||
-rw-r--r-- | e2e/helper/notebookUtils.js | 65 | ||||
-rw-r--r-- | e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js | 60 | ||||
-rw-r--r-- | e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js | 46 | ||||
-rw-r--r-- | e2e/tests/visual/notebook.visual.spec.js | 51 |
5 files changed, 186 insertions, 48 deletions
diff --git a/e2e/appActions.js b/e2e/appActions.js index 2cfecd1b1..3064ecf07 100644 --- a/e2e/appActions.js +++ b/e2e/appActions.js @@ -103,6 +103,17 @@ async function createDomainObjectWithDefaults(page, { type, name, parent = 'mine } /** + * @param {import('@playwright/test').Page} page + * @param {string} name + */ +async function expandTreePaneItemByName(page, name) { + const treePane = page.locator('#tree-pane'); + const treeItem = treePane.locator(`role=treeitem[expanded=false][name=/${name}/]`); + const expandTriangle = treeItem.locator('.c-disclosure-triangle'); + await expandTriangle.click(); +} + +/** * Create a Plan object from JSON with the provided options. * @param {import('@playwright/test').Page} page * @param {*} options @@ -313,6 +324,7 @@ async function setEndOffset(page, offset) { // eslint-disable-next-line no-undef module.exports = { createDomainObjectWithDefaults, + expandTreePaneItemByName, createPlanFromJSON, openObjectTreeContextMenu, getHashUrlToDomainObject, diff --git a/e2e/helper/notebookUtils.js b/e2e/helper/notebookUtils.js new file mode 100644 index 000000000..5fdd97363 --- /dev/null +++ b/e2e/helper/notebookUtils.js @@ -0,0 +1,65 @@ +/***************************************************************************** + * 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. + *****************************************************************************/ + +const NOTEBOOK_DROP_AREA = '.c-notebook__drag-area'; + +/** + * @param {import('@playwright/test').Page} page + */ +async function enterTextEntry(page, text) { + // Click .c-notebook__drag-area + await page.locator(NOTEBOOK_DROP_AREA).click(); + + // enter text + await page.locator('div.c-ne__text').click(); + await page.locator('div.c-ne__text').fill(text); + await page.locator('div.c-ne__text').press('Enter'); +} + +/** + * @param {import('@playwright/test').Page} page + */ +async function dragAndDropEmbed(page, myItemsFolderName) { + // Click button:has-text("Create") + await page.locator('button:has-text("Create")').click(); + // Click li:has-text("Sine Wave Generator") + await page.locator('li:has-text("Sine Wave Generator")').click(); + // Click form[name="mctForm"] >> text=My Items + await page.locator(`form[name="mctForm"] >> text=${myItemsFolderName}`).click(); + // Click text=OK + await page.locator('text=OK').click(); + // Click text=Open MCT My Items >> span >> nth=3 + await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click(); + // Click text=Unnamed CUSTOM_NAME + await Promise.all([ + page.waitForNavigation(), + page.locator('text=Unnamed CUSTOM_NAME').click() + ]); + + await page.dragAndDrop('text=UNNAMED SINE WAVE GENERATOR', NOTEBOOK_DROP_AREA); +} + +// eslint-disable-next-line no-undef +module.exports = { + enterTextEntry, + dragAndDropEmbed +}; diff --git a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js index 228e3fcd4..58e3e0f38 100644 --- a/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js +++ b/e2e/tests/functional/plugins/notebook/notebook.e2e.spec.js @@ -27,7 +27,8 @@ This test suite is dedicated to tests which verify the basic operations surround // FIXME: Remove this eslint exception once tests are implemented // eslint-disable-next-line no-unused-vars const { test, expect } = require('../../../../baseFixtures'); -const { createDomainObjectWithDefaults } = require('../../../../appActions'); +const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../../../appActions'); +const nbUtils = require('../../../../helper/notebookUtils'); test.describe('Notebook CRUD Operations', () => { test.fixme('Can create a Notebook Object', async ({ page }) => { @@ -209,13 +210,58 @@ test.describe('Notebook search tests', () => { test.describe('Notebook entry tests', () => { test.fixme('When a new entry is created, it should be focused', async ({ page }) => {}); - test.fixme('When a telemetry object is dropped into a notebook, a new entry is created and it should be focused', async ({ page }) => { - // Drag and drop any telmetry object on 'drop object' - // new entry gets created with telemtry object + test('When an object is dropped into a notebook, a new entry is created and it should be focused @unstable', async ({ page }) => { + await page.goto('./#/browse/mine', { waitUntil: 'networkidle' }); + + // Create Notebook + const notebook = await createDomainObjectWithDefaults(page, { + type: 'Notebook', + name: "Embed Test Notebook" + }); + // Create Overlay Plot + await createDomainObjectWithDefaults(page, { + type: 'Overlay Plot', + name: "Dropped Overlay Plot" + }); + + await expandTreePaneItemByName(page, 'My Items'); + + await page.goto(notebook.url); + await page.dragAndDrop('role=treeitem[name=/Dropped Overlay Plot/]', '.c-notebook__drag-area'); + + const embed = page.locator('.c-ne__embed__link'); + const embedName = await embed.textContent(); + + await expect(embed).toHaveClass(/icon-plot-overlay/); + expect(embedName).toBe('Dropped Overlay Plot'); }); - test.fixme('When a telemetry object is dropped into a notebooks existing entry, it should be focused', async ({ page }) => { - // Drag and drop any telemetry object onto existing entry - // Entry updated with object and snapshot + test('When an object is dropped into a notebooks existing entry, it should be focused @unstable', async ({ page }) => { + await page.goto('./#/browse/mine', { waitUntil: 'networkidle' }); + + // Create Notebook + const notebook = await createDomainObjectWithDefaults(page, { + type: 'Notebook', + name: "Embed Test Notebook" + }); + // Create Overlay Plot + await createDomainObjectWithDefaults(page, { + type: 'Overlay Plot', + name: "Dropped Overlay Plot" + }); + + await expandTreePaneItemByName(page, 'My Items'); + + await page.goto(notebook.url); + + await nbUtils.enterTextEntry(page, 'Entry to drop into'); + await page.dragAndDrop('role=treeitem[name=/Dropped Overlay Plot/]', 'text=Entry to drop into'); + + const existingEntry = page.locator('.c-ne__content', { has: page.locator('text="Entry to drop into"') }); + const embed = existingEntry.locator('.c-ne__embed__link'); + const embedName = await embed.textContent(); + + await expect(embed).toHaveClass(/icon-plot-overlay/); + expect(embedName).toBe('Dropped Overlay Plot'); }); test.fixme('new entries persist through navigation events without save', async ({ page }) => {}); test.fixme('previous and new entries can be deleted', async ({ page }) => {}); diff --git a/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js b/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js index 30720997e..8594f5866 100644 --- a/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js +++ b/e2e/tests/functional/plugins/notebook/restrictedNotebook.e2e.spec.js @@ -23,11 +23,11 @@ const { test, expect } = require('../../../../pluginFixtures'); const { openObjectTreeContextMenu, createDomainObjectWithDefaults } = require('../../../../appActions'); const path = require('path'); +const nbUtils = require('../../../../helper/notebookUtils'); const TEST_TEXT = 'Testing text for entries.'; const TEST_TEXT_NAME = 'Test Page'; const CUSTOM_NAME = 'CUSTOM_NAME'; -const NOTEBOOK_DROP_AREA = '.c-notebook__drag-area'; test.describe('Restricted Notebook', () => { let notebook; @@ -66,7 +66,7 @@ test.describe('Restricted Notebook', () => { test('Can be locked if at least one page has one entry @addInit', async ({ page }) => { - await enterTextEntry(page); + await nbUtils.enterTextEntry(page, TEST_TEXT); const commitButton = page.locator('button:has-text("Commit Entries")'); expect(await commitButton.count()).toEqual(1); @@ -78,7 +78,7 @@ test.describe('Restricted Notebook with at least one entry and with the page loc let notebook; test.beforeEach(async ({ page }) => { notebook = await startAndAddRestrictedNotebookObject(page); - await enterTextEntry(page); + await nbUtils.enterTextEntry(page, TEST_TEXT); await lockPage(page); // open sidebar @@ -121,7 +121,7 @@ test.describe('Restricted Notebook with at least one entry and with the page loc expect.soft(newPageCount).toEqual(1); // enter test text - await enterTextEntry(page); + await nbUtils.enterTextEntry(page, TEST_TEXT); // expect new page to be lockable const commitButton = page.locator('BUTTON:HAS-TEXT("COMMIT ENTRIES")'); @@ -148,7 +148,7 @@ test.describe('Restricted Notebook with a page locked and with an embed @addInit test.beforeEach(async ({ page, openmctConfig }) => { const { myItemsFolderName } = openmctConfig; await startAndAddRestrictedNotebookObject(page); - await dragAndDropEmbed(page, myItemsFolderName); + await nbUtils.dragAndDropEmbed(page, myItemsFolderName); }); test('Allows embeds to be deleted if page unlocked @addInit', async ({ page }) => { @@ -184,42 +184,6 @@ async function startAndAddRestrictedNotebookObject(page) { /** * @param {import('@playwright/test').Page} page */ -async function enterTextEntry(page) { - // Click .c-notebook__drag-area - await page.locator(NOTEBOOK_DROP_AREA).click(); - - // enter text - await page.locator('div.c-ne__text').click(); - await page.locator('div.c-ne__text').fill(TEST_TEXT); - await page.locator('div.c-ne__text').press('Enter'); -} - -/** - * @param {import('@playwright/test').Page} page - */ -async function dragAndDropEmbed(page, myItemsFolderName) { - // Click button:has-text("Create") - await page.locator('button:has-text("Create")').click(); - // Click li:has-text("Sine Wave Generator") - await page.locator('li:has-text("Sine Wave Generator")').click(); - // Click form[name="mctForm"] >> text=My Items - await page.locator(`form[name="mctForm"] >> text=${myItemsFolderName}`).click(); - // Click text=OK - await page.locator('text=OK').click(); - // Click text=Open MCT My Items >> span >> nth=3 - await page.locator(`text=Open MCT ${myItemsFolderName} >> span`).nth(3).click(); - // Click text=Unnamed CUSTOM_NAME - await Promise.all([ - page.waitForNavigation(), - page.locator('text=Unnamed CUSTOM_NAME').click() - ]); - - await page.dragAndDrop('text=UNNAMED SINE WAVE GENERATOR', NOTEBOOK_DROP_AREA); -} - -/** - * @param {import('@playwright/test').Page} page - */ async function lockPage(page) { const commitButton = page.locator('button:has-text("Commit Entries")'); await commitButton.click(); diff --git a/e2e/tests/visual/notebook.visual.spec.js b/e2e/tests/visual/notebook.visual.spec.js new file mode 100644 index 000000000..5062f57a0 --- /dev/null +++ b/e2e/tests/visual/notebook.visual.spec.js @@ -0,0 +1,51 @@ +/***************************************************************************** + * 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. + *****************************************************************************/ + +const { test } = require('../../pluginFixtures'); +const percySnapshot = require('@percy/playwright'); +const { expandTreePaneItemByName, createDomainObjectWithDefaults } = require('../../appActions'); + +test.describe('Visual - Notebook', () => { + test('Accepts dropped objects as embeds @unstable', async ({ page, theme, openmctConfig }) => { + const { myItemsFolderName } = openmctConfig; + await page.goto('./#/browse/mine', { waitUntil: 'networkidle' }); + + // Create Notebook + const notebook = await createDomainObjectWithDefaults(page, { + type: 'Notebook', + name: "Embed Test Notebook" + }); + // Create Overlay Plot + await createDomainObjectWithDefaults(page, { + type: 'Overlay Plot', + name: "Dropped Overlay Plot" + }); + + await expandTreePaneItemByName(page, myItemsFolderName); + + await page.goto(notebook.url); + await page.dragAndDrop('role=treeitem[name=/Dropped Overlay Plot/]', '.c-notebook__drag-area'); + + await percySnapshot(page, `Notebook w/ dropped embed (theme: ${theme})`); + + }); +}); |