ceph/src/pybind/mgr/dashboard/frontend/cypress/integration/page-helper.po.ts

   1 interface Page {
   2   url: string;
   3   id: string;
   4 }
   5
   6 export abstract class PageHelper {
   7   pages: Record<string, Page>;
   8
   9   /**
  10    * Decorator to be used on Helper methods to restrict access to one particular URL.  This shall
  11    * help developers to prevent and highlight mistakes.  It also reduces boilerplate code and by
  12    * thus, increases readability.
  13    */
  14   static restrictTo(page: string): Function {
  15     return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
  16       const fn: Function = descriptor.value;
  17       descriptor.value = function (...args: any) {
  18         cy.location('hash').should((url) => {
  19           expect(url).to.eq(
  20             page,
  21             `Method ${target.constructor.name}::${propertyKey} is supposed to be ` +
  22               `run on path "${page}", but was run on URL "${url}"`
  23           );
  24         });
  25         fn.apply(this, args);
  26       };
  27     };
  28   }
  29
  30   /**
  31    * Navigates to the given page or to index.
  32    * Waits until the page component is loaded
  33    */
  34   navigateTo(name: string = null) {
  35     name = name || 'index';
  36     const page = this.pages[name];
  37
  38     cy.visit(page.url);
  39     cy.get(page.id);
  40   }
  41
  42   /**
  43    * Navigates back and waits for the hash to change
  44    */
  45   navigateBack() {
  46     cy.location('hash').then((hash) => {
  47       cy.go('back');
  48       cy.location('hash').should('not.be', hash);
  49     });
  50   }
  51
  52   /**
  53    * Navigates to the edit page
  54    */
  55   navigateEdit(name: string, select = true, breadcrumb = true) {
  56     if (select) {
  57       this.navigateTo();
  58       this.getFirstTableCell(name).click();
  59     }
  60     cy.contains('Creating...').should('not.exist');
  61     cy.contains('button', 'Edit').click();
  62     if (breadcrumb) {
  63       this.expectBreadcrumbText('Edit');
  64     }
  65   }
  66
  67   /**
  68    * Checks the active breadcrumb value.
  69    */
  70   expectBreadcrumbText(text: string) {
  71     cy.get('.breadcrumb-item.active').should('have.text', text);
  72   }
  73
  74   getTabs() {
  75     return cy.get('.nav.nav-tabs li');
  76   }
  77
  78   getTab(tabName: string) {
  79     return cy.contains('.nav.nav-tabs li', tabName);
  80   }
  81
  82   getTabText(index: number) {
  83     return this.getTabs().its(index).text();
  84   }
  85
  86   getTabsCount(): any {
  87     return this.getTabs().its('length');
  88   }
  89
  90   /**
  91    * Helper method to navigate/click a tab inside the expanded table row.
  92    * @param selector The selector of the expanded table row.
  93    * @param name The name of the row which should expand.
  94    * @param tabName Name of the tab to be navigated/clicked.
  95    */
  96   clickTab(selector: string, name: string, tabName: string) {
  97     this.getExpandCollapseElement(name).click();
  98     cy.get(selector).within(() => {
  99       this.getTab(tabName).click();
 100     });
 101   }
 102
 103   /**
 104    * Helper method to select an option inside a select element.
 105    * This method will also expect that the option was set.
 106    * @param option The option text (not value) to be selected.
 107    */
 108   selectOption(selectionName: string, option: string) {
 109     cy.get(`select[name=${selectionName}]`).select(option);
 110     return this.expectSelectOption(selectionName, option);
 111   }
 112
 113   /**
 114    * Helper method to expect a set option inside a select element.
 115    * @param option The selected option text (not value) that is to
 116    *   be expected.
 117    */
 118   expectSelectOption(selectionName: string, option: string) {
 119     return cy.get(`select[name=${selectionName}] option:checked`).contains(option);
 120   }
 121
 122   getLegends() {
 123     return cy.get('legend');
 124   }
 125
 126   getToast() {
 127     return cy.get('.ngx-toastr');
 128   }
 129
 130   /**
 131    * Waits for the table to load its data
 132    * Should be used in all methods that access the datatable
 133    */
 134   private waitDataTableToLoad() {
 135     cy.get('cd-table').should('exist');
 136     cy.get('datatable-scroller, .empty-row');
 137   }
 138
 139   getDataTables() {
 140     this.waitDataTableToLoad();
 141
 142     return cy.get('cd-table .dataTables_wrapper');
 143   }
 144
 145   private getTableCountSpan(spanType: 'selected' | 'found' | 'total') {
 146     return cy.contains('.datatable-footer-inner .page-count span', spanType);
 147   }
 148
 149   // Get 'selected', 'found', or 'total' row count of a table.
 150   getTableCount(spanType: 'selected' | 'found' | 'total') {
 151     this.waitDataTableToLoad();
 152     return this.getTableCountSpan(spanType).then(($elem) => {
 153       const text = $elem
 154         .filter((_i, e) => e.innerText.includes(spanType))
 155         .first()
 156         .text();
 157
 158       return Number(text.match(/(\d+)\s+\w*/)[1]);
 159     });
 160   }
 161
 162   // Wait until selected', 'found', or 'total' row count of a table equal to a number.
 163   expectTableCount(spanType: 'selected' | 'found' | 'total', count: number) {
 164     this.waitDataTableToLoad();
 165     this.getTableCountSpan(spanType).should(($elem) => {
 166       const text = $elem.first().text();
 167       expect(Number(text.match(/(\d+)\s+\w*/)[1])).to.equal(count);
 168     });
 169   }
 170
 171   getTableRow(content: string) {
 172     this.waitDataTableToLoad();
 173
 174     this.searchTable(content);
 175     return cy.contains('.datatable-body-row', content);
 176   }
 177
 178   getTableRows() {
 179     this.waitDataTableToLoad();
 180
 181     return cy.get('datatable-row-wrapper');
 182   }
 183
 184   /**
 185    * Returns the first table cell.
 186    * Optionally, you can specify the content of the cell.
 187    */
 188   getFirstTableCell(content?: string) {
 189     this.waitDataTableToLoad();
 190
 191     if (content) {
 192       this.searchTable(content);
 193       return cy.contains('.datatable-body-cell-label', content);
 194     } else {
 195       return cy.get('.datatable-body-cell-label').first();
 196     }
 197   }
 198
 199   getTableCell(columnIndex: number, exactContent: string) {
 200     this.waitDataTableToLoad();
 201     this.clearTableSearchInput();
 202     this.searchTable(exactContent);
 203     return cy.contains(
 204       `datatable-body-row datatable-body-cell:nth-child(${columnIndex})`,
 205       new RegExp(`^${exactContent}$`)
 206     );
 207   }
 208
 209   existTableCell(name: string, oughtToBePresent = true) {
 210     const waitRule = oughtToBePresent ? 'be.visible' : 'not.exist';
 211     this.getFirstTableCell(name).should(waitRule);
 212   }
 213
 214   getExpandCollapseElement(content?: string) {
 215     this.waitDataTableToLoad();
 216
 217     if (content) {
 218       return cy.contains('.datatable-body-row', content).find('.tc_expand-collapse');
 219     } else {
 220       return cy.get('.tc_expand-collapse').first();
 221     }
 222   }
 223
 224   /**
 225    * Gets column headers of table
 226    */
 227   getDataTableHeaders(index = 0) {
 228     this.waitDataTableToLoad();
 229
 230     return cy.get('.datatable-header').its(index).find('.datatable-header-cell');
 231   }
 232
 233   /**
 234    * Grabs striped tables
 235    */
 236   getStatusTables() {
 237     return cy.get('.table.table-striped');
 238   }
 239
 240   filterTable(name: string, option: string) {
 241     this.waitDataTableToLoad();
 242
 243     cy.get('.tc_filter_name > button').click();
 244     cy.contains(`.tc_filter_name .dropdown-item`, name).click();
 245
 246     cy.get('.tc_filter_option > button').click();
 247     cy.contains(`.tc_filter_option .dropdown-item`, option).click();
 248   }
 249
 250   setPageSize(size: string) {
 251     cy.get('cd-table .dataTables_paginate input').first().clear({ force: true }).type(size);
 252   }
 253
 254   searchTable(text: string) {
 255     this.waitDataTableToLoad();
 256
 257     this.setPageSize('10');
 258     cy.get('cd-table .search input').first().clear().type(text);
 259   }
 260
 261   clearTableSearchInput() {
 262     this.waitDataTableToLoad();
 263
 264     return cy.get('cd-table .search button').first().click();
 265   }
 266
 267   // Click the action button
 268   clickActionButton(action: string) {
 269     cy.get('.table-actions button.dropdown-toggle').first().click(); // open submenu
 270     cy.get(`button.${action}`).click(); // click on "action" menu item
 271   }
 272
 273   /**
 274    * This is a generic method to delete table rows.
 275    * It will select the first row that contains the provided name and delete it.
 276    * After that it will wait until the row is no longer displayed.
 277    * @param name The string to search in table cells.
 278    * @param columnIndex If provided, search string in columnIndex column.
 279    */
 280   delete(name: string, columnIndex?: number, section?: string) {
 281     // Selects row
 282     const getRow = columnIndex
 283       ? this.getTableCell.bind(this, columnIndex)
 284       : this.getFirstTableCell.bind(this);
 285     getRow(name).click();
 286     let action: string;
 287     section === 'hosts' ? (action = 'remove') : (action = 'delete');
 288
 289     // Clicks on table Delete/Remove button
 290     this.clickActionButton(action);
 291
 292     // Convert action to SentenceCase and Confirms deletion
 293     const actionUpperCase = action.charAt(0).toUpperCase() + action.slice(1);
 294     cy.get('cd-modal .custom-control-label').click();
 295     cy.contains('cd-modal button', actionUpperCase).click();
 296
 297     // Wait for modal to close
 298     cy.get('cd-modal').should('not.exist');
 299
 300     // Waits for item to be removed from table
 301     getRow(name).should('not.exist');
 302   }
 303 }