ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-02-20 09:26:45 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix(#6503): Recently Viewed Items - Disable button if no items (#6533)

Browse Source 
* add e2e test

* fix: remove slow function

* test: After deactivating the button, new objects must be inserted and the button becomes active again

* test: ensure clear recent objects button is active or inactive

* add an event to notify when an object is inserted in the recents list

* add an event to notify when an object is inserted in the recents list

* fix: adjusting function name and add validation for triggering the event

* fix: add event to disable button only when user click ok to clear list of recents

* test: fix failing e2e + better assertions

---------

Co-authored-by: Jesse Mazzella <jessemazzella@gmail.com>
This commit is contained in:
Vitor Henckel 2023-04-03 20:56:03 -03:00 committed by GitHub
parent 344bf8eed3
commit bc3a5408b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 74 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
e2e/tests/functional/recentObjects.e2e.spec.js
View File

@ -58,7 +58,7 @@ test.describe('Recent Objects', () => {
});
test('Navigated objects show up in recents, object renames and deletions are reflected', async ({ page }) => {
// Verify that both created objects appear in the list and are in the correct order
assertInitialRecentObjectsListState();
await assertInitialRecentObjectsListState();
// Navigate to the folder by clicking on the main object name in the recent objects list item
await page.getByRole('listitem', { name: folderA.name }).getByText(folderA.name).click();
@ -149,9 +149,9 @@ test.describe('Recent Objects', () => {
await expect(clockTreeItem.locator('.c-tree__item')).not.toHaveClass(/is-targeted-item/);
});
test("Persists on refresh", async ({ page }) => {
assertInitialRecentObjectsListState();
await assertInitialRecentObjectsListState();
await page.reload();
assertInitialRecentObjectsListState();
await assertInitialRecentObjectsListState();
});
test("Displays objects and aliases uniquely", async ({ page }) => {
const mainTree = page.getByRole('tree', { name: 'Main Tree'});
@ -252,13 +252,57 @@ test.describe('Recent Objects', () => {
// Assert that the list is empty
expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(0);
});
test("Ensure clear recent objects button is active or inactive", async ({ page }) => {
// Assert that the list initially contains 3 objects (clock, folder, my items)
expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(3);
// Assert that the button is enabled
expect(
await page
.getByRole("button", { name: "Clear Recently Viewed" })
.isEnabled()
).toBe(true);
// Click the aria-label="Clear Recently Viewed" button
await page.getByRole("button", { name: "Clear Recently Viewed" }).click();
// Click on the "OK" button in the confirmation dialog
await page.getByRole("button", { name: "OK" }).click();
// Assert that the list is empty
expect(
await recentObjectsList.locator(".c-recentobjects-listitem").count()
).toBe(0);
// Assert that the button is disabled
expect(
await page
.getByRole("button", { name: "Clear Recently Viewed" })
.isEnabled()
).toBe(false);
// Navigate to folder object
await page.goto(folderA.url);
// Assert that the list contains 1 object
expect(await recentObjectsList.locator('.c-recentobjects-listitem').count()).toBe(1);
// Assert that the button is enabled
expect(
await page
.getByRole("button", { name: "Clear Recently Viewed" })
.isEnabled()
).toBe(true);
});
function assertInitialRecentObjectsListState() {
expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeTruthy();
expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeTruthy();
expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeTruthy();
expect(recentObjectsList.getByRole('listitem').nth(0).getByText(clock.name)).toBeTruthy();
expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeTruthy();
expect(recentObjectsList.getByRole('listitem').nth(1).getByText(folderA.name)).toBeTruthy();
return Promise.all([
expect(recentObjectsList.getByRole('listitem', { name: clock.name })).toBeVisible(),
expect(recentObjectsList.getByRole('listitem', { name: folderA.name })).toBeVisible(),
expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeVisible(),
expect(recentObjectsList.getByRole('listitem').nth(0).getByText(clock.name)).toBeVisible(),
expect(recentObjectsList.getByRole('listitem', { name: clock.name }).locator('a').getByText(folderA.name)).toBeVisible(),
expect(recentObjectsList.getByRole('listitem').nth(3).getByText(folderA.name)).toBeVisible()
]);
}
});

25
src/ui/layout/Layout.vue
View File

@ -96,12 +96,14 @@
ref="recentObjectsList"
class="l-shell__tree"
@openAndScrollTo="openAndScrollTo($event)"
@setClearButtonDisabled="setClearButtonDisabled"
/>
<button
slot="controls"
class="c-icon-button icon-clear-data"
aria-label="Clear Recently Viewed"
title="Clear Recently Viewed"
:disabled="disableClearButton"
@click="handleClearRecentObjects"
>
</button>
@ -150,19 +152,19 @@
</template>
<script>
import Inspector from '../inspector/Inspector.vue';
import MctTree from './mct-tree.vue';
import ObjectView from '../components/ObjectView.vue';
import CreateButton from './CreateButton.vue';
import GrandSearch from './search/GrandSearch.vue';
import multipane from './multipane.vue';
import pane from './pane.vue';
import BrowseBar from './BrowseBar.vue';
import Inspector from '../inspector/Inspector.vue';
import Toolbar from '../toolbar/Toolbar.vue';
import AppLogo from './AppLogo.vue';
import BrowseBar from './BrowseBar.vue';
import CreateButton from './CreateButton.vue';
import RecentObjectsList from './RecentObjectsList.vue';
import MctTree from './mct-tree.vue';
import multipane from './multipane.vue';
import pane from './pane.vue';
import GrandSearch from './search/GrandSearch.vue';
import Indicators from './status-bar/Indicators.vue';
import NotificationBanner from './status-bar/NotificationBanner.vue';
import RecentObjectsList from './RecentObjectsList.vue';
export default {
components: {
@ -197,7 +199,8 @@ export default {
triggerSync: false,
triggerReset: false,
headExpanded,
isResizing: false
isResizing: false,
disableClearButton: false
};
},
computed: {
@ -296,7 +299,11 @@ export default {
},
onEndResizing() {
this.isResizing = false;
},
setClearButtonDisabled(isDisabled) {
this.disableClearButton = isDisabled;
}
}
};
</script>

9
src/ui/layout/RecentObjectsList.vue
View File

@ -181,6 +181,10 @@ export default {
*/
setSavedRecentItems() {
localStorage.setItem(LOCAL_STORAGE_KEY__RECENT_OBJECTS, JSON.stringify(this.recents));
// send event to parent for enabled button
if (this.recents.length === 1) {
this.$emit("setClearButtonDisabled", false);
}
},
/**
* Returns true if the `domainObject` supports composition and we are not already
@ -208,6 +212,7 @@ export default {
localStorage.removeItem(LOCAL_STORAGE_KEY__RECENT_OBJECTS);
this.recents = [];
dialog.dismiss();
this.$emit("setClearButtonDisabled", true);
}
},
{
@ -222,7 +227,3 @@ export default {
}
};
</script>
<style>
</style>