Skip to content

Commit 4ed7521

Browse files
wklos-iohkwklos-iohk
authored
test(extension): add support for grid view toggle (#942)
* test(extension): add support for grid view toggle * test(extension): adjust assertion
1 parent aac775a commit 4ed7521

9 files changed

Lines changed: 57 additions & 5 deletions

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,8 @@ class MultidelegationPageAssert {
3030
expect(await MultidelegationPage.overviewTab.getText()).to.equal(await t('root.nav.overviewTitle', 'staking'));
3131
await MultidelegationPage.browseTab.waitForDisplayed();
3232
expect(await MultidelegationPage.browseTab.getText()).to.equal(await t('root.nav.browsePoolsTitle', 'staking'));
33+
await MultidelegationPage.activityTab.waitForDisplayed();
34+
expect(await MultidelegationPage.activityTab.getText()).to.equal(await t('root.nav.activityTitle', 'staking'));
3335
};
3436

3537
assertSeeDelegationCardDetailsInfo = async () => {

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@ class TransactionsPageAssert {
109109
const txFiatValueNumber = txFiatValueString.slice(0, -4);
110110
const txFiatValue = Number(txFiatValueNumber);
111111

112-
expect(txADAValue).to.be.greaterThan(0);
113-
expect(txFiatValue).to.be.greaterThan(0);
112+
expect(txADAValue).to.be.not.equal(0);
113+
expect(txFiatValue).to.be.not.equal(0);
114114
}
115115
}
116116

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import CommonDrawerElements from '../CommonDrawerElements';
1111
import { StakePoolListColumnType } from '../../types/staking';
1212

1313
class MultidelegationPage {
14+
private ACTIVITY_TAB = '[data-testid="activity-tab"]';
1415
private OVERVIEW_TAB = '[data-testid="overview-tab"]';
1516
private BROWSE_POOLS_TAB = '[data-testid="browse-tab"]';
1617
private DELEGATION_CARD_STATUS_LABEL = '[data-testid="overview.delegationCard.label.status-label"]';
@@ -60,6 +61,8 @@ class MultidelegationPage {
6061
private TOOLTIP = 'div.ant-tooltip-inner';
6162
private CHECKBOX = '[data-testid="stake-pool-list-checkbox"]';
6263
private MANAGE_BTN = '[data-testid="manage-btn"]';
64+
private GRID_VIEW_TOGGLE = '[data-testid="grid-view-toggle"]';
65+
private LIST_VIEW_TOGGLE = '[data-testid="list-view-toggle"]';
6366

6467
get title() {
6568
return SectionTitle.sectionTitle;
@@ -73,6 +76,18 @@ class MultidelegationPage {
7376
return $(this.BROWSE_POOLS_TAB);
7477
}
7578

79+
get activityTab() {
80+
return $(this.ACTIVITY_TAB);
81+
}
82+
83+
get gridViewToggle() {
84+
return $(this.GRID_VIEW_TOGGLE);
85+
}
86+
87+
get listViewToggle() {
88+
return $(this.LIST_VIEW_TOGGLE);
89+
}
90+
7691
get delegationCardStatusLabel() {
7792
return $(this.DELEGATION_CARD_STATUS_LABEL);
7893
}
@@ -376,6 +391,21 @@ class MultidelegationPage {
376391
await this.manageBtn.waitForClickable();
377392
await this.manageBtn.click();
378393
}
394+
395+
async switchPoolsView(viewType: 'grid' | 'list') {
396+
switch (viewType) {
397+
case 'grid':
398+
await this.gridViewToggle.waitForClickable();
399+
await this.gridViewToggle.click();
400+
break;
401+
case 'list':
402+
await this.listViewToggle.waitForClickable();
403+
await this.listViewToggle.click();
404+
break;
405+
default:
406+
throw new Error(`Unsupported view: ${viewType}`);
407+
}
408+
}
379409
}
380410

381411
export default new MultidelegationPage();

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,14 @@ Feature: Staking Page - Extended View
2424
Scenario: Extended View - Staking search control is displayed with appropriate content
2525
When I navigate to Staking extended page
2626
And I open Browse pools tab
27+
And I switch to list view on "Browse pools" tab
2728
Then I see the stake pool search control with appropriate content
2829

2930
@LW-8448 @Testnet
3031
Scenario Outline: Extended View - Stake pool search for "<stake_pool_search_term>" returns the expected number of results <number_of_results> with appropriate content
3132
When I navigate to Staking extended page
3233
And I open Browse pools tab
34+
And I switch to list view on "Browse pools" tab
3335
And I input "<stake_pool_search_term>" into stake pool search bar
3436
Then there are <number_of_results> stake pools returned
3537
And (if applicable) first stake pool search result has "<stake_pool_ticker>" ticker
@@ -48,6 +50,7 @@ Feature: Staking Page - Extended View
4850
Scenario Outline: Extended View - Stake pool search for "<stake_pool_search_term>" returns the expected number of results <number_of_results> with appropriate content
4951
When I navigate to Staking extended page
5052
And I open Browse pools tab
53+
And I switch to list view on "Browse pools" tab
5154
And I input "<stake_pool_search_term>" into stake pool search bar
5255
Then there are <number_of_results> stake pools returned
5356
And (if applicable) first stake pool search result has "<stake_pool_ticker>" ticker
@@ -88,6 +91,7 @@ Feature: Staking Page - Extended View
8891
Scenario Outline: Extended View - Staking - Show tooltip for column names in browse pools section
8992
When I navigate to Staking extended page
9093
And I open Browse pools tab
94+
And I switch to list view on "Browse pools" tab
9195
When I hover over "<column_name>" column name in stake pool list
9296
Then tooltip for "<column_name>" column is displayed
9397
Examples:
@@ -106,6 +110,7 @@ Feature: Staking Page - Extended View
106110
When I navigate to Staking extended page
107111
And I open Overview tab
108112
And I open Browse pools tab
113+
And I switch to list view on "Browse pools" tab
109114
And I input "ADA Ocean" into stake pool search bar
110115
And I click on the stake pool with ticker "OCEAN"
111116
And I click on "Stake all on this pool" button on stake pool details drawer
@@ -117,6 +122,7 @@ Feature: Staking Page - Extended View
117122
Scenario: Extended View - Selecting stakepool from list opens drawer with appropriate details
118123
And I am on Staking extended page
119124
And I open Browse pools tab
125+
And I switch to list view on "Browse pools" tab
120126
And I input "ADA Ocean" into stake pool search bar
121127
And I click on the stake pool with ticker "OCEAN"
122128
Then I see stake pool details drawer for "ADA Ocean" stake pool
@@ -125,6 +131,7 @@ Feature: Staking Page - Extended View
125131
Scenario: Extended View - Staking - Stakepool details drawer - Close drawer
126132
And I am on Staking extended page
127133
And I open Browse pools tab
134+
And I switch to list view on "Browse pools" tab
128135
And I input "ADA Ocean" into stake pool search bar
129136
And I click on the stake pool with ticker "OCEAN"
130137
And Stake pool details drawer is opened
@@ -135,5 +142,6 @@ Feature: Staking Page - Extended View
135142
Scenario: Extended View - Stake pool list item
136143
And I am on Staking extended page
137144
And I open Browse pools tab
145+
And I switch to list view on "Browse pools" tab
138146
And I wait for stake pool list to be populated
139147
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‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ Feature: Staking Page - Delegated funds - Multiple pools - Extended View
122122
Scenario Outline: Extended View - button <button> click on stake pool details drawer
123123
When I navigate to Staking extended page
124124
And I open Browse pools tab
125+
And I switch to list view on "Browse pools" tab
125126
And I input "<pool>" into stake pool search bar
126127
And I click on the stake pool with ticker "<pool>"
127128
Then I see "<numberOfButtons>" stake pool details buttons for <delegation> pool

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -146,6 +146,7 @@ Feature: Staking Page - Delegated funds - Single pool - Extended View
146146
Scenario Outline: Extended View - button <button> click on stake pool details drawer
147147
When I navigate to Staking extended page
148148
And I open Browse pools tab
149+
And I switch to list view on "Browse pools" tab
149150
And I input "<ticker>" into stake pool search bar
150151
And I click on the stake pool with ticker "<ticker>"
151152
Then I see "2" stake pool details buttons for <delegation> pool

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ Feature: Staking Page - Switching pools - Extended Browser View - E2E
1010
When I open Overview tab
1111
And I wait until delegation info card shows staking to "<pools_before>" pool(s)
1212
And I open Browse pools tab
13+
And I switch to list view on "Browse pools" tab
1314
And I pick "<pools_after>" pools for delegation from browse pools view: "<pool_tickers>"
1415
And I click "Next" button on staking portfolio bar
1516
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
3435
Scenario: Extended View - Transactions details - Delegation Tx shows pool name and ticker - Stake pool with metadata
3536
And I save identifiers of stake pools currently in use
3637
And I open Browse pools tab
38+
And I switch to list view on "Browse pools" tab
3739
And I input "OtherStakePool" into stake pool search bar
3840
And I click on the stake pool with ticker "OtherStakePool"
3941
Then I see stake pool details drawer for "OtherStakePool" stake pool
@@ -56,6 +58,7 @@ Feature: Staking Page - Switching pools - Extended Browser View - E2E
5658
Scenario: Extended View - Transactions details - Delegation Tx shows pool name and ticker - Stake pool without metadata
5759
And I save identifiers of stake pools currently in use
5860
And I open Browse pools tab
61+
And I switch to list view on "Browse pools" tab
5962
And I input "OtherNoMetadataStakePool" into stake pool search bar
6063
And I click on the stake pool with ticker "-"
6164
Then I see stake pool details drawer for stake pool without metadata

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -478,3 +478,10 @@ When(/^\(if applicable\) I close "Switching pools\?" modal$/, async () => {
478478
Then(/^I see Expanded View banner$/, async () => {
479479
await StartStakingPageAssert.assertSeeExpandedViewBanner();
480480
});
481+
482+
When(/^I switch to (grid|list) view on "Browse pools" tab$/, async (viewType: 'grid' | 'list') => {
483+
// TODO: remove `if` when USE_MULTI_DELEGATION_STAKING_GRID_VIEW is enabled by default
484+
if (await MultidelegationPage.gridViewToggle.isExisting()) {
485+
await MultidelegationPage.switchPoolsView(viewType);
486+
}
487+
});

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -19,15 +19,15 @@ export const BrowsePoolsHeader = ({ poolsCount, poolsView, setPoolsView }: Brows
1919

2020
return (
2121
<Flex justifyContent="space-between" alignItems="center">
22-
<Text.Body.Normal className={styles.title} weight="$semibold">
22+
<Text.Body.Normal className={styles.title} weight="$semibold" data-testid="pools-counter">
2323
{t('browsePools.header.poolsCount', {
2424
poolsCount: poolsCount ? formattedPoolsCount : 0,
2525
})}
2626
</Text.Body.Normal>
2727
{USE_MULTI_DELEGATION_STAKING_GRID_VIEW && (
2828
<ToggleButtonGroup.Root variant="compact" value={poolsView} onValueChange={setPoolsView}>
29-
<ToggleButtonGroup.Item value={BrowsePoolsView.grid} icon={GridIcon} />
30-
<ToggleButtonGroup.Item value={BrowsePoolsView.table} icon={TableIcon} />
29+
<ToggleButtonGroup.Item value={BrowsePoolsView.grid} icon={GridIcon} data-testid="grid-view-toggle" />
30+
<ToggleButtonGroup.Item value={BrowsePoolsView.table} icon={TableIcon} data-testid="list-view-toggle" />
3131
</ToggleButtonGroup.Root>
3232
)}
3333
</Flex>

0 commit comments

Comments
 (0)