FTR tsfy combobox service (#35493)

* migrate combobox to typescript

test/functional/page_objects/visual_builder_page.ts

@@ -235,7 +235,7 @@ export function VisualBuilderPageProvider({ getService, getPageObjects }: FtrPro
       });
     }
 
-    public async selectAggType(value: string | number, nth = 0) {
+    public async selectAggType(value: string, nth = 0) {
       const elements = await testSubjects.findAll('aggSelector');
       await comboBox.setElement(elements[nth], value);
       return await PageObjects.header.waitUntilLoadingHasFinished();

test/functional/services/combo_box.ts

@@ -16,8 +16,10 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { FtrProviderContext } from '../ftr_provider_context';
+import { WebElementWrapper } from './lib/web_element_wrapper';
 
-export function ComboBoxProvider({ getService, getPageObjects }) {
+export function ComboBoxProvider({ getService, getPageObjects }: FtrProviderContext) {
   const config = getService('config');
   const testSubjects = getService('testSubjects');
   const find = getService('find');
@@ -26,18 +28,29 @@ export function ComboBoxProvider({ getService, getPageObjects }) {
   const browser = getService('browser');
   const PageObjects = getPageObjects(['common']);
 
-  const WAIT_FOR_EXISTS_TIME = config.get('timeouts.waitForExists');
+  const WAIT_FOR_EXISTS_TIME: number = config.get('timeouts.waitForExists');
 
   // wrapper around EuiComboBox interactions
   class ComboBox {
-
-    async set(comboBoxSelector, value) {
+    /**
+     * set value inside combobox
+     *
+     * @param comboBoxSelector test subject selector
+     * @param value
+     */
+    public async set(comboBoxSelector: string, value: string): Promise<void> {
       log.debug(`comboBox.set, comboBoxSelector: ${comboBoxSelector}`);
       const comboBox = await testSubjects.find(comboBoxSelector);
       await this.setElement(comboBox, value);
     }
 
-    async setElement(comboBoxElement, value) {
+    /**
+     * set value inside combobox element
+     *
+     * @param comboBoxElement
+     * @param value
+     */
+    public async setElement(comboBoxElement: WebElementWrapper, value: string): Promise<void> {
       log.debug(`comboBox.setElement, value: ${value}`);
       await this._filterOptionsList(comboBoxElement, value);
       await this.openOptionsList(comboBoxElement);
@@ -65,10 +78,10 @@ export function ComboBoxProvider({ getService, getPageObjects }) {
      * This method set custom value to comboBox.
      * It applies changes by pressing Enter key. Sometimes it may lead to auto-submitting a form.
      *
-     * @param {string} comboBoxSelector
-     * @param {string} value
+     * @param comboBoxSelector test subject selector
+     * @param value
      */
-    async setCustom(comboBoxSelector, value) {
+    async setCustom(comboBoxSelector: string, value: string) {
       log.debug(`comboBox.setCustom, comboBoxSelector: ${comboBoxSelector}, value: ${value}`);
       const comboBoxElement = await testSubjects.find(comboBoxSelector);
       await this._filterOptionsList(comboBoxElement, value);
@@ -76,31 +89,36 @@ export function ComboBoxProvider({ getService, getPageObjects }) {
       await this.closeOptionsList(comboBoxElement);
     }
 
-    async filterOptionsList(comboBoxSelector, filterValue) {
-      log.debug(`comboBox.filterOptionsList, comboBoxSelector: ${comboBoxSelector}, filter: ${filterValue}`);
+    async filterOptionsList(comboBoxSelector: string, filterValue: string) {
+      log.debug(
+        `comboBox.filterOptionsList, comboBoxSelector: ${comboBoxSelector}, filter: ${filterValue}`
+      );
       const comboBox = await testSubjects.find(comboBoxSelector);
       await this._filterOptionsList(comboBox, filterValue);
       await this.closeOptionsList(comboBox);
     }
 
-    async _filterOptionsList(comboBoxElement, filterValue) {
+    private async _filterOptionsList(
+      comboBoxElement: WebElementWrapper,
+      filterValue: string
+    ): Promise<void> {
       const input = await comboBoxElement.findByTagName('input');
       await input.clearValue();
-      await this._waitForOptionsListLoading(comboBoxElement);
+      await this.waitForOptionsListLoading(comboBoxElement);
       await input.type(filterValue);
-      await this._waitForOptionsListLoading(comboBoxElement);
+      await this.waitForOptionsListLoading(comboBoxElement);
     }
 
-    async _waitForOptionsListLoading(comboBoxElement) {
+    private async waitForOptionsListLoading(comboBoxElement: WebElementWrapper): Promise<void> {
       await comboBoxElement.waitForDeletedByCssSelector('.euiLoadingSpinner');
     }
 
-    async getOptionsList(comboBoxSelector) {
+    public async getOptionsList(comboBoxSelector: string): Promise<string> {
       log.debug(`comboBox.getOptionsList, comboBoxSelector: ${comboBoxSelector}`);
       const comboBox = await testSubjects.find(comboBoxSelector);
       const menu = await retry.try(async () => {
         await testSubjects.click(comboBoxSelector);
-        await this._waitForOptionsListLoading(comboBox);
+        await this.waitForOptionsListLoading(comboBox);
         const isOptionsListOpen = await testSubjects.exists('comboBoxOptionsList');
         if (!isOptionsListOpen) {
           throw new Error('Combo box options list did not open on click');
@@ -112,28 +130,41 @@ export function ComboBoxProvider({ getService, getPageObjects }) {
       return optionsText;
     }
 
-    async doesComboBoxHaveSelectedOptions(comboBoxSelector) {
+    public async doesComboBoxHaveSelectedOptions(comboBoxSelector: string): Promise<boolean> {
       log.debug(`comboBox.doesComboBoxHaveSelectedOptions, comboBoxSelector: ${comboBoxSelector}`);
       const comboBox = await testSubjects.find(comboBoxSelector);
-      const selectedOptions = await comboBox.findAllByClassName('euiComboBoxPill', WAIT_FOR_EXISTS_TIME);
+      const selectedOptions = await comboBox.findAllByClassName(
+        'euiComboBoxPill',
+        WAIT_FOR_EXISTS_TIME
+      );
       return selectedOptions.length > 0;
     }
 
-    async getComboBoxSelectedOptions(comboBoxSelector) {
+    public async getComboBoxSelectedOptions(comboBoxSelector: string): Promise<string[]> {
       log.debug(`comboBox.getComboBoxSelectedOptions, comboBoxSelector: ${comboBoxSelector}`);
       return await retry.try(async () => {
         const comboBox = await testSubjects.find(comboBoxSelector);
-        const selectedOptions = await comboBox.findAllByClassName('euiComboBoxPill', WAIT_FOR_EXISTS_TIME);
+        const selectedOptions = await comboBox.findAllByClassName(
+          'euiComboBoxPill',
+          WAIT_FOR_EXISTS_TIME
+        );
         if (selectedOptions.length === 0) {
           return [];
         }
-        return Promise.all(selectedOptions.map(async (optionElement) => {
-          return await optionElement.getVisibleText();
-        }));
+        return Promise.all(
+          selectedOptions.map(async optionElement => {
+            return await optionElement.getVisibleText();
+          })
+        );
       });
     }
 
-    async clear(comboBoxSelector) {
+    /**
+     * clearing value from combobox
+     *
+     * @param comboBoxSelector data-test-subj selector
+     */
+    public async clear(comboBoxSelector: string): Promise<void> {
       log.debug(`comboBox.clear, comboBoxSelector:${comboBoxSelector}`);
       const comboBox = await testSubjects.find(comboBoxSelector);
       await retry.try(async () => {
@@ -154,7 +185,7 @@ export function ComboBoxProvider({ getService, getPageObjects }) {
       await this.closeOptionsList(comboBox);
     }
 
-    async doesClearButtonExist(comboBoxElement) {
+    public async doesClearButtonExist(comboBoxElement: WebElementWrapper): Promise<boolean> {
       const found = await comboBoxElement.findAllByCssSelector(
         '[data-test-subj="comboBoxClearButton"]',
         WAIT_FOR_EXISTS_TIME
@@ -162,7 +193,12 @@ export function ComboBoxProvider({ getService, getPageObjects }) {
       return found.length > 0;
     }
 
-    async closeOptionsList(comboBoxElement) {
+    /**
+     * closing option list for combobox
+     *
+     * @param comboBoxElement
+     */
+    public async closeOptionsList(comboBoxElement: WebElementWrapper): Promise<void> {
       const isOptionsListOpen = await testSubjects.exists('comboBoxOptionsList');
       if (isOptionsListOpen) {
         const input = await comboBoxElement.findByTagName('input');
@@ -170,14 +206,20 @@ export function ComboBoxProvider({ getService, getPageObjects }) {
       }
     }
 
-    async openOptionsList(comboBoxElement) {
+    /**
+     * opened list of options for combobox
+     *
+     * @param comboBoxElement
+     */
+    public async openOptionsList(comboBoxElement: WebElementWrapper): Promise<void> {
       const isOptionsListOpen = await testSubjects.exists('comboBoxOptionsList');
       if (!isOptionsListOpen) {
-        const toggleBtn = await comboBoxElement.findByCssSelector('[data-test-subj="comboBoxToggleListButton"]');
+        const toggleBtn = await comboBoxElement.findByCssSelector(
+          '[data-test-subj="comboBoxToggleListButton"]'
+        );
         await toggleBtn.click();
       }
     }
-
   }
 
   return new ComboBox();

test/functional/services/index.ts

@@ -19,7 +19,6 @@
 
 import { AppsMenuProvider } from './apps_menu';
 import { BrowserProvider } from './browser';
-// @ts-ignore not TS yet
 import { ComboBoxProvider } from './combo_box';
 import {
   DashboardAddPanelProvider,