feat: added GitHub Actions CI and updated README

Author: Miladatasys

.github/workflows/tests.yml

@@ -0,0 +1,35 @@
+name: Run tests and audit
+
+on: [push, pull_request]
+
+jobs:
+  build-and-test:
+    name: Install, Audit and Test app
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Clone repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20
+
+      - name: Install dependencies
+        run: npm install
+
+      - name: Verify vulnerabilities
+        run: npm audit --audit-level=moderate || true
+
+      - name: Execute unit tests
+        run: npx vitest run src/tests/unit/userService.test.ts    
+
+      - name: Execute integration test
+        run: npx vitest run src/tests/integration/userApi.integration.test.ts 
+
+      - name: Execute UI tests
+        run: |
+          npx vitest run src/tests/ui/addUser.ui.test.ts
+          npx vitest run src/tests/ui/editUser.ui.test.ts
+          npx vitest run src/tests/ui/deleteUser.ui.test.ts

README.md

@@ -1,29 +1,59 @@
-# user-management
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vite.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Compile and Minify for Production
-
-```sh
-npm run build
-```
+# App de Gestión de Usuarios
+
+Una aplicación web para la **gestión de usuarios** desarrollada en Vue y TypeScript
+
+**Las funcionalidades de la app:**
+
+- Listar usuarios con el total de registros
+- Crear, editar y eliminar usuarios
+- Validaciones:
+    - Email válido
+    - RUT único con formato
+    - Teléfono chileno, incluyendo el código +569 o +56 9
+    - Campos de nombre sin números
+    - No se elimina usuarios en día de cumpleaños 
+    - Se puede añadir múltiples teléfonos y direcciones
+    - Autenticación simulada con login
+
+**Testing:**
+- ``Vitest`` para pruebas unitarias y de integración
+- ``@testing-library/vue`` para pruebas visuales (ui)
+- ``msw`` para mocking de la API
+- Autenticación: Login simulado con 'useAuth'
+- API Mock: Simulada mediante ``msw`` y ``db.json`` 
+
+**Tests incluidos:**
+    - Unit Test 
+    - UI Test
+    - Integration Test
+    - Mock Handlers
+
+**Rutas:**
+
+- '/' = login
+- '/home' = listados de usuarios
+- '/new' = formulario de crear usuario
+- '/edit/:id' = formulario de editar usuario
+
+**Instalación y ejecución:**
+1. Instalar dependencias
+``    npm install``
+2. Levantar app:
+``npm run dev``
+3. Correr API fake si se usa JSON Server:
+``npm run api``
+4. Ejecutar los tests:
+``npx vitest run``
+
+## Ejecución de pruebas individuales
+
+### Prueba unitaria
+npx vitest run src/tests/unit/userService.test.ts
+
+### Pruebas visuales (UI)
+- npx vitest run src/tests/ui/addUser.ui.test.ts
+- npx vitest run src/tests/ui/editUser.ui.test.ts
+- npx vitest run src/tests/ui/deleteUser.ui.test.ts
+
+### Prueba de integración
+npx vitest run src/tests/integration/userApi.integration.test.ts

package.json

@@ -7,7 +7,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "api": "json-server --watch db.json --port 3001"
+    "api": "json-server --watch db.json --port 3001",
+    "audit": "npm audit"
   },
   "dependencies": {
     "json-server": "^1.0.0-beta.3",

src/tests/ui/addUser.ui.test.ts

@@ -1,20 +1,11 @@
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/vue";
-import { createRouter, createWebHistory } from "vue-router";
+import { testRouter } from '@/tests/utils/testRouter'
 
-import CreateUserView from "@/views/CreateUserView.vue";
-import HomeView from "@/views/HomeView.vue";
 
+import CreateUserView from "@/views/CreateUserView.vue";
 import userEvent from '@testing-library/user-event'
 
-const router = createRouter({
-    history: createWebHistory(),
-    routes: [
-        { path: '/', component: HomeView },
-        { path: '/new', component: CreateUserView },
-    ],
-})
-
 afterEach(() => {
     vi.unstubAllGlobals();
 })
@@ -29,12 +20,15 @@ describe('UI -Agregar usuario', () => {
                 json: () => Promise.resolve([]),
             })
         ));
-        
+
+        testRouter.push('/new')
+        await testRouter.isReady()
+
         render(CreateUserView, {
             global: {
-                plugins: [router],
+                plugins: [testRouter],
             }
-        })
+        });
 
         await userEvent.type(screen.getByLabelText(/RUT \*/), '12345678-5')
         await userEvent.type(screen.getByLabelText(/Nombre completo \*/), 'Camila Morales')
@@ -52,7 +46,7 @@ describe('UI -Agregar usuario', () => {
         await fireEvent.click(submitButton)
 
         await waitFor(() => {
-            expect(router.currentRoute.value.fullPath).toBe('/')
+            expect(testRouter.currentRoute.value.fullPath).toBe('/home')
         })
     })
 })

src/tests/ui/deleteUser.ui.test.ts

@@ -1,11 +1,11 @@
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/vue";
-import { createRouter, createWebHistory } from "vue-router";
 
 import HomeView from "@/views/HomeView.vue";
-import CreateUserView from "@/views/CreateUserView.vue";
 import * as userService from '@/services/userService';
 
+import { testRouter } from '@/tests/utils/testRouter';
+
 
 const mockUsers = [
     {
@@ -22,14 +22,6 @@ const mockUsers = [
     },
 ];
 
-const router = createRouter({
-    history: createWebHistory(),
-    routes: [
-        { path: "/", component: HomeView },
-        { path: "/new", component: CreateUserView },
-    ],
-});
-
 afterEach(() => {
     vi.restoreAllMocks();
 });
@@ -46,7 +38,7 @@ describe("UI - Eliminar usuario", () => {
 
         render(HomeView, {
             global: {
-                plugins: [router],
+                plugins: [testRouter],
             },
         });
 

src/tests/ui/editUser.ui.test.ts

@@ -1,10 +1,10 @@
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, screen, fireEvent, waitFor } from "@testing-library/vue";
-import { createRouter, createWebHistory } from "vue-router";
 import userEvent from "@testing-library/user-event";
+import { testRouter } from '@/tests/utils/testRouter'
 
 import EditUserView from "@/views/EditUserView.vue";
-import HomeView from "@/views/HomeView.vue";
+import * as userService from '@/services/userService'
 
 const mockUser = {
     id: "123",
@@ -19,14 +19,6 @@ const mockUser = {
     ]
 };
 
-const router = createRouter({
-    history: createWebHistory(),
-    routes: [
-    { path: "/", component: HomeView },
-    { path: "/edit/:id", component: EditUserView }
-    ] 
-});
-
 afterEach(() => {
     vi.unstubAllGlobals();
 });
@@ -35,23 +27,15 @@ describe("UI - Editar usuario", () => {
     it("Debería cargar datos y permitir editar el usuario", async () => {
     vi.stubGlobal("alert", vi.fn());
 
-    vi.stubGlobal("fetch", vi.fn((url, options) => {
-        if (options && options.method === "PUT") {
-        return Promise.resolve({ ok: true, json: () => Promise.resolve({}) });
-        }
-
-        return Promise.resolve({
-        ok: true,
-        json: () => Promise.resolve([mockUser])
-        });
-    }));
+    vi.spyOn(userService, "getUsers").mockResolvedValue([mockUser])
+    vi.spyOn(userService, "updateUser").mockResolvedValue()
 
-    router.push("/edit/123");
-    await router.isReady();
+    testRouter.push("/edit/123")
+    await testRouter.isReady()
 
     render(EditUserView, {
         global: {
-        plugins: [router]
+        plugins: [testRouter]
         }
     });
 
@@ -70,7 +54,7 @@ describe("UI - Editar usuario", () => {
     await fireEvent.click(submitButton);
 
     await waitFor(() => {
-        expect(router.currentRoute.value.fullPath).toBe("/");
+        expect(testRouter.currentRoute.value.fullPath).toBe("/home");
     });
     });
 });

src/tests/utils/testRouter.ts

@@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '@/views/HomeView.vue'
+import CreateUserView from '@/views/CreateUserView.vue'
+import EditUserView from '@/views/EditUserView.vue'
+import LoginView from '@/views/LoginView.vue'
+
+export const testRouter = createRouter({
+    history: createWebHistory(),
+    routes: [
+    { path: '/', component: LoginView },
+    { path: '/home', component: HomeView },
+    { path: '/new', component: CreateUserView },
+    { path: '/edit/:id', component: EditUserView },
+    ],
+})