Add e2e tests

.gitattributes

@@ -6,4 +6,5 @@
 *.gif binary
 *.7z binary
 *.ico binary
-*.webp binary
+*.webp binary
+*.exe binary

.github/renovate.json

@@ -14,6 +14,12 @@
       "packageNames": ["node"],
       "enabled": false
     },
+    {
+      "packagePatterns": ["@wdio\/.+"],
+      "groupName": "wdio",      
+      "groupSlug": "wdio-updates",
+      "enabled": false
+    },
     {
       "datasources": ["github-actions"],
       "packagePatterns": ["^actions/"],

.github/workflows/tests.yaml

@@ -37,7 +37,7 @@ jobs:
           yarn lint:prettier
 
   test-tauri:
-    name: Test Tauri build
+    name: Test Tauri build    
     runs-on: windows-latest
 
     concurrency:
@@ -62,6 +62,14 @@ jobs:
           restore-keys: |
             ${{ runner.os }}-build-${{ env.cache-name }}-
 
+      # - name: Update to Evergreen WebView2 Runtime
+      #   shell: pwsh
+      #   # See here: https://developer.microsoft.com/en-us/microsoft-edge/webview2/
+      #    # https://github.com/actions/runner-images/issues/9538
+      #   run: |          
+      #     Invoke-WebRequest -Uri 'https://go.microsoft.com/fwlink/p/?LinkId=2124703' -OutFile 'setup.exe'
+      #     Start-Process -FilePath setup.exe -Verb RunAs -Wait
+
       - name: Install Rust stable
         uses: dtolnay/rust-toolchain@stable
 
@@ -85,6 +93,21 @@ jobs:
           cd src-tauri
           cargo test --package coh3-stats-desktop-app --lib
 
+      - name: Install tauri-driver
+        run: |
+          cargo install tauri-driver
+
+      # - name: debug commands
+      #   run: |
+      #     dir src-tauri/target/release/
+
+
+      # If the test fails with invalid MS Edge browser it's highly possible a bug at GitHub
+      # https://github.com/actions/runner-images/issues/9538
+      - name: Run e2e tests
+        run: |
+          yarn test:e2e
+
       - name: Upload Tauri app artifacts
         uses: actions/upload-artifact@v4
         with:

README.md

@@ -6,35 +6,37 @@ View stats of players in the current game of Company of Heroes 3.
 ## Setup OBS Streamer Overlay
 
 1. Make sure you have used the Coh3 Stats Desktop App once and it displayed stats of players in your game
-<a href="url"><img src="https://user-images.githubusercontent.com/25324640/227332549-4883c113-0d35-4ba3-8136-9684094abbe2.png" height="400" ></a>
+   <a href="url"><img src="https://user-images.githubusercontent.com/25324640/227332549-4883c113-0d35-4ba3-8136-9684094abbe2.png" height="400" ></a>
 2. Start OBS
 3. In OBS Sources section click on "Add Source"
-<a href="url"><img src="https://user-images.githubusercontent.com/25324640/227333163-684f30c8-a5cd-4aea-b65b-c297b39ff65f.png" height="400" ></a>
+   <a href="url"><img src="https://user-images.githubusercontent.com/25324640/227333163-684f30c8-a5cd-4aea-b65b-c297b39ff65f.png" height="400" ></a>
 4. Select Browser<br/>
-<a href="url"><img src="https://user-images.githubusercontent.com/25324640/227333226-2b0315c0-0e2c-4972-bb10-ffc1d98bc25c.png" height="400" ></a>
+   <a href="url"><img src="https://user-images.githubusercontent.com/25324640/227333226-2b0315c0-0e2c-4972-bb10-ffc1d98bc25c.png" height="400" ></a>
 5. Create a new Browser Source with any name you want
-<br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227333417-64f4cca3-0bd0-48aa-9de7-2e72d1dfc168.png" height="400" ></a>
+   <br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227333417-64f4cca3-0bd0-48aa-9de7-2e72d1dfc168.png" height="400" ></a>
 6. In the browser properties select local file
-<br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227333676-94a10104-23f8-41ff-8b60-26b34eac698c.png" height="400" ></a>
+   <br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227333676-94a10104-23f8-41ff-8b60-26b34eac698c.png" height="400" ></a>
 7. In the Coh3 Stats Desktop App go into settings
-<br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227334078-e975b12a-6730-4afd-9be1-3ed160371661.png" height="400" ></a>
+   <br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227334078-e975b12a-6730-4afd-9be1-3ed160371661.png" height="400" ></a>
 8. Copy the path to the streamerOverlay.html
-<br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227336591-6eba8879-ddd7-4f38-ab22-31573e4df8df.png" height="400" ></a>
+   <br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227336591-6eba8879-ddd7-4f38-ab22-31573e4df8df.png" height="400" ></a>
 9. In the OBS properties window click on browse to set the path to the streamerOverlay.html
-<br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227336733-aee8ac78-e076-4077-a756-e463752fae0c.png" height="400" ></a>
+   <br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227336733-aee8ac78-e076-4077-a756-e463752fae0c.png" height="400" ></a>
 10. An explorer window opens. Paste the copied path into the path field and hit enter
-<br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227337198-3058a4cc-94b8-45e1-b059-9edd1ca98b6a.png" height="400" ></a>
+    <br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227337198-3058a4cc-94b8-45e1-b059-9edd1ca98b6a.png" height="400" ></a>
 11. Select the streamerOverlay.html file and click open
-<br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227337374-e2ded687-1cdb-442d-b384-0f9c5fd8cb43.png" height="400" ></a>
+    <br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227337374-e2ded687-1cdb-442d-b384-0f9c5fd8cb43.png" height="400" ></a>
 12. Set the resolution to the same resolution Coh3 is running at. E.G 1920 Width and 1080 Height
-<br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227337508-78e625e2-e72b-42d7-87fd-811a02c7e5e4.png" height="400" ></a>
+    <br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227337508-78e625e2-e72b-42d7-87fd-811a02c7e5e4.png" height="400" ></a>
 13. Click Ok to finish creating the source
-<br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227337725-c9f9d443-1611-4765-94a6-5411c2032c86.png" height="400" ></a>
+    <br/><a href="url"><img src="https://user-images.githubusercontent.com/25324640/227337725-c9f9d443-1611-4765-94a6-5411c2032c86.png" height="400" ></a>
 14. Scale the source to match the Coh3 source size
 
-## Custom CSS for the overlay 
+## Custom CSS for the overlay
+
 If you don't like the default style of overlay, you can modify it with custom CSS.
 All the elements in the overlay have CSS classes assigned. The styling is as follows:
+
 ```
 
 .coh3stats-overlay {
@@ -104,8 +106,10 @@ All the elements in the overlay have CSS classes assigned. The styling is as fol
 ```
 
 Steps when you want to change something.
-Let's say I want to move it lower and change the color to red. 
+Let's say I want to move it lower and change the color to red.
+
 1. Pick the classes you want to change and do the changes:
+
 ```
 .coh3stats-overlay {
   display: flex;
@@ -115,7 +119,7 @@ Let's say I want to move it lower and change the color to red.
   position: absolute;
   left: calc((100vw / 2) - 485px);
   right: calc((100vw / 2) - 485px);
-  top: 250px; 
+  top: 250px;
 }
 
 .coh3stats-overlay-player {
@@ -124,14 +128,13 @@ Let's say I want to move it lower and change the color to red.
   font-family: Tilt Warp;
 }
 ```
-2. Open the configuration of "Overlay" in OBS 
-![image](https://github.com/cohstats/coh3-stats-desktop-app/assets/8086995/fa62f8df-0c08-4a1f-a12b-ca1598b2deb6)
+
+2. Open the configuration of "Overlay" in OBS
+   ![image](https://github.com/cohstats/coh3-stats-desktop-app/assets/8086995/fa62f8df-0c08-4a1f-a12b-ca1598b2deb6)
 3. Paste the 2 modified classes into the box Custom CSS
-![image](https://github.com/cohstats/coh3-stats-desktop-app/assets/8086995/c6f4cb56-f250-40f9-be93-5f65fefe8421)
+   ![image](https://github.com/cohstats/coh3-stats-desktop-app/assets/8086995/c6f4cb56-f250-40f9-be93-5f65fefe8421)
 4. Click OK and observe the changes
-![image](https://github.com/cohstats/coh3-stats-desktop-app/assets/8086995/ee77f6f8-2a8b-4da5-960c-e2c15f119d48)
-
-
+   ![image](https://github.com/cohstats/coh3-stats-desktop-app/assets/8086995/ee77f6f8-2a8b-4da5-960c-e2c15f119d48)
 
 ## Development
 
@@ -151,27 +154,43 @@ yarn tauri dev
 
 The first execution takes a bit longer as the rust libraries have to be compiled once. Any future restarts will be much faster!
 
-To build the app and an installer run:
+#### To build the app and an installer run:
 
 ```
 yarn tauri build
 ```
 
-Running tests:
+The build output can be found in `src-tauri/target/release`. The installer can be found in `src-tauri/target/release/bundle/msi`. We distribute the app with msi installer, so
+let's keep that consitent.
+
+#### Running Rust BE Tests:
+
 ```
 cargo test --package coh3-stats-desktop-app --lib
 ```
 
-The build output can be found in `src-tauri/target/release`. The installer can be found in `src-tauri/target/release/bundle/msi`.
+#### Running e2e tests:
+
+Build the app and run
+
+```
+yarn test:e2e
+```
+
+https://tauri.app/v1/guides/testing/webdriver/introduction
 
-Don't forget to run prettier with `yarn fix`. 
+- Install tauri driver `cargo install tauri-driver`
+- Get msedgedriver.exe to your path https://tauri.app/v1/guides/testing/webdriver/introduction/#windows
+
+Don't forget to run prettier with `yarn fix`. Should be covered by husky.
 
 ### Release
+
 - Increase the version in files:
   - `package.json`
   - `src-tauri/tauri.conf.json`
   - `src-tauri/Cargo.toml`
-- Commit the updated version 
+- Commit the updated version
 - Make a new tag on master
 
 ## Project Architecture

package.json

@@ -17,7 +17,9 @@
     "fix": "prettier --write src",
     "lint:prettier": "prettier --check src",
     "tauri": "tauri",
-    "prepare": "husky"
+    "prepare": "husky",
+    "test:e2e": "wdio run wdio.conf.cjs",
+    "test:be": "cd src-tauri && cargo test --package coh3-stats-desktop-app --lib"
   },
   "lint-staged": {
     "*.{js,ts,jsx,tsx,yml,css}": [
@@ -53,6 +55,10 @@
     "@types/react": "18.2.69",
     "@types/react-dom": "18.2.22",
     "@vitejs/plugin-react": "4.2.1",
+    "@wdio/cli": "^7",
+    "@wdio/local-runner": "^7",
+    "@wdio/mocha-framework": "^7",
+    "@wdio/spec-reporter": "^7",
     "husky": "9.0.11",
     "lint-staged": "15.2.2",
     "postcss": "8.4.38",

src-tauri/tauri.conf.json

@@ -23,7 +23,7 @@
             },
             "http": {
                 "all": true,
-                "scope": ["https://coh3-api.reliclink.com/*", "https://api.steampowered.com/*"]
+                "scope": ["https://coh3-api.reliclink.com/*", "https://api.steampowered.com/*", "https://coh3stats.com/*"]
             },
             "path": {
                 "all": true

src/Router.tsx

@@ -4,12 +4,14 @@ import { Game } from "./views/Game"
 import { Root } from "./views/Root"
 import { Settings } from "./views/Settings"
 import { Replays } from "./views/Replays"
+import { Debug } from "./views/Debug"
 
 export enum Routes {
   GAME = "/",
   SETTINGS = "/settings",
   ABOUT = "/about",
   REPLAYS = "/replays",
+  DEBUG = "/debug",
 }
 
 const router = createBrowserRouter([
@@ -33,6 +35,10 @@ const router = createBrowserRouter([
         path: Routes.ABOUT,
         element: <About />,
       },
+      {
+        path: Routes.DEBUG,
+        element: <Debug />,
+      },
     ],
   },
 ])

src/WindowTitleBar.tsx

@@ -52,6 +52,16 @@ export const WindowTitleBar: React.FC<WindowTitleBarProps> = ({ children }) => {
             >
               About
             </Link>
+            {process.env.NODE_ENV === "development" && (
+              <Link
+                to={Routes.DEBUG}
+                className={`${classes.link} ${
+                  location.pathname === Routes.DEBUG ? classes.selectedLink : ""
+                }`}
+              >
+                Debug
+              </Link>
+            )}
           </Group>
           <Group data-tauri-drag-region gap={0}>
             <a

src/components/Online-players.tsx

@@ -79,6 +79,7 @@ export const OnlinePlayers: React.FC = () => {
             variant="filled"
             size="md"
             style={{ minWidth: 60, marginBottom: -1 }}
+            data-testid="online-players-badge"
           >
             {onlinePlayersData?.playerCount}
           </Badge>

src/main.tsx

@@ -9,6 +9,7 @@ import { info } from "tauri-plugin-log-api"
 import { UploadNotifications } from "./components/UploadNotifications"
 import * as Sentry from "@sentry/react"
 import "@mantine/core/styles.css"
+import "@mantine/notifications/styles.css"
 
 info("Start frontend")
 

src/views/About.tsx

@@ -1,6 +1,7 @@
 import { getVersion } from "@tauri-apps/api/app"
 import { appDataDir } from "@tauri-apps/api/path"
 import { open } from "@tauri-apps/api/shell"
+import { fetch } from "@tauri-apps/api/http"
 import React, { useState, useEffect } from "react"
 import {
   Title,
@@ -20,10 +21,23 @@ export const About: React.FC = () => {
   const [appVersion, setAppVersion] = useState<string>()
   const [pathToLogs, setPathToLogs] = useState<string>()
 
+  const [latestVersion, setLatestVersion] = useState<string>()
+
   useEffect(() => {
-    getVersion().then((version) => setAppVersion(version))
-    events.open_about()
-    appDataDir().then((path) => setPathToLogs(path))
+    ;(async () => {
+      getVersion().then((version) => setAppVersion(version))
+      events.open_about()
+      appDataDir().then((path) => setPathToLogs(path))
+
+      fetch("https://coh3stats.com/api/appUpdateRoute")
+        .then((response) => {
+          // @ts-ignore
+          setLatestVersion(response.data.version.replace("v", ""))
+        })
+        .catch((error) => {
+          console.error("Error:", error)
+        })
+    })()
   }, [])
 
   return (
@@ -39,8 +53,29 @@ export const About: React.FC = () => {
         <Grid.Col span="auto" pt="md">
           <Group gap="xs">
             <Title order={4}>Version </Title>
-            <Code color="green">{appVersion}</Code>
+            <Code color="green" data-testid="app-version">
+              {appVersion}
+            </Code>
           </Group>
+          {latestVersion !== appVersion && (
+            <>
+              <Space h="xs" />
+              <Text component="p" size="sm" c={"red"}>
+                The latest production version is reported as {latestVersion}. If
+                the autoupdater doesn't work pelase download the new version
+                manually{" "}
+                <Anchor
+                  href="https://coh3stats.com/desktop-app"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  coh3stats.com/desktop-app
+                </Anchor>{" "}
+                and reinstall the application.
+              </Text>
+              <Space h="xs" />
+            </>
+          )}
           <Text component="p" size="sm">
             Visit our website{" "}
             <Anchor onClick={() => open("https://coh3stats.com/")}>

src/views/Debug.tsx

@@ -0,0 +1,26 @@
+import { Button } from "@mantine/core"
+import React from "react"
+import { showNotification } from "../utils/notifications"
+
+export const Debug: React.FC = () => {
+  return (
+    <>
+      This is the debug page, you shoulld see this only in development mode.
+      <br />
+      Mode: {process.env.NODE_ENV}
+      <br />
+      <Button
+        onClick={() => {
+          showNotification({
+            title: "Hello",
+            message: "This is a notification",
+            type: "success",
+            autoCloseInMs: 5000,
+          })
+        }}
+      >
+        Show notifications
+      </Button>
+    </>
+  )
+}