/*
This file is part of GNU Taler
(C) 2022 Taler Systems S.A.
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
*/
import {
ComponentChildren,
Fragment,
FunctionalComponent,
h as create,
options,
render as renderIntoDom,
VNode
} from "preact";
// This library is expected to be included in testing environment only
// 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) => {
return fn();
};
export function createExample(
Component: FunctionalComponent,
props: Partial | (() => Partial),
): ComponentChildren {
const evaluatedProps = typeof props === "function" ? props() : props;
const Render = (args: any): VNode => create(Component, args);
return {
component: Render,
props: evaluatedProps,
};
}
// export function createExampleWithCustomContext(
// Component: FunctionalComponent,
// props: Partial | (() => Partial),
// ContextProvider: FunctionalComponent,
// contextProps: Partial,
// ): ComponentChildren {
// /**
// * FIXME:
// * This may not be useful since the example can be created with context
// * already
// */
// 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,
// };
// }
const isNode = typeof window === "undefined";
/**
* To be used on automated unit test.
* So test will run under node or browser
* @param Component
* @param args
*/
export function renderNodeOrBrowser(
Component: any,
args: any,
Context?: any,
): void {
const vdom = !Context
? create(Component, args)
: create(Context, { children: [create(Component, args)] });
const customElement = {} as Element;
const parentElement = isNode ? customElement : document.createElement("div");
if (!isNode) {
document.body.appendChild(parentElement);
}
// renderIntoDom works also in nodejs
// if the VirtualDOM is composed only by functional components
// then no called is going to be made to the DOM api.
// vdom should not have any 'div' or other html component
renderIntoDom(vdom, parentElement);
if (!isNode) {
document.body.removeChild(parentElement);
}
}
type RecursiveState = S | (() => RecursiveState);
interface Mounted {
// unmount: () => void;
pullLastResultOrThrow: () => Exclude;
assertNoPendingUpdate: () => Promise;
// waitNextUpdate: (s?: string) => Promise;
waitForStateUpdate: () => Promise;
}
/**
* Manual API mount the hook and return testing API
* Consider using hookBehaveLikeThis() function
*
* @param hookToBeTested
* @param Context
*
* @returns testing API
*/
export function mountHook(
hookToBeTested: () => RecursiveState,
Context?: ({ children }: { children: any }) => VNode | null,
): Mounted {
let lastResult: Exclude | Error | null = null;
const listener: Array<() => void> = [];
// component that's going to hold the hook
function Component(): VNode {
try {
let componentOrResult = hookToBeTested();
while (typeof componentOrResult === "function") {
componentOrResult = componentOrResult();
}
//typecheck fails here
const l: Exclude void> = componentOrResult as any;
lastResult = l;
} 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, {});
}
renderNodeOrBrowser(Component, {}, Context);
function pullLastResult(): Exclude {
const copy: Exclude = lastResult;
lastResult = null;
return copy;
}
function pullLastResultOrThrow(): Exclude {
const r = pullLastResult();
if (r instanceof Error) throw r;
//sanity check
if (!r) throw Error("there was no last result");
return r;
}
async function assertNoPendingUpdate(): Promise {
await new Promise((res, rej) => {
const tid = setTimeout(() => {
res(true);
}, 10);
listener.push(() => {
clearTimeout(tid);
res(false);
// 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 = pullLastResult();
if (r) {
return Promise.resolve(false);
}
return Promise.resolve(true);
// 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 pullLastResult`);
}
async function waitForStateUpdate(): Promise {
return await new Promise((res, rej) => {
const tid = setTimeout(() => {
res(false);
}, 10);
listener.push(() => {
clearTimeout(tid);
res(true);
});
});
}
return {
// unmount,
pullLastResultOrThrow,
waitForStateUpdate,
assertNoPendingUpdate,
};
}
export const nullFunction = (): void => {
null;
};
export const nullAsyncFunction = (): Promise => {
return Promise.resolve();
};
type HookTestResult = HookTestResultOk | HookTestResultError;
interface HookTestResultOk {
result: "ok";
}
interface HookTestResultError {
result: "fail";
error: string;
index: number;
}
/**
* Main testing driver.
* It will assert that there are no more and no less hook updates than expected.
*
* @param hookFunction hook function to be tested
* @param props initial props for the hook
* @param checks step by step state validation
* @param Context additional testing context for overrides
*
* @returns testing result, should also be checked to be "ok"
*/
export async function hookBehaveLikeThis(
hookFunction: (p: PropsType) => RecursiveState,
props: PropsType,
checks: Array<(state: Exclude) => void>,
Context?: ({ children }: { children: any }) => VNode | null,
): Promise {
const { pullLastResultOrThrow, waitForStateUpdate, assertNoPendingUpdate } =
mountHook(() => hookFunction(props), Context);
const [firstCheck, ...resultOfTheChecks] = checks;
{
const state = pullLastResultOrThrow();
const checkError = firstCheck(state);
if (checkError !== undefined) {
return {
result: "fail",
index: 0,
error: `Check return not undefined error: ${checkError}`,
};
}
}
let index = 1;
for (const check of resultOfTheChecks) {
const hasNext = await waitForStateUpdate();
if (!hasNext) {
return {
result: "fail",
error: "Component didn't update and the test expected one more state",
index,
};
}
const state = pullLastResultOrThrow();
const checkError = check(state);
if (checkError !== undefined) {
return {
result: "fail",
index,
error: `Check return not undefined error: ${checkError}`,
};
}
index++;
}
const hasNext = await waitForStateUpdate();
if (hasNext) {
return {
result: "fail",
index,
error: "Component updated and test didn't expect more states",
};
}
const noMoreUpdates = await assertNoPendingUpdate();
if (noMoreUpdates === false) {
return {
result: "fail",
index,
error: "Component was updated but the test does not cover the update",
};
}
return {
result: "ok",
};
}