diff options
author | Andrew Henry <akhenry@gmail.com> | 2022-09-21 02:36:48 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-09-21 02:36:48 +0300 |
commit | c1aaa54a0817d59726aeaaea2b8aa953481f4196 (patch) | |
tree | eda3ffc2b58405b705a9d7d1bf916df55e454ebe | |
parent | 6b246f71d26b6a26efedfdb8233b6e333cb97559 (diff) | |
parent | 9a727cac2e4a8c57bca6d12b81c364f45f61a758 (diff) |
Merge branch 'master' into misc-ui-5640-mastermisc-ui-5640-master
-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 | ||||
-rw-r--r-- | src/plugins/notebook/components/Notebook.vue | 5 |
6 files changed, 189 insertions, 50 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})`); + + }); +}); diff --git a/src/plugins/notebook/components/Notebook.vue b/src/plugins/notebook/components/Notebook.vue index cf7492bd5..9719de33e 100644 --- a/src/plugins/notebook/components/Notebook.vue +++ b/src/plugins/notebook/components/Notebook.vue @@ -503,7 +503,7 @@ export default { this.openmct.editor.cancel(); } }, - dropOnEntry(event) { + async dropOnEntry(event) { event.preventDefault(); event.stopImmediatePropagation(); @@ -529,7 +529,8 @@ export default { objectPath, openmct: this.openmct }; - const embed = createNewEmbed(snapshotMeta); + const embed = await createNewEmbed(snapshotMeta); + this.newEntry(embed); }, focusOnEntryId() { |