new test api to test hooks rendering iteration, testing state of withdraw page

3 files changed, 99 insertions, 94 deletions

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<void>, getField: () => TextFieldHandler): Promise<void> {
-  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<void>, getField: () => SelectFieldHandler): Promise<void> {
-  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<void>;
+  disabled?: boolean;
+  error?: TalerError;
+}
+
 export interface SelectFieldHandler {
   onChange: (value: string) => void;
   error?: string;
   value: string;
+  isDirty?: boolean;
   list: Record<string, string>;
 }
 
@@ -139,17 +147,6 @@ export function useComponentState(
   };
 }
 
-export interface InputHandler {
-  value: string;
-  onInput: (s: string) => void;
-}
-
-export interface SelectInputHandler {
-  list: Record<string, string>;
-  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