Add method to find widget by data ui attribute (#333)

Signed-off-by: Krum Haydushki <[email protected]>

cypress/integration/find-cypress-widget.ts

@@ -7,7 +7,7 @@ import {
     BaseWidgetObject,
     CypressWidgetObjectFinder,
     DataExporterWidgetObject,
-    FindableWidget
+    FindableWidget,
 } from '@vcd/ui-components';
 import { FindCypressWidgetOptions } from '@vcd/ui-components';
 import Cypress from 'cypress';
@@ -22,6 +22,7 @@ type Chainable = Cypress.Chainable;
  * @param ancestor - The CSS query or alias of the parent to begin the search from.
  *                 this will be passed to `cy.get` and is a global search.
  * @param cssSelector - The cssSelector to append to the tagName for the search
+ * @param dataUiSelector - The dataUiSelector to append to the tagName for the search
  *
  */
 export function findCypressWidget<W extends BaseWidgetObject<Chainable>>(

projects/components/CHANGELOG.MD

@@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [2.0.0-dev.8]
 
+### Added
+- Find widget by data ui attribute.
+
 ### Added
 - `clear` is now a method in a widget object.
 - Added functionality to disable an option in `FormSelectComponent`

projects/components/src/utils/test/widget-object/angular/angular-widget-finder.ts

@@ -62,6 +62,7 @@ export class AngularWidgetObjectFinder<H = unknown> {
         }
         const parentQuery: FindAngularWidgetOptions = {
             cssSelector: query,
+            dataUiSelector: findOptions?.dataUiSelector,
             text: findOptions?.text,
             index: findOptions?.index,
             options: findOptions?.options,

projects/components/src/utils/test/widget-object/angular/angular-widget-object-element.ts

@@ -6,6 +6,7 @@
 import { DebugElement, Injector, Type } from '@angular/core';
 import { ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { SelectorUtil } from '../selector-util';
 import { BaseWidgetObject, FindableWidget, FindElementOptions, WidgetObjectElement } from '../widget-object';
 import { AngularWidgetObjectFinder, FindAngularWidgetOptions } from './angular-widget-finder';
 
@@ -21,7 +22,7 @@ export class AngularWidgetObjectElement implements WidgetObjectElement<TestEleme
      * @inheritdoc
      */
     get(selector: string | FindElementOptions): AngularWidgetObjectElement {
-        const cssSelector = typeof selector === 'string' ? selector : selector.cssSelector;
+        const cssSelector = SelectorUtil.extractSelector(selector);
         const elements = this.testElement.elements;
         let matches = [].concat(...elements.map((element) => element.queryAll(By.css(cssSelector))));
         if (typeof selector !== 'string') {

projects/components/src/utils/test/widget-object/cypress/cypress-widget-finder.ts

@@ -36,11 +36,6 @@ export class CypressWidgetObjectFinder<T> {
         widgetConstructor: FindableWidget<T, W>,
         findOptions?: FindCypressWidgetOptions
     ): W {
-        let tagName = widgetConstructor.tagName;
-        if (findOptions?.cssSelector) {
-            tagName += `${findOptions.cssSelector}`;
-        }
-
         const id = idGenerator.generate();
 
         const ancestor = findOptions?.ancestor
@@ -53,6 +48,7 @@ export class CypressWidgetObjectFinder<T> {
         }
         const parentQuery: FindCypressWidgetOptions = {
             cssSelector: query,
+            dataUiSelector: findOptions?.dataUiSelector,
             text: findOptions?.text,
             index: findOptions?.index,
             options: findOptions?.options,

projects/components/src/utils/test/widget-object/cypress/cypress-widget-object-element.ts

@@ -2,6 +2,7 @@
  * Copyright 2020 VMware, Inc.
  * SPDX-License-Identifier: BSD-2-Clause
  */
+import { SelectorUtil } from '../selector-util';
 import {
     BaseWidgetObject,
     ElementActions,
@@ -31,16 +32,17 @@ export class CypressWidgetObjectElement<T extends ElementActions> implements Wid
      */
     get(selector: string | FindElementOptions): CypressWidgetObjectElement<T> {
         const root = this.getBase();
+        const cssSelector = SelectorUtil.extractSelector(selector);
         let chainable: any;
         if (typeof selector === 'string') {
             chainable = root.find(selector);
         } else if (selector.index) {
-            chainable = root.find(selector.cssSelector, selector.options).eq(selector.index);
+            chainable = root.find(cssSelector, selector.options).eq(selector.index);
         } else if (selector.text) {
             const queryOptions = { matchCase: false, ...(selector.options || {}) };
-            chainable = root.contains(selector.cssSelector, selector.text, queryOptions);
+            chainable = root.contains(cssSelector, selector.text, queryOptions);
         } else {
-            chainable = root.find(selector.cssSelector, selector.options);
+            chainable = root.find(cssSelector, selector.options);
         }
         return new CypressWidgetObjectElement(chainable, false, this.alias);
     }
@@ -53,7 +55,11 @@ export class CypressWidgetObjectElement<T extends ElementActions> implements Wid
         if (typeof selector === 'string') {
             return new CypressWidgetObjectElement(root.parents(selector), false, this.alias);
         }
-        return new CypressWidgetObjectElement(root.parents(selector.cssSelector, selector.options), false, this.alias);
+        return new CypressWidgetObjectElement(
+            root.parents(SelectorUtil.extractSelector(selector), selector.options),
+            false,
+            this.alias
+        );
     }
 
     /**

projects/components/src/utils/test/widget-object/selector-util.ts

@@ -0,0 +1,22 @@
+/*!
+ * Copyright 2021 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+import { FindElementOptions } from './widget-object';
+
+export class SelectorUtil {
+    /**
+     * Extracts the selector from the parameter passed
+     */
+    static extractSelector(selector: string | FindElementOptions): string {
+        if (typeof selector === 'string') {
+            return selector;
+        } else {
+            if (selector.dataUiSelector) {
+                return `[data-ui="${selector.dataUiSelector}"]`;
+            }
+
+            return selector.cssSelector;
+        }
+    }
+}

projects/components/src/utils/test/widget-object/widget-object.ts

@@ -18,9 +18,12 @@ type ElementLocator<T> = (options?: FindElementOptions) => T;
 type UnknownOptions = {};
 
 export type FindElementOptions = {
-    /** CSS selector used to query */
+    /** CSS selector used to query. Ignored if {@link #dataUiSelector} is passed */
     cssSelector?: string;
 
+    /** Data UI attribute selector used to query */
+    dataUiSelector?: string;
+
     /** To get the nth element of a result set. */
     index?: number;