Merge pull request #666 from vector-im/SimonBrandner/task/tests

.github/workflows/test.yaml

@@ -0,0 +1,18 @@
+name: Run jest tests
+on:
+  pull_request: {}
+jobs:
+  jest:
+    name: Run jest tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+      - name: Yarn cache
+        uses: actions/setup-node@v3
+        with:
+          cache: "yarn"
+      - name: Install dependencies
+        run: "yarn install"
+      - name: Jest
+        run: "yarn run test"

babel.config.cjs

@@ -0,0 +1,15 @@
+module.exports = {
+  presets: [
+    [
+      "@babel/preset-env",
+      {
+        targets: {
+          node: "current",
+        },
+      },
+    ],
+    "@babel/preset-react",
+    "@babel/preset-typescript",
+  ],
+  plugins: ["babel-plugin-transform-vite-meta-env"],
+};

package.json

@@ -13,7 +13,8 @@
     "lint:js": "eslint --max-warnings 0 src",
     "lint:types": "tsc",
     "i18n": "node_modules/i18next-parser/bin/cli.js",
-    "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update"
+    "i18n:check": "node_modules/i18next-parser/bin/cli.js --fail-on-warnings --fail-on-update",
+    "test": "jest"
   },
   "dependencies": {
     "@juggle/resize-observer": "^3.3.1",
@@ -51,8 +52,8 @@
     "pako": "^2.0.4",
     "postcss-preset-env": "^7",
     "re-resizable": "^6.9.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "18",
+    "react-dom": "18",
     "react-i18next": "^11.18.6",
     "react-json-view": "^1.21.3",
     "react-router": "6",
@@ -66,10 +67,13 @@
     "@babel/core": "^7.16.5",
     "@matrix-org/olm": "https://gitlab.matrix.org/api/v4/projects/27/packages/npm/@matrix-org/olm/-/@matrix-org/olm-3.2.8.tgz",
     "@storybook/react": "^6.5.0-alpha.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
     "@types/request": "^2.48.8",
     "@typescript-eslint/eslint-plugin": "^5.22.0",
     "@typescript-eslint/parser": "^5.22.0",
     "babel-loader": "^8.2.3",
+    "babel-plugin-transform-vite-meta-env": "^1.0.3",
     "eslint": "^8.14.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.5.0",
@@ -79,6 +83,9 @@
     "eslint-plugin-react": "^7.29.4",
     "eslint-plugin-react-hooks": "^4.5.0",
     "i18next-parser": "^6.6.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.2.2",
+    "jest-environment-jsdom": "^29.2.2",
     "prettier": "^2.6.2",
     "sass": "^1.42.1",
     "storybook-builder-vite": "^0.1.12",
@@ -87,5 +94,19 @@
     "vite": "^2.4.2",
     "vite-plugin-html-template": "^1.1.0",
     "vite-plugin-svgr": "^0.4.0"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "testMatch": [
+      "<rootDir>/test/**/*-test.[jt]s?(x)"
+    ],
+    "transformIgnorePatterns": [
+      "/node_modules/(?!d3)+$",
+      "/node_modules/(?!internmap)+$"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|svg)+$": "identity-obj-proxy",
+      "./IndexedDBWorker\\?worker": "<rootDir>/test/mocks/workerMock.ts"
+    }
   }
 }

src/App.tsx

@@ -14,7 +14,9 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import React, { Suspense } from "react";
+import Olm from "@matrix-org/olm";
+import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
+import React, { Suspense, useState } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import * as Sentry from "@sentry/react";
 import { OverlayProvider } from "@react-aria/overlays";
@@ -28,7 +30,7 @@ import { ClientProvider } from "./ClientContext";
 import { usePageFocusStyle } from "./usePageFocusStyle";
 import { SequenceDiagramViewerPage } from "./SequenceDiagramViewerPage";
 import { InspectorContextProvider } from "./room/GroupCallInspector";
-import { CrashView } from "./FullScreenView";
+import { CrashView, LoadingView } from "./FullScreenView";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 
@@ -37,10 +39,20 @@ interface AppProps {
 }
 
 export default function App({ history }: AppProps) {
+  const [loadingOlm, setLoadingOlm] = useState(false);
+
   usePageFocusStyle();
 
+  // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
+  window.OLM_OPTIONS = {};
+  Olm.init({ locateFile: () => olmWasmPath }).then(() => setLoadingOlm(false));
+
   const errorPage = <CrashView />;
 
+  if (loadingOlm) {
+    return <LoadingView />;
+  }
+
   return (
     <Router history={history}>
       <Suspense fallback={null}>

src/matrix-utils.ts

@@ -1,5 +1,3 @@
-import Olm from "@matrix-org/olm";
-import olmWasmPath from "@matrix-org/olm/olm.wasm?url";
 import { IndexedDBStore } from "matrix-js-sdk/src/store/indexeddb";
 import { MemoryStore } from "matrix-js-sdk/src/store/memory";
 import { IndexedDBCryptoStore } from "matrix-js-sdk/src/crypto/store/indexeddb-crypto-store";
@@ -72,10 +70,6 @@ export async function initClient(
   clientOptions: ICreateClientOpts,
   restore: boolean
 ): Promise<MatrixClient> {
-  // TODO: https://gitlab.matrix.org/matrix-org/olm/-/issues/10
-  window.OLM_OPTIONS = {};
-  await Olm.init({ locateFile: () => olmWasmPath });
-
   let indexedDB: IDBFactory;
 
   try {

test/home/CallList-test.tsx

@@ -0,0 +1,46 @@
+/*
+Copyright 2022 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import React from "react";
+
+import { render, RenderResult } from "@testing-library/react";
+import { CallList } from "../../src/home/CallList";
+import { MatrixClient } from "matrix-js-sdk";
+import { GroupCallRoom } from "../../src/home/useGroupCallRooms";
+import { MemoryRouter } from "react-router-dom";
+import { ClientProvider } from "../../src/ClientContext";
+
+describe("CallList", () => {
+  const renderComponent = (rooms: GroupCallRoom[]): RenderResult => {
+    return render(
+      <ClientProvider>
+        <MemoryRouter>
+          <CallList client={{} as MatrixClient} rooms={rooms} />
+        </MemoryRouter>
+      </ClientProvider>
+    );
+  };
+
+  it("should show room", async () => {
+    const rooms = [
+      { roomName: "Room #1", roomId: "!roomId" },
+    ] as GroupCallRoom[];
+
+    const result = renderComponent(rooms);
+
+    expect(result.queryByText("Room #1")).toBeTruthy();
+  });
+});

test/mocks/workerMock.ts

@@ -0,0 +1 @@
+module.exports = jest.fn();

tsconfig.json

@@ -17,5 +17,10 @@
       }
     ]
   },
-  "include": ["./src/**/*.ts", "./src/**/*.tsx"]
+  "include": [
+    "./src/**/*.ts", 
+    "./src/**/*.tsx",
+    "./test/**/*.ts",
+    "./test/**/*.tsx"
+  ]
 }