diff --git a/frontend/src/tests/lib/components/accounts/SelectNetworkDropdown.spec.ts b/frontend/src/tests/lib/components/accounts/SelectNetworkDropdown.spec.ts index eb7a7bb837..00ed0d6967 100644 --- a/frontend/src/tests/lib/components/accounts/SelectNetworkDropdown.spec.ts +++ b/frontend/src/tests/lib/components/accounts/SelectNetworkDropdown.spec.ts @@ -4,135 +4,140 @@ import { CKTESTBTC_UNIVERSE_CANISTER_ID, } from "$lib/constants/ckbtc-canister-ids.constants"; import { TransactionNetwork } from "$lib/types/transaction"; +import type { UniverseCanisterId } from "$lib/types/universe"; import { mockBTCAddressMainnet, mockBTCAddressTestnet, mockCkBTCAddress, } from "$tests/mocks/ckbtc-accounts.mock"; -import en from "$tests/mocks/i18n.mock"; -import { fireEvent, render, waitFor } from "@testing-library/svelte"; +import { SelectNetworkDropdownPo } from "$tests/page-objects/SelectNetworkDropdown.page-object"; +import { JestPageObjectElement } from "$tests/page-objects/jest.page-object"; +import { render } from "@testing-library/svelte"; +import { get, writable, type Writable } from "svelte/store"; describe("SelectNetworkDropdown", () => { const props = { universeId: CKBTC_UNIVERSE_CANISTER_ID }; - it("should render a select component", () => { - const { getByTestId } = render(SelectNetworkDropdown, { props }); + const renderComponent = ({ + universeId, + selectedDestinationAddress, + selectedNetwork, + }: { + universeId: UniverseCanisterId; + selectedDestinationAddress?: string; + selectedNetwork?: Writable; + }) => { + const { container, component } = render(SelectNetworkDropdown, { + props: { + universeId, + selectedDestinationAddress, + selectedNetwork: get(selectedNetwork), + }, + }); - expect(getByTestId("select-network-dropdown")).not.toBeNull(); - }); + const updateSelectedNetwork = () => { + selectedNetwork.set( + component.$$.ctx[component.$$.props["selectedNetwork"]] + ); + }; - it("should display a disable placeholder", () => { - const { container } = render(SelectNetworkDropdown, { props }); + if (selectedNetwork) { + component.$$.update = updateSelectedNetwork; + updateSelectedNetwork(); + } - const option = container.querySelector("option[disabled]"); + selectedNetwork?.subscribe((network) => { + component.$set({ selectedNetwork: network }); + }); - expect(option).not.toBeNull(); - expect(option?.getAttribute("value")).toEqual(""); - }); + return SelectNetworkDropdownPo.under(new JestPageObjectElement(container)); + }; - it("should display an option to select ICP", () => { - const { container } = render(SelectNetworkDropdown, { props }); + it("should render a select component", async () => { + const po = renderComponent(props); - const option = container.querySelector("option[value='network_icp']"); + expect(await po.isPresent()).toBe(true); + }); - expect(option).not.toBeNull(); - expect(option.innerHTML).toEqual(en.accounts.network_icp); + it("should display a disable placeholder", async () => { + const po = renderComponent(props); + + expect(await po.isDisabled(0)).toBe(true); + expect(await po.getOptionValue(0)).toBe(""); }); - it("should display an option to select bitcoin", () => { - const { container } = render(SelectNetworkDropdown, { props }); + it("should display an option to select ICP", async () => { + const po = renderComponent(props); - const option = container.querySelector( - "option[value='network_btc_mainnet']" - ); + expect(await po.getOption(1)).toBe("Internet Computer"); + expect(await po.isDisabled(1)).toBe(false); + expect(await po.getOptionValue(1)).toBe("network_icp"); + }); + + it("should display an option to select bitcoin", async () => { + const po = renderComponent(props); - expect(option).not.toBeNull(); - expect(option.innerHTML).toEqual(en.accounts.network_btc_mainnet); + expect(await po.getOption(2)).toBe("Bitcoin"); + expect(await po.isDisabled(2)).toBe(false); + expect(await po.getOptionValue(2)).toBe("network_btc_mainnet"); }); it("should bind select to selected network", async () => { - const { getByTestId, component, container } = render( - SelectNetworkDropdown, - { props } - ); + const selectedNetwork = writable(undefined); + const po = renderComponent({ + ...props, + selectedNetwork, + }); - const optionDefault = container.querySelector("option[disabled]"); - expect(optionDefault).not.toBeNull(); - - const selectElement = getByTestId( - "select-network-dropdown" - ) as HTMLSelectElement | null; - selectElement && - fireEvent.change(selectElement, { - target: { value: TransactionNetwork.ICP }, - }); - - await waitFor(() => - expect(component.$$.ctx[component.$$.props["selectedNetwork"]]).toEqual( - TransactionNetwork.ICP - ) - ); + expect(get(selectedNetwork)).toBe(undefined); + await po.select("Internet Computer"); + expect(get(selectedNetwork)).toBe(TransactionNetwork.ICP); }); - it("should auto select ckBTC network", async () => { - const { component } = render(SelectNetworkDropdown, { - props: { - ...props, - selectedDestinationAddress: mockCkBTCAddress, - }, + it("should auto select ICP network", async () => { + const selectedNetwork = writable(undefined); + renderComponent({ + ...props, + selectedDestinationAddress: mockCkBTCAddress, + selectedNetwork, }); - await waitFor(() => - expect(component.$$.ctx[component.$$.props["selectedNetwork"]]).toEqual( - TransactionNetwork.ICP - ) - ); + expect(get(selectedNetwork)).toBe(TransactionNetwork.ICP); }); it("should auto select BTC testnet network", async () => { - const { component } = render(SelectNetworkDropdown, { - props: { - ...props, - universeId: CKTESTBTC_UNIVERSE_CANISTER_ID, - selectedDestinationAddress: mockBTCAddressTestnet, - }, + const selectedNetwork = writable(undefined); + renderComponent({ + ...props, + universeId: CKTESTBTC_UNIVERSE_CANISTER_ID, + selectedDestinationAddress: mockBTCAddressTestnet, + selectedNetwork, }); - await waitFor(() => - expect(component.$$.ctx[component.$$.props["selectedNetwork"]]).toEqual( - TransactionNetwork.BTC_TESTNET - ) - ); + expect(get(selectedNetwork)).toBe(TransactionNetwork.BTC_TESTNET); }); it("should auto select BTC mainnet network", async () => { - const { component } = render(SelectNetworkDropdown, { - props: { - ...props, - selectedDestinationAddress: mockBTCAddressMainnet, - }, + const selectedNetwork = writable(undefined); + renderComponent({ + ...props, + selectedDestinationAddress: mockBTCAddressMainnet, + selectedNetwork, }); - await waitFor(() => - expect(component.$$.ctx[component.$$.props["selectedNetwork"]]).toEqual( - TransactionNetwork.BTC_MAINNET - ) - ); + expect(get(selectedNetwork)).toBe(TransactionNetwork.BTC_MAINNET); }); it("should auto not select BTC mainnet network", async () => { - const { component } = render(SelectNetworkDropdown, { - props: { - ...props, - selectedNetwork: TransactionNetwork.ICP, - selectedDestinationAddress: mockBTCAddressMainnet, - }, + const selectedNetwork = writable( + TransactionNetwork.ICP + ); + renderComponent({ + ...props, + selectedDestinationAddress: mockBTCAddressMainnet, + selectedNetwork, }); - await waitFor(() => - expect( - component.$$.ctx[component.$$.props["selectedNetwork"]] - ).not.toEqual(TransactionNetwork.BTC_MAINNET) - ); + expect(get(selectedNetwork)).toBe(TransactionNetwork.ICP); }); }); diff --git a/frontend/src/tests/page-objects/Dropdown.page-object.ts b/frontend/src/tests/page-objects/Dropdown.page-object.ts index 1f5373946f..8e90a8418a 100644 --- a/frontend/src/tests/page-objects/Dropdown.page-object.ts +++ b/frontend/src/tests/page-objects/Dropdown.page-object.ts @@ -1,5 +1,6 @@ import { BasePageObject } from "$tests/page-objects/base.page-object"; import type { PageObjectElement } from "$tests/types/page-object.types"; +import { nonNullish } from "@dfinity/utils"; export class DropdownPo extends BasePageObject { private static readonly TID = "dropdown-component"; @@ -20,4 +21,22 @@ export class DropdownPo extends BasePageObject { async waitForOption(testId: string): Promise { return this.root.byTestId(testId).waitFor(); } + + private getOptionElement(optionIndex: number): PageObjectElement { + return this.root.querySelector(`option:nth-child(${optionIndex + 1})`); + } + + async getOption(optionIndex: number): Promise { + return await this.getOptionElement(optionIndex).getText(); + } + + async isDisabled(optionIndex: number): Promise { + const value = + await this.getOptionElement(optionIndex).getAttribute("disabled"); + return nonNullish(value); + } + + async getOptionValue(optionIndex: number): Promise { + return await this.getOptionElement(optionIndex).getAttribute("value"); + } } diff --git a/frontend/src/tests/page-objects/SelectNetworkDropdown.page-object.ts b/frontend/src/tests/page-objects/SelectNetworkDropdown.page-object.ts new file mode 100644 index 0000000000..1d2e1dc774 --- /dev/null +++ b/frontend/src/tests/page-objects/SelectNetworkDropdown.page-object.ts @@ -0,0 +1,3 @@ +import { DropdownPo } from "$tests/page-objects/Dropdown.page-object"; + +export class SelectNetworkDropdownPo extends DropdownPo {}