Merge pull request #215 from codeableorg/test-env-update

fix: update database URL in .env.test and add dotenv-cli to dependencies; refactor Playwright config to comment out unused browsers

Author: diegotc86

.env.test

@@ -1,7 +1,4 @@
-DATABASE_URL="postgresql://diego@localhost:5432/fullstock?schema=public"
+DATABASE_URL="postgresql://diego@localhost:5432/fullstock_test?schema=public"
 
 # Admin Database (for database creation/deletion)
-ADMIN_DB_NAME=postgres
-
-# This was inserted by `prisma init`:
-[object Promise]
+ADMIN_DB_NAME=postgres

.github/workflows/tests.yaml

@@ -57,3 +57,44 @@ jobs:
 
       - name: Run Unit Tests
         run: npm run test
+
+  e2e-test:
+    runs-on: ubuntu-latest
+    needs: [test]
+    services:
+      postgres:
+        image: postgres:15
+        ports:
+          - 5432:5432
+        env:
+          POSTGRES_USER: diego
+          POSTGRES_DB: fullstock_test
+          POSTGRES_HOST_AUTH_METHOD: trust
+        options: >-
+          --health-cmd "pg_isready -U postgres" --health-interval 10s --health-timeout 5s --health-retries 5
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Set up Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: "lts/*"
+
+      - name: Install dependencies
+        run: npm clean-install
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+
+      - name: Build the application
+        run: npm run build
+
+      - name: Migrate the database
+        run: npm run test:prisma:migrate:deploy
+
+      - name: Seed the database
+        run: npm run test:prisma:seed
+
+      - name: Run E2E Tests
+        run: npm run test:e2e

.gitignore

@@ -26,7 +26,7 @@ dist-ssr
 # React Router
 .react-router/
 
-.build/
+build/
 .env
 
 # Playwright

package-lock.json

@@ -10,7 +10,17 @@
     "preview": "vite preview",
     "start": "react-router-serve ./build/server/index.js",
     "type-check": "react-router typegen && tsc",
-    "test": "vitest"
+    "test": "vitest",
+    "prisma": "prisma",
+    "prisma:generate": "prisma generate",
+    "prisma:migrate": "prisma migrate dev --name init",
+    "prisma:migrate:deploy": "prisma migrate deploy",
+    "prisma:migrate:status": "prisma migrate status",
+    "prisma:studio": "prisma studio",
+    "prisma:seed": "prisma db seed",
+    "test:prisma:migrate:deploy": "dotenv -e .env.test -- prisma migrate deploy",
+    "test:e2e": "playwright test",
+    "test:prisma:seed": "dotenv -e .env.test prisma db seed"
   },
   "prisma": {
     "seed": "tsx ./prisma/seed.ts"
@@ -59,6 +69,7 @@
     "@typescript-eslint/parser": "^8.31.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.21",
+    "dotenv-cli": "^8.0.0",
     "eslint": "^9.25.1",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react-hooks": "^5.0.0",

package.json

@@ -1,6 +1,8 @@
 import { defineConfig, devices } from "@playwright/test";
 import dotenv from "dotenv";
 
+import { baseUrl, command } from "@/e2e/utils-tests-e2e";
+
 // Load test environment variables
 dotenv.config({ path: ".env.test" });
 
@@ -18,15 +20,16 @@ dotenv.config({ path: ".env.test" });
 export default defineConfig({
   testDir: "./src/e2e",
   /* Run tests in files in parallel */
-  fullyParallel: true,
+  // globalSetup: require.resolve("./src/e2e/setup.ts"),
+  fullyParallel: false,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
   forbidOnly: !!process.env.CI,
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: 1,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: "html",
+  reporter: "list",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -43,15 +46,15 @@ export default defineConfig({
       use: { ...devices["Desktop Chrome"] },
     },
 
-    {
-      name: "firefox",
-      use: { ...devices["Desktop Firefox"] },
-    },
+    // {
+    //   name: "firefox",
+    //   use: { ...devices["Desktop Firefox"] },
+    // },
 
-    {
-      name: "webkit",
-      use: { ...devices["Desktop Safari"] },
-    },
+    // {
+    //   name: "webkit",
+    //   use: { ...devices["Desktop Safari"] },
+    // },
 
     /* Test against mobile viewports. */
     // {
@@ -75,9 +78,9 @@ export default defineConfig({
   ],
 
   /* Run your local dev server before starting the tests */
-  // webServer: {
-  //   command: 'npm run start',
-  //   url: 'http://localhost:3000',
-  //   reuseExistingServer: !process.env.CI,
-  // },
+  webServer: {
+    command: command,
+    url: baseUrl,
+    reuseExistingServer: !process.env.CI,
+  },
 });

playwright.config.ts

@@ -4,49 +4,34 @@ import { prisma } from "@/db/prisma";
 import { hashPassword } from "@/lib/security";
 import type { CreateUserDTO } from "@/models/user.model";
 
-test.describe("Visitante inicio sesion", () => {
-  let testUserId: number;
+import { baseUrl, cleanDatabase } from "./utils-tests-e2e";
+
+test.beforeEach(async () => {
+  await cleanDatabase();
+});
 
-  test.beforeAll(async () => {
+test.describe("Visitante inicio sesion", () => {
+  test.beforeEach(async () => {
     const testUser: CreateUserDTO = {
       email: "[email protected]",
       name: null,
       password: await hashPassword("letmein"),
       isGuest: false,
     };
 
-    const existingUser = await prisma.user.findUnique({
-      where: { email: testUser.email },
-    });
-
-    if (existingUser) {
-      await prisma.user.delete({
-        where: { id: existingUser.id },
-      });
-    }
-
-    const user = await prisma.user.create({
+    await prisma.user.create({
       data: testUser,
     });
-    testUserId = user.id;
-  });
-
-  test.afterAll(async () => {
-    await prisma.user.delete({
-      where: { id: testUserId },
-    });
   });
 
   test("test", async ({ page }) => {
-    await page.goto("http://localhost:5173/");
+    await page.goto(baseUrl);
     await page.getByTestId("login").click();
     await page.getByRole("textbox", { name: "Correo electrónico" }).click();
     await page
       .getByRole("textbox", { name: "Correo electrónico" })
       .fill("[email protected]");
-    await page
-      .getByRole("textbox", { name: "Correo electrónico" })
-      .press("Tab");
+
     await page.getByRole("textbox", { name: "Contraseña" }).fill("letmein");
     await page.getByRole("button", { name: "Iniciar sesión" }).click();
 

src/e2e/demo.signin.spec.ts

@@ -1,8 +1,14 @@
 import { test, expect } from "@playwright/test";
 
+import { baseUrl, cleanDatabase } from "./utils-tests-e2e";
+
+test.beforeEach(async () => {
+  await cleanDatabase();
+});
+
 test.describe("Visitor", () => {
   test("can add a product to the cart", async ({ page }) => {
-    await page.goto("http://localhost:5173/");
+    await page.goto(baseUrl);
 
     await expect(page).toHaveTitle(/inicio/i);
 

src/e2e/demo.spec.ts

@@ -1,14 +1,18 @@
 // import { createOrderFormData } from "@/lib/utils.tests";
 import { expect, test } from "@playwright/test";
 
-import { createOrderFormData } from "./utils-tests-e2e";
+import { baseUrl, cleanDatabase, createOrderFormData } from "./utils-tests-e2e";
 
 export type OrderFormData = Record<string, string>;
 
+test.beforeEach(async () => {
+  await cleanDatabase();
+});
+
 test.describe("Guest", () => {
   test("Guest can create an order", async ({ page }) => {
     // Navegar a la tienda y agregar un producto
-    await page.goto("http://localhost:5173/");
+    await page.goto(baseUrl);
 
     await page.getByRole("menuitem", { name: "Polos" }).click();
     await page.getByTestId("product-item").first().click();

src/e2e/guest-create-order.spec.ts

@@ -0,0 +1,5 @@
+import { cleanDatabase } from "./utils-tests-e2e";
+
+export default async function globalSetup() {
+  await cleanDatabase();
+}