test(e2e): homepage screenshot tests

.github/workflows/e2e-tests.yml

@@ -11,9 +11,6 @@ jobs:
   docker-build-e2e:
     runs-on: ubuntu-20.04
     steps:
-      - name: Delete unnecessary tools folder to free space
-        run: rm -rf /opt/hostedtoolcache
-
       - name: Checkout
         uses: actions/checkout@v4
 

Dockerfile.e2e

@@ -9,9 +9,6 @@ RUN DEBIAN_FRONTEND=noninteractive apt update && apt install -y \
     netcat \
     ca-certificates \
     build-essential \
-    llvm-dev \
-    clang \
-    jq \
     && rm -rf /var/lib/apt/lists/*
 
 # Install NodeJS
@@ -34,6 +31,7 @@ RUN /bin/bash -c "source /home/apprunner/.cargo/env && rustc --version && cargo
 
 # Add wasm32-unknown-unknown target
 RUN /bin/bash -c "source /home/apprunner/.cargo/env && rustup target add wasm32-unknown-unknown"
+
 # Install dfx
 ENV DFX_PORT=4943
 ENV DFX_VERSION=0.20.0

docker/deploy

@@ -6,9 +6,6 @@ dfx start --background --quiet
 
 ./docker/wait-port "$DFX_PORT"
 
-dfx canister create internet_identity --specified-id rdmx6-jaaaa-aaaaa-aaadq-cai
-dfx canister create pouh_issuer --specified-id qbw6f-caaaa-aaaah-qdcwa-cai
-
 npm run deploy
 
 dfx stop

e2e/homepage.spec.ts

@@ -1,23 +1,28 @@
+import {
+	EXCHANGE_BALANCE_OUTPUT,
+	LOGIN_BUTTON,
+	THREE_BACKGROUND_CANVAS,
+	TOKENS_SKELETONS_INITIALIZED
+} from '$lib/constants/test-ids.constant';
 import { testWithII } from '@dfinity/internet-identity-playwright';
 import { expect, test, type Page } from '@playwright/test';
 
 const testUrl = '/';
-const timeout = 120000;
 
 const hideHeroAnimation = async (page: Page): Promise<void> => {
 	await page
-		.getByTestId('three-background-canvas')
+		.getByTestId(THREE_BACKGROUND_CANVAS)
 		.evaluate((element) => (element.style.display = 'none'));
 };
 
 test.describe('logged out user', () => {
 	test.beforeEach(async ({ page }) => {
 		await page.goto(testUrl);
-
-		await page.getByTestId('login-button').waitFor();
 	});
 
-	test('should display logged out hero and blurred tokens', async ({ page }) => {
+	test('should display homepage in logged out state', async ({ page }) => {
+		await page.getByTestId(LOGIN_BUTTON).waitFor();
+
 		await hideHeroAnimation(page);
 
 		await expect(page).toHaveScreenshot({
@@ -30,15 +35,16 @@ testWithII.describe('logged in user', () => {
 	testWithII.beforeEach(async ({ page, iiPage }) => {
 		const url = 'http://127.0.0.1:4943';
 		const canisterId = 'rdmx6-jaaaa-aaaaa-aaadq-cai';
-		await iiPage.waitReady({ url, canisterId, timeout });
+		await iiPage.waitReady({ url, canisterId });
 
 		await page.goto(testUrl);
 
 		await iiPage.signInWithNewIdentity();
 	});
 
-	testWithII('should display logged in hero and tokens', async ({ page }) => {
-		await page.getByTestId('tokens-skeletons-initialized').waitFor({ timeout });
+	testWithII('should display homepage in logged in state', async ({ page }) => {
+		await page.getByTestId(TOKENS_SKELETONS_INITIALIZED).waitFor();
+		await page.getByTestId(EXCHANGE_BALANCE_OUTPUT).waitFor();
 
 		await hideHeroAnimation(page);
 

playwright.config.ts

@@ -9,6 +9,7 @@ export default defineConfig({
 		port: DEV ? 5173 : 4173
 	},
 	testDir: 'e2e',
+	timeout: 120000,
 	testMatch: ['**/*.e2e.ts', '**/*.spec.ts'],
 	use: {
 		testIdAttribute: 'data-tid',

src/frontend/src/lib/components/exchange/ExchangeBalance.svelte

@@ -2,6 +2,7 @@
 	import { formatUSD } from '$lib/utils/format.utils';
 	import { exchangeInitialized } from '$lib/derived/exchange.derived';
 	import { combinedDerivedEnabledNetworkTokensUi } from '$lib/derived/network-tokens.derived';
+	import { EXCHANGE_BALANCE_OUTPUT } from '$lib/constants/test-ids.constant';
 
 	let totalUsd: number;
 	$: totalUsd = $combinedDerivedEnabledNetworkTokensUi.reduce(
@@ -13,7 +14,7 @@
 <span class="text-off-white block">
 	<output
 		class={`break-all text-5xl font-bold ${totalUsd === 0 ? 'opacity-50' : 'opacity-100'} inline-block mt-8`}
-		data-tid="exchange-balance-output"
+		data-tid={EXCHANGE_BALANCE_OUTPUT}
 	>
 		{#if $exchangeInitialized}
 			{formatUSD(totalUsd)}

src/frontend/src/lib/components/tokens/TokensSkeletons.svelte

@@ -2,12 +2,13 @@
 	import { erc20UserTokensNotInitialized } from '$eth/derived/erc20.derived';
 	import { fade } from 'svelte/transition';
 	import SkeletonCards from '$lib/components/ui/SkeletonCards.svelte';
+	import { TOKENS_SKELETONS_INITIALIZED } from '$lib/constants/test-ids.constant';
 </script>
 
 {#if $erc20UserTokensNotInitialized}
 	<SkeletonCards rows={5} />
 {:else}
-	<div in:fade data-tid="tokens-skeletons-initialized">
+	<div in:fade data-tid={TOKENS_SKELETONS_INITIALIZED}>
 		<slot />
 	</div>
 {/if}

src/frontend/src/lib/components/ui/ThreeBackground.svelte

@@ -10,6 +10,7 @@
 		WebGLRenderer
 	} from 'three';
 	import { isNullish } from '@dfinity/utils';
+	import { THREE_BACKGROUND_CANVAS } from '$lib/constants/test-ids.constant';
 
 	let container: HTMLDivElement | undefined | null;
 
@@ -114,7 +115,7 @@ void main(){
 		renderer = new WebGLRenderer();
 		renderer.domElement.style.width = '100%';
 		renderer.domElement.style.height = '100%';
-		renderer.domElement.setAttribute('data-tid', 'three-background-canvas');
+		renderer.domElement.setAttribute('data-tid', THREE_BACKGROUND_CANVAS);
 		container.appendChild(renderer.domElement);
 
 		material = new ShaderMaterial({

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

@@ -0,0 +1,4 @@
+export const LOGIN_BUTTON = 'login-button';
+export const TOKENS_SKELETONS_INITIALIZED = 'tokens-skeletons-initialized';
+export const EXCHANGE_BALANCE_OUTPUT = 'exchange-balance-output';
+export const THREE_BACKGROUND_CANVAS = 'three-background-canvas';