refactor: extract testing utility files

Author: alexdudescu

projects/angular/testing/src/component-utils/grid-testing-utils.ts

@@ -6,7 +6,12 @@ import {
     tick,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { EventGenerator } from '@uipath/angular/testing';
+
+import { EventGenerator } from '../utilities/event-generator';
+import {
+    FixtureTestingUtils,
+    IStubEndpoint,
+} from '../utilities/fixture-testing-utils';
 
 const selectors = {
     grid: 'ui-grid',
@@ -15,7 +20,7 @@ const selectors = {
 
 export class GridUtils<T> {
     constructor(
-        private _utils: IntegrationUtils<T>,
+        private _utils: FixtureTestingUtils<T>,
     ) { }
 
     flush = (stub: IStubEndpoint, httpClient: HttpTestingController) => {
@@ -71,9 +76,11 @@ export class GridUtils<T> {
         .filter(el => this._utils.getDebugElement('.ui-grid-header-title', el))
         .map(el => el.attributes['data-property']);
 
-    getHeaderCell = (property: string, debugEl = this._utils.fixture.debugElement) => this._utils.getDebugElement(`.ui-grid-header-cell[data-property="${property}"]`, debugEl);
+    getHeaderCell = (property: string, debugEl = this._utils.fixture.debugElement) =>
+        this._utils.getDebugElement(`.ui-grid-header-cell[data-property="${property}"]`, debugEl);
 
-    getHeaderTitle = (property: string, debugEl = this._utils.fixture.debugElement) => this.getHeaderCell(property, debugEl).query(By.css('.ui-grid-header-title'));
+    getHeaderTitle = (property: string, debugEl = this._utils.fixture.debugElement) =>
+        this.getHeaderCell(property, debugEl).query(By.css('.ui-grid-header-title'));
 
     isSortable = (property: string, debugEl = this._utils.fixture.debugElement) => {
         const headerCell = this.getHeaderCell(property, debugEl);
@@ -153,7 +160,7 @@ export class GridUtils<T> {
 
         this.clickRowItem(rowIndex, inlineMenuSelector, {
             gridSelector,
-            debugEl
+            debugEl,
         });
         this._utils.fixture.detectChanges();
 
@@ -172,7 +179,7 @@ export class GridUtils<T> {
             debugEl?: DebugElement;
         } = {}) => this.getRowItem(rowNumber, selector, {
             debugEl,
-            gridSelector
+            gridSelector,
         }).nativeElement
             .dispatchEvent(EventGenerator.click);
 
@@ -202,7 +209,6 @@ export class GridUtils<T> {
     }) => {
         const selector = `[data-cy="ui-grid-search-filter-${columnName}"] [role="combobox"]`;
         const button = this._utils.fixture.debugElement.query(By.css(selector));
-        expect(button).toBeTruthy();
 
         button.nativeElement.dispatchEvent(EventGenerator.click);
         this._utils.fixture.detectChanges();

projects/angular/testing/src/component-utils/index.ts

@@ -0,0 +1,2 @@
+export * from './grid-testing-utils';
+export * from './suggest-testing-utils';

projects/angular/testing/src/component-utils/suggest-testing-utils.ts

@@ -3,29 +3,40 @@ import { DebugElement } from '@angular/core';
 import { tick } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { UiSuggestComponent } from '@uipath/angular/components/ui-suggest';
+
+import { EventGenerator } from '../utilities/event-generator';
 import {
-    EventGenerator,
-    Key,
-} from '@uipath/angular/testing';
+    FixtureTestingUtils,
+    IStubEndpoint,
+} from '../utilities/fixture-testing-utils';
+import { Key } from '../utilities/key';
+
+export interface ISuggestTestingOptions {
+    debounce?: number;
+}
 
-import { SUGGEST_DEBOUNCE } from './constants';
+const DEFAULT_SUGGEST_TESTING_OPTIONS: ISuggestTestingOptions = {
+    debounce: 300,
+};
 
 export class SuggestUtils<T> {
     dropdownSelector = '.ui-suggest-dropdown-item-list-container';
 
     constructor(
-        private _utils: IntegrationUtils<T>,
-    ) { }
+        private _utils: FixtureTestingUtils<T>,
+        private _options = DEFAULT_SUGGEST_TESTING_OPTIONS,
+    ) {
+    }
 
-    openAndFlush = (selector: string, httpRequest: Function) => {
+    openAndFlush = (selector: string, httpRequest: () => void) => {
         this._utils.click('.display', this._utils.getDebugElement(selector));
         this._utils.fixture.detectChanges();
         httpRequest();
         this._utils.fixture.detectChanges();
     };
 
     // eslint-disable-next-line complexity
-    searchAndSelect = (selector: string, httpRequest?: Function, searchStr = '', nth = 0, debugEl?: DebugElement) => {
+    searchAndSelect = (selector: string, httpRequest?: () => void, searchStr = '', nth = 0, debugEl?: DebugElement) => {
         const suggest = this._utils.getDebugElement(selector, debugEl);
         const multiple = this.isMultiple(selector);
         const strategy = this.getFetchStrategy(selector, debugEl);
@@ -66,7 +77,7 @@ export class SuggestUtils<T> {
             }
 
             this._utils.setInput('input', searchStr, parentContainer);
-            tick(SUGGEST_DEBOUNCE);
+            tick(this._options.debounce);
             this._utils.fixture.detectChanges();
 
             if (httpRequest) { httpRequest(); }
@@ -93,7 +104,8 @@ export class SuggestUtils<T> {
     getFetchStrategy = (selector: string, debugEl?: DebugElement) => {
         const suggest = this._utils.getDebugElement(selector, debugEl);
         // maybe add a getter along the setter for fetchStrategy ?
-        return (suggest.componentInstance as UiSuggestComponent)._fetchStrategy$?.value ?? 'eager';
+        const fetchStrategyKey = '_fetchStrategy$';
+        return (suggest.componentInstance as UiSuggestComponent)[fetchStrategyKey]?.value ?? 'eager';
     };
 
     selectNthItem = (selector: string, nth = 0, config?: {
@@ -137,9 +149,14 @@ export class SuggestUtils<T> {
         return listItem;
     };
 
-    isMultiple = (selector: string, debugEl?: DebugElement) => !!this._utils.getNativeElement(`${selector} mat-chip-list`, debugEl);
+    elementContains = (suffix: string) => (selector: string, debugEl?: DebugElement) =>
+        !!this._utils.getNativeElement(`${selector} ${suffix}`, debugEl);
 
-    isOpen = (selector: string, debugEl?: DebugElement) => !!this._utils.getNativeElement(`${selector} [aria-expanded="true"]`, debugEl);
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    isMultiple = this.elementContains('mat-chip-list');
+
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    isOpen = this.elementContains('[aria-expanded="true"]');
 
     getValue = (selector: string, debugEl = this._utils.fixture.debugElement) => {
         if (this.isMultiple(selector)) {
@@ -156,87 +173,3 @@ export class SuggestUtils<T> {
     clear = (selector: string) =>
         this._utils.getNativeElement(`${selector} [role=button].mat-icon`)?.dispatchEvent(EventGenerator.click);
 }
-
-class KVPUtils<T> {
-    constructor(
-        private _utils: IntegrationUtils<T>,
-    ) { }
-
-    /**
-     * Creates a new key value pair and populates it with the specified values
-     *
-     * @param keySearchText key suggest text to be selected
-     * @param valueSearchText value suggest text to be selected
-     */
-    addAndPopulateKVPInput = (keySearchText: string, valueSearchText: string, keyHttpRequest?: Function, valueHttpRequest?: Function) => {
-        this._utils.click('[data-cy=ui-kvp-add-new-entry]');
-        this._utils.fixture.detectChanges();
-
-        this._utils.suggest.searchAndSelect(this._nthKeySuggestSelector(0), keyHttpRequest, keySearchText);
-        this._utils.fixture.detectChanges();
-        tick(1000);
-        this._utils.fixture.detectChanges();
-
-        this._utils.suggest.searchAndSelect(this._nthValueSuggestSelector(0), valueHttpRequest, valueSearchText);
-        this._utils.fixture.detectChanges();
-        tick(1);
-        this._utils.fixture.detectChanges();
-
-        tick(1000);
-        this._utils.fixture.detectChanges();
-    };
-
-    /**
-     * Existing number of key value pairs.
-     *
-     * @param debugEl
-     * @returns
-     */
-    currentKVPCount(debugEl = this._utils.fixture.debugElement) {
-        const selector = 'ui-key-value-input';
-        return this._utils.getAllDebugElements(selector, debugEl).length;
-    }
-
-    /**
-     * Retrive a reference to the nth key suggest.
-     * Index starts at 1.
-     *
-     * @param debugEl
-     * @returns
-     */
-    nthKeySuggest(index: number, debugEl = this._utils.fixture.debugElement) {
-        const selector = this._nthKeySuggestSelector(index);
-        return this._utils.getDebugElement(selector, debugEl);
-    }
-
-    /**
-     * Retrive a reference to the nth value suggest.
-     * Index starts at 1.
-     *
-     * @param debugEl
-     * @returns
-     */
-    nthValueSuggest(index: number, debugEl = this._utils.fixture.debugElement) {
-        const selector = this._nthValueSuggestSelector(index);
-        return this._utils.getDebugElement(selector, debugEl);
-    }
-
-    /**
-     * Removes the nth key value pair.
-     * Index starts at 1.
-     *
-     * @param debugEl
-     * @returns
-     */
-    removeNthKVP(index: number, debugEl = this._utils.fixture.debugElement) {
-        const selector = this._nthRemoveButtonSelector(index);
-        this._utils.click(selector, debugEl);
-
-        tick(1000);
-        this._utils.fixture.detectChanges();
-    }
-
-    private _nthKeySuggestSelector(index: number) { return `[data-cy=ui-kvp-input-nr-${index}] [data-cy=ui-kvp-key-suggest]`; }
-    private _nthValueSuggestSelector(index: number) { return `[data-cy=ui-kvp-input-nr-${index}] [data-cy=ui-kvp-value-suggest]`; }
-    private _nthRemoveButtonSelector(index: number) { return `[data-cy=ui-kvp-input-nr-${index}] [data-cy=ui-kvp-remove-button]`; }
-}

projects/angular/testing/src/public_api.ts

@@ -1 +1,2 @@
 export * from './utilities';
+export * from './component-utils';

projects/angular/testing/src/utilities/fixture-testing-utils.ts

@@ -9,22 +9,22 @@ import {
     flush,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import {
-    EventGenerator,
-    Key,
-} from '@uipath/angular/testing';
+
+import { EventGenerator } from './event-generator';
+import { HtmlTestingUtils } from './html-testing-utils';
+import { Key } from './key';
 
 export interface IStubEndpoint {
     url: string;
     response: any;
 }
 
-export class IntegrationUtils<T> {
+export class FixtureTestingUtils<T> {
     get component() {
         return this.fixture.componentInstance;
     }
 
-    uiUtils = new UIUtils(this.fixture.nativeElement);
+    htmlTestingUtils = new HtmlTestingUtils(this.fixture.nativeElement);
 
     constructor(
         public fixture: ComponentFixture<T>,
@@ -57,8 +57,8 @@ export class IntegrationUtils<T> {
         return debugElement ? debugElement.componentInstance : null;
     };
 
-    switchToTab = async (number: number, debugEl = this.fixture.debugElement) => {
-        const tab = this.getDebugElement(`.mat-tab-label:nth-of-type(${number}) .mat-tab-label-content`, debugEl);
+    switchToTab = async (tabNumber: number, debugEl = this.fixture.debugElement) => {
+        const tab = this.getDebugElement(`.mat-tab-label:nth-of-type(${tabNumber}) .mat-tab-label-content`, debugEl);
         tab.nativeElement.dispatchEvent(EventGenerator.click);
         this.fixture.detectChanges();
         await this.fixture.whenRenderingDone();
@@ -103,69 +103,60 @@ export class IntegrationUtils<T> {
     };
 
     setInput = (selector: string, value: any, debugEl = this.fixture.debugElement) => {
-        const input = this.uiUtils.setInput(selector, value, debugEl.nativeElement);
-        this.fixture.detectChanges();
-        return input;
-    };
-
-    changeInput = (selector: string, value: any, debugEl = this.fixture.debugElement) => {
-        const input = this.uiUtils.changeInput(selector, value, debugEl.nativeElement);
+        const input = this.htmlTestingUtils.setInput(selector, value, debugEl.nativeElement);
         this.fixture.detectChanges();
         return input;
     };
 
-    isCheckboxChecked = (selector: string, debugEl = this.fixture.debugElement) =>
+    elementContainsClass = (className: string) => (selector: string, debugEl = this.fixture.debugElement) =>
         this.getDebugElement(selector, debugEl)
-            .nativeElement
-            .classList
-            .contains('mat-checkbox-checked');
+        .nativeElement
+        .classList
+        .contains(className);
 
-    isCheckboxIndeterminate = (selector: string, debugEl = this.fixture.debugElement) =>
-        this.getDebugElement(selector, debugEl)
-            .nativeElement
-            .classList
-            .contains('mat-checkbox-indeterminate');
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    isCheckboxChecked = this.elementContainsClass('mat-checkbox-checked');
+
+    // eslint-disable-next-line @typescript-eslint/member-ordering
+    isCheckboxIndeterminate = this.elementContainsClass('mat-checkbox-indeterminate');
 
     toggleCheckbox = (selector: string, debugEl = this.fixture.debugElement) =>
-        this.getDebugElement(selector, debugEl)
-            .query(By.css('.mat-checkbox-label'))
-            .nativeElement
-            .dispatchEvent(EventGenerator.click);
+    this.getDebugElement(selector, debugEl)
+    .query(By.css('.mat-checkbox-label'))
+    .nativeElement
+    .dispatchEvent(EventGenerator.click);
 
     setCheckboxState = (selector: string, state: boolean, debugEl = this.fixture.debugElement) => {
         const isChecked = this.isCheckboxChecked(selector, debugEl);
         if (
             !isChecked && state ||
             isChecked && !state
-        ) {
-            this.toggleCheckbox(selector);
-        }
-    };
-
-    toggleSlider = (selector: string, debugEl = this.fixture.debugElement) =>
-        this.uiUtils.toggleSlider(selector, debugEl.nativeElement);
-
-    setSliderState(selector: string, state: boolean, debugEl = this.fixture.debugElement) {
-        const isToggled = this.isToggleChecked(selector, debugEl);
-        if (
-            isToggled && !state ||
-            !isToggled && state
-        ) {
-            debugEl.query(By.css(`${selector} input[type=checkbox]`)).nativeElement.click();
-        }
-    }
-
-    isToggleChecked = (selector: string, debugEl = this.fixture.debugElement) =>
-        this.uiUtils.isToggleChecked(selector, debugEl.nativeElement);
-
-    isRadioButtonChecked = (selector: string, debugEl = this.fixture.debugElement) =>
-        this.getDebugElement(selector, debugEl)
-            .nativeElement
-            .classList
-            .contains('mat-radio-checked');
-
-    isRadioGroupDisabled = (selector: string, debugEl = this.fixture.debugElement) =>
-        this.getDebugElement(selector, debugEl)
+            ) {
+                this.toggleCheckbox(selector);
+            }
+        };
+
+        toggleSlider = (selector: string, debugEl = this.fixture.debugElement) =>
+        this.htmlTestingUtils.toggleSlider(selector, debugEl.nativeElement);
+
+        setSliderState(selector: string, state: boolean, debugEl = this.fixture.debugElement) {
+            const isToggled = this.isToggleChecked(selector, debugEl);
+            if (
+                isToggled && !state ||
+                !isToggled && state
+                ) {
+                    debugEl.query(By.css(`${selector} input[type=checkbox]`)).nativeElement.click();
+                }
+            }
+
+            isToggleChecked = (selector: string, debugEl = this.fixture.debugElement) =>
+            this.htmlTestingUtils.isToggleChecked(selector, debugEl.nativeElement);
+
+            // eslint-disable-next-line @typescript-eslint/member-ordering
+            isRadioButtonChecked = this.elementContainsClass('mat-radio-checked');
+
+            isRadioGroupDisabled = (selector: string, debugEl = this.fixture.debugElement) =>
+            this.getDebugElement(selector, debugEl)
             .queryAll(By.css('mat-radio-button'))
             .every((elem) => this._elementHasClass('mat-radio-button', elem, 'mat-radio-disabled'));