test(extension): add support for grid view toggle (#942)

* test(extension): add support for grid view toggle

* test(extension): adjust assertion

Author: wklos-iohk

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

@@ -30,6 +30,8 @@ class MultidelegationPageAssert {
     expect(await MultidelegationPage.overviewTab.getText()).to.equal(await t('root.nav.overviewTitle', 'staking'));
     await MultidelegationPage.browseTab.waitForDisplayed();
     expect(await MultidelegationPage.browseTab.getText()).to.equal(await t('root.nav.browsePoolsTitle', 'staking'));
+    await MultidelegationPage.activityTab.waitForDisplayed();
+    expect(await MultidelegationPage.activityTab.getText()).to.equal(await t('root.nav.activityTitle', 'staking'));
   };
 
   assertSeeDelegationCardDetailsInfo = async () => {

packages/e2e-tests/src/assert/transactionsPageAssert.ts

@@ -109,8 +109,8 @@ class TransactionsPageAssert {
       const txFiatValueNumber = txFiatValueString.slice(0, -4);
       const txFiatValue = Number(txFiatValueNumber);
 
-      expect(txADAValue).to.be.greaterThan(0);
-      expect(txFiatValue).to.be.greaterThan(0);
+      expect(txADAValue).to.be.not.equal(0);
+      expect(txFiatValue).to.be.not.equal(0);
     }
   }
 

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

@@ -11,6 +11,7 @@ import CommonDrawerElements from '../CommonDrawerElements';
 import { StakePoolListColumnType } from '../../types/staking';
 
 class MultidelegationPage {
+  private ACTIVITY_TAB = '[data-testid="activity-tab"]';
   private OVERVIEW_TAB = '[data-testid="overview-tab"]';
   private BROWSE_POOLS_TAB = '[data-testid="browse-tab"]';
   private DELEGATION_CARD_STATUS_LABEL = '[data-testid="overview.delegationCard.label.status-label"]';
@@ -60,6 +61,8 @@ class MultidelegationPage {
   private TOOLTIP = 'div.ant-tooltip-inner';
   private CHECKBOX = '[data-testid="stake-pool-list-checkbox"]';
   private MANAGE_BTN = '[data-testid="manage-btn"]';
+  private GRID_VIEW_TOGGLE = '[data-testid="grid-view-toggle"]';
+  private LIST_VIEW_TOGGLE = '[data-testid="list-view-toggle"]';
 
   get title() {
     return SectionTitle.sectionTitle;
@@ -73,6 +76,18 @@ class MultidelegationPage {
     return $(this.BROWSE_POOLS_TAB);
   }
 
+  get activityTab() {
+    return $(this.ACTIVITY_TAB);
+  }
+
+  get gridViewToggle() {
+    return $(this.GRID_VIEW_TOGGLE);
+  }
+
+  get listViewToggle() {
+    return $(this.LIST_VIEW_TOGGLE);
+  }
+
   get delegationCardStatusLabel() {
     return $(this.DELEGATION_CARD_STATUS_LABEL);
   }
@@ -376,6 +391,21 @@ class MultidelegationPage {
     await this.manageBtn.waitForClickable();
     await this.manageBtn.click();
   }
+
+  async switchPoolsView(viewType: 'grid' | 'list') {
+    switch (viewType) {
+      case 'grid':
+        await this.gridViewToggle.waitForClickable();
+        await this.gridViewToggle.click();
+        break;
+      case 'list':
+        await this.listViewToggle.waitForClickable();
+        await this.listViewToggle.click();
+        break;
+      default:
+        throw new Error(`Unsupported view: ${viewType}`);
+    }
+  }
 }
 
 export default new MultidelegationPage();

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

@@ -24,12 +24,14 @@ Feature: Staking Page - Extended View
   Scenario: Extended View - Staking search control is displayed with appropriate content
     When I navigate to Staking extended page
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     Then I see the stake pool search control with appropriate content
 
   @LW-8448 @Testnet
   Scenario Outline: Extended View - Stake pool search for "<stake_pool_search_term>" returns the expected number of results <number_of_results> with appropriate content
     When I navigate to Staking extended page
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I input "<stake_pool_search_term>" into stake pool search bar
     Then there are <number_of_results> stake pools returned
     And (if applicable) first stake pool search result has "<stake_pool_ticker>" ticker
@@ -48,6 +50,7 @@ Feature: Staking Page - Extended View
   Scenario Outline: Extended View - Stake pool search for "<stake_pool_search_term>" returns the expected number of results <number_of_results> with appropriate content
     When I navigate to Staking extended page
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I input "<stake_pool_search_term>" into stake pool search bar
     Then there are <number_of_results> stake pools returned
     And (if applicable) first stake pool search result has "<stake_pool_ticker>" ticker
@@ -88,6 +91,7 @@ Feature: Staking Page - Extended View
   Scenario Outline: Extended View - Staking - Show tooltip for column names in browse pools section
     When I navigate to Staking extended page
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     When I hover over "<column_name>" column name in stake pool list
     Then tooltip for "<column_name>" column is displayed
     Examples:
@@ -106,6 +110,7 @@ Feature: Staking Page - Extended View
     When I navigate to Staking extended page
     And I open Overview tab
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I input "ADA Ocean" into stake pool search bar
     And I click on the stake pool with ticker "OCEAN"
     And I click on "Stake all on this pool" button on stake pool details drawer
@@ -117,6 +122,7 @@ Feature: Staking Page - Extended View
   Scenario: Extended View - Selecting stakepool from list opens drawer with appropriate details
     And I am on Staking extended page
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I input "ADA Ocean" into stake pool search bar
     And I click on the stake pool with ticker "OCEAN"
     Then I see stake pool details drawer for "ADA Ocean" stake pool
@@ -125,6 +131,7 @@ Feature: Staking Page - Extended View
   Scenario: Extended View - Staking - Stakepool details drawer - Close drawer
     And I am on Staking extended page
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I input "ADA Ocean" into stake pool search bar
     And I click on the stake pool with ticker "OCEAN"
     And Stake pool details drawer is opened
@@ -135,5 +142,6 @@ Feature: Staking Page - Extended View
   Scenario: Extended View - Stake pool list item
     And I am on Staking extended page
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I wait for stake pool list to be populated
     Then each stake pool list item contains: checkbox, ticker, saturation, ROS, cost, margin, blocks, pledge and live stake

packages/e2e-tests/src/features/MultidelegationDelegatedFundsMultiplePoolsExtended.feature

@@ -122,6 +122,7 @@ Feature: Staking Page - Delegated funds - Multiple pools - Extended View
   Scenario Outline: Extended View - button <button> click on stake pool details drawer
     When I navigate to Staking extended page
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I input "<pool>" into stake pool search bar
     And I click on the stake pool with ticker "<pool>"
     Then I see "<numberOfButtons>" stake pool details buttons for <delegation> pool

packages/e2e-tests/src/features/MultidelegationDelegatedFundsSinglePoolExtended.feature

@@ -146,6 +146,7 @@ Feature: Staking Page - Delegated funds - Single pool - Extended View
   Scenario Outline: Extended View - button <button> click on stake pool details drawer
     When I navigate to Staking extended page
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I input "<ticker>" into stake pool search bar
     And I click on the stake pool with ticker "<ticker>"
     Then I see "2" stake pool details buttons for <delegation> pool

packages/e2e-tests/src/features/e2e/MultidelegationSwitchingPoolsExtendedE2E.feature

@@ -10,6 +10,7 @@ Feature: Staking Page - Switching pools - Extended Browser View - E2E
     When I open Overview tab
     And I wait until delegation info card shows staking to "<pools_before>" pool(s)
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I pick "<pools_after>" pools for delegation from browse pools view: "<pool_tickers>"
     And I click "Next" button on staking portfolio bar
     And I click "Fine by me" button on "Changing staking preferences?" modal
@@ -34,6 +35,7 @@ Feature: Staking Page - Switching pools - Extended Browser View - E2E
   Scenario: Extended View - Transactions details - Delegation Tx shows pool name and ticker - Stake pool with metadata
     And I save identifiers of stake pools currently in use
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I input "OtherStakePool" into stake pool search bar
     And I click on the stake pool with ticker "OtherStakePool"
     Then I see stake pool details drawer for "OtherStakePool" stake pool
@@ -56,6 +58,7 @@ Feature: Staking Page - Switching pools - Extended Browser View - E2E
   Scenario: Extended View - Transactions details - Delegation Tx shows pool name and ticker - Stake pool without metadata
     And I save identifiers of stake pools currently in use
     And I open Browse pools tab
+    And I switch to list view on "Browse pools" tab
     And I input "OtherNoMetadataStakePool" into stake pool search bar
     And I click on the stake pool with ticker "-"
     Then I see stake pool details drawer for stake pool without metadata

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

@@ -478,3 +478,10 @@ When(/^\(if applicable\) I close "Switching pools\?" modal$/, async () => {
 Then(/^I see Expanded View banner$/, async () => {
   await StartStakingPageAssert.assertSeeExpandedViewBanner();
 });
+
+When(/^I switch to (grid|list) view on "Browse pools" tab$/, async (viewType: 'grid' | 'list') => {
+  // TODO: remove `if` when USE_MULTI_DELEGATION_STAKING_GRID_VIEW is enabled by default
+  if (await MultidelegationPage.gridViewToggle.isExisting()) {
+    await MultidelegationPage.switchPoolsView(viewType);
+  }
+});

packages/staking/src/features/BrowsePools/BrowsePoolsHeader.tsx

@@ -19,15 +19,15 @@ export const BrowsePoolsHeader = ({ poolsCount, poolsView, setPoolsView }: Brows
 
   return (
     <Flex justifyContent="space-between" alignItems="center">
-      <Text.Body.Normal className={styles.title} weight="$semibold">
+      <Text.Body.Normal className={styles.title} weight="$semibold" data-testid="pools-counter">
         {t('browsePools.header.poolsCount', {
           poolsCount: poolsCount ? formattedPoolsCount : 0,
         })}
       </Text.Body.Normal>
       {USE_MULTI_DELEGATION_STAKING_GRID_VIEW && (
         <ToggleButtonGroup.Root variant="compact" value={poolsView} onValueChange={setPoolsView}>
-          <ToggleButtonGroup.Item value={BrowsePoolsView.grid} icon={GridIcon} />
-          <ToggleButtonGroup.Item value={BrowsePoolsView.table} icon={TableIcon} />
+          <ToggleButtonGroup.Item value={BrowsePoolsView.grid} icon={GridIcon} data-testid="grid-view-toggle" />
+          <ToggleButtonGroup.Item value={BrowsePoolsView.table} icon={TableIcon} data-testid="list-view-toggle" />
         </ToggleButtonGroup.Root>
       )}
     </Flex>