fix(e2e): adjust selectors for select component

SAP · Apr 4, 2023 · fcc3aa2 · fcc3aa2
1 parent b87b734
commit fcc3aa2
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 33 deletions.
diff --git a/libs/docs/core/select/e2e/select.e2e-spec.ts b/libs/docs/core/select/e2e/select.e2e-spec.ts
@@ -1,9 +1,11 @@
+import { wait } from '@nrwl/nx-cloud/lib/utilities/waiter';
 import { SelectPo } from './select.po';
 import {
     browserIsSafari,
     click,
     getAttributeByName,
     getElementArrayLength,
+    getElementClass,
     getText,
     isElementClickable,
     refreshPage,
@@ -13,7 +15,7 @@ import {
     waitForPresent
 } from '../../../../../e2e';
 
-describe('Select component:', () => {
+fdescribe('Select component:', () => {
     const selectPage = new SelectPo();
     const {
         selectModesExample,
@@ -27,7 +29,8 @@ describe('Select component:', () => {
         overlayContainer,
         buttons,
         option,
-        displayedText
+        displayedText,
+        selectControl
     } = selectPage;
 
     beforeAll(async () => {
@@ -43,7 +46,7 @@ describe('Select component:', () => {
     describe('Select modes', () => {
         it('should be able to select the option for default select', async () => {
             const textBefore = await getText(selectModesExample + displayedText);
-            await click(selectModesExample + buttons);
+            await click(selectModesExample + selectControl);
             await waitForElDisplayed(option, 4);
             await click(option, 4);
             const textAfter = await getText(selectModesExample + displayedText);
@@ -52,23 +55,22 @@ describe('Select component:', () => {
 
         it('should be able to select the option for compact select', async () => {
             const textBefore = await getText(selectModesExample + displayedText, 1);
-            await click(selectModesExample + buttons, 1);
+            await click(selectModesExample + selectControl, 1);
             await waitForElDisplayed(option, 4);
             await click(option, 4);
             const textAfter = await getText(selectModesExample + displayedText, 1);
             await expect(textBefore).not.toEqual(textAfter);
         });
 
         it('should check disabled select', async () => {
-            await expect(await isElementClickable(selectModesExample + buttons, 2)).toBe(false);
-            await expect(await getAttributeByName(selectModesExample + buttons, 'disabled', 2)).toBe('true');
+            await expect(await getElementClass(selectModesExample + selectControl, 2)).toContain('is-disabled');
         });
     });
 
     describe('Semantic state', () => {
         it('should be able to select the option Success state', async () => {
             const textBefore = await getText(selectSemanticStatesExample + displayedText);
-            await click(selectSemanticStatesExample + buttons);
+            await click(selectSemanticStatesExample + selectControl);
             await waitForElDisplayed(option, 4);
             await click(option, 4);
             const textAfter = await getText(selectSemanticStatesExample + displayedText);
@@ -77,7 +79,7 @@ describe('Select component:', () => {
 
         it('should be able to select the option Warning state', async () => {
             const textBefore = await getText(selectSemanticStatesExample + displayedText, 1);
-            await click(selectSemanticStatesExample + buttons, 1);
+            await click(selectSemanticStatesExample + selectControl, 1);
             await waitForElDisplayed(option, 4);
             await click(option, 4);
             const textAfter = await getText(selectSemanticStatesExample + displayedText, 1);
@@ -86,7 +88,7 @@ describe('Select component:', () => {
 
         it('should be able to select the option Error state', async () => {
             const textBefore = await getText(selectSemanticStatesExample + displayedText, 2);
-            await click(selectSemanticStatesExample + buttons, 2);
+            await click(selectSemanticStatesExample + selectControl, 2);
             await waitForElDisplayed(option, 4);
             await click(option, 4);
             const textAfter = await getText(selectSemanticStatesExample + displayedText, 2);
@@ -95,7 +97,7 @@ describe('Select component:', () => {
 
         it('should be able to select the option Information state', async () => {
             const textBefore = await getText(selectSemanticStatesExample + displayedText, 3);
-            await click(selectSemanticStatesExample + buttons, 3);
+            await click(selectSemanticStatesExample + selectControl, 3);
             await waitForElDisplayed(option, 4);
             await click(option, 4);
             const textAfter = await getText(selectSemanticStatesExample + displayedText, 3);
@@ -106,7 +108,7 @@ describe('Select component:', () => {
     describe('Custom Control Content', () => {
         it('should be able to select the option', async () => {
             const textBefore = await getText(customControlExample + displayedText);
-            await click(customControlExample + buttons);
+            await click(customControlExample + selectControl);
             await waitForElDisplayed(option, 4);
             await click(option, 4);
             const textAfter = await getText(customControlExample + displayedText);
@@ -117,7 +119,7 @@ describe('Select component:', () => {
     describe('Extended Options', () => {
         it('should be able to select the option', async () => {
             const textBefore = await getText(extendedOptionsExample + displayedText);
-            await click(extendedOptionsExample + buttons);
+            await click(extendedOptionsExample + selectControl);
             await waitForElDisplayed(option, 4);
             await click(option, 4);
             const textAfter = await getText(extendedOptionsExample + displayedText);
@@ -128,7 +130,7 @@ describe('Select component:', () => {
     describe('Mobile Mode', () => {
         it('should be able to select the option', async () => {
             const textBefore = await getText(mobileModeExample + displayedText);
-            await click(mobileModeExample + buttons);
+            await click(mobileModeExample + selectControl);
             await waitForElDisplayed(option);
             await click(option);
             const textAfter = await getText(mobileModeExample + displayedText);
@@ -139,7 +141,7 @@ describe('Select component:', () => {
     describe('Max Height', () => {
         it('should be able to select the option', async () => {
             const textBefore = await getText(maxHeightExample + displayedText);
-            await click(maxHeightExample + buttons);
+            await click(maxHeightExample + selectControl);
             await waitForElDisplayed(option, 4);
             await click(option, 4);
             const textAfter = await getText(maxHeightExample + displayedText);
@@ -150,7 +152,7 @@ describe('Select component:', () => {
     describe('Adding and Removing Options', () => {
         it('should be able to select the option', async () => {
             const textBefore = await getText(addRemoveOptionExample + displayedText);
-            await click(addRemoveOptionExample + buttons, 2);
+            await click(addRemoveOptionExample + selectControl);
             await waitForElDisplayed(option, 4);
             await click(option, 4);
             const textAfter = await getText(addRemoveOptionExample + displayedText);
@@ -162,12 +164,12 @@ describe('Select component:', () => {
             if (await browserIsSafari()) {
                 return;
             }
-            await click(addRemoveOptionExample + buttons, 2);
+            await click(addRemoveOptionExample + selectControl);
             await waitForElDisplayed(option, 4);
             const optionsCountBefore = await getElementArrayLength(option);
-            await click(addRemoveOptionExample + buttons, 2);
+            await click(addRemoveOptionExample + selectControl);
             await click(addRemoveOptionExample + buttons);
-            await click(addRemoveOptionExample + buttons, 2);
+            await click(addRemoveOptionExample + selectControl);
             await waitForElDisplayed(option, 4);
             const optionsCountAfterAdding = await getElementArrayLength(option);
 
@@ -179,12 +181,12 @@ describe('Select component:', () => {
             if (await browserIsSafari()) {
                 return;
             }
-            await click(addRemoveOptionExample + buttons, 2);
+            await click(addRemoveOptionExample + selectControl);
             await waitForElDisplayed(option, 4);
             const optionsCountBefore = await getElementArrayLength(option);
-            await click(addRemoveOptionExample + buttons, 2);
+            await click(addRemoveOptionExample + selectControl);
             await click(addRemoveOptionExample + buttons, 1);
-            await click(addRemoveOptionExample + buttons, 2);
+            await click(addRemoveOptionExample + selectControl);
             await waitForElDisplayed(option, 4);
             const optionsCountAfterRemoving = await getElementArrayLength(option);
 
@@ -193,7 +195,7 @@ describe('Select component:', () => {
 
         it('should check that we not able to remove the last option', async () => {
             await scrollIntoView(addRemoveOptionExample);
-            await click(addRemoveOptionExample + buttons, 2);
+            await click(addRemoveOptionExample + selectControl);
             const optionsCountBefore = await getElementArrayLength(overlayContainer + option);
             for (let i = 0; i < optionsCountBefore; i++) {
                 await click(addRemoveOptionExample + buttons, 1);
@@ -206,7 +208,7 @@ describe('Select component:', () => {
     describe('Programmatic Control', () => {
         it('should be able to select the option', async () => {
             const textBefore = await getText(programmaticControlExample + displayedText);
-            await click(programmaticControlExample + buttons, 3);
+            await click(programmaticControlExample + selectControl);
             await waitForElDisplayed(option, 5);
             await click(option, 5);
             const textAfter = await getText(programmaticControlExample + displayedText);

diff --git a/libs/docs/core/select/e2e/select.po.ts b/libs/docs/core/select/e2e/select.po.ts
@@ -15,6 +15,7 @@ export class SelectPo extends CoreBaseComponentPo {
     maxHeightExample = 'fd-select-max-height-example';
     addRemoveOptionExample = 'fd-select-adding-example';
     programmaticControlExample = 'fd-select-programmatic-example';
+    selectControl = ' .fd-select__control';
 
     async open(): Promise<void> {
         await super.open(this.url);

diff --git a/libs/docs/core/table/e2e/table.e2e-spec.ts b/libs/docs/core/table/e2e/table.e2e-spec.ts
@@ -345,12 +345,12 @@ describe('Table test suite', () => {
             const fiveTableRows = await getElementArrayLength(tablePaginationExample + tableRow);
             await expect(fiveTableRows).toEqual(5);
 
-            await click(tablePaginationExample + button);
+            await click(tablePaginationExample + ' .fd-select__control');
             await click(menuItem);
             const threeTableRows = await getElementArrayLength(tablePaginationExample + tableRow);
             await expect(threeTableRows).toEqual(3);
 
-            await click(tablePaginationExample + button);
+            await click(tablePaginationExample + ' .fd-select__control');
             await click(menuItem, 2);
             const tenTableRows = await getElementArrayLength(tablePaginationExample + tableRow);
             await expect(tenTableRows).toEqual(10);
@@ -375,7 +375,7 @@ describe('Table test suite', () => {
         // skipped due to https://github.com/SAP/fundamental-ngx/issues/7148
         xit('should check that current page not changing after changing items per page', async () => {
             await scrollIntoView(tablePaginationExample);
-            await click(tablePaginationExample + button);
+            await click(tablePaginationExample + ' .fd-select__control');
             const defaultSelectedPage = await getText(selectedPage);
             await click(menuItem);
             await expect(await getText(selectedPage)).toBe(defaultSelectedPage);

diff --git a/libs/docs/platform/select/e2e/select.e2e-spec.ts b/libs/docs/platform/select/e2e/select.e2e-spec.ts
@@ -94,10 +94,10 @@ describe('Select test suite', () => {
 
     describe('Check Select Semantic States example', () => {
         it('should be able to select the option', async () => {
-            const selectLength = await getElementArrayLength(selectSemanticStateExample + buttons);
+            const selectLength = await getElementArrayLength(selectSemanticStateExample + inputControl);
             for (let i = 0; i < selectLength; i++) {
                 const textBefore = await getText(selectSemanticStateExample + displayText, i);
-                await click(selectSemanticStateExample + buttons, i);
+                await click(selectSemanticStateExample + inputControl, i);
                 await click(selectSemanticStateOption, 7);
                 const textAfter = await getText(selectSemanticStateExample + displayText, i);
                 await expect(textBefore).not.toEqual(textAfter);
@@ -136,8 +136,8 @@ describe('Select test suite', () => {
         });
 
         it('verify title and close button is clickable', async () => {
-            await scrollIntoView(selectMobileExample + buttons);
-            await click(selectMobileExample + buttons);
+            await scrollIntoView(selectMobileExample + inputControl);
+            await click(selectMobileExample + inputControl);
 
             await expect(await getText(mobileTitle)).toBe(titleTestText);
             await expect(await isElementClickable(mobileCloseButton)).toBe(true, 'close button not clickable');
@@ -188,7 +188,7 @@ describe('Select test suite', () => {
 
     async function checkOptions(selector: string, itemIndex: number, index = 0): Promise<void> {
         const textBefore = await getText(selector + displayText, index);
-        click(selector + buttons, index);
+        click(selector + inputControl, index);
         if (selector == selectMobileExample) {
             await (await $('fd-dialog-body .fd-select-options')).waitForDisplayed();
             await click('fd-dialog-body .fd-select-options .fd-list__item', itemIndex);

diff --git a/libs/docs/platform/table/e2e/table.e2e-spec.ts b/libs/docs/platform/table/e2e/table.e2e-spec.ts
@@ -1,3 +1,4 @@
+import { wait } from '@nrwl/nx-cloud/lib/utilities/waiter';
 import { TablePo } from './table.po';
 import {
     acceptAlert,
@@ -567,9 +568,10 @@ describe('Table component test suite', () => {
             await findElementInTable(tableP13SortExample, tableCellArr4);
         });
 
-        it('should check sorting ascending and descending by name', async () => {
+        fit('should check sorting ascending and descending by name', async () => {
             await scrollIntoView(tableP13SortExample);
             await click(tableP13SortExample + ellipsisButton);
+            await wait(500);
             await click(popoverDropdownButton);
             await click(buttonSortedBy);
             await click(footerButtonOk);

diff --git a/libs/docs/platform/table/e2e/table.po.ts b/libs/docs/platform/table/e2e/table.po.ts
@@ -55,7 +55,7 @@ export class TablePo extends PlatformBaseComponentPo {
     dialogMoveToBottom = '[title="Move to Bottom"]';
     footerButtonOk = 'fd-dialog-footer-button button';
     columnHeader = '[role="columnheader"] div';
-    popoverDropdownButton = 'fd-dialog-body fd-popover-control button';
+    popoverDropdownButton = 'fd-dialog-body fd-popover-control .fd-button';
     buttonAdd = '[title="Add new"]';
     buttonRemove = '[title="Remove"]';
     dialogInput = 'fdp-table-filter-rule input';