automated test all stories

packages/taler-util/src/i18n.ts

@@ -136,7 +136,6 @@ function stringifyArray(children: Array<any>): string {
     return `%${n++}$s`;
   });
   const s = ss.join("").replace(/ +/g, " ").trim();
-  console.log("translation lookup", JSON.stringify(s));
   return s;
 }
 

packages/taler-wallet-webextension/package.json

@@ -25,14 +25,14 @@
     "tslib": "^2.1.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
+    "@babel/core": "7.13.16",
     "@babel/plugin-transform-react-jsx-source": "^7.12.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@linaria/babel-preset": "^3.0.0-beta.4",
+    "@linaria/babel-preset": "3.0.0-beta.4",
-    "@linaria/core": "^3.0.0-beta.4",
+    "@linaria/core": "3.0.0-beta.4",
-    "@linaria/react": "^3.0.0-beta.7",
+    "@linaria/react": "3.0.0-beta.4",
-    "@linaria/rollup": "^3.0.0-beta.7",
+    "@linaria/rollup": "3.0.0-beta.4",
-    "@linaria/webpack-loader": "^3.0.0-beta.7",
+    "@linaria/webpack-loader": "3.0.0-beta.4",
     "@rollup/plugin-alias": "^3.1.2",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-image": "^2.0.6",
@@ -44,6 +44,7 @@
     "@storybook/preact": "^6.2.9",
     "@testing-library/preact": "^2.0.1",
     "@types/chrome": "^0.0.128",
+    "@types/enzyme": "^3.10.8",
     "@types/history": "^4.7.8",
     "@types/jest": "^26.0.23",
     "@types/node": "^14.14.22",
@@ -53,7 +54,7 @@
     "enzyme": "^3.11.0",
     "enzyme-adapter-preact-pure": "^3.1.0",
     "jest": "^26.6.3",
-    "jest-preset-preact": "^4.0.3",
+    "jest-preset-preact": "^4.0.2",
     "preact-cli": "^3.0.5",
     "preact-render-to-string": "^5.1.19",
     "rimraf": "^3.0.2",
@@ -71,10 +72,11 @@
       "<rootDir>/tests/__mocks__/setupTests.ts"
     ],
     "moduleNameMapper": {
-      "\\.(css|less)$": "identity-obj-proxy"
+      "\\.(css|less)$": "identity-obj-proxy",
+      "@linaria/react": "<rootDir>/tests/__mocks__/linaria.ts"
     },
     "transform": {
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|po)$": "<rootDir>/tests/__mocks__/fileTransformer.js"
     }
   }
-}
+}

packages/taler-wallet-webextension/src/components/SelectList.tsx

@@ -31,7 +31,6 @@ interface Props {
 }
 
 export function SelectList({ name, value, list, canBeNull, onChange, label, description }: Props): JSX.Element {
-  console.log("==>", name, value)
   return <div>
     <label
       htmlFor={`text-${name}`}

packages/taler-wallet-webextension/tests/__mocks__/linaria.ts

@@ -0,0 +1,33 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+
+/**
+ * Here we are mocking the linaria runtime since it should not be used in 
+ * runtime.
+ */
+export const styled = new Proxy(function (tag: any) {
+    return jest.fn(() => `mock-styled.${tag}`);
+}, {
+    get(o, prop) {
+        return o(prop);
+    },
+})
+

packages/taler-wallet-webextension/tests/__mocks__/setupTests.ts

@@ -29,5 +29,6 @@ configure({
 
 // Polyfill for encoding which isn't present globally in jsdom
 import { TextEncoder, TextDecoder } from 'util'
-global.TextEncoder = TextEncoder
+global.TextEncoder = TextEncoder;
-global.TextDecoder = TextDecoder
+global.TextDecoder = TextDecoder;
+(global as any).chrome = {};

packages/taler-wallet-webextension/tests/i18n.test.tsx

@@ -15,8 +15,9 @@
  */
 
 // import * as test from "ava";
-import { internalSetStrings, str, Translate } from "@gnu-taler/taler-util";
+import { internalSetStrings, i18n, Translate } from "@gnu-taler/taler-util";
 import { render, configure } from "enzyme";
+import { h } from 'preact';
 import Adapter from 'enzyme-adapter-preact-pure';
 
 configure({ adapter: new Adapter() });
@@ -40,7 +41,7 @@ const testStrings = {
 test("str translation", (done) => {
 
   // Alias, so we nly use the function for lookups, not for string extranction.
-  const strAlias = str;
+  const strAlias = i18n.str;
   const TranslateAlias = Translate;
   internalSetStrings(testStrings);
   expect(strAlias`str1`).toEqual("foo1");

packages/taler-wallet-webextension/tests/stories.test.tsx

@@ -0,0 +1,70 @@
+/*
+ This file is part of GNU Taler
+ (C) 2021 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 <http://www.gnu.org/licenses/>
+ */
+
+/**
+*
+* @author Sebastian Javier Marchano (sebasjm)
+*/
+import { mount } from 'enzyme';
+import { h } from 'preact';
+
+import fs from 'fs';
+
+function getFiles(dir: string, files_: string[] = []) {
+  const files = fs.readdirSync(dir);
+  for (const i in files) {
+    const name = dir + '/' + files[i];
+    if (fs.statSync(name).isDirectory()) {
+      getFiles(name, files_);
+    } else {
+      files_.push(name);
+    }
+  }
+  return files_;
+}
+
+const re = RegExp('.*\.stories.tsx')
+
+import { setupI18n } from '@gnu-taler/taler-util';
+setupI18n('en',{'en':{}})
+
+it('render every story', () => {
+  // jest.spyOn(i18n, 'useTranslationContext').mockImplementation(() => ({ changeLanguage: () => null, lang: 'en' }));
+
+  getFiles('./src').filter(f => re.test(f)).map(f => {
+  // const f = "./src/paths/instance/transfers/list/List.stories.tsx";
+    // eslint-disable-next-line @typescript-eslint/no-var-requires
+    const s = require(`../${f}`)
+
+    delete s.default
+    
+    Object.keys(s).forEach(k => {
+      const Component = s[k];
+      expect(() => {
+        try {
+          let p = mount(<Component {...Component.args} /> as any)
+          p.mount()
+          p.unmount()
+          p.mount();
+        } catch (e) {
+          console.log(e)
+          throw e
+        }
+      }).not.toThrow() //`problem rendering ${f} example ${k}`
+
+    })
+  })
+});

packages/taler-wallet-webextension/tsconfig.json

@@ -2,9 +2,8 @@
   "compilerOptions": {
     "composite": true,
     "lib": ["es6", "DOM"],
-    "jsx": "react",
+    "jsx": "react-jsx",
-    "jsxFactory": "h",
+    "jsxImportSource": "preact",
-    "jsxFragmentFactory": "Fragment",
     "moduleResolution": "Node",
     "module": "ESNext",
     "target": "ES6",