integrate anastasis to the web-utils testing api

packages/anastasis-webui/src/components/picker/DurationPicker.stories.tsx

@@ -22,6 +22,7 @@
 import { h, FunctionalComponent } from "preact";
 import { useState } from "preact/hooks";
 import { DurationPicker as TestedComponent } from "./DurationPicker.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   component: TestedComponent,
@@ -31,16 +32,7 @@ export default {
   },
 };
 
-function createExample<Props>(
+export const Example = tests.createExample(TestedComponent, {
-  Component: FunctionalComponent<Props>,
-  props: Partial<Props>,
-) {
-  const r = (args: any) => <Component {...args} />;
-  r.args = props;
-  return r;
-}
-
-export const Example = createExample(TestedComponent, {
   days: true,
   minutes: true,
   hours: true,

packages/anastasis-webui/src/index.test.ts

@@ -19,31 +19,63 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 import { setupI18n } from "@gnu-taler/taler-util";
-import { renderNodeOrBrowser } from "./test-utils.js";
+import { parseGroupImport, tests } from "@gnu-taler/web-util/lib/index.browser";
-import * as pages from "./pages/home/index.storiesNo.js";
+import * as pages from "./pages/home/index.stories.js";
+import { ComponentChildren, VNode, h as create } from "preact";
+import { AnastasisProvider } from "./context/anastasis.js";
+import { AnastasisReducerApi } from "./hooks/use-anastasis-reducer.js";
+import { ReducerState } from "@gnu-taler/anastasis-core";
 
 setupI18n("en", { en: {} });
 
-function testThisStory(key: string, st: any): any {
+describe("All the examples:", () => {
-  describe.skip(`render examples for ${key}`, () => {
+  const cms = parseGroupImport({ pages });
-    Object.keys(st).forEach((k) => {
+  cms.forEach((group) => {
-      const Component = (st as any)[k];
+    describe(`Example for group "${group.title}":`, () => {
-      if (k === "default" || !Component) return;
+      group.list.forEach((component) => {
+        describe(`Component ${component.name}:`, () => {
+          component.examples.forEach((example) => {
+            it(`should render example: ${example.name}`, () => {
+              tests.renderUI(example.render, DefaultTestingContext);
+            });
+          });
+        });
+      });
+    });
+  });
+});
 
-      it(`example: ${k}`, () => {
+const noop = async (): Promise<void> => {
-        renderNodeOrBrowser(Component, Component.args);
+  return;
-      });
+};
-    });
-  });
-}
 
-describe.skip("render every storybook example", () => {
+function DefaultTestingContext({
-  Object.entries(pages).forEach(function testAll([key, value]) {
+  children,
-    const st: any = value;
+  ...rest
-    if (Array.isArray(st.default)) {
+}: {
-      st.default.forEach(testAll);
+  children: ComponentChildren;
-    } else {
+}): VNode {
-      testThisStory(key, st);
+  //some UI example can specify the state of the reducer
+  const currentReducerState = rest as ReducerState;
+  const value: AnastasisReducerApi = {
+    currentReducerState,
+    discoverMore: noop,
+    discoverStart: noop,
+    discoveryState: {
+      state: "finished",
+    },
+    currentError: undefined,
+    back: noop,
+    dismissError: noop,
+    reset: noop,
+    runTransaction: noop,
+    startBackup: noop,
+    startRecover: noop,
+    transition: noop,
+    exportState: () => {
+      return "{}";
+    },
+    importState: noop,
+  };
+  return create(AnastasisProvider, { value, children });
 }
-  });
-});

packages/anastasis-webui/src/pages/home/AddingProviderScreen/state.ts

@@ -25,7 +25,11 @@ interface Props {
   notifications?: Notification[];
 }
 
-export default function useComponentState({ providerType, onCancel, notifications = [] }: Props): State {
+export default function useComponentState({
+  providerType,
+  onCancel,
+  notifications = [],
+}: Props): State {
   const reducer = useAnastasisContext();
 
   const [providerURL, setProviderURL] = useState("");
@@ -58,7 +62,12 @@ export default function useComponentState({ providerType, onCancel, notification
       prev[p.status].push({ ...p, url });
       return prev;
     },
-    { "not-contacted": [], disabled: [], error: [], ok: [] } as AuthProvByStatusMap,
+    {
+      "not-contacted": [],
+      disabled: [],
+      error: [],
+      ok: [],
+    } as AuthProvByStatusMap,
   );
   const authProviders = authProvidersByStatus["ok"].map((p) => p.url);
 
@@ -98,10 +107,10 @@ export default function useComponentState({ providerType, onCancel, notification
   const addProvider = async (provider_url: string): Promise<void> => {
     await reducer.transition("add_provider", { provider_url });
     onCancel();
-  }
+  };
   const deleteProvider = async (provider_url: string): Promise<void> => {
     reducer.transition("delete_provider", { provider_url });
-  }
+  };
 
   let errors = !providerURL ? "Add provider URL" : undefined;
   let url: string | undefined;
@@ -110,7 +119,7 @@ export default function useComponentState({ providerType, onCancel, notification
   } catch {
     errors = "Check the URL";
   }
-  const _url = url
+  const _url = url;
 
   if (!!error && !errors) {
     errors = error;
@@ -130,21 +139,19 @@ export default function useComponentState({ providerType, onCancel, notification
     setProviderURL: async (s: string) => setProviderURL(s),
     errors,
     error,
-    notifications
+    notifications,
-  }
+  };
 
   if (!providerLabel) {
     return {
       status: "without-type",
-      ...commonState
+      ...commonState,
-    }
+    };
   } else {
     return {
       status: "with-type",
       providerLabel,
-      ...commonState
+      ...commonState,
+    };
   }
 }
-
-}
-

packages/anastasis-webui/src/pages/home/AddingProviderScreen/stories.tsx

@@ -20,7 +20,7 @@
  */
 
 import { AuthenticationProviderStatusOk } from "@gnu-taler/anastasis-core";
-import { createExampleWithoutAnastasis } from "../../../utils/index.jsx";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 import { WithoutProviderType, WithProviderType } from "./views.jsx";
 
 export default {
@@ -34,7 +34,7 @@ export default {
   },
 };
 
-export const NewProvider = createExampleWithoutAnastasis(WithoutProviderType, {
+export const NewProvider = tests.createExample(WithoutProviderType, {
   authProvidersByStatus: {
     ok: [
       {
@@ -57,7 +57,7 @@ export const NewProvider = createExampleWithoutAnastasis(WithoutProviderType, {
   notifications: [],
 });
 
-export const NewProviderWithoutProviderList = createExampleWithoutAnastasis(
+export const NewProviderWithoutProviderList = tests.createExample(
   WithoutProviderType,
   {
     authProvidersByStatus: {
@@ -70,7 +70,7 @@ export const NewProviderWithoutProviderList = createExampleWithoutAnastasis(
   },
 );
 
-export const NewSmsProvider = createExampleWithoutAnastasis(WithProviderType, {
+export const NewSmsProvider = tests.createExample(WithProviderType, {
   authProvidersByStatus: {
     ok: [],
     "not-contacted": [],
@@ -81,7 +81,7 @@ export const NewSmsProvider = createExampleWithoutAnastasis(WithProviderType, {
   notifications: [],
 });
 
-export const NewIBANProvider = createExampleWithoutAnastasis(WithProviderType, {
+export const NewIBANProvider = tests.createExample(WithProviderType, {
   authProvidersByStatus: {
     ok: [],
     "not-contacted": [],

packages/anastasis-webui/src/pages/home/AddingProviderScreen/test.ts

@@ -20,23 +20,26 @@
  */
 
 import { expect } from "chai";
-import { mountHook } from "../../../test-utils.js";
 import useComponentState from "./state.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 describe("AddingProviderScreen states", () => {
-  it("should have status 'no-balance' when balance is empty", async () => {
+  it("should not load more if has reach the end", async () => {
-    const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
+    const hookBehavior = await tests.hookBehaveLikeThis(
-      mountHook(() =>
+      () => {
-        useComponentState({ onCancel: async () => { null } }),
+        return useComponentState({
+          providerType: "email",
+          async onCancel() {},
+        });
+      },
+      {},
+      [
+        ({ status }) => {
+          expect(status).eq("no-reducer");
+        },
+      ],
     );
 
-    {
+    expect(hookBehavior).deep.eq({ result: "ok" });
-      const { status } = getLastResultOrThrow();
-      expect(status).equal("no-reducer");
-    }
-
-    await assertNoPendingUpdate();
-
   });
-
 });

packages/anastasis-webui/src/pages/home/AttributeEntryScreen.stories.tsx

@@ -20,7 +20,8 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../utils/index.js";
 import { AttributeEntryScreen as TestedComponent } from "./AttributeEntryScreen.js";
 
 export default {
@@ -35,7 +36,7 @@ export default {
   },
 };
 
-export const Backup = createExample(TestedComponent, {
+export const Backup = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.backupAttributeEditing,
   required_attributes: [
     {
@@ -62,7 +63,7 @@ export const Backup = createExample(TestedComponent, {
   ],
 } as ReducerState);
 
-export const Recovery = createExample(TestedComponent, {
+export const Recovery = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.recoveryAttributeEditing,
   required_attributes: [
     {
@@ -89,10 +90,14 @@ export const Recovery = createExample(TestedComponent, {
   ],
 } as ReducerState);
 
-export const WithNoRequiredAttribute = createExample(TestedComponent, {
+export const WithNoRequiredAttribute = tests.createExample(
+  TestedComponent,
+  {},
+  {
     ...reducerStatesExample.backupAttributeEditing,
     required_attributes: undefined,
-} as ReducerState);
+  } as ReducerState,
+);
 
 const allWidgets = [
   "anastasis_gtk_ia_aadhar_in",
@@ -123,7 +128,7 @@ function typeForWidget(name: string): string {
   return "string";
 }
 
-export const WithAllPosibleWidget = createExample(TestedComponent, {
+export const WithAllPosibleWidget = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.backupAttributeEditing,
   required_attributes: allWidgets.map((w) => ({
     name: w,
@@ -134,7 +139,10 @@ export const WithAllPosibleWidget = createExample(TestedComponent, {
   })),
 } as ReducerState);
 
-export const WithAutocompleteFeature = createExample(TestedComponent, {
+export const WithAutocompleteFeature = tests.createExample(
+  TestedComponent,
+  {},
+  {
     ...reducerStatesExample.backupAttributeEditing,
     required_attributes: [
       {
@@ -149,4 +157,5 @@ export const WithAutocompleteFeature = createExample(TestedComponent, {
         autocomplete: "???.????.????.??",
       },
     ],
-} as ReducerState);
+  } as ReducerState,
+);

packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.stories.tsx

@@ -20,7 +20,8 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../utils/index.js";
 import { AuthenticationEditorScreen as TestedComponent } from "./AuthenticationEditorScreen.js";
 
 export default {
@@ -35,11 +36,15 @@ export default {
   },
 };
 
-export const InitialState = createExample(
+export const InitialState = tests.createExample(
   TestedComponent,
+  {},
   reducerStatesExample.authEditing,
 );
-export const OneAuthMethodConfigured = createExample(TestedComponent, {
+export const OneAuthMethodConfigured = tests.createExample(
+  TestedComponent,
+  {},
+  {
     ...reducerStatesExample.authEditing,
     authentication_methods: [
       {
@@ -48,9 +53,13 @@ export const OneAuthMethodConfigured = createExample(TestedComponent, {
         challenge: "asd",
       },
     ],
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const SomeMoreAuthMethodConfigured = createExample(TestedComponent, {
+export const SomeMoreAuthMethodConfigured = tests.createExample(
+  TestedComponent,
+  {},
+  {
     ...reducerStatesExample.authEditing,
     authentication_methods: [
       {
@@ -89,9 +98,10 @@ export const SomeMoreAuthMethodConfigured = createExample(TestedComponent, {
         challenge: "asd",
       },
     ],
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const NoAuthMethodProvided = createExample(TestedComponent, {
+export const NoAuthMethodProvided = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.authEditing,
   authentication_providers: {},
   authentication_methods: [],

packages/anastasis-webui/src/pages/home/BackupFinishedScreen.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { reducerStatesExample } from "../../utils/index.js";
 import { BackupFinishedScreen as TestedComponent } from "./BackupFinishedScreen.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Backup finish",
@@ -35,17 +36,18 @@ export default {
   },
 };
 
-export const WithoutName = createExample(
+export const WithoutName = tests.createExample(
   TestedComponent,
+  {},
   reducerStatesExample.backupFinished,
 );
 
-export const WithName = createExample(TestedComponent, {
+export const WithName = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.backupFinished,
   secret_name: "super_secret",
 } as ReducerState);
 
-export const WithDetails = createExample(TestedComponent, {
+export const WithDetails = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.backupFinished,
   secret_name: "super_secret",
   success_details: {

packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.stories.tsx

@@ -24,8 +24,9 @@ import {
   RecoveryStates,
   ReducerState,
 } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { reducerStatesExample } from "../../utils/index.js";
 import { ChallengeOverviewScreen as TestedComponent } from "./ChallengeOverviewScreen.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Challenge overview",
@@ -39,7 +40,7 @@ export default {
   },
 };
 
-export const OneUnsolvedPolicy = createExample(TestedComponent, {
+export const OneUnsolvedPolicy = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.challengeSelecting,
   recovery_information: {
     policies: [[{ uuid: "1" }]],
@@ -53,7 +54,7 @@ export const OneUnsolvedPolicy = createExample(TestedComponent, {
   },
 } as ReducerState);
 
-export const SomePoliciesOneSolved = createExample(TestedComponent, {
+export const SomePoliciesOneSolved = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.challengeSelecting,
   recovery_information: {
     policies: [[{ uuid: "1" }, { uuid: "2" }], [{ uuid: "uuid-3" }]],
@@ -82,7 +83,7 @@ export const SomePoliciesOneSolved = createExample(TestedComponent, {
   },
 } as ReducerState);
 
-export const OneBadConfiguredPolicy = createExample(TestedComponent, {
+export const OneBadConfiguredPolicy = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.challengeSelecting,
   recovery_information: {
     policies: [[{ uuid: "1" }, { uuid: "2" }]],
@@ -96,7 +97,10 @@ export const OneBadConfiguredPolicy = createExample(TestedComponent, {
   },
 } as ReducerState);
 
-export const OnePolicyWithAllTheChallenges = createExample(TestedComponent, {
+export const OnePolicyWithAllTheChallenges = tests.createExample(
+  TestedComponent,
+  {},
+  {
     ...reducerStatesExample.challengeSelecting,
     recovery_information: {
       policies: [
@@ -134,7 +138,8 @@ export const OnePolicyWithAllTheChallenges = createExample(TestedComponent, {
         },
         {
           //
-        instructions: "Wire transfer from ASDXCVQWE123123 with holder Florian",
+          instructions:
+            "Wire transfer from ASDXCVQWE123123 with holder Florian",
           type: "iban",
           uuid: "5",
         },
@@ -156,11 +161,11 @@ export const OnePolicyWithAllTheChallenges = createExample(TestedComponent, {
         },
       ],
     },
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const OnePolicyWithAllTheChallengesInDifferentState = createExample(
+export const OnePolicyWithAllTheChallengesInDifferentState =
-  TestedComponent,
+  tests.createExample(TestedComponent, {}, {
-  {
     ...reducerStatesExample.challengeSelecting,
     recovery_state: RecoveryStates.ChallengeSelecting,
     recovery_information: {
@@ -258,9 +263,9 @@ export const OnePolicyWithAllTheChallengesInDifferentState = createExample(
       },
       "uuid-10": { state: ChallengeFeedbackStatus.IncorrectAnswer.toString() },
     },
-  } as ReducerState,
+  } as ReducerState);
-);
+export const NoPolicies = tests.createExample(
-export const NoPolicies = createExample(
   TestedComponent,
+  {},
   reducerStatesExample.challengeSelecting,
 );

packages/anastasis-webui/src/pages/home/ChallengePayingScreen.stories.tsx

@@ -19,7 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../utils/index.js";
 import { ChallengePayingScreen as TestedComponent } from "./ChallengePayingScreen.js";
 
 export default {
@@ -34,7 +35,8 @@ export default {
   },
 };
 
-export const Example = createExample(
+export const Example = tests.createExample(
   TestedComponent,
+  {},
   reducerStatesExample.challengePaying,
 );

packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { reducerStatesExample } from "../../utils/index.js";
 import { ContinentSelectionScreen as TestedComponent } from "./ContinentSelectionScreen.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Continent selection",
@@ -35,22 +36,24 @@ export default {
   },
 };
 
-export const BackupSelectContinent = createExample(
+export const BackupSelectContinent = tests.createExample(
   TestedComponent,
+  {},
   reducerStatesExample.backupSelectContinent,
 );
 
-export const BackupSelectCountry = createExample(TestedComponent, {
+export const BackupSelectCountry = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.backupSelectContinent,
   selected_continent: "Testcontinent",
 } as ReducerState);
 
-export const RecoverySelectContinent = createExample(
+export const RecoverySelectContinent = tests.createExample(
   TestedComponent,
+  {},
   reducerStatesExample.recoverySelectContinent,
 );
 
-export const RecoverySelectCountry = createExample(TestedComponent, {
+export const RecoverySelectCountry = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.recoverySelectContinent,
   selected_continent: "Testcontinent",
 } as ReducerState);

packages/anastasis-webui/src/pages/home/EditPoliciesScreen.stories.tsx

@@ -20,7 +20,8 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../utils/index.js";
 import { EditPoliciesScreen as TestedComponent } from "./EditPoliciesScreen.js";
 
 export default {
@@ -35,8 +36,9 @@ export default {
   },
 };
 
-export const EditingAPolicy = createExample(
+export const EditingAPolicy = tests.createExample(
   TestedComponent,
+  { index: 0 },
   {
     ...reducerStatesExample.policyReview,
     policies: [
@@ -84,11 +86,11 @@ export const EditingAPolicy = createExample(
       },
     ],
   } as ReducerState,
-  { index: 0 },
 );
 
-export const CreatingAPolicy = createExample(
+export const CreatingAPolicy = tests.createExample(
   TestedComponent,
+  { index: 3 },
   {
     ...reducerStatesExample.policyReview,
     policies: [
@@ -136,5 +138,4 @@ export const CreatingAPolicy = createExample(
       },
     ],
   } as ReducerState,
-  { index: 3 },
 );

packages/anastasis-webui/src/pages/home/PoliciesPayingScreen.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { reducerStatesExample } from "../../utils/index.js";
 import { PoliciesPayingScreen as TestedComponent } from "./PoliciesPayingScreen.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Policies paying",
@@ -35,11 +36,12 @@ export default {
   },
 };
 
-export const Example = createExample(
+export const Example = tests.createExample(
   TestedComponent,
+  {},
   reducerStatesExample.policyPay,
 );
-export const WithSomePaymentRequest = createExample(TestedComponent, {
+export const WithSomePaymentRequest = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.policyPay,
   policy_payment_requests: [
     {

packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx

@@ -21,8 +21,9 @@
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
 import { encodeCrock, stringToBytes } from "@gnu-taler/taler-util";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { reducerStatesExample } from "../../utils/index.js";
 import { RecoveryFinishedScreen as TestedComponent } from "./RecoveryFinishedScreen.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Recovery Finished",
@@ -36,7 +37,7 @@ export default {
   },
 };
 
-export const GoodEnding = createExample(TestedComponent, {
+export const GoodEnding = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.recoveryFinished,
   recovery_document: {
     secret_name: "the_name_of_the_secret",
@@ -49,7 +50,8 @@ export const GoodEnding = createExample(TestedComponent, {
   },
 } as ReducerState);
 
-export const BadEnding = createExample(
+export const BadEnding = tests.createExample(
   TestedComponent,
+  {},
   reducerStatesExample.recoveryFinished,
 );

packages/anastasis-webui/src/pages/home/ReviewPoliciesScreen.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { reducerStatesExample } from "../../utils/index.js";
 import { ReviewPoliciesScreen as TestedComponent } from "./ReviewPoliciesScreen.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Reviewing Policies",
@@ -35,7 +36,10 @@ export default {
   },
 };
 
-export const HasPoliciesButMethodListIsEmpty = createExample(TestedComponent, {
+export const HasPoliciesButMethodListIsEmpty = tests.createExample(
+  TestedComponent,
+  {},
+  {
     ...reducerStatesExample.policyReview,
     policies: [
       {
@@ -60,9 +64,13 @@ export const HasPoliciesButMethodListIsEmpty = createExample(TestedComponent, {
       },
     ],
     authentication_methods: [],
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const SomePoliciesWithMethods = createExample(TestedComponent, {
+export const SomePoliciesWithMethods = tests.createExample(
+  TestedComponent,
+  {},
+  {
     ...reducerStatesExample.policyReview,
     policies: [
       {
@@ -258,4 +266,5 @@ export const SomePoliciesWithMethods = createExample(TestedComponent, {
         challenge: "C5SP8",
       },
     ],
-} as ReducerState);
+  } as ReducerState,
+);

packages/anastasis-webui/src/pages/home/SecretEditorScreen.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { reducerStatesExample } from "../../utils/index.js";
 import { SecretEditorScreen as TestedComponent } from "./SecretEditorScreen.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Secret editor",
@@ -35,11 +36,15 @@ export default {
   },
 };
 
-export const WithSecretNamePreselected = createExample(TestedComponent, {
+export const WithSecretNamePreselected = tests.createExample(
+  TestedComponent,
+  {},
+  {
     ...reducerStatesExample.secretEdition,
     secret_name: "someSecretName",
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const WithoutName = createExample(TestedComponent, {
+export const WithoutName = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.secretEdition,
 } as ReducerState);

packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx

@@ -20,7 +20,8 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../utils/index.js";
 import {
   SecretSelectionScreen,
   SecretSelectionScreenFound,
@@ -34,16 +35,8 @@ export default {
   },
 };
 
-export const Example = createExample(
+export const Example = tests.createExample(
   SecretSelectionScreenFound,
-  {
-    ...reducerStatesExample.secretSelection,
-    recovery_document: {
-      provider_url: "https://kudos.demo.anastasis.lu/",
-      secret_name: "secretName",
-      version: 1,
-    },
-  } as ReducerState,
   {
     policies: [
       {
@@ -70,9 +63,21 @@ export const Example = createExample(
       },
     ],
   },
+  {
+    ...reducerStatesExample.secretSelection,
+    recovery_document: {
+      provider_url: "https://kudos.demo.anastasis.lu/",
+      secret_name: "secretName",
+      version: 1,
+    },
+  } as ReducerState,
 );
 
-export const NoRecoveryDocumentFound = createExample(SecretSelectionScreen, {
+export const NoRecoveryDocumentFound = tests.createExample(
+  SecretSelectionScreen,
+  {},
+  {
     ...reducerStatesExample.secretSelection,
     recovery_document: undefined,
-} as ReducerState);
+  } as ReducerState,
+);

packages/anastasis-webui/src/pages/home/SolveScreen.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { reducerStatesExample } from "../../utils/index.js";
 import { SolveScreen as TestedComponent } from "./SolveScreen.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Solve Screen",
@@ -35,12 +36,12 @@ export default {
   },
 };
 
-export const NoInformation = createExample(
+export const NoInformation = tests.createExample(
   TestedComponent,
   reducerStatesExample.challengeSolving,
 );
 
-export const NotSupportedChallenge = createExample(TestedComponent, {
+export const NotSupportedChallenge = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.challengeSolving,
   recovery_information: {
     challenges: [
@@ -55,7 +56,7 @@ export const NotSupportedChallenge = createExample(TestedComponent, {
   selected_challenge_uuid: "ASDASDSAD!1",
 } as ReducerState);
 
-export const MismatchedChallengeId = createExample(TestedComponent, {
+export const MismatchedChallengeId = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.challengeSolving,
   recovery_information: {
     challenges: [

packages/anastasis-webui/src/pages/home/StartScreen.stories.tsx

@@ -19,7 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../utils/index.js";
 import { StartScreen as TestedComponent } from "./StartScreen.js";
 
 export default {
@@ -34,7 +35,8 @@ export default {
   },
 };
 
-export const InitialState = createExample(
+export const InitialState = tests.createExample(
   TestedComponent,
+  {},
   reducerStatesExample.initial,
 );

packages/anastasis-webui/src/pages/home/TruthsPayingScreen.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../utils/index.js";
+import { reducerStatesExample } from "../../utils/index.js";
 import { TruthsPayingScreen as TestedComponent } from "./TruthsPayingScreen.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Truths Paying",
@@ -35,11 +36,12 @@ export default {
   },
 };
 
-export const Example = createExample(
+export const Example = tests.createExample(
   TestedComponent,
+  {},
   reducerStatesExample.truthsPaying,
 );
-export const WithPaytoList = createExample(TestedComponent, {
+export const WithPaytoList = tests.createExample(TestedComponent, {}, {
   ...reducerStatesExample.truthsPaying,
   payments: ["payto://x-taler-bank/bank/account"],
 } as ReducerState);

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSetup.stories.tsx

@@ -19,7 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
@@ -36,17 +37,16 @@ export default {
 
 const type: KnownAuthMethods = "email";
 
-export const Empty = createExample(
+export const Empty = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [],
   },
+  reducerStatesExample.authEditing,
 );
 
-export const WithOneExample = createExample(
+export const WithOneExample = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [
       {
@@ -57,11 +57,11 @@ export const WithOneExample = createExample(
       },
     ],
   },
+  reducerStatesExample.authEditing,
 );
 
-export const WithMoreExamples = createExample(
+export const WithMoreExamples = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [
       {
@@ -78,4 +78,5 @@ export const WithMoreExamples = createExample(
       },
     ],
   },
+  reducerStatesExample.authEditing,
 );

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.stories.tsx

@@ -23,8 +23,9 @@ import {
   ChallengeFeedbackStatus,
   ReducerState,
 } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Auth method: Email solve",
@@ -40,8 +41,11 @@ export default {
 
 const type: KnownAuthMethods = "email";
 
-export const WithoutFeedback = createExample(
+export const WithoutFeedback = tests.createExample(
   TestedComponent[type].solve,
+  {
+    id: "uuid-1",
+  },
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information: {
@@ -56,13 +60,13 @@ export const WithoutFeedback = createExample(
     },
     selected_challenge_uuid: "uuid-1",
   } as ReducerState,
+);
+
+export const PaymentFeedback = tests.createExample(
+  TestedComponent[type].solve,
   {
     id: "uuid-1",
   },
-);
-
-export const PaymentFeedback = createExample(
-  TestedComponent[type].solve,
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information: {
@@ -85,7 +89,4 @@ export const PaymentFeedback = createExample(
       },
     },
   } as ReducerState,
-  {
-    id: "uuid-1",
-  },
 );

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSetup.stories.tsx

@@ -19,7 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
@@ -36,17 +37,16 @@ export default {
 
 const type: KnownAuthMethods = "iban";
 
-export const Empty = createExample(
+export const Empty = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [],
   },
+  reducerStatesExample.authEditing,
 );
 
-export const WithOneExample = createExample(
+export const WithOneExample = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [
       {
@@ -57,10 +57,10 @@ export const WithOneExample = createExample(
       },
     ],
   },
-);
-export const WithMoreExamples = createExample(
-  TestedComponent[type].setup,
   reducerStatesExample.authEditing,
+);
+export const WithMoreExamples = tests.createExample(
+  TestedComponent[type].setup,
   {
     configured: [
       {
@@ -77,4 +77,5 @@ export const WithMoreExamples = createExample(
       },
     ],
   },
+  reducerStatesExample.authEditing,
 );

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSolve.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
-import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
+import { reducerStatesExample } from "../../../utils/index.js";
+import { KnownAuthMethods, authMethods as TestedComponent } from "./index.js";
 
 export default {
   title: "Auth method: IBAN Solve",
@@ -37,8 +38,11 @@ export default {
 
 const type: KnownAuthMethods = "iban";
 
-export const WithoutFeedback = createExample(
+export const WithoutFeedback = tests.createExample(
   TestedComponent[type].solve,
+  {
+    id: "uuid-1",
+  },
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information: {
@@ -53,7 +57,4 @@ export const WithoutFeedback = createExample(
     },
     selected_challenge_uuid: "uuid-1",
   } as ReducerState,
-  {
-    id: "uuid-1",
-  },
 );

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSetup.stories.tsx

@@ -19,7 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
@@ -36,17 +37,16 @@ export default {
 
 const type: KnownAuthMethods = "post";
 
-export const Empty = createExample(
+export const Empty = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [],
   },
+  reducerStatesExample.authEditing,
 );
 
-export const WithOneExample = createExample(
+export const WithOneExample = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [
       {
@@ -57,11 +57,11 @@ export const WithOneExample = createExample(
       },
     ],
   },
+  reducerStatesExample.authEditing,
 );
 
-export const WithMoreExamples = createExample(
+export const WithMoreExamples = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [
       {
@@ -78,4 +78,5 @@ export const WithMoreExamples = createExample(
       },
     ],
   },
+  reducerStatesExample.authEditing,
 );

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Auth method: Post solve",
@@ -37,8 +38,11 @@ export default {
 
 const type: KnownAuthMethods = "post";
 
-export const WithoutFeedback = createExample(
+export const WithoutFeedback = tests.createExample(
   TestedComponent[type].solve,
+  {
+    id: "uuid-1",
+  },
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information: {
@@ -53,7 +57,4 @@ export const WithoutFeedback = createExample(
     },
     selected_challenge_uuid: "uuid-1",
   } as ReducerState,
-  {
-    id: "uuid-1",
-  },
 );

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSetup.stories.tsx

@@ -19,7 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
@@ -36,17 +37,16 @@ export default {
 
 const type: KnownAuthMethods = "question";
 
-export const Empty = createExample(
+export const Empty = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [],
   },
+  reducerStatesExample.authEditing,
 );
 
-export const WithOneExample = createExample(
+export const WithOneExample = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [
       {
@@ -58,11 +58,11 @@ export const WithOneExample = createExample(
       },
     ],
   },
+  reducerStatesExample.authEditing,
 );
 
-export const WithMoreExamples = createExample(
+export const WithMoreExamples = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [
       {
@@ -80,4 +80,5 @@ export const WithMoreExamples = createExample(
       },
     ],
   },
+  reducerStatesExample.authEditing,
 );

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.stories.tsx

@@ -23,8 +23,9 @@ import {
   ChallengeFeedbackStatus,
   ReducerState,
 } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Auth method: Question solve",
@@ -40,8 +41,11 @@ export default {
 
 const type: KnownAuthMethods = "question";
 
-export const WithoutFeedback = createExample(
+export const WithoutFeedback = tests.createExample(
   TestedComponent[type].solve,
+  {
+    id: "uuid-1",
+  },
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information: {
@@ -56,9 +60,6 @@ export const WithoutFeedback = createExample(
     },
     selected_challenge_uuid: "uuid-1",
   } as ReducerState,
-  {
-    id: "uuid-1",
-  },
 );
 
 const recovery_information = {
@@ -72,7 +73,10 @@ const recovery_information = {
   policies: [],
 };
 
-export const CodeInFileFeedback = createExample(TestedComponent[type].solve, {
+export const CodeInFileFeedback = tests.createExample(
+  TestedComponent[type].solve,
+  {},
+  {
     ...reducerStatesExample.challengeSolving,
     recovery_information,
     selected_challenge_uuid: "ASDASDSAD!1",
@@ -83,9 +87,13 @@ export const CodeInFileFeedback = createExample(TestedComponent[type].solve, {
         display_hint: "hint",
       },
     },
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const CodeSentFeedback = createExample(TestedComponent[type].solve, {
+export const CodeSentFeedback = tests.createExample(
+  TestedComponent[type].solve,
+  {},
+  {
     ...reducerStatesExample.challengeSolving,
     recovery_information,
     selected_challenge_uuid: "ASDASDSAD!1",
@@ -96,9 +104,13 @@ export const CodeSentFeedback = createExample(TestedComponent[type].solve, {
         display_hint: "qweqweqw",
       },
     },
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const SolvedFeedback = createExample(TestedComponent[type].solve, {
+export const SolvedFeedback = tests.createExample(
+  TestedComponent[type].solve,
+  {},
+  {
     ...reducerStatesExample.challengeSolving,
     recovery_information,
     selected_challenge_uuid: "ASDASDSAD!1",
@@ -107,10 +119,12 @@ export const SolvedFeedback = createExample(TestedComponent[type].solve, {
         state: ChallengeFeedbackStatus.Solved,
       },
     },
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const ServerFailureFeedback = createExample(
+export const ServerFailureFeedback = tests.createExample(
   TestedComponent[type].solve,
+  {},
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information,
@@ -124,7 +138,10 @@ export const ServerFailureFeedback = createExample(
   } as ReducerState,
 );
 
-export const TruthUnknownFeedback = createExample(TestedComponent[type].solve, {
+export const TruthUnknownFeedback = tests.createExample(
+  TestedComponent[type].solve,
+  {},
+  {
     ...reducerStatesExample.challengeSolving,
     recovery_information,
     selected_challenge_uuid: "ASDASDSAD!1",
@@ -133,9 +150,13 @@ export const TruthUnknownFeedback = createExample(TestedComponent[type].solve, {
         state: ChallengeFeedbackStatus.TruthUnknown,
       },
     },
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const TalerPaymentFeedback = createExample(TestedComponent[type].solve, {
+export const TalerPaymentFeedback = tests.createExample(
+  TestedComponent[type].solve,
+  {},
+  {
     ...reducerStatesExample.challengeSolving,
     recovery_information,
     selected_challenge_uuid: "ASDASDSAD!1",
@@ -147,9 +168,13 @@ export const TalerPaymentFeedback = createExample(TestedComponent[type].solve, {
         taler_pay_uri: "taler://pay/...",
       },
     },
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const UnsupportedFeedback = createExample(TestedComponent[type].solve, {
+export const UnsupportedFeedback = tests.createExample(
+  TestedComponent[type].solve,
+  {},
+  {
     ...reducerStatesExample.challengeSolving,
     recovery_information,
     selected_challenge_uuid: "ASDASDSAD!1",
@@ -159,10 +184,12 @@ export const UnsupportedFeedback = createExample(TestedComponent[type].solve, {
         unsupported_method: "method",
       },
     },
-} as ReducerState);
+  } as ReducerState,
+);
 
-export const RateLimitExceededFeedback = createExample(
+export const RateLimitExceededFeedback = tests.createExample(
   TestedComponent[type].solve,
+  {},
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information,
@@ -175,8 +202,9 @@ export const RateLimitExceededFeedback = createExample(
   } as ReducerState,
 );
 
-export const IbanInstructionsFeedback = createExample(
+export const IbanInstructionsFeedback = tests.createExample(
   TestedComponent[type].solve,
+  {},
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information,
@@ -194,8 +222,9 @@ export const IbanInstructionsFeedback = createExample(
   } as ReducerState,
 );
 
-export const IncorrectAnswerFeedback = createExample(
+export const IncorrectAnswerFeedback = tests.createExample(
   TestedComponent[type].solve,
+  {},
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information,
@@ -207,44 +236,3 @@ export const IncorrectAnswerFeedback = createExample(
     },
   } as ReducerState,
 );
-
-// export const AuthIbanFeedback = createExample(TestedComponent[type].solve, {
-//   ...reducerStatesExample.challengeSolving,
-//   recovery_information: {
-//     challenges: [
-//       {
-//         instructions: "does P equals NP?",
-//         type: "question",
-//         uuid: "ASDASDSAD!1",
-//       },
-//     ],
-//     policies: [],
-//   },
-//   selected_challenge_uuid: "ASDASDSAD!1",
-//   challenge_feedback: {
-//     "ASDASDSAD!1": ibanFeedback,
-//   },
-// } as ReducerState);
-
-// export const PaymentFeedback = createExample(TestedComponent[type].solve, {
-//   ...reducerStatesExample.challengeSolving,
-//   recovery_information: {
-//     challenges: [
-//       {
-//         instructions: "does P equals NP?",
-//         type: "question",
-//         uuid: "ASDASDSAD!1",
-//       },
-//     ],
-//     policies: [],
-//   },
-//   selected_challenge_uuid: "ASDASDSAD!1",
-//   challenge_feedback: {
-//     "ASDASDSAD!1": {
-//       state: ChallengeFeedbackStatus.TalerPayment,
-//       taler_pay_uri: "taler://pay/...",
-//       provider: "https://localhost:8080/",
-//       payment_secret: "3P4561HAMHRRYEYD6CM6J7TS5VTD5SR2K2EXJDZEFSX92XKHR4KG",
-//     },
-//   },
-// } as ReducerState);

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.stories.tsx

@@ -19,7 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
@@ -36,17 +37,16 @@ export default {
 
 const type: KnownAuthMethods = "sms";
 
-export const Empty = createExample(
+export const Empty = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [],
   },
+  reducerStatesExample.authEditing,
 );
 
-export const WithOneExample = createExample(
+export const WithOneExample = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [
       {
@@ -57,11 +57,11 @@ export const WithOneExample = createExample(
       },
     ],
   },
+  reducerStatesExample.authEditing,
 );
 
-export const WithMoreExamples = createExample(
+export const WithMoreExamples = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [
       {
@@ -78,4 +78,5 @@ export const WithMoreExamples = createExample(
       },
     ],
   },
+  reducerStatesExample.authEditing,
 );

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
 
 export default {
   title: "Auth method: SMS solve",
@@ -37,8 +38,11 @@ export default {
 
 const type: KnownAuthMethods = "sms";
 
-export const WithoutFeedback = createExample(
+export const WithoutFeedback = tests.createExample(
   TestedComponent[type].solve,
+  {
+    id: "AHCC4ZJ3Z1AF8TWBKGVGEKCQ3R7HXHJ51MJ45NHNZMHYZTKJ9NW0",
+  },
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information: {
@@ -54,7 +58,4 @@ export const WithoutFeedback = createExample(
     selected_challenge_uuid:
       "AHCC4ZJ3Z1AF8TWBKGVGEKCQ3R7HXHJ51MJ45NHNZMHYZTKJ9NW0",
   } as ReducerState,
-  {
-    id: "AHCC4ZJ3Z1AF8TWBKGVGEKCQ3R7HXHJ51MJ45NHNZMHYZTKJ9NW0",
-  },
 );

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSetup.stories.tsx

@@ -19,7 +19,8 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
+import { reducerStatesExample } from "../../../utils/index.js";
 import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
 
 export default {
@@ -36,16 +37,15 @@ export default {
 
 const type: KnownAuthMethods = "totp";
 
-export const Empty = createExample(
+export const Empty = tests.createExample(
   TestedComponent[type].setup,
-  reducerStatesExample.authEditing,
   {
     configured: [],
   },
-);
-export const WithOneExample = createExample(
-  TestedComponent[type].setup,
   reducerStatesExample.authEditing,
+);
+export const WithOneExample = tests.createExample(
+  TestedComponent[type].setup,
   {
     configured: [
       {
@@ -56,10 +56,10 @@ export const WithOneExample = createExample(
       },
     ],
   },
-);
-export const WithMoreExample = createExample(
-  TestedComponent[type].setup,
   reducerStatesExample.authEditing,
+);
+export const WithMoreExample = tests.createExample(
+  TestedComponent[type].setup,
   {
     configured: [
       {
@@ -76,4 +76,5 @@ export const WithMoreExample = createExample(
       },
     ],
   },
+  reducerStatesExample.authEditing,
 );

packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSolve.stories.tsx

@@ -20,8 +20,9 @@
  */
 
 import { ReducerState } from "@gnu-taler/anastasis-core";
-import { createExample, reducerStatesExample } from "../../../utils/index.js";
+import { tests } from "@gnu-taler/web-util/lib/index.browser";
-import { authMethods as TestedComponent, KnownAuthMethods } from "./index.js";
+import { reducerStatesExample } from "../../../utils/index.js";
+import { KnownAuthMethods, authMethods as TestedComponent } from "./index.js";
 
 export default {
   title: "Auth method: Totp solve",
@@ -37,8 +38,11 @@ export default {
 
 const type: KnownAuthMethods = "totp";
 
-export const WithoutFeedback = createExample(
+export const WithoutFeedback = tests.createExample(
   TestedComponent[type].solve,
+  {
+    id: "uuid-1",
+  },
   {
     ...reducerStatesExample.challengeSolving,
     recovery_information: {
@@ -53,7 +57,4 @@ export const WithoutFeedback = createExample(
     },
     selected_challenge_uuid: "uuid-1",
   } as ReducerState,
-  {
-    id: "uuid-1",
-  },
 );

packages/anastasis-webui/src/pages/home/index.stories.tsx

@@ -35,6 +35,7 @@ export * as authMethod_AuthMethodSmsSetup from "./authMethod/AuthMethodSmsSetup.
 export * as authMethod_AuthMethodSmsSolve from "./authMethod/AuthMethodSmsSolve.stories.js";
 export * as authMethod_AuthMethodTotpSetup from "./authMethod/AuthMethodTotpSetup.stories.js";
 export * as authMethod_AuthMethodTotpSolve from "./authMethod/AuthMethodTotpSolve.stories.js";
+
 export * as BackupFinishedScreen from "./BackupFinishedScreen.stories.js";
 export * as ChallengeOverviewScreen from "./ChallengeOverviewScreen.stories.js";
 export * as ChallengePayingScreen from "./ChallengePayingScreen.stories.js";
@@ -42,6 +43,7 @@ export * as ContinentSelectionScreen from "./ContinentSelectionScreen.stories.js
 export * as EditPoliciesScreen from "./EditPoliciesScreen.stories.js";
 export * as PoliciesPayingScreen from "./PoliciesPayingScreen.stories.js";
 export * as RecoveryFinishedScreen from "./RecoveryFinishedScreen.stories.js";
+
 export * as ReviewPoliciesScreen from "./ReviewPoliciesScreen.stories.js";
 export * as SecretEditorScreen from "./SecretEditorScreen.stories.js";
 export * as SecretSelectionScreen from "./SecretSelectionScreen.stories.js";

packages/anastasis-webui/src/stories.tsx

@@ -20,7 +20,7 @@
  */
 import { strings } from "./i18n/strings.js";
 
-import * as pages from "./pages/home/index.storiesNo.js";
+import * as pages from "./pages/home/index.stories.js";
 
 import { renderStories } from "@gnu-taler/web-util/lib/index.browser";
 

packages/anastasis-webui/src/test-utils.ts

@@ -1,205 +0,0 @@
-/*
- This file is part of GNU Anastasis
- (C) 2021-2022 Anastasis SARL
-
- GNU Anastasis is free software; you can redistribute it and/or modify it under the
- terms of the GNU Affero General Public License as published by the Free Software
- Foundation; either version 3, or (at your option) any later version.
-
- GNU Anastasis is distributed in the hope that it will be useful, but WITHOUT ANY
- WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
- A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License along with
- GNU Anastasis; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
- */
-
-import {
-  ComponentChildren,
-  Fragment,
-  FunctionalComponent,
-  h as create,
-  options,
-  render as renderIntoDom,
-  VNode,
-} from "preact";
-import { render as renderToString } from "preact-render-to-string";
-
-// When doing tests we want the requestAnimationFrame to be as fast as possible.
-// without this option the RAF will timeout after 100ms making the tests slower
-options.requestAnimationFrame = (fn: () => void) => {
-  // console.log("RAF called")
-  return fn();
-};
-
-export function createExample<Props>(
-  Component: FunctionalComponent<Props>,
-  props: Partial<Props> | (() => Partial<Props>),
-): ComponentChildren {
-  //FIXME: props are evaluated on build time
-  // in some cases we want to evaluated the props on render time so we can get some relative timestamp
-  // check how we can build evaluatedProps in render time
-  const evaluatedProps = typeof props === "function" ? props() : props;
-  const Render = (args: any): VNode => create(Component, args);
-  return {
-    component: Render,
-    props: evaluatedProps
-  };
-}
-
-export function createExampleWithCustomContext<Props, ContextProps>(
-  Component: FunctionalComponent<Props>,
-  props: Partial<Props> | (() => Partial<Props>),
-  ContextProvider: FunctionalComponent<ContextProps>,
-  contextProps: Partial<ContextProps>,
-): ComponentChildren {
-  const evaluatedProps = typeof props === "function" ? props() : props;
-  const Render = (args: any): VNode => create(Component, args);
-  const WithContext = (args: any): VNode =>
-    create(ContextProvider, {
-      ...contextProps,
-      children: [Render(args)],
-    } as any);
-  return {
-    component: WithContext,
-    props: evaluatedProps
-  };
-}
-
-export function NullLink({
-  children,
-}: {
-  children?: ComponentChildren;
-}): VNode {
-  return create("a", { children, href: "javascript:void(0);" });
-}
-
-export function renderNodeOrBrowser(Component: any, args: any): void {
-  const vdom = create(Component, args);
-  if (typeof window === "undefined") {
-    renderToString(vdom);
-  } else {
-    const div = document.createElement("div");
-    document.body.appendChild(div);
-    renderIntoDom(vdom, div);
-    renderIntoDom(null, div);
-    document.body.removeChild(div);
-  }
-}
-
-interface Mounted<T> {
-  unmount: () => void;
-  getLastResultOrThrow: () => T;
-  assertNoPendingUpdate: () => void;
-  waitNextUpdate: (s?: string) => Promise<void>;
-}
-
-const isNode = typeof window === "undefined";
-
-export function mountHook<T>(
-  callback: () => T,
-  Context?: ({ children }: { children: any }) => VNode,
-): Mounted<T> {
-  // const result: { current: T | null } = {
-  //   current: null
-  // }
-  let lastResult: T | Error | null = null;
-
-  const listener: Array<() => void> = [];
-
-  // component that's going to hold the hook
-  function Component(): VNode {
-    try {
-      lastResult = callback();
-    } catch (e) {
-      if (e instanceof Error) {
-        lastResult = e;
-      } else {
-        lastResult = new Error(`mounting the hook throw an exception: ${e}`);
-      }
-    }
-
-    // notify to everyone waiting for an update and clean the queue
-    listener.splice(0, listener.length).forEach((cb) => cb());
-    return create(Fragment, {});
-  }
-
-  // create the vdom with context if required
-  const vdom = !Context
-    ? create(Component, {})
-    : create(Context, { children: [create(Component, {})] });
-
-  // waiter callback
-  async function waitNextUpdate(_label = ""): Promise<void> {
-    if (_label) _label = `. label: "${_label}"`;
-    await new Promise((res, rej) => {
-      const tid = setTimeout(() => {
-        rej(
-          Error(`waiting for an update but the hook didn't make one${_label}`),
-        );
-      }, 100);
-
-      listener.push(() => {
-        clearTimeout(tid);
-        res(undefined);
-      });
-    });
-  }
-
-  const customElement = {} as Element;
-  const parentElement = isNode ? customElement : document.createElement("div");
-  if (!isNode) {
-    document.body.appendChild(parentElement);
-  }
-
-  renderIntoDom(vdom, parentElement);
-
-  // clean up callback
-  function unmount(): void {
-    if (!isNode) {
-      document.body.removeChild(parentElement);
-    }
-  }
-
-  function getLastResult(): T | Error | null {
-    const copy = lastResult;
-    lastResult = null;
-    return copy;
-  }
-
-  function getLastResultOrThrow(): T {
-    const r = getLastResult();
-    if (r instanceof Error) throw r;
-    if (!r) throw Error("there was no last result");
-    return r;
-  }
-
-  async function assertNoPendingUpdate(): Promise<void> {
-    await new Promise((res, rej) => {
-      const tid = setTimeout(() => {
-        res(undefined);
-      }, 10);
-
-      listener.push(() => {
-        clearTimeout(tid);
-        rej(
-          Error(`Expecting no pending result but the hook got updated. 
-        If the update was not intended you need to check the hook dependencies 
-        (or dependencies of the internal state) but otherwise make 
-        sure to consume the result before ending the test.`),
-        );
-      });
-    });
-
-    const r = getLastResult();
-    if (r)
-      throw Error(`There are still pending results.
-    This may happen because the hook did a new update but the test didn't consume the result using getLastResult`);
-  }
-  return {
-    unmount,
-    getLastResultOrThrow,
-    waitNextUpdate,
-    assertNoPendingUpdate,
-  };
-}

packages/anastasis-webui/src/utils/index.tsx

@@ -21,67 +21,12 @@ import {
   ReducerState,
   ReducerStateRecovery,
 } from "@gnu-taler/anastasis-core";
-import { ComponentChildren, FunctionalComponent, h, VNode } from "preact";
+import { VNode } from "preact";
-import { AnastasisProvider } from "../context/anastasis.js";
 
 const noop = async (): Promise<void> => {
   return;
 };
 
-export function createExampleWithoutAnastasis<Props>(
-  Component: FunctionalComponent<Props>,
-  props: Partial<Props> | (() => Partial<Props>),
-): ComponentChildren {
-  //FIXME: props are evaluated on build time
-  // in some cases we want to evaluated the props on render time so we can get some relative timestamp
-  // check how we can build evaluatedProps in render time
-  const evaluatedProps = typeof props === "function" ? props() : props;
-  const Render = (args: any): VNode => h(Component, args);
-  return {
-    component: Render,
-    props: evaluatedProps,
-  };
-}
-
-export function createExample<Props>(
-  Component: FunctionalComponent<Props>,
-  currentReducerState?: ReducerState,
-  props?: Partial<Props>,
-): ComponentChildren {
-  const Render = (args: Props): VNode => {
-    return (
-      <AnastasisProvider
-        value={{
-          currentReducerState,
-          discoverMore: noop,
-          discoverStart: noop,
-          discoveryState: {
-            state: "finished",
-          },
-          currentError: undefined,
-          back: noop,
-          dismissError: noop,
-          reset: noop,
-          runTransaction: noop,
-          startBackup: noop,
-          startRecover: noop,
-          transition: noop,
-          exportState: () => {
-            return "{}";
-          },
-          importState: noop,
-        }}
-      >
-        <Component {...(args as any)} />
-      </AnastasisProvider>
-    );
-  };
-  return {
-    component: Render,
-    props: props,
-  };
-}
-
 const base = {
   continents: [
     {