6 export abstract class PageHelper {
7 pages: Record<string, Page>;
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.
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) => {
21 `Method ${target.constructor.name}::${propertyKey} is supposed to be ` +
22 `run on path "${page}", but was run on URL "${url}"`
31 * Navigates to the given page or to index.
32 * Waits until the page component is loaded
34 navigateTo(name: string = null) {
35 name = name || 'index';
36 const page = this.pages[name];
43 * Navigates back and waits for the hash to change
46 cy.location('hash').then((hash) => {
48 cy.location('hash').should('not.be', hash);
53 * Navigates to the edit page
55 navigateEdit(name: string, select = true, breadcrumb = true) {
58 this.getFirstTableCell(name).click();
60 cy.contains('Creating...').should('not.exist');
61 cy.contains('button', 'Edit').click();
63 this.expectBreadcrumbText('Edit');
68 * Checks the active breadcrumb value.
70 expectBreadcrumbText(text: string) {
71 cy.get('.breadcrumb-item.active').should('have.text', text);
75 return cy.get('.nav.nav-tabs li');
78 getTab(tabName: string) {
79 return cy.contains('.nav.nav-tabs li', tabName);
82 getTabText(index: number) {
83 return this.getTabs().its(index).text();
87 return this.getTabs().its('length');
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.
96 clickTab(selector: string, name: string, tabName: string) {
97 this.getExpandCollapseElement(name).click();
98 cy.get(selector).within(() => {
99 this.getTab(tabName).click();
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.
108 selectOption(selectionName: string, option: string) {
109 cy.get(`select[name=${selectionName}]`).select(option);
110 return this.expectSelectOption(selectionName, option);
114 * Helper method to expect a set option inside a select element.
115 * @param option The selected option text (not value) that is to
118 expectSelectOption(selectionName: string, option: string) {
119 return cy.get(`select[name=${selectionName}] option:checked`).contains(option);
123 return cy.get('legend');
127 return cy.get('.ngx-toastr');
131 * Waits for the table to load its data
132 * Should be used in all methods that access the datatable
134 private waitDataTableToLoad() {
135 cy.get('cd-table').should('exist');
136 cy.get('datatable-scroller, .empty-row');
140 this.waitDataTableToLoad();
142 return cy.get('cd-table .dataTables_wrapper');
145 private getTableCountSpan(spanType: 'selected' | 'found' | 'total') {
146 return cy.contains('.datatable-footer-inner .page-count span', spanType);
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) => {
154 .filter((_i, e) => e.innerText.includes(spanType))
158 return Number(text.match(/(\d+)\s+\w*/)[1]);
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);
171 getTableRow(content: string) {
172 this.waitDataTableToLoad();
174 this.searchTable(content);
175 return cy.contains('.datatable-body-row', content);
179 this.waitDataTableToLoad();
181 return cy.get('datatable-row-wrapper');
185 * Returns the first table cell.
186 * Optionally, you can specify the content of the cell.
188 getFirstTableCell(content?: string) {
189 this.waitDataTableToLoad();
192 this.searchTable(content);
193 return cy.contains('.datatable-body-cell-label', content);
195 return cy.get('.datatable-body-cell-label').first();
199 getTableCell(columnIndex: number, exactContent: string, partialMatch = false) {
200 this.waitDataTableToLoad();
201 this.clearTableSearchInput();
202 this.searchTable(exactContent);
205 `datatable-body-row datatable-body-cell:nth-child(${columnIndex})`,
210 `datatable-body-row datatable-body-cell:nth-child(${columnIndex})`,
211 new RegExp(`^${exactContent}$`)
215 existTableCell(name: string, oughtToBePresent = true) {
216 const waitRule = oughtToBePresent ? 'be.visible' : 'not.exist';
217 this.getFirstTableCell(name).should(waitRule);
220 getExpandCollapseElement(content?: string) {
221 this.waitDataTableToLoad();
224 return cy.contains('.datatable-body-row', content).find('.tc_expand-collapse');
226 return cy.get('.tc_expand-collapse').first();
231 * Gets column headers of table
233 getDataTableHeaders(index = 0) {
234 this.waitDataTableToLoad();
236 return cy.get('.datatable-header').its(index).find('.datatable-header-cell');
240 * Grabs striped tables
243 return cy.get('.table.table-striped');
246 filterTable(name: string, option: string) {
247 this.waitDataTableToLoad();
249 cy.get('.tc_filter_name > button').click();
250 cy.contains(`.tc_filter_name .dropdown-item`, name).click();
252 cy.get('.tc_filter_option > button').click();
253 cy.contains(`.tc_filter_option .dropdown-item`, option).click();
256 setPageSize(size: string) {
257 cy.get('cd-table .dataTables_paginate input').first().clear({ force: true }).type(size);
260 searchTable(text: string) {
261 this.waitDataTableToLoad();
263 this.setPageSize('10');
264 cy.get('cd-table .search input').first().clear().type(text);
267 clearTableSearchInput() {
268 this.waitDataTableToLoad();
270 return cy.get('cd-table .search button').first().click();
273 // Click the action button
274 clickActionButton(action: string) {
275 cy.get('.table-actions button.dropdown-toggle').first().click(); // open submenu
276 cy.get(`button.${action}`).click(); // click on "action" menu item
280 * This is a generic method to delete table rows.
281 * It will select the first row that contains the provided name and delete it.
282 * After that it will wait until the row is no longer displayed.
283 * @param name The string to search in table cells.
284 * @param columnIndex If provided, search string in columnIndex column.
286 delete(name: string, columnIndex?: number, section?: string) {
288 const getRow = columnIndex
289 ? this.getTableCell.bind(this, columnIndex)
290 : this.getFirstTableCell.bind(this);
291 getRow(name).click();
293 section === 'hosts' ? (action = 'remove') : (action = 'delete');
295 // Clicks on table Delete/Remove button
296 this.clickActionButton(action);
298 // Convert action to SentenceCase and Confirms deletion
299 const actionUpperCase = action.charAt(0).toUpperCase() + action.slice(1);
300 cy.get('cd-modal .custom-control-label').click();
301 cy.contains('cd-modal button', actionUpperCase).click();
303 // Wait for modal to close
304 cy.get('cd-modal').should('not.exist');
306 // Waits for item to be removed from table
307 getRow(name).should('not.exist');