ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-30 08:04:03 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

5469 search results sometimes show the wrong contextual path or no path at all master (#5567)

Browse Source 
* use identifier from domain object to tell vue to rerender, also show object in annotations

* fix annotation result clicks

* use key string instead

* add nice e2e test

* add some more search types

* added negative expect
This commit is contained in:
Scott Bell 2022-07-28 01:41:21 -07:00 committed by GitHub
parent f493f031df
commit 161fca98d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 114 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
e2e/tests/functional/search.e2e.spec.js
View File

@ -19,7 +19,6 @@
* 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 tests which verify search functionalities.
*/
@ -30,35 +29,36 @@ test.describe('Grand Search', () => {
test('Can search for objects, and subsequent search dropdown behaves properly', async ({ page, openmctConfig }) => {
const { myItemsFolderName } = openmctConfig;
await createClockAndDisplayLayout(page, myItemsFolderName);
await createObjectsForSearch(page, myItemsFolderName);
// Click [aria-label="OpenMCT Search"] input[type="search"]
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').click();
// Fill [aria-label="OpenMCT Search"] input[type="search"]
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Cl');
await expect(page.locator('[aria-label="Search Result"]')).toContainText('Clock');
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText(`Clock A ${myItemsFolderName} Red Folder Blue Folder`);
await expect(page.locator('[aria-label="Search Result"] >> nth=1')).toContainText(`Clock B ${myItemsFolderName} Red Folder Blue Folder`);
await expect(page.locator('[aria-label="Search Result"] >> nth=2')).toContainText(`Clock C ${myItemsFolderName} Red Folder Blue Folder`);
await expect(page.locator('[aria-label="Search Result"] >> nth=3')).toContainText(`Clock D ${myItemsFolderName} Red Folder Blue Folder`);
// Click text=Elements >> nth=0
await page.locator('text=Elements').first().click();
await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).not.toBeVisible();
// Click [aria-label="OpenMCT Search"] [aria-label="Search Input"]
await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
// Click [aria-label="Unnamed Clock clock result"] >> text=Unnamed Clock
await page.locator('[aria-label="Unnamed Clock clock result"] >> text=Unnamed Clock').click();
await page.locator('[aria-label="Clock A clock result"] >> text=Clock A').click();
await expect(page.locator('.js-preview-window')).toBeVisible();
// Click [aria-label="Close"]
await page.locator('[aria-label="Close"]').click();
await expect(page.locator('[aria-label="Search Result"]')).toBeVisible();
await expect(page.locator('[aria-label="Search Result"]')).toContainText('Cloc');
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toBeVisible();
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText(`Clock A ${myItemsFolderName} Red Folder Blue Folder`);
// Click [aria-label="OpenMCT Search"] a >> nth=0
await page.locator('[aria-label="OpenMCT Search"] a').first().click();
await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).not.toBeVisible();
// Fill [aria-label="OpenMCT Search"] input[type="search"]
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('foo');
await expect(page.locator('[aria-label="Search Result"]')).not.toBeVisible();
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).not.toBeVisible();
// Click text=Snapshot Save and Finish Editing Save and Continue Editing >> button >> nth=1
await page.locator('text=Snapshot Save and Finish Editing Save and Continue Editing >> button').nth(1).click();
@ -68,12 +68,24 @@ test.describe('Grand Search', () => {
await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').click();
// Fill [aria-label="OpenMCT Search"] [aria-label="Search Input"]
await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').fill('Cl');
// Click text=Unnamed Clock
await Promise.all([
page.waitForNavigation(),
page.locator('text=Unnamed Clock').click()
page.locator('text=Clock A').click()
]);
await expect(page.locator('.is-object-type-clock')).toBeVisible();
await page.locator('[aria-label="OpenMCT Search"] [aria-label="Search Input"]').fill('Disp');
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText('Unnamed Display Layout');
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).not.toContainText('Folder');
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Clock C');
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText(`Clock C ${myItemsFolderName} Red Folder Blue Folder`);
await page.locator('[aria-label="OpenMCT Search"] input[type="search"]').fill('Cloc');
await expect(page.locator('[aria-label="Search Result"] >> nth=0')).toContainText(`Clock A ${myItemsFolderName} Red Folder Blue Folder`);
await expect(page.locator('[aria-label="Search Result"] >> nth=1')).toContainText(`Clock B ${myItemsFolderName} Red Folder Blue Folder`);
await expect(page.locator('[aria-label="Search Result"] >> nth=2')).toContainText(`Clock C ${myItemsFolderName} Red Folder Blue Folder`);
await expect(page.locator('[aria-label="Search Result"] >> nth=3')).toContainText(`Clock D ${myItemsFolderName} Red Folder Blue Folder`);
});
});
@ -174,25 +186,67 @@ async function waitForSearchCompletion(page) {
}
/**
* Creates a notebook object and adds an entry.
* Creates some domain objects for searching
* @param {import('@playwright/test').Page} page
* @param {string} myItemsFolderName
*/
async function createClockAndDisplayLayout(page, myItemsFolderName) {
async function createObjectsForSearch(page, myItemsFolderName) {
//Go to baseURL
await page.goto('./', { waitUntil: 'networkidle' });
// Click button:has-text("Create")
await page.locator('button:has-text("Create")').click();
// Click li:has-text("Notebook")
await page.locator('li:has-text("Clock")').click();
// Click button:has-text("OK")
await page.locator('li:has-text("Folder") >> nth=1').click();
await Promise.all([
page.waitForNavigation(),
await page.locator('text=Properties Title Notes >> input[type="text"]').fill('Red Folder'),
await page.locator(`text=Save In Open MCT ${myItemsFolderName} >> span`).nth(3).click(),
page.locator('button:has-text("OK")').click()
]);
await page.locator('button:has-text("Create")').click();
await page.locator('li:has-text("Folder") >> nth=2').click();
await Promise.all([
page.waitForNavigation(),
await page.locator('text=Properties Title Notes >> input[type="text"]').fill('Blue Folder'),
await page.locator('form[name="mctForm"] >> text=Red Folder').click(),
page.locator('button:has-text("OK")').click()
]);
await page.locator('button:has-text("Create")').click();
await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click();
await Promise.all([
page.waitForNavigation(),
await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock A'),
await page.locator('form[name="mctForm"] >> text=Blue Folder').click(),
page.locator('button:has-text("OK")').click()
]);
await page.locator('button:has-text("Create")').click();
await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click();
await Promise.all([
page.waitForNavigation(),
await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock B'),
await page.locator('form[name="mctForm"] >> text=Blue Folder').click(),
page.locator('button:has-text("OK")').click()
]);
await page.locator('button:has-text("Create")').click();
await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click();
await Promise.all([
page.waitForNavigation(),
await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock C'),
await page.locator('form[name="mctForm"] >> text=Blue Folder').click(),
page.locator('button:has-text("OK")').click()
]);
await page.locator('button:has-text("Create")').click();
await page.locator('li[title="A UTC-based clock that supports a variety of display formats. Clocks can be added to Display Layouts."]').click();
await Promise.all([
page.waitForNavigation(),
await page.locator('text=Properties Title Notes >> input[type="text"] >> nth=0').fill('Clock D'),
await page.locator('form[name="mctForm"] >> text=Blue Folder').click(),
page.locator('button:has-text("OK")').click()
]);
// Click a:has-text("My Items")
await Promise.all([
page.waitForNavigation(),
page.locator(`a:has-text("${myItemsFolderName}") >> nth=0`).click()

85
src/ui/components/ObjectPath.vue
View File

@ -22,7 +22,7 @@
<template>
<ul
v-if="originalPath.length"
v-if="orderedOriginalPath.length"
class="c-location"
>
<li
@ -48,14 +48,18 @@ export default {
},
inject: ['openmct'],
props: {
enableSelectionListening: {
domainObject: {
type: Object,
required: true
},
readOnly: {
type: Boolean,
required: false,
default() {
return true;
return false;
}
},
readOnly: {
showObjectItself: {
type: Boolean,
required: false,
default() {
@ -65,73 +69,34 @@ export default {
},
data() {
return {
domainObject: {},
originalPath: [],
keyString: ''
orderedOriginalPath: []
};
},
computed: {
orderedOriginalPath() {
return this.originalPath.slice().reverse();
}
},
mounted() {
if (this.enableSelectionListening) {
this.openmct.selection.on('change', this.updateSelection);
this.updateSelection(this.openmct.selection.get());
}
},
beforeDestroy() {
this.openmct.selection.off('change', this.updateSelection);
},
methods: {
setOriginalPath(path, skipSlice) {
let originalPath = path;
async mounted() {
const keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
if (!skipSlice) {
originalPath = path.slice(1, -1);
}
if (keyString && this.keyString !== keyString) {
this.keyString = keyString;
this.originalPath = [];
this.originalPath = originalPath.map((domainObject, index, pathArray) => {
const rawOriginalPath = await this.openmct.objects.getOriginalPath(keyString);
const pathWithDomainObject = rawOriginalPath.map((domainObject, index, pathArray) => {
let key = this.openmct.objects.makeKeyString(domainObject.identifier);
const objectPath = pathArray.slice(index);
return {
domainObject,
key,
objectPath: pathArray.slice(index)
objectPath
};
});
},
clearData() {
this.domainObject = {};
this.originalPath = [];
this.keyString = '';
},
updateSelection(selection) {
if (!selection.length || !selection[0].length) {
this.clearData();
return;
}
this.domainObject = selection[0][0].context.item;
let parentObject = selection[0][1];
if (!this.domainObject && parentObject && parentObject.context.item) {
this.setOriginalPath([parentObject.context.item], true);
this.keyString = '';
return;
}
let keyString = this.openmct.objects.makeKeyString(this.domainObject.identifier);
if (keyString && this.keyString !== keyString) {
this.keyString = keyString;
this.originalPath = [];
this.openmct.objects.getOriginalPath(this.keyString)
.then(this.setOriginalPath);
if (this.showObjectItself) {
// remove ROOT only
this.orderedOriginalPath = pathWithDomainObject.slice(0, pathWithDomainObject.length - 1).reverse();
} else {
// remove ROOT and object itself from path
this.orderedOriginalPath = pathWithDomainObject.slice(1, pathWithDomainObject.length - 1).reverse();
}
}
}

18
src/ui/layout/search/AnnotationSearchResult.vue
View File

@ -42,8 +42,9 @@
</div>
<ObjectPath
ref="location"
:domain-object="domainObject"
:read-only="false"
:show-object-itself="true"
/>
<div class="c-gsearch-result__tags">
@ -124,18 +125,15 @@ export default {
return this.result.fullTagModels[0].foregroundColor;
}
},
mounted() {
const selectionObject = {
context: {
item: this.domainObject
}
};
this.$refs.location.updateSelection([[selectionObject]]);
},
methods: {
clickedResult() {
const objectPath = this.domainObject.originalPath;
const resultUrl = objectPathToUrl(this.openmct, objectPath);
let resultUrl = objectPathToUrl(this.openmct, objectPath);
// get rid of ROOT if extant
if (resultUrl.includes('/ROOT')) {
resultUrl = resultUrl.split('/ROOT').join('');
}
this.openmct.router.navigate(resultUrl);
},
isSearchMatched(tag) {

8
src/ui/layout/search/ObjectSearchResult.vue
View File

@ -46,8 +46,8 @@
</div>
<ObjectPath
ref="objectpath"
:read-only="false"
:domain-object="result"
/>
</div>
<div class="c-gsearch-result__more-options-button">
@ -88,12 +88,6 @@ export default {
}
},
mounted() {
const selectionObject = {
context: {
item: this.result
}
};
this.$refs.objectpath.updateSelection([[selectionObject]]);
this.previewAction = new PreviewAction(this.openmct);
this.previewAction.on('isVisible', this.togglePreviewState);
},

9
src/ui/layout/search/SearchResultsDropDown.vue
View File

@ -39,8 +39,8 @@
>
<div class="c-gsearch__results-section-title">Object Results</div>
<object-search-result
v-for="(objectResult, index) in objectResults"
:key="index"
v-for="(objectResult) in objectResults"
:key="openmct.objects.makeKeyString(objectResult.identifier)"
:result="objectResult"
@preview-changed="previewChanged"
@click.native="selectedResult"
@ -52,8 +52,8 @@
>
<div class="c-gsearch__results-section-title">Annotation Results</div>
<annotation-search-result
v-for="(annotationResult, index) in annotationResults"
:key="index"
v-for="(annotationResult) in annotationResults"
:key="openmct.objects.makeKeyString(annotationResult.identifier)"
:result="annotationResult"
@click.native="selectedResult"
/>
@ -73,6 +73,7 @@ export default {
AnnotationSearchResult,
ObjectSearchResult
},
inject: ['openmct'],
data() {
return {
resultsShown: false,