mirror of
https://github.com/nasa/openmct.git
synced 2024-12-24 15:26:39 +00:00
Add cancel adding tag mechanism and fix persistent options visible (#6273)
* Add cancel adding tag mechanism and fix persistent options visible * Add functional test for cancel adding a tag * Create addtag.visual.spec.js and move createNotebookAndEntry to appActions.js * Remove createDomainObjectWithDefaults function from tags.e2e.spec.js * Integrate Percy snapshots and remove assertions * Move createNotebookAndEntry function back to tags.e2e.spec.js * Update locator of Annotations tab, split helper function and add test.beforeEach
This commit is contained in:
parent
2f6e1b703a
commit
5b1f8d0eac
e2e/tests
src
@ -231,4 +231,25 @@ test.describe('Tagging in Notebooks @addInit', () => {
|
||||
await expect(page.locator(entryLocator)).toContainText("Driving");
|
||||
}
|
||||
});
|
||||
test('Can cancel adding a tag', async ({ page }) => {
|
||||
await createNotebookAndEntry(page);
|
||||
|
||||
// Click on Annotations tab
|
||||
await page.locator('.c-inspector__tab', { hasText: "Annotations" }).click();
|
||||
|
||||
// Click on the "Add Tag" button
|
||||
await page.locator('button:has-text("Add Tag")').click();
|
||||
|
||||
// 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)
|
||||
await page.locator('div.c-inspect-properties__header:has-text("Tags")').click();
|
||||
|
||||
// Verify there is a button with text "Add Tag"
|
||||
await expect(page.locator('button:has-text("Add Tag")')).toBeVisible();
|
||||
|
||||
// Verify the AutoComplete field is hidden
|
||||
await expect(page.locator('[placeholder="Type to select tag"]')).toBeHidden();
|
||||
});
|
||||
});
|
||||
|
68
e2e/tests/visual/addTag.visual.spec.js
Normal file
68
e2e/tests/visual/addTag.visual.spec.js
Normal file
@ -0,0 +1,68 @@
|
||||
/*****************************************************************************
|
||||
* 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}')`);
|
||||
});
|
||||
});
|
@ -42,7 +42,7 @@
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
v-if="!hideOptions"
|
||||
v-if="!hideOptions && filteredOptions.length > 0"
|
||||
class="c-menu c-input--autocomplete__options"
|
||||
aria-label="Autocomplete Options"
|
||||
@blur="hideOptions = true"
|
||||
@ -230,10 +230,10 @@ export default {
|
||||
this.showFilteredOptions = false;
|
||||
this.autocompleteInputElement.select();
|
||||
|
||||
if (this.hideOptions) {
|
||||
this.showOptions();
|
||||
} else {
|
||||
if (!this.hideOptions && this.filteredOptions.length > 0) {
|
||||
this.hideOptions = true;
|
||||
} else {
|
||||
this.showOptions();
|
||||
}
|
||||
|
||||
},
|
||||
@ -242,6 +242,7 @@ 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;
|
||||
}
|
||||
},
|
||||
|
@ -31,6 +31,7 @@
|
||||
:added-tags="addedTags"
|
||||
@tagRemoved="tagRemoved"
|
||||
@tagAdded="tagAdded"
|
||||
@tagBlurred="tagBlurred"
|
||||
/>
|
||||
<button
|
||||
v-show="!userAddingTag && !maxTagsAdded"
|
||||
@ -165,6 +166,12 @@ export default {
|
||||
}
|
||||
}
|
||||
},
|
||||
tagBlurred() {
|
||||
// Remove last tag when user clicks outside of TagSelection
|
||||
this.addedTags.pop();
|
||||
// Hide TagSelection and show "Add Tag" button
|
||||
this.userAddingTag = false;
|
||||
},
|
||||
async tagAdded(newTag) {
|
||||
// Either undelete an annotation, or create one (1) new annotation
|
||||
let existingAnnotation = this.annotations.find((annotation) => {
|
||||
|
@ -31,6 +31,7 @@
|
||||
class="c-tag-selection"
|
||||
:item-css-class="'icon-circle'"
|
||||
@onChange="tagSelected"
|
||||
@autoCompleteBlur="autoCompleteBlur"
|
||||
/>
|
||||
</template>
|
||||
<template v-else>
|
||||
@ -158,6 +159,9 @@ export default {
|
||||
if (tagAdded) {
|
||||
this.$emit('tagAdded', tagAdded.id);
|
||||
}
|
||||
},
|
||||
autoCompleteBlur() {
|
||||
this.$emit('tagBlurred');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
Loading…
Reference in New Issue
Block a user