diff --git a/cypress/e2e/community-list.cy.ts b/cypress/e2e/community-list.cy.ts index a5c255de04..e8678e0b9c 100644 --- a/cypress/e2e/community-list.cy.ts +++ b/cypress/e2e/community-list.cy.ts @@ -1,13 +1,87 @@ import { testA11y } from 'cypress/support/utils'; describe('Community List Page', () => { + function validateHierarchyLevel(currentLevel = 1): void { + // Find all 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); + } + }); + } + }); + }); + } - it('should pass accessibility tests', () => { + beforeEach(() => { cy.visit('/community-list'); // tag must be loaded cy.get('ds-community-list-page').should('be.visible'); + // 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 + cy.get('[data-test="expand-button"]').click({ multiple: true }); + cy.wait(300); + + // A first must be found and validate that tag (community name) and 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', () => { // Open every expand button on page, so that we can scan sub-elements as well cy.get('[data-test="expand-button"]').click({ multiple: true }); diff --git a/src/app/community-list-page/community-list/community-list.component.html b/src/app/community-list-page/community-list/community-list.component.html index 9b8eb46703..0b6ba6e37e 100644 --- a/src/app/community-list-page/community-list/community-list.component.html +++ b/src/app/community-list-page/community-list/community-list.component.html @@ -12,7 +12,7 @@
@if ((dataSource.loading$ | async) !== true) { }