test(e2e): new test for toggling tokens

e2e/manage-tokens.spec.ts

@@ -0,0 +1,107 @@
+import { testWithII } from '@dfinity/internet-identity-playwright';
+import { expect } from '@playwright/test';
+import { HomepageLoggedIn } from './utils/pages/homepage.page';
+
+let homepageLoggedIn: HomepageLoggedIn;
+
+testWithII.beforeEach(async ({ page, iiPage }) => {
+	homepageLoggedIn = new HomepageLoggedIn({
+		page,
+		iiPage
+	});
+
+	await homepageLoggedIn.waitForReady();
+});
+
+testWithII('enable ICRC token', async () => {
+	// enable the Token in the list
+	await homepageLoggedIn.activateTestnetSettings();
+	await homepageLoggedIn.toggleTokenInList({
+		tokenSymbol: 'ckSepoliaETH',
+		networkName: 'Internet Computer'
+	});
+	await expect(homepageLoggedIn.getTokenCardLocator('ckSepoliaETH')).toBeVisible();
+	await homepageLoggedIn.waitForLoadState();
+	await homepageLoggedIn.setCarouselFirstSlide();
+	await homepageLoggedIn.takeScreenshot();
+});
+
+testWithII('disable ICRC token', async () => {
+	//disable the Token in the list
+	await homepageLoggedIn.activateTestnetSettings();
+	await homepageLoggedIn.toggleTokenInList({
+		tokenSymbol: 'ckSepoliaETH',
+		networkName: 'Internet Computer'
+	});
+	await expect(homepageLoggedIn.getTokenCardLocator('ckSepoliaETH')).toBeVisible();
+	await homepageLoggedIn.waitForLoadState();
+	await homepageLoggedIn.toggleTokenInList({
+		tokenSymbol: 'ckSepoliaETH',
+		networkName: 'Internet Computer'
+	});
+	await expect(homepageLoggedIn.getTokenCardLocator('ckSepoliaETH')).not.toBeVisible();
+	await homepageLoggedIn.setCarouselFirstSlide();
+	await homepageLoggedIn.takeScreenshot();
+});
+
+testWithII('enable ERC20 token', async () => {
+	// enable the Token in the list
+	await homepageLoggedIn.activateTestnetSettings();
+	await homepageLoggedIn.toggleTokenInList({
+		tokenSymbol: 'SHIB',
+		networkName: 'Ethereum'
+	});
+	await expect(homepageLoggedIn.getTokenCardLocator('SHIB')).toBeVisible();
+	await homepageLoggedIn.waitForLoadState();
+	await homepageLoggedIn.setCarouselFirstSlide();
+	await homepageLoggedIn.takeScreenshot();
+});
+
+testWithII('disable ERC20 token', async () => {
+	//disable the Token in the list
+	await homepageLoggedIn.activateTestnetSettings();
+	await homepageLoggedIn.toggleTokenInList({
+		tokenSymbol: 'SHIB',
+		networkName: 'Ethereum'
+	});
+	await expect(homepageLoggedIn.getTokenCardLocator('SHIB')).toBeVisible();
+	await homepageLoggedIn.waitForLoadState();
+	await homepageLoggedIn.toggleTokenInList({
+		tokenSymbol: 'SHIB',
+		networkName: 'Ethereum'
+	});
+	await expect(homepageLoggedIn.getTokenCardLocator('SHIB')).not.toBeVisible();
+	await homepageLoggedIn.setCarouselFirstSlide();
+	await homepageLoggedIn.takeScreenshot();
+});
+
+testWithII('enable SepoliaERC20 token', async () => {
+	// enable the Token in the list
+	await homepageLoggedIn.activateTestnetSettings();
+	await homepageLoggedIn.toggleTokenInList({
+		tokenSymbol: 'USDC',
+		networkName: 'Sepolia'
+	});
+	await expect(homepageLoggedIn.getTokenCardLocator('USDC')).toBeVisible();
+	await homepageLoggedIn.waitForLoadState();
+	await homepageLoggedIn.setCarouselFirstSlide();
+	await homepageLoggedIn.takeScreenshot();
+});
+
+testWithII('disable SepoliaERC20 token', async () => {
+	//disable the Token in the list
+	await homepageLoggedIn.activateTestnetSettings();
+	await homepageLoggedIn.toggleTokenInList({
+		tokenSymbol: 'USDC',
+		networkName: 'Sepolia'
+	});
+	await expect(homepageLoggedIn.getTokenCardLocator('USDC')).toBeVisible();
+	await homepageLoggedIn.waitForLoadState();
+	await homepageLoggedIn.toggleTokenInList({
+		tokenSymbol: 'USDC',
+		networkName: 'Sepolia'
+	});
+	await expect(homepageLoggedIn.getTokenCardLocator('USDC')).not.toBeVisible();
+	await homepageLoggedIn.setCarouselFirstSlide();
+	await homepageLoggedIn.takeScreenshot();
+});

e2e/utils/pages/homepage.page.ts

@@ -3,10 +3,13 @@ import {
 	LOADER_MODAL,
 	LOGIN_BUTTON,
 	LOGOUT_BUTTON,
+	MANAGE_TOKEN_LIST_SAVE,
 	NAVIGATION_ITEM_HOMEPAGE,
+	NAVIGATION_ITEM_MANAGE_LIST,
 	NAVIGATION_ITEM_SETTINGS,
 	NAVIGATION_MENU,
 	NAVIGATION_MENU_BUTTON,
+	NAVIGATION_MENU_NETWORKS,
 	RECEIVE_TOKENS_MODAL,
 	RECEIVE_TOKENS_MODAL_OPEN_BUTTON,
 	RECEIVE_TOKENS_MODAL_QR_CODE_OUTPUT,
@@ -241,6 +244,24 @@ abstract class Homepage {
 		await this.clickByTestId(NAVIGATION_ITEM_HOMEPAGE);
 	}
 
+	async toggleTokenInList({
+		tokenSymbol,
+		networkName
+	}: {
+		tokenSymbol: string;
+		networkName: string;
+	}): Promise<void> {
+		await this.clickByTestId(NAVIGATION_MENU_NETWORKS);
+		await this.#page.click(`[data-tid^="network-${networkName}"]`);
+		await this.clickByTestId(NAVIGATION_ITEM_MANAGE_LIST);
+		await this.#page.click(`[data-tid^="token-toggle-${tokenSymbol}"]`);
+		await this.clickByTestId(MANAGE_TOKEN_LIST_SAVE);
+	}
+
+	getTokenCardLocator(tokenSymbol: string): Locator {
+		return this.#page.locator(`[data-tid="token-card-${tokenSymbol}"]`);
+	}
+
 	async takeScreenshot(): Promise<void> {
 		await expect(this.#page).toHaveScreenshot({
 			// creates a snapshot as a fullPage and not just certain parts.

src/frontend/src/icp/components/tokens/IcManageTokenToggle.svelte

@@ -6,6 +6,7 @@
 	import { isIcrcTokenToggleDisabled } from '$lib/utils/token-toggle.utils';
 
 	export let token: IcrcCustomToken;
+	export let testIdPrefix = 'token-toggle';
 
 	let disabled = false;
 	$: disabled = isIcrcTokenToggleDisabled(token);
@@ -31,6 +32,7 @@
 
 <Toggle
 	ariaLabel={checked ? $i18n.tokens.text.hide_token : $i18n.tokens.text.show_token}
+	testId={`${testIdPrefix}-${token.symbol}-${token.network.id.description}`}
 	{disabled}
 	bind:checked
 	on:nnsToggle={toggle}

src/frontend/src/lib/components/manage/ManageTokens.svelte

@@ -17,6 +17,7 @@
 	import ButtonGroup from '$lib/components/ui/ButtonGroup.svelte';
 	import Card from '$lib/components/ui/Card.svelte';
 	import InputSearch from '$lib/components/ui/InputSearch.svelte';
+	import { MANAGE_TOKEN_LIST_SAVE } from '$lib/constants/test-ids.constants';
 	import { allTokens } from '$lib/derived/all-tokens.derived';
 	import { exchanges } from '$lib/derived/exchange.derived';
 	import { pseudoNetworkChainFusion, selectedNetwork } from '$lib/derived/network.derived';
@@ -193,7 +194,7 @@
 
 	<ButtonGroup>
 		<ButtonCancel on:click={() => dispatch('icClose')} />
-		<Button disabled={saveDisabled} on:click={save}>
+		<Button testId={MANAGE_TOKEN_LIST_SAVE} disabled={saveDisabled} on:click={save}>
 			{$i18n.core.text.save}
 		</Button>
 	</ButtonGroup>

src/frontend/src/lib/components/networks/Network.svelte

@@ -11,4 +11,4 @@
 	$: ({ id, name, iconBW: icon } = network);
 </script>
 
-<NetworkButton {id} {name} {usdBalance} {icon} on:icSelected />
+<NetworkButton {id} {name} {usdBalance} {icon} testId={`network-${name}`} on:icSelected />

src/frontend/src/lib/components/networks/NetworkButton.svelte

@@ -14,6 +14,7 @@
 	export let name: string;
 	export let icon: string | undefined;
 	export let usdBalance: number | undefined = undefined;
+	export let testId: string | undefined = undefined;
 
 	const dispatch = createEventDispatcher();
 
@@ -29,7 +30,7 @@
 	};
 </script>
 
-<button class="flex w-full items-start justify-between" on:click={onClick}>
+<button data-tid={testId} class="flex w-full items-start justify-between" on:click={onClick}>
 	<TextWithLogo
 		{name}
 		{icon}

src/frontend/src/lib/components/networks/NetworksSwitcher.svelte

@@ -6,6 +6,7 @@
 	import Network from '$lib/components/networks/Network.svelte';
 	import NetworkButton from '$lib/components/networks/NetworkButton.svelte';
 	import Dropdown from '$lib/components/ui/Dropdown.svelte';
+	import { NAVIGATION_MENU_NETWORKS } from '$lib/constants/test-ids.constants';
 	import { SLIDE_EASING } from '$lib/constants/transition.constants';
 	import { selectedNetwork } from '$lib/derived/network.derived';
 	import { networksMainnets, networksTestnets } from '$lib/derived/networks.derived';
@@ -24,7 +25,12 @@
 	);
 </script>
 
-<Dropdown bind:this={dropdown} ariaLabel={$i18n.networks.title} {disabled}>
+<Dropdown
+	bind:this={dropdown}
+	ariaLabel={$i18n.networks.title}
+	testId={NAVIGATION_MENU_NETWORKS}
+	{disabled}
+>
 	{$selectedNetwork?.name ?? $i18n.networks.chain_fusion}
 
 	<div slot="items">

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

@@ -6,6 +6,7 @@
 	import { isEthereumTokenToggleDisabled } from '$lib/utils/token-toggle.utils';
 
 	export let token: EthereumUserToken;
+	export let testIdPrefix = 'token-toggle';
 
 	let disabled = false;
 	$: disabled = isEthereumTokenToggleDisabled(token);
@@ -36,6 +37,7 @@
 <div role="button" on:click={onClick}>
 	<Toggle
 		ariaLabel={checked ? $i18n.tokens.text.hide_token : $i18n.tokens.text.show_token}
+		testId={`${testIdPrefix}-${token.symbol}-${token.network.id.description}`}
 		{disabled}
 		bind:checked
 		on:nnsToggle={toggle}

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

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { erc20UserTokensNotInitialized } from '$eth/derived/erc20.derived';
 	import IconManage from '$lib/components/icons/lucide/IconManage.svelte';
+	import { NAVIGATION_ITEM_MANAGE_LIST } from '$lib/constants/test-ids.constants';
 	import { authNotSignedIn } from '$lib/derived/auth.derived';
 	import { i18n } from '$lib/stores/i18n.store';
 	import { modalStore } from '$lib/stores/modal.store';
@@ -9,7 +10,12 @@
 	$: disabled = $erc20UserTokensNotInitialized || $authNotSignedIn;
 </script>
 
-<button class="tertiary" on:click={modalStore.openManageTokens} {disabled}>
+<button
+	class="tertiary"
+	data-tid={NAVIGATION_ITEM_MANAGE_LIST}
+	on:click={modalStore.openManageTokens}
+	{disabled}
+>
 	<IconManage />
 	{$i18n.tokens.manage.text.manage_list}
 </button>

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

@@ -4,6 +4,7 @@
 
 	export let disabled = false;
 	export let ariaLabel: string;
+	export let testId: string | undefined = undefined;
 
 	let visible = false;
 	let button: HTMLButtonElement | undefined;
@@ -15,6 +16,7 @@
 	bind:button
 	on:click={() => (visible = true)}
 	{ariaLabel}
+	{testId}
 	{disabled}
 	opened={visible}
 >

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

@@ -5,13 +5,15 @@
 	export let button: HTMLButtonElement | undefined = undefined;
 	export let ariaLabel: string;
 	export let opened = false;
+	export let testId: string | undefined = undefined;
 </script>
 
 <button
 	class="min-w-72 justify-between gap-2 rounded-xl border border-tertiary bg-white px-4 py-3 text-left font-medium leading-5 text-black text-inherit hover:border-brand-primary"
 	bind:this={button}
 	on:click
 	aria-label={ariaLabel}
+	data-tid={testId}
 	{disabled}
 	class:opacity-50={disabled}
 	class:border-brand-primary={opened}

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

@@ -52,6 +52,7 @@ 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 NAVIGATION_ITEM_HOMEPAGE = 'navigation-item-homepage';
+export const NAVIGATION_ITEM_MANAGE_LIST = 'navigation-item-manage-list';
 
 export const BTC_TESTNET_TOGGLE = 'btc-testnet-toggle';
 
@@ -69,3 +70,7 @@ export const VIP_QR_CODE_COPY_BUTTON = 'vip-qr-code-copy-button';
 export const VIP_CODE_REGENERATE_BUTTON = 'vip-code-regenerate-button';
 
 export const SOL_TRANSACTION_SKELETON_PREFIX = 'sol-txn';
+
+export const TOKEN_TOGGLE = 'token-toggle';
+export const MANAGE_TOKEN_LIST_SAVE = 'manage-token-list-save';
+export const NAVIGATION_MENU_NETWORKS = 'navigation-menu-networks';