backport DSpace 7: Improve community list e2e tests

cypress/e2e/community-list.cy.ts

@@ -2,6 +2,86 @@ import { testA11y } from 'cypress/support/utils';
 
 describe('Community List Page', () => {
 
+    function validateHierarchyLevel(currentLevel = 1): void {
+        // Find all <cdk-tree-node> elements with the current aria-level
+        cy.get(`ds-community-list cdk-tree-node.expandable-node[aria-level="${currentLevel}"]`).should('exist').then(($nodes) => {
+            let sublevelExists = false;
+            cy.wrap($nodes).each(($node) => {
+                // Check if the current node has an expand button and click it
+                if ($node.find('[data-test="expand-button"]').length) {
+                    sublevelExists = true;
+                    cy.wrap($node).find('[data-test="expand-button"]').click();
+                }
+            }).then(() => {
+                // After expanding all buttons, validate if a sublevel exists
+                if (sublevelExists) {
+                    const nextLevelSelector = `ds-community-list cdk-tree-node.expandable-node[aria-level="${currentLevel + 1}"]`;
+                    cy.get(nextLevelSelector).then(($nextLevel) => {
+                        if ($nextLevel.length) {
+                        // Recursively validate the next level
+                        validateHierarchyLevel(currentLevel + 1);
+                        }
+                    });
+                }
+            });
+        });
+    }
+
+    beforeEach(() => {
+        cy.visit('/community-list');
+
+        // <ds-community-list-page> tag must be loaded
+        cy.get('ds-community-list-page').should('be.visible');
+
+        // <ds-community-list-list> tag must be loaded
+        cy.get('ds-community-list').should('be.visible');
+    });
+
+    it('should expand community/collection hierarchy', () => {
+        // Execute Hierarchy levels validation recursively
+        validateHierarchyLevel(1);
+    });
+
+    it('should display community/collections name with item count', () => {
+        // Open every <cdk-tree-node>
+        cy.get('[data-test="expand-button"]').click({ multiple: true });
+        cy.wait(300);
+
+        // A first <cdk-tree-node> must be found and validate that <a> tag (community name) and <span> tag (item count) exists in it
+        cy.get('ds-community-list').find('cdk-tree-node.expandable-node').then(($nodes) => {
+            cy.wrap($nodes).each(($node) => {
+                cy.wrap($node).find('a').should('exist');
+                cy.wrap($node).find('span').should('exist');
+            });
+        });
+    });
+
+    it('should enable "show more" button when 20 top-communities or more are presents', () => {
+        cy.get('ds-community-list').find('cdk-tree-node.expandable-node[aria-level="1"]').then(($nodes) => {
+            //Validate that there are 20 or more top-community elements
+            if ($nodes.length >= 20) {
+                //Validate that "show more" button is visible and then click on it
+                cy.get('[data-test="show-more-button"]').should('be.visible');
+            } else {
+                cy.get('[data-test="show-more-button"]').should('not.exist');
+            }
+        });
+    });
+
+    it('should show 21 or more top-communities if click "show more" button', () => {
+        cy.get('ds-community-list').find('cdk-tree-node.expandable-node[aria-level="1"]').then(($nodes) => {
+            //Validate that there are 20 or more top-community elements
+            if ($nodes.length >= 20) {
+                //Validate that "show more" button is visible and then click on it
+                cy.get('[data-test="show-more-button"]').click();
+                cy.wait(300);
+                cy.get('ds-community-list').find('cdk-tree-node.expandable-node[aria-level="1"]').should('have.length.at.least', 21);
+            } else {
+                cy.get('[data-test="show-more-button"]').should('not.exist');
+            }
+        });
+    });
+
     it('should pass accessibility tests', () => {
         cy.visit('/community-list');
 

src/app/community-list-page/community-list/community-list.component.html

@@ -9,7 +9,7 @@
       </span>
       <div class="align-middle pt-2">
         <button *ngIf="!(dataSource.loading$ | async)" (click)="getNextPage(node)"
-           class="btn btn-outline-primary btn-sm" role="button" tabindex="0">
+           class="btn btn-outline-primary btn-sm" role="button" tabindex="0" data-test="show-more-button">
            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
         </button>
         <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>