From ccb50c636054819f5af8778cc3ebe5258b1c2e87 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Mon, 11 Apr 2022 11:36:32 -0300 Subject: new test api to test hooks rendering iteration, testing state of withdraw page --- .../src/wallet/CreateManualWithdraw.test.ts | 158 +++++++++++---------- .../src/wallet/CreateManualWithdraw.tsx | 19 ++- .../src/wallet/DepositPage.test.ts | 16 +-- 3 files changed, 99 insertions(+), 94 deletions(-) (limited to 'packages/taler-wallet-webextension/src/wallet') diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts index e6e699ce3..f2bb4a7d2 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.test.ts @@ -36,174 +36,182 @@ const exchangeListEmpty = { describe("CreateManualWithdraw states", () => { it("should set noExchangeFound when exchange list is empty", () => { - const { result } = mountHook(() => + const { getLastResultOrThrow } = mountHook(() => useComponentState(exchangeListEmpty, undefined, undefined), ); - if (!result.current) { - expect.fail("hook didn't render"); - } + const { noExchangeFound } = getLastResultOrThrow() - expect(result.current.noExchangeFound).equal(true) + expect(noExchangeFound).equal(true) }); it("should set noExchangeFound when exchange list doesn't include selected currency", () => { - const { result } = mountHook(() => + const { getLastResultOrThrow } = mountHook(() => useComponentState(exchangeListWithARSandUSD, undefined, "COL"), ); - if (!result.current) { - expect.fail("hook didn't render"); - } + const { noExchangeFound } = getLastResultOrThrow() - expect(result.current.noExchangeFound).equal(true) + expect(noExchangeFound).equal(true) }); it("should select the first exchange from the list", () => { - const { result } = mountHook(() => + const { getLastResultOrThrow } = mountHook(() => useComponentState(exchangeListWithARSandUSD, undefined, undefined), ); - if (!result.current) { - expect.fail("hook didn't render"); - } + const { exchange } = getLastResultOrThrow() - expect(result.current.exchange.value).equal("url1") + expect(exchange.value).equal("url1") }); it("should select the first exchange with the selected currency", () => { - const { result } = mountHook(() => + const { getLastResultOrThrow } = mountHook(() => useComponentState(exchangeListWithARSandUSD, undefined, "ARS"), ); - if (!result.current) { - expect.fail("hook didn't render"); - } + const { exchange } = getLastResultOrThrow() - expect(result.current.exchange.value).equal("url2") + expect(exchange.value).equal("url2") }); it("should change the exchange when currency change", async () => { - const { result, waitNextUpdate } = mountHook(() => + const { getLastResultOrThrow, waitNextUpdate } = mountHook(() => useComponentState(exchangeListWithARSandUSD, undefined, "ARS"), ); - if (!result.current) { - expect.fail("hook didn't render"); - } - expect(result.current.exchange.value).equal("url2") + { + const { exchange, currency } = getLastResultOrThrow() + + expect(exchange.value).equal("url2") - result.current.currency.onChange("USD") + currency.onChange("USD") + } await waitNextUpdate() - expect(result.current.exchange.value).equal("url1") + { + const { exchange } = getLastResultOrThrow() + expect(exchange.value).equal("url1") + } }); it("should change the currency when exchange change", async () => { - const { result, waitNextUpdate } = mountHook(() => + const { getLastResultOrThrow, waitNextUpdate } = mountHook(() => useComponentState(exchangeListWithARSandUSD, undefined, "ARS"), ); - if (!result.current) { - expect.fail("hook didn't render"); - } + { + const { exchange, currency } = getLastResultOrThrow() - expect(result.current.exchange.value).equal("url2") - expect(result.current.currency.value).equal("ARS") + expect(exchange.value).equal("url2") + expect(currency.value).equal("ARS") - result.current.exchange.onChange("url1") + exchange.onChange("url1") + } await waitNextUpdate() - expect(result.current.exchange.value).equal("url1") - expect(result.current.currency.value).equal("USD") + { + const { exchange, currency } = getLastResultOrThrow() + + expect(exchange.value).equal("url1") + expect(currency.value).equal("USD") + } }); it("should update parsed amount when amount change", async () => { - const { result, waitNextUpdate } = mountHook(() => + const { getLastResultOrThrow, waitNextUpdate } = mountHook(() => useComponentState(exchangeListWithARSandUSD, undefined, "ARS"), ); - if (!result.current) { - expect.fail("hook didn't render"); - } + { + const { amount, parsedAmount } = getLastResultOrThrow() - expect(result.current.parsedAmount).equal(undefined) + expect(parsedAmount).equal(undefined) - result.current.amount.onInput("12") + amount.onInput("12") + } await waitNextUpdate() - expect(result.current.parsedAmount).deep.equals({ - value: 12, fraction: 0, currency: "ARS" - }) + { + const { parsedAmount } = getLastResultOrThrow() + + expect(parsedAmount).deep.equals({ + value: 12, fraction: 0, currency: "ARS" + }) + } }); it("should have an amount field", async () => { - const { result, waitNextUpdate } = mountHook(() => + const { getLastResultOrThrow, waitNextUpdate } = mountHook(() => useComponentState(exchangeListWithARSandUSD, undefined, "ARS"), ); - if (!result.current) { - expect.fail("hook didn't render"); - } - - await defaultTestForInputText(waitNextUpdate, () => result.current!.amount) + await defaultTestForInputText(waitNextUpdate, () => getLastResultOrThrow().amount) }) it("should have an exchange selector ", async () => { - const { result, waitNextUpdate } = mountHook(() => + const { getLastResultOrThrow, waitNextUpdate } = mountHook(() => useComponentState(exchangeListWithARSandUSD, undefined, "ARS"), ); - if (!result.current) { - expect.fail("hook didn't render"); - } - - await defaultTestForInputSelect(waitNextUpdate, () => result.current!.exchange) + await defaultTestForInputSelect(waitNextUpdate, () => getLastResultOrThrow().exchange) }) it("should have a currency selector ", async () => { - const { result, waitNextUpdate } = mountHook(() => + const { getLastResultOrThrow, waitNextUpdate } = mountHook(() => useComponentState(exchangeListWithARSandUSD, undefined, "ARS"), ); - if (!result.current) { - expect.fail("hook didn't render"); - } - - await defaultTestForInputSelect(waitNextUpdate, () => result.current!.currency) + await defaultTestForInputSelect(waitNextUpdate, () => getLastResultOrThrow().currency) }) }); async function defaultTestForInputText(awaiter: () => Promise, getField: () => TextFieldHandler): Promise { - const initialValue = getField().value; - const otherValue = `${initialValue} something else` - getField().onInput(otherValue) + let nextValue = '' + { + const field = getField() + const initialValue = field.value; + nextValue = `${initialValue} something else` + field.onInput(nextValue) + } await awaiter() - expect(getField().value).equal(otherValue) + { + const field = getField() + expect(field.value).equal(nextValue) + } } async function defaultTestForInputSelect(awaiter: () => Promise, getField: () => SelectFieldHandler): Promise { - const initialValue = getField().value; - const keys = Object.keys(getField().list) - const nextIdx = keys.indexOf(initialValue) + 1 - if (keys.length < nextIdx) { - throw new Error('no enough values') + let nextValue = '' + + { + const field = getField(); + const initialValue = field.value; + const keys = Object.keys(field.list) + const nextIdx = keys.indexOf(initialValue) + 1 + if (keys.length < nextIdx) { + throw new Error('no enough values') + } + nextValue = keys[nextIdx] + field.onChange(nextValue) } - const nextValue = keys[nextIdx] - getField().onChange(nextValue) await awaiter() - expect(getField().value).equal(nextValue) + { + const field = getField(); + + expect(field.value).equal(nextValue) + } } diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index 215aa4378..b9d398915 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -21,6 +21,7 @@ */ import { AmountJson, Amounts } from "@gnu-taler/taler-util"; +import { TalerError } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage.js"; @@ -60,10 +61,17 @@ export interface TextFieldHandler { error?: string; } +export interface ButtonHandler { + onClick: () => Promise; + disabled?: boolean; + error?: TalerError; +} + export interface SelectFieldHandler { onChange: (value: string) => void; error?: string; value: string; + isDirty?: boolean; list: Record; } @@ -139,17 +147,6 @@ export function useComponentState( }; } -export interface InputHandler { - value: string; - onInput: (s: string) => void; -} - -export interface SelectInputHandler { - list: Record; - value: string; - onChange: (s: string) => void; -} - export function CreateManualWithdraw({ initialAmount, exchangeUrlWithCurrency, diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.test.ts b/packages/taler-wallet-webextension/src/wallet/DepositPage.test.ts index 69831cd33..ac4e0ea93 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.test.ts +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.test.ts @@ -39,26 +39,26 @@ const someBalance = [{ describe("DepositPage states", () => { it("should have status 'no-balance' when balance is empty", () => { - const { result } = mountHook(() => + const { getLastResultOrThrow } = mountHook(() => useComponentState(currency, [], [], feeCalculator), ); - if (!result.current) { - expect.fail("hook didn't render"); + { + const { status } = getLastResultOrThrow() + expect(status).equal("no-balance") } - expect(result.current.status).equal("no-balance") }); it("should have status 'no-accounts' when balance is not empty and accounts is empty", () => { - const { result } = mountHook(() => + const { getLastResultOrThrow } = mountHook(() => useComponentState(currency, [], someBalance, feeCalculator), ); - if (!result.current) { - expect.fail("hook didn't render"); + { + const { status } = getLastResultOrThrow() + expect(status).equal("no-accounts") } - expect(result.current.status).equal("no-accounts") }); }); \ No newline at end of file -- cgit v1.2.3