Added web e2e tests and CI integration

.github/workflows/ci.yaml

@@ -0,0 +1,50 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    services:
+      postgres:
+        image: postgres
+
+        env:
+          POSTGRES_PASSWORD: postgres
+          POSTGRES_USER: postgres
+          POSTGRES_DB: mynance
+
+        options: >-
+          --health-cmd pg_isready
+          --health-interval 10s
+          --health-timeout 5s
+          --health-retries 5
+        ports:
+          - 5432:5432
+
+    steps:
+      - name: checkout branch
+        uses: actions/checkout@v3
+
+      - name: Install dependecies
+        run: yarn
+
+      - name: Install playwright driver
+        run: yarn playwright install chromium
+
+      - name: Create db
+        env:
+          SERVER_DATABASE_URL: postgresql://postgres:postgres@localhost:5432/mynance
+        run: yarn db-push
+
+      - name: Run CI
+        env:
+          SERVER_DATABASE_URL: postgresql://postgres:postgres@localhost:5432/mynance
+        run: yarn ci

apps/mobile/package.json

@@ -8,7 +8,6 @@
     "lint": "eslint .",
     "start": "react-native start",
     "test": "jest",
-    "test:watch": "jest --watch",
     "dev": "yarn ios"
   },
   "dependencies": {

apps/mobile/src/screens/Home/HomeScreen.tsx

@@ -11,7 +11,7 @@ const HomeScreen = () => {
   const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
 
   if (isLoading) {
-    return <ActivityIndicator testID='loading'/>;
+    return <ActivityIndicator testID="loading" />;
   }
 
   if (isError) {

apps/web/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}

apps/web/package.json

@@ -22,6 +22,7 @@
     "@types/react-dom": "^18.2.4",
     "babel-plugin-react-native-web": "^0.18.4",
     "eslint": "^8.19.0",
+    "eslint-config-next": "13.5.2",
     "tsconfig": "*",
     "typescript": "^4.7.4"
   }

apps/web/pages/index.tsx

@@ -32,7 +32,7 @@ export default function User({ users }) {
         }}
       >
         <h1>
-          Seems you haven't started yet, please add your information below
+          {"Seems you haven't started yet, please add your information below"}
         </h1>
         <InformationForm refreshData={refreshData} />
       </div>

apps/web/pages/user/[id].tsx

@@ -1,14 +1,14 @@
 import { useRouter } from "next/router";
 import axios from "axios";
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { UserDetail } from "@mynance/shared-ui";
 
 export default function User() {
   const router = useRouter();
   const { id } = router.query;
   const [user, setUser] = useState(null);
 
-  const refreshData = async () => {
+  const refreshData = useCallback(async () => {
     try {
       const URL = `http://localhost:8000/users/${id}`;
       const response = await axios.get(URL);
@@ -17,7 +17,7 @@ export default function User() {
     } catch (error) {
       console.error("Error fetching user data:", error);
     }
-  };
+  }, [id]);
 
   useEffect(() => {
     // Fetch user data when the component mounts
@@ -28,7 +28,7 @@ export default function User() {
     if (id) {
       fetchUser();
     }
-  }, [id]);
+  }, [id, refreshData]);
 
   if (!user) {
     return <p>Loading...</p>;

package.json

@@ -8,11 +8,15 @@
     "dev": "dotenv -- turbo dev",
     "build": "dotenv -- turbo build",
     "test": "dotenv -- turbo test",
-    "test:watch": "dotenv -- turbo test:watch",
+    "dev:test": "dotenv -- turbo dev:test",
+    "e2e:test": "dotenv -- turbo e2e:test",
+    "lint": "turbo lint",
+    "ci": "turbo run build lint e2e:test test",
     "clean": "turbo clean && rm -rf node_modules",
     "format": "prettier --write \"**/*.{ts,tsx,js,jsx,json,md}\" --ignore-path .gitignore",
     "postinstall": "prisma generate && yarn pod-install",
-    "pod-install": "cd apps/mobile && npx pod-install && cd ../../"
+    "pod-install": "cd apps/mobile && npx pod-install && cd ../../",
+    "db-push": "cd apps/server && npx prisma db push"
   },
   "devDependencies": {
     "dotenv-cli": "^7.3.0",

packages/web-e2e-tests/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "web-e2e-tests",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev:test": "playwright test",
+    "start:api": "cd ../../apps/server && yarn start",
+    "start:server": "cd ../../apps/web && yarn start",
+    "e2e:test": "start-test start:api 8000 start:server 3000 \"playwright test\""
+  },
+  "dependencies": {
+    "start-server-and-test": "^2.0.1",
+    "web": "*"
+  },
+  "devDependencies": {
+    "@playwright/test": "^1.38.1"
+  }
+}

packages/web-e2e-tests/playwright.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  testDir: "tests",
+  fullyParallel: true,
+});

packages/web-e2e-tests/tests/test.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from "@playwright/test";
+
+test("simple test", async ({ page }) => {
+  await page.goto("http://localhost:3000/");
+  const deleteUser = page.getByText("Delete user");
+  if (await deleteUser.isVisible()) {
+    await deleteUser.click();
+  }
+  await page.getByPlaceholder("Name").click();
+  await page.getByPlaceholder("Name").fill("Test user");
+  await page.getByPlaceholder("Name").press("Tab");
+  await page.getByPlaceholder("Current account balance").fill("2000");
+  await page.getByText("Register information").click();
+  await page.getByText("NAME: Test user").click();
+  await page.getByText("BALANCE: 2000€").click();
+  await page.getByText("Check user").click();
+  await page.getByRole("button", { name: "Add Movement" }).click();
+  await page.getByPlaceholder("Description").click();
+  await page.getByPlaceholder("Description").fill("Movement");
+  await page.getByPlaceholder("Amount").click();
+  await page.getByPlaceholder("Amount").fill("500");
+  await page.getByRole("button", { name: "Add", exact: true }).click();
+  await page.getByRole("button", { name: "Add Expense" }).click();
+  await page.getByPlaceholder("Name").click();
+  await page.getByPlaceholder("Name").fill("Expenses");
+  await page.getByPlaceholder("Description").click();
+  await page.getByPlaceholder("Description").fill("expense");
+  await page.getByPlaceholder("Amount").click();
+  await page.getByPlaceholder("Amount").fill("200");
+  await page.getByRole("button", { name: "Add", exact: true }).click();
+  await page.getByText("2500€").click();
+  await page.getByText("200€").click();
+});

packages/web-e2e-tests/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "tsconfig/base",
+  "include": ["."],
+  "exclude": ["dist", "build", "node_modules"],
+  "compilerOptions": {
+    "strict": true
+  }
+}

turbo.json

@@ -10,20 +10,24 @@
     "start": {
       "dependsOn": ["build"]
     },
+    "test": {
+      "dependsOn": ["^build"]
+    },
+    "e2e:test": {
+      "dependsOn": ["^build"]
+    },
+    "lint": {},
     "dev": {
       "cache": false,
       "persistent": true,
-      "dotEnv": [".env.production.local", ".env.local", ".env.production", ".env"]
+      "dotEnv": [
+        ".env.production.local",
+        ".env.local",
+        ".env.production",
+        ".env"
+      ]
     },
-    "dev:server": {
-      "cache": false,
-      "persistent": true
-    },
-    "test": {
-      "cache": false
-    },
-    "lint": {},
-    "clean": {
+    "dev:test": {
       "cache": false
     }
   }