From 817d8da3e4f2ad3ae10e9b4ff581ffcb4180e9f1 Mon Sep 17 00:00:00 2001 From: Scott Bell Date: Wed, 15 Mar 2023 21:08:54 +0400 Subject: [PATCH] Allow tag cancelation (#6436) * add e2e test * remove visual test as we can cover this with functional tests --- .../plugins/notebook/tags.e2e.spec.js | 24 +++++++ e2e/tests/visual/addTag.visual.spec.js | 68 ------------------- .../components/controls/AutoCompleteField.vue | 3 +- .../annotations/tags/TagEditor.vue | 26 +++++-- .../annotations/tags/TagSelection.vue | 4 -- 5 files changed, 44 insertions(+), 81 deletions(-) delete mode 100644 e2e/tests/visual/addTag.visual.spec.js diff --git a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js index 83f32d3cc2..5098acfab1 100644 --- a/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js +++ b/e2e/tests/functional/plugins/notebook/tags.e2e.spec.js @@ -110,6 +110,30 @@ test.describe('Tagging in Notebooks @addInit', () => { await expect(page.locator('[aria-label="Autocomplete Options"]')).not.toContainText("Driving"); await expect(page.locator('[aria-label="Autocomplete Options"]')).toContainText("Drilling"); }); + test('Can cancel adding tags', async ({ page }) => { + await createNotebookAndEntry(page); + + // TODO can be removed with fix for https://github.com/nasa/openmct/issues/6411 + await page.locator('[aria-label="Notebook Entry"].is-selected div.c-ne__text').click(); + + await selectInspectorTab(page, 'Annotations'); + + // Test canceling adding a tag after we click "Type to select tag" + await page.locator('button:has-text("Add Tag")').click(); + + await page.locator('[placeholder="Type to select tag"]').click(); + + await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click(); + + await expect(page.locator('button:has-text("Add Tag")')).toBeVisible(); + + // Test canceling adding a tag after we just click "Add Tag" + await page.locator('button:has-text("Add Tag")').click(); + + await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click(); + + await expect(page.locator('button:has-text("Add Tag")')).toBeVisible(); + }); test('Can search for tags and preview works properly', async ({ page }) => { await createNotebookEntryAndTags(page); await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click(); diff --git a/e2e/tests/visual/addTag.visual.spec.js b/e2e/tests/visual/addTag.visual.spec.js deleted file mode 100644 index 3b1cee33b2..0000000000 --- a/e2e/tests/visual/addTag.visual.spec.js +++ /dev/null @@ -1,68 +0,0 @@ -/***************************************************************************** - * 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. - *****************************************************************************/ - -/** - * This test is dedicated to test the blur behavior of the add tag button. - */ - -const { test } = require("../../pluginFixtures"); -const percySnapshot = require('@percy/playwright'); -const { createDomainObjectWithDefaults } = require('../../appActions'); - -test.describe("Visual - Check blur of Add Tag button", () => { - - test.beforeEach(async ({ page }) => { - // Open a browser, navigate to the main page, and wait until all network events to resolve - await page.goto('./', { waitUntil: 'networkidle' }); - }); - - test("Blur 'Add tag'", async ({ page, theme }) => { - createDomainObjectWithDefaults(page, { type: 'Notebook' }); - - await page.locator('text=To start a new entry, click here or drag and drop any object').click(); - const entryLocator = `[aria-label="Notebook Entry Input"] >> nth = 0`; - await page.locator(entryLocator).click(); - await page.locator(entryLocator).fill(`Entry 0`); - await page.locator(entryLocator).press('Enter'); - - // Click on Annotations tab - await page.locator('.c-inspector__tab', { hasText: "Annotations" }).click(); - - // Take snapshot of the notebook with the Annotations tab opened - await percySnapshot(page, `Notebook Annotation (theme: '${theme}')`); - - // Click on the "Add Tag" button - await page.locator('button:has-text("Add Tag")').click(); - - // Take snapshot of the notebook with the AutoComplete field visible - await percySnapshot(page, `Notebook Add Tag (theme: '${theme}')`); - - // Click inside the AutoComplete field - await page.locator('[placeholder="Type to select tag"]').click(); - - // Click on the "Tags" header (simulating a click outside the autocomplete field) - await page.locator('div.c-inspect-properties__header:has-text("Tags")').click(); - - // Take snapshot of the notebook with the AutoComplete field hidden and with the "Add Tag" button visible - await percySnapshot(page, `Notebook Annotation de-select blur (theme: '${theme}')`); - }); -}); diff --git a/src/api/forms/components/controls/AutoCompleteField.vue b/src/api/forms/components/controls/AutoCompleteField.vue index a0fe8c2683..2be6d7e65e 100644 --- a/src/api/forms/components/controls/AutoCompleteField.vue +++ b/src/api/forms/components/controls/AutoCompleteField.vue @@ -150,7 +150,7 @@ export default { }, hideOptions(newValue) { if (!newValue) { - // adding a event listener when the hideOpntions is false (dropdown is visible) + // adding a event listener when the hideOptions is false (dropdown is visible) // handleoutsideclick can collapse the dropdown when clicked outside autocomplete document.body.addEventListener('click', this.handleOutsideClick); } else { @@ -242,7 +242,6 @@ export default { // dropdown is visible, this will collapse the dropdown. const clickedInsideAutocomplete = this.autocompleteInputAndArrow.contains(event.target); if (!clickedInsideAutocomplete && !this.hideOptions) { - this.$emit('autoCompleteBlur'); this.hideOptions = true; } }, diff --git a/src/plugins/inspectorViews/annotations/tags/TagEditor.vue b/src/plugins/inspectorViews/annotations/tags/TagEditor.vue index 74b69ca649..3626a641f8 100644 --- a/src/plugins/inspectorViews/annotations/tags/TagEditor.vue +++ b/src/plugins/inspectorViews/annotations/tags/TagEditor.vue @@ -21,7 +21,10 @@ *****************************************************************************/