Merged in task/dspace-cris-2024_02_x/DSC-2417 (pull request DSpace#4898)

[DSC-2417] add: new property to define preferred init view modes

Approved-by: Andrea Barbasso

Author: Francesco Mauto

cypress/e2e/admin-search-page.cy.ts

@@ -1,4 +1,7 @@
-import { testA11y } from 'cypress/support/utils';
+import {
+  SEARCH_RESULT_VIEW_MODE_SELECTOR,
+  testA11y,
+} from 'cypress/support/utils';
 
 describe('Admin Search Page', () => {
   beforeEach(() => {
@@ -11,7 +14,7 @@ describe('Admin Search Page', () => {
     //Page must first be visible
     cy.get('ds-admin-search-page').should('be.visible');
     // At least one search result should be displayed
-    cy.get('[data-test="list-object"]').should('be.visible');
+    cy.get(SEARCH_RESULT_VIEW_MODE_SELECTOR).should('be.visible');
     // Click each filter toggle to open *every* filter
     // (As we want to scan filter section for accessibility issues as well)
     cy.get('[data-test="filter-toggle"]').click({ multiple: true });

cypress/e2e/admin-workflow-page.cy.ts

@@ -1,4 +1,7 @@
-import { testA11y } from 'cypress/support/utils';
+import {
+  SEARCH_RESULT_VIEW_MODE_SELECTOR,
+  testA11y,
+} from 'cypress/support/utils';
 
 describe('Admin Workflow Page', () => {
   beforeEach(() => {
@@ -11,7 +14,7 @@ describe('Admin Workflow Page', () => {
     // Page must first be visible
     cy.get('ds-admin-workflow-page').should('be.visible');
     // At least one search result should be displayed
-    cy.get('[data-test="list-object"]').should('be.visible');
+    cy.get(SEARCH_RESULT_VIEW_MODE_SELECTOR).should('be.visible');
     // Click each filter toggle to open *every* filter
     // (As we want to scan filter section for accessibility issues as well)
     cy.get('[data-test="filter-toggle"]').click({ multiple: true });

cypress/e2e/bulk-access.cy.ts

@@ -1,4 +1,7 @@
-import { testA11y } from 'cypress/support/utils';
+import {
+  SEARCH_RESULT_VIEW_MODE_SELECTOR,
+  testA11y,
+} from 'cypress/support/utils';
 import { Options } from 'cypress-axe';
 
 describe('Bulk Access', () => {
@@ -12,7 +15,7 @@ describe('Bulk Access', () => {
     // Page must first be visible
     cy.get('ds-bulk-access').should('be.visible');
     // At least one search result should be displayed
-    cy.get('[data-test="list-object"]').should('be.visible');
+    cy.get(SEARCH_RESULT_VIEW_MODE_SELECTOR).should('be.visible');
     // Click each filter toggle to open *every* filter
     // (As we want to scan filter section for accessibility issues as well)
     cy.get('[data-test="filter-toggle"]').click({ multiple: true });

cypress/e2e/my-dspace.cy.ts

@@ -1,4 +1,8 @@
-import { testA11y } from 'cypress/support/utils';
+import {
+  SEARCH_RESULT_VIEW_MODE_SELECTOR,
+  switchToListView,
+  testA11y,
+} from 'cypress/support/utils';
 
 describe('My DSpace page', () => {
   it('should display recent submissions and pass accessibility tests', () => {
@@ -9,8 +13,8 @@ describe('My DSpace page', () => {
 
     cy.get('ds-my-dspace-page').should('be.visible');
 
-    // At least one recent submission should be displayed
-    cy.get('[data-test="list-object"]').should('be.visible');
+    // At least one recent submission should be displayed (supports list or grid view)
+    cy.get(SEARCH_RESULT_VIEW_MODE_SELECTOR).should('be.visible');
 
     // Click each filter toggle to open *every* filter
     // (As we want to scan filter section for accessibility issues as well)
@@ -86,6 +90,9 @@ describe('My DSpace page', () => {
       // Close any open notifications, to make sure they don't get in the way of next steps
       cy.get('[data-dismiss="alert"]').click({ multiple: true });
 
+      // Switch to list view so that edit/delete action buttons are visible
+      switchToListView();
+
       // This is the GET command that will actually run the search
       cy.intercept('GET', '**/server/api/discover/search/objects*').as('search-results');
       // On MyDSpace, find the submission we just created via its ID
@@ -260,12 +267,12 @@ describe('My DSpace page', () => {
     //Validate URL
     cy.url().should('include', 'configuration=workflow');
 
-    //Wait to render the list and at leat one item
-    cy.get('[data-test="list-object"]').should('have.length.greaterThan', 0);
+    //Wait to render the list and at leat one item (supports list or grid view)
+    cy.get(SEARCH_RESULT_VIEW_MODE_SELECTOR).should('have.length.greaterThan', 0);
     cy.get('[data-test="claim-button"]').should('exist');
 
     //Check that we have at least one item in worflow search, the item have claim-button and can click in it.
-    cy.get('[data-test="list-object"]')
+    cy.get(SEARCH_RESULT_VIEW_MODE_SELECTOR)
       .then(($items) => {
         const itemWithClaim = [...$items].find(item =>
           item.querySelector('[data-test="claim-button"]'),

cypress/e2e/search-navbar.cy.ts

@@ -1,3 +1,5 @@
+import { SEARCH_RESULT_VIEW_MODE_SELECTOR } from 'cypress/support/utils';
+
 const page = {
   fillOutQueryInNavBar(query) {
     // Click the magnifying glass
@@ -29,7 +31,7 @@ describe('Search from Navigation Bar', () => {
     // Wait for search results to come back from the above GET command
     cy.wait('@search-results');
     // At least one search result should be displayed
-    cy.get('[data-test="list-object"]').should('be.visible');
+    cy.get(SEARCH_RESULT_VIEW_MODE_SELECTOR).should('be.visible');
   });
 
   it('should go to search page with correct query if submitted (from search)', () => {
@@ -44,7 +46,7 @@ describe('Search from Navigation Bar', () => {
     // Wait for search results to come back from the above GET command
     cy.wait('@search-results');
     // At least one search result should be displayed
-    cy.get('[data-test="list-object"]').should('be.visible');
+    cy.get(SEARCH_RESULT_VIEW_MODE_SELECTOR).should('be.visible');
   });
 
   it('should allow user to also submit query by clicking icon', () => {
@@ -59,6 +61,6 @@ describe('Search from Navigation Bar', () => {
     // Wait for search results to come back from the above GET command
     cy.wait('@search-results');
     // At least one search result should be displayed
-    cy.get('[data-test="list-object"]').should('be.visible');
+    cy.get(SEARCH_RESULT_VIEW_MODE_SELECTOR).should('be.visible');
   });
 });

cypress/e2e/search-page.cy.ts

@@ -1,4 +1,7 @@
-import { testA11y } from 'cypress/support/utils';
+import {
+  SEARCH_RESULT_VIEW_MODE_SELECTOR,
+  testA11y,
+} from 'cypress/support/utils';
 
 describe('Search Page', () => {
   // NOTE: these tests currently assume this query will return results!
@@ -21,7 +24,7 @@ describe('Search Page', () => {
     cy.get('ds-search-page').should('be.visible');
 
     // At least one search result should be displayed
-    cy.get('[data-test="list-object"]').should('be.visible');
+    cy.get(SEARCH_RESULT_VIEW_MODE_SELECTOR).should('be.visible');
 
     // Click each filter toggle to open *every* filter
     // (As we want to scan filter section for accessibility issues as well)

cypress/e2e/submission.cy.ts

@@ -1,4 +1,7 @@
-import { testA11y } from 'cypress/support/utils';
+import {
+  switchToListView,
+  testA11y,
+} from 'cypress/support/utils';
 //import { TEST_SUBMIT_USER, TEST_SUBMIT_USER_PASSWORD, TEST_SUBMIT_COLLECTION_NAME, TEST_SUBMIT_COLLECTION_UUID, TEST_ADMIN_USER, TEST_ADMIN_PASSWORD } from 'cypress/support/e2e';
 import { Options } from 'cypress-axe';
 
@@ -96,6 +99,9 @@ describe('New Submission page', () => {
       // Now, dismiss any open alert boxes (may be multiple, as tests run quickly)
       cy.get('[data-dismiss="alert"]').click({ multiple: true });
 
+      // Switch to list view so that edit/delete action buttons are visible
+      switchToListView();
+
       // This is the GET command that will actually run the search
       cy.intercept('GET', '**/server/api/discover/search/objects*').as('search-results');
       // On MyDSpace, find the submission we just saved via its ID

cypress/support/utils.ts

@@ -1,6 +1,22 @@
 import { Result } from 'axe-core';
 import { Options } from 'cypress-axe';
 
+/**
+ * Selector that matches search result items regardless of the active view mode (list, grid, or detail).
+ * Use this instead of hardcoding a single data-test attribute so that tests remain
+ * independent of the `preferredDisplayView` configuration.
+ */
+export const SEARCH_RESULT_VIEW_MODE_SELECTOR = '[data-test="list-object"], [data-test="grid-object"], [data-test="detail-object"]';
+
+/**
+ * Switches the search results to list view mode.
+ * Use this before interacting with action buttons (edit, delete) that are only available in list view.
+ */
+export const switchToListView = () => {
+  cy.get('ds-search-sidebar [data-test="list-view"]').click();
+  cy.get('[data-test="list-object"]').should('exist');
+};
+
 // Log violations to terminal/commandline in a table format.
 // Uses 'log' and 'table' tasks defined in ../plugins/index.ts
 // Borrowed from https://github.com/component-driven/cypress-axe#in-your-spec-file

src/app/core/shared/search/search.service.spec.ts

@@ -126,6 +126,14 @@ describe('SearchService', () => {
       });
     });
 
+    it('should return the given default view mode when no view query param is set', () => {
+      testScheduler.run(({ expectObservable }) => {
+        expectObservable(service.getViewMode(ViewMode.GridElement)).toBe('(a|)', {
+          a: ViewMode.GridElement,
+        });
+      });
+    });
+
     it('should return ViewMode.List when the viewMode is set to ViewMode.List in the ActivatedRoute', () => {
       testScheduler.run(({ expectObservable }) => {
         spyOn(routeService, 'getQueryParamMap').and.returnValue(observableOf(new Map([

src/app/core/shared/search/search.service.ts

@@ -400,14 +400,15 @@ export class SearchService implements OnDestroy {
 
   /**
    * Requests the current view mode based on the current URL
+   * @param {ViewMode} defaultView The view mode to fall back to when none is set through the `view` query parameter
    * @returns {Observable<ViewMode>} The current view mode
    */
-  getViewMode(): Observable<ViewMode> {
+  getViewMode(defaultView: ViewMode = ViewMode.ListElement): Observable<ViewMode> {
     return this.routeService.getQueryParamMap().pipe(map((params) => {
       if (isNotEmpty(params.get('view')) && hasValue(params.get('view'))) {
         return params.get('view');
       } else {
-        return ViewMode.ListElement;
+        return defaultView;
       }
     }));
   }