[CST-15593] improve tests reliability

Andrea Barbasso · Andrea Barbasso · commit 625771837770 · 2024-10-31T13:00:21.000+01:00
diff --git a/cypress/e2e/admin-add-new-modals.cy.ts b/cypress/e2e/admin-add-new-modals.cy.ts
@@ -9,10 +9,10 @@ describe('Admin Add New Modals', () => {
 
   it('Add new Community modal should pass accessibility tests', () => {
     // Pin the sidebar open
-    cy.get('#sidebar-collapse-toggle').click();
+    cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
-    cy.get('#admin-menu-section-new-title').click();
+    cy.get('[data-test="admin-menu-section-new-title"]').click();
 
     cy.get('a[data-test="menu.section.new_community"]').click();
 
@@ -22,10 +22,10 @@ describe('Admin Add New Modals', () => {
 
   it('Add new Collection modal should pass accessibility tests', () => {
     // Pin the sidebar open
-    cy.get('#sidebar-collapse-toggle').click();
+    cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
-    cy.get('#admin-menu-section-new-title').click();
+    cy.get('[data-test="admin-menu-section-new-title"]').click();
 
     cy.get('a[data-test="menu.section.new_collection"]').click();
 
@@ -35,10 +35,10 @@ describe('Admin Add New Modals', () => {
 
   it('Add new Item modal should pass accessibility tests', () => {
     // Pin the sidebar open
-    cy.get('#sidebar-collapse-toggle').click();
+    cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
-    cy.get('#admin-menu-section-new-title').click();
+    cy.get('[data-test="admin-menu-section-new-title"]').click();
 
     cy.get('a[data-test="menu.section.new_item"]').click();
 
diff --git a/cypress/e2e/admin-edit-modals.cy.ts b/cypress/e2e/admin-edit-modals.cy.ts
@@ -9,7 +9,7 @@ describe('Admin Edit Modals', () => {
 
   it('Edit Community modal should pass accessibility tests', () => {
     // Pin the sidebar open
-    cy.get('#sidebar-collapse-toggle').click();
+    cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
     cy.get('#admin-menu-section-edit-title').click();
@@ -22,7 +22,7 @@ describe('Admin Edit Modals', () => {
 
   it('Edit Collection modal should pass accessibility tests', () => {
     // Pin the sidebar open
-    cy.get('#sidebar-collapse-toggle').click();
+    cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
     cy.get('#admin-menu-section-edit-title').click();
@@ -35,7 +35,7 @@ describe('Admin Edit Modals', () => {
 
   it('Edit Item modal should pass accessibility tests', () => {
     // Pin the sidebar open
-    cy.get('#sidebar-collapse-toggle').click();
+    cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
     cy.get('#admin-menu-section-edit-title').click();
diff --git a/cypress/e2e/admin-export-modals.cy.ts b/cypress/e2e/admin-export-modals.cy.ts
@@ -9,7 +9,7 @@ describe('Admin Export Modals', () => {
 
   it('Export metadata modal should pass accessibility tests', () => {
     // Pin the sidebar open
-    cy.get('#sidebar-collapse-toggle').click();
+    cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
     cy.get('#admin-menu-section-export-title').click();
@@ -22,7 +22,7 @@ describe('Admin Export Modals', () => {
 
   it('Export batch modal should pass accessibility tests', () => {
     // Pin the sidebar open
-    cy.get('#sidebar-collapse-toggle').click();
+    cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on entry of menu
     cy.get('#admin-menu-section-export-title').click();
diff --git a/cypress/e2e/admin-sidebar.cy.ts b/cypress/e2e/admin-sidebar.cy.ts
@@ -10,7 +10,7 @@ describe('Admin Sidebar', () => {
 
   it('should be pinnable and pass accessibility tests', () => {
     // Pin the sidebar open
-    cy.get('#sidebar-collapse-toggle').click();
+    cy.get('[data-test="sidebar-collapse-toggle"]').click();
 
     // Click on every expandable section to open all menus
     cy.get('ds-expandable-admin-sidebar-section').click({ multiple: true });
diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.html
@@ -14,7 +14,9 @@
     </div>
     <div class="sidebar-collapsible-element-outer-wrapper">
       <div class="sidebar-collapsible-element-inner-wrapper sidebar-item">
-        <span [id]="adminMenuSectionTitleId(section.id)">{{itemModel.text | translate}}</span>
+        <span [id]="adminMenuSectionTitleId(section.id)" [attr.data-test]="adminMenuSectionTitleId(section.id) | dsBrowserOnly">
+          {{itemModel.text | translate}}
+        </span>
       </div>
     </div>
   </a>
diff --git a/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/admin-sidebar-section/admin-sidebar-section.component.ts
@@ -17,6 +17,7 @@ import { MenuID } from '../../../shared/menu/menu-id.model';
 import { LinkMenuItemModel } from '../../../shared/menu/menu-item/models/link.model';
 import { MenuSection } from '../../../shared/menu/menu-section.model';
 import { MenuSectionComponent } from '../../../shared/menu/menu-section/menu-section.component';
+import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
 
 /**
  * Represents a non-expandable section in the admin sidebar
@@ -26,7 +27,7 @@ import { MenuSectionComponent } from '../../../shared/menu/menu-section/menu-sec
   templateUrl: './admin-sidebar-section.component.html',
   styleUrls: ['./admin-sidebar-section.component.scss'],
   standalone: true,
-  imports: [NgClass, RouterLink, TranslateModule],
+  imports: [NgClass, RouterLink, TranslateModule, BrowserOnlyPipe],
 
 })
 export class AdminSidebarSectionComponent extends MenuSectionComponent implements OnInit {
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.html b/src/app/admin/admin-sidebar/admin-sidebar.component.html
@@ -42,6 +42,7 @@ <h4 class="my-1">{{ 'menu.header.admin' | translate }}</h4>
   <div class="sidebar-full-width-container" id="sidebar-collapse-toggle-container">
     <a class="sidebar-section-wrapper sidebar-full-width-container"
        id="sidebar-collapse-toggle"
+       [attr.data-test]="'sidebar-collapse-toggle' | dsBrowserOnly"
        href="javascript:void(0);"
        (click)="toggle($event)"
        (keyup.space)="toggle($event)"
diff --git a/src/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -36,6 +36,7 @@ import { MenuService } from '../../shared/menu/menu.service';
 import { MenuID } from '../../shared/menu/menu-id.model';
 import { CSSVariableService } from '../../shared/sass-helper/css-variable.service';
 import { ThemeService } from '../../shared/theme-support/theme.service';
+import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
 
 /**
  * Component representing the admin sidebar
@@ -46,7 +47,7 @@ import { ThemeService } from '../../shared/theme-support/theme.service';
   styleUrls: ['./admin-sidebar.component.scss'],
   animations: [slideSidebar],
   standalone: true,
-  imports: [NgIf, NgbDropdownModule, NgClass, NgFor, NgComponentOutlet, AsyncPipe, TranslateModule],
+  imports: [NgIf, NgbDropdownModule, NgClass, NgFor, NgComponentOutlet, AsyncPipe, TranslateModule, BrowserOnlyPipe],
 })
 export class AdminSidebarComponent extends MenuComponent implements OnInit {
   /**
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.html
@@ -19,7 +19,7 @@
     </div>
     <div class="sidebar-collapsible-element-outer-wrapper">
       <div class="sidebar-collapsible-element-inner-wrapper sidebar-item toggler-wrapper">
-        <span [id]="adminMenuSectionTitleId(section.id)">
+        <span [id]="adminMenuSectionTitleId(section.id)" [attr.data-test]="adminMenuSectionTitleId(section.id) | dsBrowserOnly">
           <ng-container
             *ngComponentOutlet="(sectionMap$ | async).get(section.id).component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
         </span>
diff --git a/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts b/src/app/admin/admin-sidebar/expandable-admin-sidebar-section/expandable-admin-sidebar-section.component.ts
@@ -25,6 +25,7 @@ import { slide } from '../../../shared/animations/slide';
 import { MenuService } from '../../../shared/menu/menu.service';
 import { MenuID } from '../../../shared/menu/menu-id.model';
 import { CSSVariableService } from '../../../shared/sass-helper/css-variable.service';
+import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
 import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sidebar-section.component';
 
 /**
@@ -36,7 +37,7 @@ import { AdminSidebarSectionComponent } from '../admin-sidebar-section/admin-sid
   styleUrls: ['./expandable-admin-sidebar-section.component.scss'],
   animations: [rotate, slide, bgColor],
   standalone: true,
-  imports: [NgClass, NgComponentOutlet, NgIf, NgFor, AsyncPipe, TranslateModule],
+  imports: [NgClass, NgComponentOutlet, NgIf, NgFor, AsyncPipe, TranslateModule, BrowserOnlyPipe],
 })
 
 export class ExpandableAdminSidebarSectionComponent extends AdminSidebarSectionComponent implements OnInit {
diff --git a/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html b/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html
@@ -23,7 +23,7 @@ <h2>{{'collection.edit.item-mapper.head' | translate}}</h2>
             </div>
           </ng-template>
         </li>
-        <li [ngbNavItem]="'mapTab'" role="presentation" data-test="mapTab">
+        <li [ngbNavItem]="'mapTab' | dsBrowserOnly" role="presentation" data-test="mapTab">
           <a ngbNavLink>{{'collection.edit.item-mapper.tabs.map' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="row mt-2">
diff --git a/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.ts b/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.ts
@@ -62,6 +62,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { ItemSelectComponent } from '../../shared/object-select/item-select/item-select.component';
 import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model';
 import { ThemedSearchFormComponent } from '../../shared/search-form/themed-search-form.component';
+import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
 import { followLink } from '../../shared/utils/follow-link-config.model';
 
 @Component({
@@ -86,6 +87,7 @@ import { followLink } from '../../shared/utils/follow-link-config.model';
     AsyncPipe,
     ItemSelectComponent,
     NgIf,
+    BrowserOnlyPipe,
   ],
   standalone: true,
 })
diff --git a/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html b/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
@@ -22,7 +22,7 @@ <h2>{{'item.edit.item-mapper.head' | translate}}</h2>
             </div>
           </ng-template>
         </li>
-        <li [ngbNavItem]="'mapTab'" role="presentation" data-test="mapTab">
+        <li [ngbNavItem]="'mapTab' | dsBrowserOnly" role="presentation" data-test="mapTab">
           <a ngbNavLink>{{'item.edit.item-mapper.tabs.map' | translate}}</a>
           <ng-template ngbNavContent>
             <div class="row mt-2">
diff --git a/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.ts b/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.ts
@@ -61,6 +61,7 @@ import { NotificationsService } from '../../../shared/notifications/notification
 import { CollectionSelectComponent } from '../../../shared/object-select/collection-select/collection-select.component';
 import { PaginatedSearchOptions } from '../../../shared/search/models/paginated-search-options.model';
 import { ThemedSearchFormComponent } from '../../../shared/search-form/themed-search-form.component';
+import { BrowserOnlyPipe } from '../../../shared/utils/browser-only.pipe';
 import { getItemPageRoute } from '../../item-page-routing-paths';
 
 @Component({
@@ -79,6 +80,7 @@ import { getItemPageRoute } from '../../item-page-routing-paths';
     AsyncPipe,
     TranslateModule,
     NgIf,
+    BrowserOnlyPipe,
   ],
   standalone: true,
 })
diff --git a/src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.ts b/src/themes/custom/app/admin/admin-sidebar/admin-sidebar.component.ts
@@ -10,6 +10,7 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { TranslateModule } from '@ngx-translate/core';
 
 import { AdminSidebarComponent as BaseComponent } from '../../../../../app/admin/admin-sidebar/admin-sidebar.component';
+import { BrowserOnlyPipe } from '../../../../../app/shared/utils/browser-only.pipe';
 
 /**
  * Component representing the admin sidebar
@@ -21,7 +22,7 @@ import { AdminSidebarComponent as BaseComponent } from '../../../../../app/admin
   // styleUrls: ['./admin-sidebar.component.scss']
   styleUrls: ['../../../../../app/admin/admin-sidebar/admin-sidebar.component.scss'],
   standalone: true,
-  imports: [NgIf, NgbDropdownModule, NgClass, NgFor, NgComponentOutlet, AsyncPipe, TranslateModule],
+  imports: [NgIf, NgbDropdownModule, NgClass, NgFor, NgComponentOutlet, AsyncPipe, TranslateModule, BrowserOnlyPipe],
 })
 export class AdminSidebarComponent extends BaseComponent {
 }
