Merge branch 'main' into feat/LW-10289-use-handleprovider-from-SDK

packages/e2e-tests/src/assert/multidelegation/MultidelegationPageAssert.ts

@@ -10,8 +10,13 @@ import testContext from '../../utils/testContext';
 import { StakePoolGridCard } from '../../elements/multidelegation/StakePoolGridCard';
 import { StakePoolListColumnName } from '../../types/staking';
 import { SortingOrder } from '../../types/sortingOrder';
-import { mapColumnNameStringToEnum, sortColumnContent } from '../../utils/stakePoolListContent';
+import {
+  mapColumnNameStringToEnum,
+  mapSortingOptionToColumnNameEnum,
+  sortColumnContent
+} from '../../utils/stakePoolListContent';
 import { StakePoolListColumn } from '../../enums/StakePoolListColumn';
+import { StakePoolSortingOption } from '../../enums/StakePoolSortingOption';
 
 class MultidelegationPageAssert {
   assertSeeStakingOnPoolsCounter = async (poolsCount: number) => {
@@ -312,9 +317,18 @@ class MultidelegationPageAssert {
     ).waitForDisplayed();
   };
 
+  assertSeeSortingOptionOrderButton = async (
+    sortingOption: StakePoolSortingOption,
+    order: 'ascending' | 'descending'
+  ) => {
+    await (
+      await MultidelegationPage.moreOptionsComponent.getSortingOptionOrderButton(sortingOption, order)
+    ).waitForDisplayed();
+  };
+
   assertSeeStakePoolsSorted = async (
     stakePoolsDisplayType: 'list rows' | 'cards',
-    sortingOption: StakePoolListColumnName,
+    sortingOption: StakePoolSortingOption,
     order: SortingOrder,
     poolLimit?: number
   ) => {
@@ -325,19 +339,55 @@ class MultidelegationPageAssert {
       throw new Error('Please add validation for grid cards sorting');
     } else {
       const columnContent = await MultidelegationPage.extractColumnContent(
-        mapColumnNameStringToEnum(sortingOption),
+        mapSortingOptionToColumnNameEnum(sortingOption),
         poolLimit
       );
       const sortedColumnContent = await sortColumnContent(
         columnContent,
-        mapColumnNameStringToEnum(sortingOption),
+        mapSortingOptionToColumnNameEnum(sortingOption),
         order
       );
 
       expect(columnContent).to.not.be.empty;
       expect(columnContent).to.deep.equal(sortedColumnContent);
     }
   };
+
+  assertSeeTooltipForSortingOption = async (sortingOption: StakePoolSortingOption) => {
+    await browser.pause(800); // Those tooltips are displayed after delay
+    await MultidelegationPage.sortingOptionTooltip.waitForStable();
+    await MultidelegationPage.sortingOptionTooltip.waitForDisplayed();
+    let expectedTooltipText;
+    switch (sortingOption) {
+      case StakePoolSortingOption.Ticker:
+        expectedTooltipText = await t('browsePools.tooltips.ticker', 'staking');
+        break;
+      case StakePoolSortingOption.Saturation:
+        expectedTooltipText = await t('browsePools.tooltips.saturation', 'staking');
+        break;
+      case StakePoolSortingOption.ROS:
+        expectedTooltipText = await t('browsePools.tooltips.ros', 'staking');
+        break;
+      case StakePoolSortingOption.Cost:
+        expectedTooltipText = await t('browsePools.tooltips.cost', 'staking');
+        break;
+      case StakePoolSortingOption.Margin:
+        expectedTooltipText = await t('browsePools.tooltips.margin', 'staking');
+        break;
+      case StakePoolSortingOption.ProducedBlocks:
+        expectedTooltipText = await t('browsePools.tooltips.blocks', 'staking');
+        break;
+      case StakePoolSortingOption.Pledge:
+        expectedTooltipText = await t('browsePools.tooltips.pledge', 'staking');
+        break;
+      case StakePoolSortingOption.LiveStake:
+        expectedTooltipText = await t('browsePools.tooltips.liveStake', 'staking');
+        break;
+      default:
+        throw new Error(`Unsupported column name: ${sortingOption}`);
+    }
+    expect(await MultidelegationPage.sortingOptionTooltip.getText()).to.equal(expectedTooltipText);
+  };
 }
 
 export default new MultidelegationPageAssert();

packages/e2e-tests/src/elements/multidelegation/MoreOptionsComponent.ts

@@ -1,5 +1,5 @@
 import { SortingOption } from './SortingOption';
-import { StakePoolSortingOptionType } from '../../types/staking';
+import { StakePoolSortingOption } from '../../enums/StakePoolSortingOption';
 
 class MoreOptionsComponent {
   private MORE_OPTIONS_LABEL = '[data-testid="stake-pools-more-options-label"]';
@@ -70,35 +70,104 @@ class MoreOptionsComponent {
     return $(this.ROS_FILTER_LABEL);
   }
 
-  async selectSortingOption(sortingOption: StakePoolSortingOptionType) {
+  async getSortingOptionOrderButton(sortingOption: StakePoolSortingOption, order: 'ascending' | 'descending') {
+    return $(this.getSortingOptionButtonSelector(sortingOption, order));
+  }
+
+  async hoverOverSortingOption(sortingOption: StakePoolSortingOption) {
     switch (sortingOption) {
-      case 'Ticker':
+      case StakePoolSortingOption.Ticker:
+        await this.tickerOption.label.moveTo();
+        break;
+      case StakePoolSortingOption.Saturation:
+        await this.saturationOption.label.moveTo();
+        break;
+      case StakePoolSortingOption.ROS:
+        await this.rosOption.label.moveTo();
+        break;
+      case StakePoolSortingOption.Cost:
+        await this.costOption.label.moveTo();
+        break;
+      case StakePoolSortingOption.Margin:
+        await this.marginOption.label.moveTo();
+        break;
+      case StakePoolSortingOption.ProducedBlocks:
+        await this.blocksOption.label.moveTo();
+        break;
+      case StakePoolSortingOption.Pledge:
+        await this.pledgeOption.label.moveTo();
+        break;
+      case StakePoolSortingOption.LiveStake:
+        await this.liveStakeOption.label.moveTo();
+        break;
+      default:
+        throw new Error(`Unsupported sorting option: ${sortingOption}`);
+    }
+  }
+
+  async selectSortingOption(sortingOption: StakePoolSortingOption) {
+    switch (sortingOption) {
+      case StakePoolSortingOption.Ticker:
         await this.tickerOption.radioButton.click();
         break;
-      case 'Saturation':
+      case StakePoolSortingOption.Saturation:
         await this.saturationOption.radioButton.click();
         break;
-      case 'ROS':
+      case StakePoolSortingOption.ROS:
         await this.rosOption.radioButton.click();
         break;
-      case 'Cost':
+      case StakePoolSortingOption.Cost:
         await this.costOption.radioButton.click();
         break;
-      case 'Margin':
+      case StakePoolSortingOption.Margin:
         await this.marginOption.radioButton.click();
         break;
-      case 'Produced blocks':
+      case StakePoolSortingOption.ProducedBlocks:
         await this.blocksOption.radioButton.click();
         break;
-      case 'Pledge':
+      case StakePoolSortingOption.Pledge:
         await this.pledgeOption.radioButton.click();
         break;
-      case 'Live Stake':
+      case StakePoolSortingOption.LiveStake:
         await this.liveStakeOption.radioButton.click();
         break;
       default:
-        throw new Error(`Unsupported column name: ${sortingOption}`);
+        throw new Error(`Unsupported sorting option: ${sortingOption}`);
+    }
+  }
+
+  private getSortingOptionButtonSelector(
+    sortingOption: StakePoolSortingOption,
+    order: 'ascending' | 'descending'
+  ): string {
+    const orderSelector = order === 'ascending' ? '[data-testid="sort-asc"]' : '[data-testid="sort-desc"]';
+    const selectorTemplate = `#radio-btn-sorting-id-###option### ${orderSelector}`;
+    let option;
+    switch (sortingOption) {
+      case StakePoolSortingOption.Ticker:
+      case StakePoolSortingOption.Saturation:
+      case StakePoolSortingOption.ROS:
+      case StakePoolSortingOption.Cost:
+      case StakePoolSortingOption.Margin:
+      case StakePoolSortingOption.Pledge:
+        option = String(sortingOption).toLowerCase();
+        break;
+      case StakePoolSortingOption.ProducedBlocks:
+        option = 'blocks';
+        break;
+      case StakePoolSortingOption.LiveStake:
+        option = 'liveStake';
+        break;
+      default:
+        throw new Error(`Unsupported sorting option: ${sortingOption}`);
     }
+    return selectorTemplate.replace('###option###', option);
+  }
+
+  async clickOnOrderButtonForSortingOption(order: 'ascending' | 'descending', sortingOption: StakePoolSortingOption) {
+    const selector = this.getSortingOptionButtonSelector(sortingOption, order);
+    await $(selector).moveTo();
+    await $(selector).click();
   }
 }
 

packages/e2e-tests/src/elements/multidelegation/MultidelegationPage.ts

@@ -64,6 +64,7 @@ class MultidelegationPage {
   private DELEGATED_POOL_LAST_REWARDS_VALUE = '[data-testid="stats-last-reward-container"] [data-testid="stats-value"]';
   private STAKING_POOL_INFO = '[data-testid="staking-pool-info"]';
   private TOOLTIP = 'div.ant-tooltip-inner';
+  private SORTING_OPTION_TOOLTIP = '[class^="tooltip-root"]';
   private CHECKBOX = '[data-testid="stake-pool-list-checkbox"]';
   private MANAGE_BTN = '[data-testid="manage-btn"]';
   private GRID_VIEW_TOGGLE = '[data-testid="grid-view-toggle"]';
@@ -212,6 +213,10 @@ class MultidelegationPage {
     return $(this.TOOLTIP);
   }
 
+  get sortingOptionTooltip() {
+    return $(this.SORTING_OPTION_TOOLTIP);
+  }
+
   get manageBtn() {
     return $(this.MANAGE_BTN);
   }

packages/e2e-tests/src/enums/StakePoolSortingOption.ts

@@ -0,0 +1,11 @@
+/* eslint-disable no-unused-vars */
+export enum StakePoolSortingOption {
+  Ticker = 'Ticker',
+  Saturation = 'Saturation',
+  ROS = 'ROS',
+  Cost = 'Cost',
+  Margin = 'Margin',
+  ProducedBlocks = 'Produced blocks',
+  Pledge = 'Pledge',
+  LiveStake = 'Live Stake'
+}

packages/e2e-tests/src/features/MultiDelegationPageExtended.part1.feature

@@ -110,6 +110,29 @@ Feature: Staking Page - Extended View
     When I hover over "Live Stake" column name in stake pool list
     Then tooltip for "Live Stake" column is displayed
 
+  @LW-10414 @Testnet @Mainnet
+  Scenario: Extended View - Staking - Show tooltips for sorting options in "More options" component
+    When I am on Staking extended page
+    And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
+    When I hover over "Ticker" sorting option from "More options" component
+    Then tooltip for "Ticker" sorting option is displayed
+    When I hover over "Saturation" sorting option from "More options" component
+    Then tooltip for "Saturation" sorting option is displayed
+    #TODO: Uncomment when USE_ROS_STAKING_COLUMN=true
+    #When I hover over "ROS" sorting option from "More options" component
+    #Then tooltip for "ROS" sorting option is displayed
+    When I hover over "Cost" sorting option from "More options" component
+    Then tooltip for "Cost" sorting option is displayed
+    When I hover over "Margin" sorting option from "More options" component
+    Then tooltip for "Margin" sorting option is displayed
+    When I hover over "Produced blocks" sorting option from "More options" component
+    Then tooltip for "Produced blocks" sorting option is displayed
+    When I hover over "Pledge" sorting option from "More options" component
+    Then tooltip for "Pledge" sorting option is displayed
+    When I hover over "Live Stake" sorting option from "More options" component
+    Then tooltip for "Live Stake" sorting option is displayed
+
   @LW-8637 @Testnet @Mainnet
   Scenario: Extended View - Staking password screen details
     When I navigate to Staking extended page

packages/e2e-tests/src/features/MultiDelegationPageExtended.part2.feature

@@ -49,3 +49,31 @@ Feature: Staking Page - Extended View
       | Blocks     | descending    | ascending      |
       | Pledge     | descending    | ascending      |
       | Live Stake | descending    | ascending      |
+
+  @LW-10145 @Testnet @Mainnet
+  Scenario Outline: Extended View - Staking - List View - More options - Sorting - sort stake pools by <option> <order>
+    When I am on Staking extended page
+    And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
+    And I select "<option>" sorting option from "More options" component
+    Then order button is displayed for "<option>" sorting option in <default_order> state
+    And <default_order> sorting indicator is displayed for "<column>" column
+    And stake pool list rows are sorted by "<option>" in <default_order> order
+    When I select <modified_order> order for "<option>" sorting option
+    Then order button is displayed for "<option>" sorting option in <modified_order> state
+    And <modified_order> sorting indicator is displayed for "<column>" column
+    And stake pool list rows are sorted by "<option>" in <modified_order> order
+    When I select <default_order> order for "<option>" sorting option
+    Then order button is displayed for "<option>" sorting option in <default_order> state
+    And <default_order> sorting indicator is displayed for "<column>" column
+    And stake pool list rows are sorted by "<option>" in <default_order> order
+    Examples:
+      | option          | column     | default_order | modified_order |
+      | Saturation      | Saturation | descending    | ascending      |
+#      | ROS             | ROS        | descending    | ascending      |# TODO: Uncomment when USE_ROS_STAKING_COLUMN=true
+      | Cost            | Cost       | ascending     | descending     |
+      | Margin          | Margin     | ascending     | descending     |
+      | Produced blocks | Blocks     | descending    | ascending      |
+      | Pledge          | Pledge     | descending    | ascending      |
+      | Live Stake      | Live Stake | descending    | ascending      |
+      | Ticker          | Ticker     | ascending     | descending     |

packages/e2e-tests/src/steps/multidelegationSteps.ts

@@ -30,7 +30,9 @@ import ChangingStakingPreferencesModalAssert from '../assert/multidelegation/Cha
 import { StakePoolListColumnName, StakePoolSortingOptionType } from '../types/staking';
 import SwitchingStakePoolModal from '../elements/staking/SwitchingStakePoolModal';
 import MoreOptionsComponentAssert from '../assert/multidelegation/MoreOptionsComponentAssert';
-import { mapColumnNameStringToEnum } from '../utils/stakePoolListContent';
+import { mapColumnNameStringToEnum, mapSortingOptionNameStringToEnum } from '../utils/stakePoolListContent';
+import { browser } from '@wdio/globals';
+import { StakePoolSortingOption } from '../enums/StakePoolSortingOption';
 
 const validPassword = 'N_8J@bne87A';
 
@@ -499,10 +501,26 @@ When(
   }
 );
 
+When(
+  /^I hover over "(Ticker|Saturation|ROS|Cost|Margin|Produced blocks|Pledge|Live Stake)" sorting option from "More options" component$/,
+  async (sortingOption: StakePoolSortingOptionType) => {
+    await MultidelegationPage.moreOptionsComponent.hoverOverSortingOption(
+      mapSortingOptionNameStringToEnum(sortingOption)
+    );
+  }
+);
+
+Then(
+  /^tooltip for "(Ticker|Saturation|ROS|Cost|Margin|Produced blocks|Pledge|Live Stake)" sorting option is displayed$/,
+  async (sortingOption: StakePoolSortingOptionType) => {
+    await MultidelegationPageAssert.assertSeeTooltipForSortingOption(mapSortingOptionNameStringToEnum(sortingOption));
+  }
+);
+
 When(
   /^I select "(Ticker|Saturation|ROS|Cost|Margin|Produced blocks|Pledge|Live Stake)" sorting option from "More options" component$/,
   async (sortingOption: StakePoolSortingOptionType) => {
-    await MultidelegationPage.moreOptionsComponent.selectSortingOption(sortingOption);
+    await MultidelegationPage.moreOptionsComponent.selectSortingOption(mapSortingOptionNameStringToEnum(sortingOption));
   }
 );
 
@@ -521,13 +539,48 @@ Then(
 );
 
 Then(
-  /^stake pool (list rows|cards) are sorted by "(Ticker|Saturation|ROS|Cost|Margin|Blocks|Pledge|Live Stake)" in (ascending|descending) order$/,
+  /^stake pool (list rows|cards) are sorted by "(Ticker|Saturation|ROS|Cost|Margin|Blocks|Produced blocks|Pledge|Live Stake)" in (ascending|descending) order$/,
   async (
     stakePoolsDisplayType: 'list rows' | 'cards',
-    sortingOption: StakePoolListColumnName,
+    sortingOption: StakePoolSortingOptionType | 'Blocks', // Different label used on column header and on "More options" component
     order: 'ascending' | 'descending'
   ) => {
     const poolLimit = 100; // Limit verification to 100 stake pools due to time constraints
-    await MultidelegationPageAssert.assertSeeStakePoolsSorted(stakePoolsDisplayType, sortingOption, order, poolLimit);
+    await MultidelegationPageAssert.assertSeeStakePoolsSorted(
+      stakePoolsDisplayType,
+      sortingOption === 'Blocks'
+        ? StakePoolSortingOption.ProducedBlocks
+        : mapSortingOptionNameStringToEnum(sortingOption),
+      order,
+      poolLimit
+    );
+  }
+);
+
+When(
+  /^I select (ascending|descending) order for "(Ticker|Saturation|ROS|Cost|Margin|Produced blocks|Pledge|Live Stake)" sorting option$/,
+  async (order: 'ascending' | 'descending', sortingOption: StakePoolSortingOptionType) => {
+    const isOptionAlreadySelected = await (
+      await MultidelegationPage.moreOptionsComponent.getSortingOptionOrderButton(
+        mapSortingOptionNameStringToEnum(sortingOption),
+        order
+      )
+    ).isDisplayed();
+    if (!isOptionAlreadySelected) {
+      await MultidelegationPage.moreOptionsComponent.clickOnOrderButtonForSortingOption(
+        order === 'ascending' ? 'descending' : 'ascending', // look for button with reversed state
+        mapSortingOptionNameStringToEnum(sortingOption)
+      );
+    }
+  }
+);
+
+Then(
+  /^order button is displayed for "(Ticker|Saturation|ROS|Cost|Margin|Produced blocks|Pledge|Live Stake)" sorting option in (ascending|descending) state$/,
+  async (sortingOption: StakePoolSortingOptionType, order: 'ascending' | 'descending') => {
+    await MultidelegationPageAssert.assertSeeSortingOptionOrderButton(
+      mapSortingOptionNameStringToEnum(sortingOption),
+      order
+    );
   }
 );