Merge pull request #585 from OasisDEX/earn-protocol-24-oct

Earn protocol - Adding more framework pages and tests

srcEarnProtocol/pages/landingPage/strategiesCarousel/index.ts

@@ -1,6 +1,7 @@
 import { Page } from '@playwright/test';
 import { ActiveSlide } from './activeSlide';
 import { expect, step } from '#earnProtocolFixtures';
+import { expectDefaultTimeout } from 'utils/config';
 
 export class StrategiesCarousel {
 	readonly page: Page;
@@ -13,18 +14,25 @@ export class StrategiesCarousel {
 	}
 
 	@step
-	async moveToNextStrategy(direction: 'Right' | 'Left') {
-		await this.page.locator(`[class*="_button${direction}_"]`).click();
+	async moveToNextStrategy(direction: 'Right' | 'Left', args?: { timeout: number }) {
+		const arrowButtonLocator = this.page.locator(`[class*="_button${direction}_"]`);
+
+		// Wait for button to be fully visible
+		await expect(arrowButtonLocator.locator('img')).toBeVisible({
+			timeout: args?.timeout ?? expectDefaultTimeout,
+		});
+
+		// Click on button
+		await arrowButtonLocator.click();
 
 		// Button should be disabled after click
 		await expect(async () => {
-			expect(await this.page.locator(`[class*="_button${direction}_"]`).isDisabled()).toBeTruthy();
+			expect(await arrowButtonLocator.isDisabled()).toBeTruthy();
 		}).toPass();
+
 		// Button should be enabled back after a little while
 		await expect(async () => {
-			expect(
-				await this.page.locator(`[class*="_button${direction}_"]`).isDisabled()
-			).not.toBeTruthy();
+			expect(await arrowButtonLocator.isDisabled()).not.toBeTruthy();
 		}).toPass();
 	}
 }

srcEarnProtocol/pages/portfolio/index.ts

@@ -5,6 +5,7 @@ import { Overview } from './overview';
 import { Wallet } from './wallet';
 import { RebalanceActivity } from './rebalanceActivity';
 import { Rewards } from './rewards';
+import { YouMightLike } from './youMightLike';
 
 export class Portfolio {
 	readonly page: Page;
@@ -17,6 +18,8 @@ export class Portfolio {
 
 	readonly wallet: Wallet;
 
+	readonly youMightLike: YouMightLike;
+
 	readonly portfolioHeaderLocator: Locator;
 
 	constructor(page: Page) {
@@ -25,6 +28,7 @@ export class Portfolio {
 		this.rebalanceActivity = new RebalanceActivity(page);
 		this.rewards = new Rewards(page);
 		this.wallet = new Wallet(page);
+		this.youMightLike = new YouMightLike(page);
 		this.portfolioHeaderLocator = this.page.locator('[class*="PortfolioHeader_"]');
 	}
 

srcEarnProtocol/pages/portfolio/youMightLike.ts

@@ -0,0 +1,29 @@
+import { Locator, Page } from '@playwright/test';
+import { StrategyCard } from '../strategyCard';
+import { step } from '#earnProtocolFixtures';
+
+export class YouMightLike {
+	readonly page: Page;
+
+	readonly youMightLikeLocator: Locator;
+
+	constructor(page: Page) {
+		this.page = page;
+		this.youMightLikeLocator = page.locator('section:has-text("You might like")');
+	}
+
+	nthCard(nth: number) {
+		return new StrategyCard(
+			this.page,
+			this.youMightLikeLocator.locator('[class*="_strategyCard_"]').nth(nth)
+		);
+	}
+
+	@step
+	async move(direction: 'Left' | 'Right') {
+		await this.youMightLikeLocator
+			.getByRole('button')
+			.nth(direction === 'Left' ? 0 : 1)
+			.click();
+	}
+}

srcEarnProtocol/pages/strategyCard/header.ts

@@ -31,4 +31,13 @@ export class Header {
 		const risk = await this.headerLocator.getByText(' risk').innerText();
 		return risk;
 	}
+
+	@step
+	async getDetails() {
+		const token = await this.getToken();
+		const network = await this.getToken();
+		const risk = await this.getRisk();
+
+		return { token, network, risk };
+	}
 }

srcEarnProtocol/pages/strategyCard/index.ts

@@ -1,5 +1,7 @@
 import { Locator, Page } from '@playwright/test';
 import { Header } from './header';
+import { expect, step } from '#earnProtocolFixtures';
+import { expectDefaultTimeout } from 'utils/config';
 
 export class StrategyCard {
 	readonly page: Page;
@@ -10,6 +12,12 @@ export class StrategyCard {
 
 	constructor(page: Page, cardLocator: Locator) {
 		this.page = page;
+		this.cardLocator = cardLocator;
 		this.header = new Header(page, cardLocator);
 	}
+
+	@step
+	async shouldBeVisible(args?: { timeout: number }) {
+		await expect(this.cardLocator).toBeVisible({ timeout: args?.timeout ?? expectDefaultTimeout });
+	}
 }

tests/earnProtocol/landingPage.spec.ts

@@ -1,4 +1,5 @@
 import { expect, test } from '#earnProtocolFixtures';
+import { expectDefaultTimeout } from 'utils/config';
 
 test.describe('Landin page', async () => {
 	test('It should show strategy card', async ({ app }) => {
@@ -8,29 +9,20 @@ test.describe('Landin page', async () => {
 
 	(['Right', 'Left'] as const).forEach((direction) => {
 		test(`It should show strategy card to the ${direction}`, async ({ app }) => {
-			let originalStrategyCard = { token: '', network: '', risk: '' };
-			let newStrategyCard = { token: '', network: '', risk: '' };
-
 			await app.landingPage.open();
 
 			// Get strategy info for current active strategy in carousel
-			originalStrategyCard.token =
-				await app.landingPage.strategiesCarousel.activeSlide.strategyCard.header.getToken();
-			originalStrategyCard.network =
-				await app.landingPage.strategiesCarousel.activeSlide.strategyCard.header.getNetwork();
-			originalStrategyCard.risk =
-				await app.landingPage.strategiesCarousel.activeSlide.strategyCard.header.getRisk();
+			const originalStrategyCard =
+				await app.landingPage.strategiesCarousel.activeSlide.strategyCard.header.getDetails();
 
 			// Select strategy to the right
-			await app.landingPage.strategiesCarousel.moveToNextStrategy(direction);
+			await app.landingPage.strategiesCarousel.moveToNextStrategy(direction, {
+				timeout: expectDefaultTimeout * 2,
+			});
 
 			// Get strategy info for current active strategy in carousel
-			newStrategyCard.token =
-				await app.landingPage.strategiesCarousel.activeSlide.strategyCard.header.getToken();
-			newStrategyCard.network =
-				await app.landingPage.strategiesCarousel.activeSlide.strategyCard.header.getNetwork();
-			newStrategyCard.risk =
-				await app.landingPage.strategiesCarousel.activeSlide.strategyCard.header.getRisk();
+			const newStrategyCard =
+				await app.landingPage.strategiesCarousel.activeSlide.strategyCard.header.getDetails();
 
 			// Logging strategies data for debugging purposes
 			console.log('originalStrategyCard: ', originalStrategyCard);

tests/earnProtocol/portfolio.spec.ts

@@ -14,7 +14,7 @@ test.describe('Portfolio', async () => {
 		});
 	});
 
-	test('It should show switch to all Portfolio tabs', async ({ app }) => {
+	test('It should show switch to all Portfolio main tabs', async ({ app }) => {
 		await app.portfolio.open('0xA1B008dBA9F6143c6211767cbA826296f95Fe3B3');
 
 		// Switch to 'Wallet' tab