2021-09-13 18:33:13 +02:00
|
|
|
/*
|
|
|
|
This file is part of GNU Taler
|
2022-06-06 17:05:26 +02:00
|
|
|
(C) 2022 Taler Systems S.A.
|
2021-09-13 18:33:13 +02:00
|
|
|
|
|
|
|
GNU Taler is free software; you can redistribute it and/or modify it under the
|
|
|
|
terms of the GNU General Public License as published by the Free Software
|
|
|
|
Foundation; either version 3, or (at your option) any later version.
|
|
|
|
|
|
|
|
GNU Taler 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 General Public License for more details.
|
|
|
|
|
|
|
|
You should have received a copy of the GNU General Public License along with
|
|
|
|
GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/>
|
|
|
|
*/
|
|
|
|
|
2022-10-25 17:23:08 +02:00
|
|
|
import { NotificationType } from "@gnu-taler/taler-util";
|
2022-11-16 20:04:52 +01:00
|
|
|
import {
|
|
|
|
WalletCoreApiClient,
|
|
|
|
WalletCoreOpKeys,
|
|
|
|
WalletCoreRequestType,
|
|
|
|
WalletCoreResponseType,
|
|
|
|
} from "@gnu-taler/taler-wallet-core";
|
2022-06-06 05:09:25 +02:00
|
|
|
import {
|
|
|
|
ComponentChildren,
|
|
|
|
Fragment,
|
|
|
|
FunctionalComponent,
|
|
|
|
h as create,
|
|
|
|
options,
|
|
|
|
render as renderIntoDom,
|
|
|
|
VNode,
|
|
|
|
} from "preact";
|
2022-01-04 21:06:17 +01:00
|
|
|
import { render as renderToString } from "preact-render-to-string";
|
2022-10-25 17:23:08 +02:00
|
|
|
import { BackgroundApiClient, wxApi } from "./wxApi.js";
|
2021-08-19 05:34:47 +02:00
|
|
|
|
2022-03-24 20:02:38 +01:00
|
|
|
// 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")
|
2022-06-06 05:09:25 +02:00
|
|
|
return fn();
|
|
|
|
};
|
2022-03-24 20:02:38 +01:00
|
|
|
|
2021-11-15 15:18:58 +01:00
|
|
|
export function createExample<Props>(
|
|
|
|
Component: FunctionalComponent<Props>,
|
2022-05-26 20:55:14 +02:00
|
|
|
props: Partial<Props> | (() => Partial<Props>),
|
2021-12-06 14:31:19 +01:00
|
|
|
): ComponentChildren {
|
2022-05-26 20:55:14 +02:00
|
|
|
//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
|
2022-06-06 05:09:25 +02:00
|
|
|
// check how we can build evaluatedProps in render time
|
|
|
|
const evaluatedProps = typeof props === "function" ? props() : props;
|
2022-01-04 21:06:17 +01:00
|
|
|
const Render = (args: any): VNode => create(Component, args);
|
2022-05-26 20:55:14 +02:00
|
|
|
Render.args = evaluatedProps;
|
2021-12-06 14:31:19 +01:00
|
|
|
return Render;
|
|
|
|
}
|
|
|
|
|
|
|
|
export function createExampleWithCustomContext<Props, ContextProps>(
|
|
|
|
Component: FunctionalComponent<Props>,
|
2022-05-26 20:55:14 +02:00
|
|
|
props: Partial<Props> | (() => Partial<Props>),
|
2021-12-06 14:31:19 +01:00
|
|
|
ContextProvider: FunctionalComponent<ContextProps>,
|
|
|
|
contextProps: Partial<ContextProps>,
|
|
|
|
): ComponentChildren {
|
2022-06-06 05:09:25 +02:00
|
|
|
const evaluatedProps = typeof props === "function" ? props() : props;
|
2022-01-04 21:06:17 +01:00
|
|
|
const Render = (args: any): VNode => create(Component, args);
|
2022-06-06 05:09:25 +02:00
|
|
|
const WithContext = (args: any): VNode =>
|
|
|
|
create(ContextProvider, {
|
|
|
|
...contextProps,
|
|
|
|
children: [Render(args)],
|
|
|
|
} as any);
|
|
|
|
WithContext.args = evaluatedProps;
|
|
|
|
return WithContext;
|
2021-08-19 05:34:47 +02:00
|
|
|
}
|
|
|
|
|
2022-06-06 05:09:25 +02:00
|
|
|
export function NullLink({
|
|
|
|
children,
|
|
|
|
}: {
|
|
|
|
children?: ComponentChildren;
|
|
|
|
}): VNode {
|
2022-01-04 21:06:17 +01:00
|
|
|
return create("a", { children, href: "javascript:void(0);" });
|
2021-08-23 21:51:49 +02:00
|
|
|
}
|
2022-01-04 21:06:17 +01:00
|
|
|
|
|
|
|
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);
|
|
|
|
}
|
|
|
|
}
|
2022-10-14 16:40:38 +02:00
|
|
|
type RecursiveState<S> = S | (() => RecursiveState<S>);
|
2022-01-04 21:06:17 +01:00
|
|
|
|
|
|
|
interface Mounted<T> {
|
|
|
|
unmount: () => void;
|
2022-10-25 17:23:08 +02:00
|
|
|
pullLastResultOrThrow: () => Exclude<T, VoidFunction>;
|
2022-04-11 16:36:32 +02:00
|
|
|
assertNoPendingUpdate: () => void;
|
2022-10-25 17:23:08 +02:00
|
|
|
// waitNextUpdate: (s?: string) => Promise<void>;
|
|
|
|
waitForStateUpdate: () => Promise<boolean>;
|
2022-01-04 21:06:17 +01:00
|
|
|
}
|
|
|
|
|
2022-06-06 05:09:25 +02:00
|
|
|
const isNode = typeof window === "undefined";
|
2022-03-23 20:20:39 +01:00
|
|
|
|
2022-09-20 21:04:51 +02:00
|
|
|
export function mountHook<T extends object>(
|
|
|
|
callback: () => RecursiveState<T>,
|
2022-06-06 05:09:25 +02:00
|
|
|
Context?: ({ children }: { children: any }) => VNode,
|
|
|
|
): Mounted<T> {
|
2022-09-20 21:04:51 +02:00
|
|
|
let lastResult: Exclude<T, VoidFunction> | Error | null = null;
|
2022-04-11 16:36:32 +02:00
|
|
|
|
2022-06-06 05:09:25 +02:00
|
|
|
const listener: Array<() => void> = [];
|
2022-01-04 21:06:17 +01:00
|
|
|
|
|
|
|
// component that's going to hold the hook
|
|
|
|
function Component(): VNode {
|
2022-04-21 19:23:53 +02:00
|
|
|
try {
|
2022-10-14 16:40:38 +02:00
|
|
|
let componentOrResult = callback();
|
2022-09-20 21:04:51 +02:00
|
|
|
while (typeof componentOrResult === "function") {
|
|
|
|
componentOrResult = componentOrResult();
|
|
|
|
}
|
|
|
|
//typecheck fails here
|
2022-10-14 16:40:38 +02:00
|
|
|
const l: Exclude<T, () => void> = componentOrResult as any;
|
2022-09-20 21:04:51 +02:00
|
|
|
lastResult = l;
|
2022-04-21 19:23:53 +02:00
|
|
|
} catch (e) {
|
|
|
|
if (e instanceof Error) {
|
2022-06-06 05:09:25 +02:00
|
|
|
lastResult = e;
|
2022-04-21 19:23:53 +02:00
|
|
|
} else {
|
2022-06-06 05:09:25 +02:00
|
|
|
lastResult = new Error(`mounting the hook throw an exception: ${e}`);
|
2022-04-21 19:23:53 +02:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-01-04 21:06:17 +01:00
|
|
|
// notify to everyone waiting for an update and clean the queue
|
2022-06-06 05:09:25 +02:00
|
|
|
listener.splice(0, listener.length).forEach((cb) => cb());
|
|
|
|
return create(Fragment, {});
|
2022-01-04 21:06:17 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// create the vdom with context if required
|
2022-06-06 05:09:25 +02:00
|
|
|
const vdom = !Context
|
|
|
|
? create(Component, {})
|
|
|
|
: create(Context, { children: [create(Component, {})] });
|
2022-01-04 21:06:17 +01:00
|
|
|
|
2022-06-06 05:09:25 +02:00
|
|
|
const customElement = {} as Element;
|
2022-03-23 20:20:39 +01:00
|
|
|
const parentElement = isNode ? customElement : document.createElement("div");
|
|
|
|
if (!isNode) {
|
|
|
|
document.body.appendChild(parentElement);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderIntoDom(vdom, parentElement);
|
|
|
|
|
|
|
|
// clean up callback
|
2022-03-29 14:58:06 +02:00
|
|
|
function unmount(): void {
|
2022-03-23 20:20:39 +01:00
|
|
|
if (!isNode) {
|
|
|
|
document.body.removeChild(parentElement);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-10-25 17:23:08 +02:00
|
|
|
function pullLastResult(): Exclude<T | Error | null, VoidFunction> {
|
2022-09-20 21:04:51 +02:00
|
|
|
const copy: Exclude<T | Error | null, VoidFunction> = lastResult;
|
2022-06-06 05:09:25 +02:00
|
|
|
lastResult = null;
|
2022-04-11 16:36:32 +02:00
|
|
|
return copy;
|
|
|
|
}
|
|
|
|
|
2022-10-25 17:23:08 +02:00
|
|
|
function pullLastResultOrThrow(): Exclude<T, VoidFunction> {
|
|
|
|
const r = pullLastResult();
|
2022-04-21 19:23:53 +02:00
|
|
|
if (r instanceof Error) throw r;
|
2022-06-06 05:09:25 +02:00
|
|
|
if (!r) throw Error("there was no last result");
|
2022-04-11 16:36:32 +02:00
|
|
|
return r;
|
|
|
|
}
|
|
|
|
|
|
|
|
async function assertNoPendingUpdate(): Promise<void> {
|
|
|
|
await new Promise((res, rej) => {
|
|
|
|
const tid = setTimeout(() => {
|
2022-06-06 05:09:25 +02:00
|
|
|
res(undefined);
|
|
|
|
}, 10);
|
2022-04-11 16:36:32 +02:00
|
|
|
|
|
|
|
listener.push(() => {
|
2022-06-06 05:09:25 +02:00
|
|
|
clearTimeout(tid);
|
|
|
|
rej(
|
|
|
|
Error(`Expecting no pending result but the hook got updated.
|
2022-04-21 19:23:53 +02:00
|
|
|
If the update was not intended you need to check the hook dependencies
|
|
|
|
(or dependencies of the internal state) but otherwise make
|
2022-06-06 05:09:25 +02:00
|
|
|
sure to consume the result before ending the test.`),
|
|
|
|
);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
2022-10-25 17:23:08 +02:00
|
|
|
const r = pullLastResult();
|
2022-06-06 05:09:25 +02:00
|
|
|
if (r)
|
|
|
|
throw Error(`There are still pending results.
|
2022-10-25 17:23:08 +02:00
|
|
|
This may happen because the hook did a new update but the test didn't consume the result using pullLastResult`);
|
2022-04-11 16:36:32 +02:00
|
|
|
}
|
2022-10-25 17:23:08 +02:00
|
|
|
async function waitForStateUpdate(): Promise<boolean> {
|
|
|
|
return await new Promise((res, rej) => {
|
|
|
|
const tid = setTimeout(() => {
|
|
|
|
res(false);
|
|
|
|
}, 10);
|
|
|
|
|
|
|
|
listener.push(() => {
|
|
|
|
clearTimeout(tid);
|
|
|
|
res(true);
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2022-01-04 21:06:17 +01:00
|
|
|
return {
|
2022-06-06 05:09:25 +02:00
|
|
|
unmount,
|
2022-10-25 17:23:08 +02:00
|
|
|
pullLastResultOrThrow,
|
|
|
|
waitForStateUpdate,
|
2022-06-06 05:09:25 +02:00
|
|
|
assertNoPendingUpdate,
|
|
|
|
};
|
2022-01-04 21:06:17 +01:00
|
|
|
}
|
2022-10-25 17:23:08 +02:00
|
|
|
|
|
|
|
export const nullFunction: any = () => null;
|
|
|
|
|
|
|
|
interface MockHandler {
|
2022-11-16 20:04:52 +01:00
|
|
|
addWalletCallResponse<Op extends WalletCoreOpKeys>(
|
|
|
|
operation: Op,
|
2022-10-25 17:23:08 +02:00
|
|
|
payload?: Partial<WalletCoreRequestType<Op>>,
|
|
|
|
response?: WalletCoreResponseType<Op>,
|
|
|
|
callback?: () => void,
|
|
|
|
): MockHandler;
|
|
|
|
|
|
|
|
getCallingQueueState(): "empty" | string;
|
|
|
|
|
|
|
|
notifyEventFromWallet(event: NotificationType): void;
|
|
|
|
}
|
|
|
|
|
|
|
|
type CallRecord = WalletCallRecord | BackgroundCallRecord;
|
|
|
|
interface WalletCallRecord {
|
2022-11-16 20:04:52 +01:00
|
|
|
source: "wallet";
|
2022-10-25 17:23:08 +02:00
|
|
|
callback: () => void;
|
2022-11-16 20:04:52 +01:00
|
|
|
operation: WalletCoreOpKeys;
|
|
|
|
payload?: WalletCoreRequestType<WalletCoreOpKeys>;
|
|
|
|
response?: WalletCoreResponseType<WalletCoreOpKeys>;
|
2022-10-25 17:23:08 +02:00
|
|
|
}
|
|
|
|
interface BackgroundCallRecord {
|
2022-11-16 20:04:52 +01:00
|
|
|
source: "background";
|
|
|
|
name: string;
|
|
|
|
args: any;
|
2022-10-25 17:23:08 +02:00
|
|
|
response: any;
|
|
|
|
}
|
|
|
|
|
|
|
|
type Subscriptions = {
|
|
|
|
[key in NotificationType]?: VoidFunction;
|
|
|
|
};
|
|
|
|
|
2022-11-16 20:04:52 +01:00
|
|
|
export function createWalletApiMock(): {
|
|
|
|
handler: MockHandler;
|
|
|
|
mock: typeof wxApi;
|
|
|
|
} {
|
|
|
|
const calls = new Array<CallRecord>();
|
2022-10-25 17:23:08 +02:00
|
|
|
const subscriptions: Subscriptions = {};
|
|
|
|
|
|
|
|
const mock: typeof wxApi = {
|
|
|
|
wallet: new Proxy<WalletCoreApiClient>({} as any, {
|
|
|
|
get(target, name, receiver) {
|
2022-11-16 20:04:52 +01:00
|
|
|
const functionName = String(name);
|
2022-10-25 17:23:08 +02:00
|
|
|
if (functionName !== "call") {
|
2022-11-16 20:04:52 +01:00
|
|
|
throw Error(
|
|
|
|
`the only method in wallet api should be 'call': ${functionName}`,
|
|
|
|
);
|
2022-10-25 17:23:08 +02:00
|
|
|
}
|
2022-11-16 20:04:52 +01:00
|
|
|
return function (
|
|
|
|
operation: WalletCoreOpKeys,
|
|
|
|
payload: WalletCoreRequestType<WalletCoreOpKeys>,
|
|
|
|
) {
|
|
|
|
const next = calls.shift();
|
2022-10-25 17:23:08 +02:00
|
|
|
|
|
|
|
if (!next) {
|
2022-11-16 20:04:52 +01:00
|
|
|
throw Error(
|
|
|
|
`wallet operation was called but none was expected: ${operation} (${JSON.stringify(
|
|
|
|
payload,
|
|
|
|
undefined,
|
|
|
|
2,
|
|
|
|
)})`,
|
|
|
|
);
|
2022-10-25 17:23:08 +02:00
|
|
|
}
|
|
|
|
if (next.source !== "wallet") {
|
2022-11-16 20:04:52 +01:00
|
|
|
throw Error(`wallet operation expected`);
|
2022-10-25 17:23:08 +02:00
|
|
|
}
|
|
|
|
if (operation !== next.operation) {
|
|
|
|
//more checks, deep check payload
|
2022-11-16 20:04:52 +01:00
|
|
|
throw Error(
|
|
|
|
`wallet operation doesn't match: expected ${next.operation} actual ${operation}`,
|
|
|
|
);
|
2022-10-25 17:23:08 +02:00
|
|
|
}
|
2022-11-16 20:04:52 +01:00
|
|
|
next.callback();
|
2022-10-25 17:23:08 +02:00
|
|
|
|
2022-11-16 20:04:52 +01:00
|
|
|
return next.response ?? {};
|
|
|
|
};
|
|
|
|
},
|
2022-10-25 17:23:08 +02:00
|
|
|
}),
|
|
|
|
listener: {
|
2022-11-16 20:04:52 +01:00
|
|
|
onUpdateNotification(
|
|
|
|
mTypes: NotificationType[],
|
|
|
|
callback: (() => void) | undefined,
|
|
|
|
): () => void {
|
|
|
|
mTypes.forEach((m) => {
|
|
|
|
subscriptions[m] = callback;
|
|
|
|
});
|
|
|
|
return nullFunction;
|
|
|
|
},
|
2022-10-25 17:23:08 +02:00
|
|
|
},
|
|
|
|
background: new Proxy<BackgroundApiClient>({} as any, {
|
|
|
|
get(target, name, receiver) {
|
|
|
|
const functionName = String(name);
|
|
|
|
return function (...args: any) {
|
2022-11-16 20:04:52 +01:00
|
|
|
const next = calls.shift();
|
2022-10-25 17:23:08 +02:00
|
|
|
if (!next) {
|
2022-11-16 20:04:52 +01:00
|
|
|
throw Error(
|
|
|
|
`background operation was called but none was expected: ${functionName} (${JSON.stringify(
|
|
|
|
args,
|
|
|
|
undefined,
|
|
|
|
2,
|
|
|
|
)})`,
|
|
|
|
);
|
2022-10-25 17:23:08 +02:00
|
|
|
}
|
|
|
|
if (next.source !== "background" || functionName !== next.name) {
|
|
|
|
//more checks, deep check args
|
2022-11-16 20:04:52 +01:00
|
|
|
throw Error(`background operation doesn't match`);
|
2022-10-25 17:23:08 +02:00
|
|
|
}
|
2022-11-16 20:04:52 +01:00
|
|
|
return next.response;
|
|
|
|
};
|
|
|
|
},
|
2022-10-25 17:23:08 +02:00
|
|
|
}),
|
2022-11-16 20:04:52 +01:00
|
|
|
};
|
2022-10-25 17:23:08 +02:00
|
|
|
|
|
|
|
const handler: MockHandler = {
|
|
|
|
addWalletCallResponse(operation, payload, response, cb) {
|
2022-11-16 20:04:52 +01:00
|
|
|
calls.push({
|
|
|
|
source: "wallet",
|
|
|
|
operation,
|
|
|
|
payload,
|
|
|
|
response,
|
|
|
|
callback: cb
|
|
|
|
? cb
|
|
|
|
: () => {
|
|
|
|
null;
|
|
|
|
},
|
|
|
|
});
|
|
|
|
return handler;
|
2022-10-25 17:23:08 +02:00
|
|
|
},
|
|
|
|
notifyEventFromWallet(event: NotificationType): void {
|
2022-11-16 20:04:52 +01:00
|
|
|
const callback = subscriptions[event];
|
|
|
|
if (!callback)
|
|
|
|
throw Error(`Expected to have a subscription for ${event}`);
|
2022-10-25 17:23:08 +02:00
|
|
|
return callback();
|
|
|
|
},
|
|
|
|
getCallingQueueState() {
|
|
|
|
return calls.length === 0 ? "empty" : `${calls.length} left`;
|
|
|
|
},
|
2022-11-16 20:04:52 +01:00
|
|
|
};
|
2022-10-25 17:23:08 +02:00
|
|
|
|
2022-11-16 20:04:52 +01:00
|
|
|
return { handler, mock };
|
2022-10-25 17:23:08 +02:00
|
|
|
}
|