From dbb3529b4909663a02c6a410777795294f0b5a16 Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 21 Apr 2023 10:49:47 -0300 Subject: [PATCH] remove old testing function, use web-utils --- .../taler-wallet-webextension/package.json | 4 +- .../src/stories.test.ts | 27 +-- .../src/test-utils.ts | 190 +----------------- 3 files changed, 19 insertions(+), 202 deletions(-) diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json index 41940e10c..98ee28016 100644 --- a/packages/taler-wallet-webextension/package.json +++ b/packages/taler-wallet-webextension/package.json @@ -10,7 +10,7 @@ "private": false, "scripts": { "clean": "rimraf dist lib tsconfig.tsbuildinfo", - "test": "pnpm compile && mocha --require source-map-support/register 'dist/**/*.test.js' 'dist/**/test.js'", + "test": "mocha --require source-map-support/register 'dist/**/*.test.js' 'dist/**/test.js'", "test:coverage": "nyc pnpm test", "compile": "tsc && ./build-fast-with-linaria.mjs", "prepare": "tsc", @@ -82,4 +82,4 @@ "pogen": { "domain": "taler-wallet-webex" } -} \ No newline at end of file +} diff --git a/packages/taler-wallet-webextension/src/stories.test.ts b/packages/taler-wallet-webextension/src/stories.test.ts index 76e3db5f4..bf6ef2afe 100644 --- a/packages/taler-wallet-webextension/src/stories.test.ts +++ b/packages/taler-wallet-webextension/src/stories.test.ts @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ import { setupI18n } from "@gnu-taler/taler-util"; -import { parseGroupImport } from "@gnu-taler/web-util/lib/index.browser"; +import { parseGroupImport, tests } from "@gnu-taler/web-util/lib/index.browser"; import chromeAPI from "./platform/chrome.js"; import { setupPlatform } from "./platform/foreground.js"; @@ -28,8 +28,8 @@ import * as cta from "./cta/index.stories.js"; import * as mui from "./mui/index.stories.js"; import * as popup from "./popup/index.stories.js"; import * as wallet from "./wallet/index.stories.js"; -import { renderNodeOrBrowser } from "./test-utils.js"; -import { h, VNode } from "preact"; +// import { renderNodeOrBrowser } from "./test-utils.js"; +import { h, VNode, ComponentChildren } from "preact"; import { AlertProvider } from "./context/alert.js"; setupI18n("en", { en: {} }); @@ -43,15 +43,7 @@ describe("All the examples:", () => { describe(`Component ${component.name}:`, () => { component.examples.forEach((example) => { it(`should render example: ${example.name}`, () => { - function C(): VNode { - const B = h(example.render.component, example.render.props); - //FIXME: - //some components push the alter in the UI function - //that's not correct, should be moved into the state function - // until then, we ran the tests with the alert provider - return h(AlertProvider, { children: B }, B); - } - renderNodeOrBrowser(C, {}); + tests.renderUI(example.render, DefaultTestingContext); }); }); }); @@ -59,3 +51,14 @@ describe("All the examples:", () => { }); }); }); +function DefaultTestingContext({ + children, +}: { + children: ComponentChildren; +}): VNode { + //FIXME: + //some components push the alter in the UI function + //that's not correct, should be moved into the state function + // until then, we ran the tests with the alert provider + return h(AlertProvider, { children }); +} diff --git a/packages/taler-wallet-webextension/src/test-utils.ts b/packages/taler-wallet-webextension/src/test-utils.ts index 1d2538703..9585da346 100644 --- a/packages/taler-wallet-webextension/src/test-utils.ts +++ b/packages/taler-wallet-webextension/src/test-utils.ts @@ -21,204 +21,18 @@ import { WalletCoreRequestType, WalletCoreResponseType, } from "@gnu-taler/taler-wallet-core"; +import { TranslationProvider } from "@gnu-taler/web-util/lib/index.browser"; import { ComponentChildren, - Fragment, FunctionalComponent, VNode, h as create, - options, - render as renderIntoDom, } from "preact"; -import { render as renderToString } from "preact-render-to-string"; import { AlertProvider } from "./context/alert.js"; import { BackendProvider } from "./context/backend.js"; +import { strings } from "./i18n/strings.js"; import { nullFunction } from "./mui/handlers.js"; import { BackgroundApiClient, wxApi } from "./wxApi.js"; -import { TranslationProvider } from "@gnu-taler/web-util/lib/index.browser"; -import { strings } from "./i18n/strings.js"; - -// 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 { - //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); - // Render.args = evaluatedProps; - - return { - component: Render, - props: evaluatedProps, - }; -} - -export function createExampleWithCustomContext( - Component: FunctionalComponent, - props: Partial | (() => Partial), - ContextProvider: FunctionalComponent, - contextProps: Partial, -): 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); - } -} -type RecursiveState = S | (() => RecursiveState); - -interface Mounted { - unmount: () => void; - pullLastResultOrThrow: () => Exclude; - assertNoPendingUpdate: () => void; - // waitNextUpdate: (s?: string) => Promise; - waitForStateUpdate: () => Promise; -} - -const isNode = typeof window === "undefined"; - -export function mountHook( - callback: () => RecursiveState, - Context?: ({ children }: { children: any }) => VNode, -): 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 = callback(); - 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, {}); - } - - // create the vdom with context if required - const vdom = !Context - ? create(Component, {}) - : create(Context, { children: [create(Component, {})] }); - - 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 pullLastResult(): Exclude { - const copy: Exclude = lastResult; - lastResult = null; - return copy; - } - - function pullLastResultOrThrow(): Exclude { - const r = pullLastResult(); - if (r instanceof Error) throw r; - if (!r) throw Error("there was no last result"); - return r; - } - - async function assertNoPendingUpdate(): Promise { - 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 = pullLastResult(); - 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 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: any = () => null;