Merge branch 'main' into feat(backend)/function-to-add-hidden-dapps

e2e/transactions-page.spec.ts

@@ -11,7 +11,7 @@ testWithII('should display BTC transactions page', async ({ page, iiPage }) => {
 });
 
 // TODO: resolve the below test flakiness
-testWithII.skip('should display ETH transactions page', async ({ page, iiPage }) => {
+testWithII('should display ETH transactions page', async ({ page, iiPage }) => {
 	const transactionsPage = new TransactionsPage({ page, iiPage, tokenSymbol: 'ETH' });
 
 	await transactionsPage.waitForReady();

e2e/utils/components/promotion-carousel.component.ts

@@ -0,0 +1,33 @@
+import type { Page } from '@playwright/test';
+
+export class PromotionCarousel {
+	#page: Page;
+
+	constructor(page: Page) {
+		this.#page = page;
+	}
+
+	public async navigateToSlide(slideNumber: number): Promise<void> {
+		const navigation1Selector = `[data-tid="carousel-slide-navigation-${slideNumber}"]:visible`;
+		await this.#page.click(navigation1Selector);
+	}
+
+	public async freezeCarousel(): Promise<void> {
+		// Freeze the carousel by applying the first slide's transform style to all visible slides
+		await this.#page.$$eval(`div[data-tid="carousel-slide"]:visible`, (elements) => {
+			elements.forEach((el) => {
+				const slideStyle = el.style.transform;
+				el.style.transform = slideStyle;
+			});
+		});
+		// Freeze the carousel navigation indicators by fixing their current width and background color styles
+		await this.#page.$$eval(`[data-tid^="carousel-slide-navigation-"]:visible`, (elements) => {
+			elements.forEach((el) => {
+				const indicatorWidth = el.style.width;
+				const indicatorBackgroundColor = el.style.backgroundColor;
+				el.style.width = indicatorWidth;
+				el.style.backgroundColor = indicatorBackgroundColor;
+			});
+		});
+	}
+}

e2e/utils/pages/activity.page.ts

@@ -17,5 +17,6 @@ export class ActivityPage extends HomepageLoggedIn {
 	// TODO: Implement this method clicking on the navigation item instead of using the URL, when the activity page is implemented
 	override async extendWaitForReady(): Promise<void> {
 		await this.#page.goto(ACTIVITY_URL);
+		await this.waitForLoadState();
 	}
 }

e2e/utils/pages/explorer.page.ts

@@ -10,5 +10,6 @@ export class ExplorerPage extends HomepageLoggedIn {
 
 	override async extendWaitForReady(): Promise<void> {
 		await this.clickByTestId(NAVIGATION_ITEM_EXPLORER);
+		await this.waitForLoadState();
 	}
 }

e2e/utils/pages/homepage.page.ts

@@ -11,8 +11,9 @@ import {
 	TOKEN_CARD
 } from '$lib/constants/test-ids.constants';
 import { type InternetIdentityPage } from '@dfinity/internet-identity-playwright';
-import { nonNullish } from '@dfinity/utils';
+import { isNullish, nonNullish } from '@dfinity/utils';
 import { expect, type Locator, type Page, type ViewportSize } from '@playwright/test';
+import { PromotionCarousel } from '../components/promotion-carousel.component';
 import { HOMEPAGE_URL, LOCAL_REPLICA_URL } from '../constants/e2e.constants';
 import { getQRCodeValueFromDataURL } from '../qr-code.utils';
 import { getReceiveTokensModalQrCodeButtonSelector } from '../selectors.utils';
@@ -55,6 +56,7 @@ interface WaitForLocatorOptions {
 abstract class Homepage {
 	readonly #page: Page;
 	readonly #viewportSize?: ViewportSize;
+	private promotionCarousel?: PromotionCarousel;
 
 	protected constructor({ page, viewportSize }: HomepageParams) {
 		this.#page = page;
@@ -201,6 +203,19 @@ abstract class Homepage {
 		await expect(modal).toHaveScreenshot();
 	}
 
+	async setCarouselFirstSlide(): Promise<void> {
+		if (isNullish(this.promotionCarousel)) {
+			this.promotionCarousel = new PromotionCarousel(this.#page);
+		}
+
+		await this.promotionCarousel.navigateToSlide(1);
+		await this.promotionCarousel.freezeCarousel();
+	}
+
+	async waitForLoadState() {
+		await this.#page.waitForLoadState('networkidle');
+	}
+
 	abstract extendWaitForReady(): Promise<void>;
 
 	abstract waitForReady(): Promise<void>;
@@ -218,6 +233,7 @@ export class HomepageLoggedOut extends Homepage {
 	 */
 	async waitForReady(): Promise<void> {
 		await this.waitForHomepageReady();
+		await this.waitForLoadState();
 	}
 }
 
@@ -299,6 +315,10 @@ export class HomepageLoggedIn extends Homepage {
 
 		await this.waitForTokensInitialization();
 
+		await this.waitForLoadState();
+
+		await this.setCarouselFirstSlide();
+
 		await this.extendWaitForReady();
 	}
 }

e2e/utils/pages/settings.page.ts

@@ -15,5 +15,7 @@ export class SettingsPage extends HomepageLoggedIn {
 		await this.clickByTestId(NAVIGATION_ITEM_SETTINGS);
 
 		await this.mockSelector({ selector: `[data-tid="${SETTINGS_ADDRESS_LABEL}"]` });
+
+		await this.waitForLoadState();
 	}
 }

e2e/utils/pages/transactions.page.ts

@@ -16,5 +16,6 @@ export class TransactionsPage extends HomepageLoggedIn {
 
 	override async extendWaitForReady(): Promise<void> {
 		await this.clickByTestId(`${TOKEN_CARD}-${this.#tokenSymbol}`);
+		await this.waitForLoadState();
 	}
 }

src/frontend/src/lib/components/carousel/Carousel.svelte

@@ -3,6 +3,7 @@
 	import { onMount } from 'svelte';
 	import Controls from '$lib/components/carousel/Controls.svelte';
 	import Indicators from '$lib/components/carousel/Indicators.svelte';
+	import { CAROUSEL_CONTAINER } from '$lib/constants/test-ids.constants';
 	import { moveSlider, extendCarouselSliderFrame } from '$lib/utils/carousel.utils';
 
 	export let autoplay = 5000;
@@ -245,10 +246,11 @@
 <svelte:window on:resize={onResize} />
 
 <div
+	data-tid={CAROUSEL_CONTAINER}
 	class={`${styleClass ?? ''} relative overflow-hidden rounded-3xl bg-white px-3 pb-10 pt-3 shadow`}
 >
 	<div class="w-full overflow-hidden" bind:this={container}>
-		<div class="flex" bind:this={sliderFrame}>
+		<div data-tid="carousel-slide" class="flex" bind:this={sliderFrame}>
 			<slot />
 		</div>
 	</div>

src/frontend/src/lib/components/carousel/Indicator.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { CAROUSEL_SLIDE_NAVIGATION } from '$lib/constants/test-ids.constants';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { replacePlaceholders } from '$lib/utils/i18n.utils';
 
@@ -20,5 +21,6 @@
 <button
 	on:click
 	aria-label={replacePlaceholders($i18n.carousel.text.indicator, { $index: `${index + 1}` })}
+	data-tid={`${CAROUSEL_SLIDE_NAVIGATION}${index + 1}`}
 	class="{`${isActive ? 'w-7 bg-black' : 'w-4 bg-dust'} mr-1 h-1.5 transition-all duration-300 ease-linear last:mr-0`}}"
 ></button>

src/frontend/src/lib/constants/test-ids.constants.ts

@@ -46,3 +46,6 @@ export const NAVIGATION_ITEM_TOKENS = 'navigation-item-tokens';
 export const NAVIGATION_ITEM_ACTIVITY = 'navigation-item-activity';
 export const NAVIGATION_ITEM_EXPLORER = 'navigation-item-explore';
 export const NAVIGATION_ITEM_SETTINGS = 'navigation-item-settings';
+
+export const CAROUSEL_CONTAINER = 'carousel-container';
+export const CAROUSEL_SLIDE_NAVIGATION = 'carousel-slide-navigation-';