Merge pull request #1 from LeonardoToledo0/develop

test: adiciona novos testes unitários e de integração

Author: LeonardoToledo0

.github/workflows/ci.yml

@@ -23,5 +23,8 @@ jobs:
       - name: 📦 Instalar dependências
         run: yarn install --frozen-lockfile
 
+      - name: 🧪 Executar testes
+        run: yarn test
+
       - name: 🛠️ Build do projeto
         run: yarn build

Dockerfile

@@ -7,6 +7,7 @@ COPY package*.json ./
 RUN yarn
 
 COPY . .
+RUN yarn test   
 RUN yarn build
 
 # Etapa de produção

README.md

@@ -75,12 +75,23 @@ cd front-end_charllenge-comerc
 
 ---
 
+### 🧰 Rodando Testes
+
+| Etapa                                        | Comando           |
+| -------------------------------------------- | ----------------- |
+| Executa todos os testes uma vez              | `yarn test`       |
+| Executa os testes e fica observando mudanças | `yarn test:watch` |
+
+---
+
 ### 🐳 Rodando com Docker
 
-| Etapa           | Comando                                                     |
-| --------------- | ----------------------------------------------------------- |
-| Build da imagem | `docker build -t comerc-app --no-cache .`                   |
-| Rodar container | `docker run -d -p 8080:80 --name meu-comerc-app comerc-app` |
+| Etapa           | Comando                                                                                                        |
+| --------------- | -------------------------------------------------------------------------------------------------------------- |
+| Build da imagem | `docker build -t comerc-app --no-cache .`                                                                      |
+| Rodar container | `docker run -d -p 8080:80 --name meu-comerc-app comerc-app`                                                    |
+| Teste Container | `docker run --rm -v $(pwd):/app -w /app node:20 sh -c "yarn install --frozen-lockfile && yarn test"`           |
+| Teste Watch     | `docker run --rm -v $(pwd):/app -w /app -it node:20 sh -c "yarn install --frozen-lockfile && yarn test:watch"` |
 
 ---
 

package.json

@@ -6,7 +6,11 @@
   "scripts": {
     "dev": "vite",
     "build": "vue-tsc -b && vite build",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
+    "test:docker": "docker run --rm -v $(pwd):/app -w /app node:20 sh -c \"yarn install --frozen-lockfile && yarn test\"",
+    "test:docker:watch": "docker run --rm -v $(pwd):/app -w /app -it node:20 sh -c \"yarn install --frozen-lockfile && yarn test:watch\""
   },
   "dependencies": {
     "@heroicons/vue": "^2.2.0",
@@ -26,15 +30,19 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.11",
+    "@testing-library/jest-dom": "^6.6.4",
     "@types/node": "^24.1.0",
     "@types/uuid": "^10.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
+    "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
+    "jsdom": "^26.1.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "terser": "^5.43.1",
     "typescript": "~5.8.3",
-    "vite": "^7.0.4",
+    "vite": "^7.0.6",
     "vite-plugin-node-polyfills": "^0.24.0",
+    "vitest": "^3.2.4",
     "vue-tsc": "^2.2.12"
   }
-}
+}

src/features/auth/__tests__/AuthForm.test.ts

@@ -0,0 +1,111 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect, vi } from 'vitest'
+import type { MockedFunction } from 'vitest'
+import AuthForm from '../components/AuthForm.vue'
+
+vi.mock('../services/sendingEvent', () => ({
+    sendingEvent: vi.fn(),
+}))
+
+import { sendingEvent } from '../services/sendingEvent'
+import type { BaseAuth } from '../types/auth.interface'
+
+
+const maskStub = {
+    beforeMount() {
+
+    }
+}
+
+const mockedSendingEvent = sendingEvent as MockedFunction<typeof sendingEvent>
+
+describe('AuthForm.vue', () => {
+    const baseProps: BaseAuth = {
+        type: 'login',
+        inputs: [
+            { id: 'email', label: 'Email', type: 'email', required: true },
+            { id: 'password', label: 'Senha', type: 'password', required: true },
+        ],
+        isLoading: false,
+    }
+    it('renderiza os inputs e botões corretamente', () => {
+        const wrapper = mount(AuthForm, {
+            props: baseProps,
+            global: {
+                directives: {
+                    mask: maskStub
+                }
+            }
+        })
+
+        baseProps.inputs.forEach(input => {
+            expect(wrapper.html()).toContain(input.label)
+            expect(wrapper.find(`input#${input.id}`).exists()).toBe(true)
+        })
+
+        const buttons = wrapper.findAllComponents({ name: 'Button' })
+        expect(buttons.length).toBeGreaterThanOrEqual(2)
+
+        const enterButton = buttons.find(btn => btn.text().includes('Entrar'))
+        expect(enterButton).toBeTruthy()
+    })
+
+
+
+    it('chama sendingEvent no submit do formulário', async () => {
+        const wrapper = mount(AuthForm, {
+            props: baseProps,
+            global: {
+                directives: {
+                    mask: maskStub
+                }
+            }
+        })
+
+        await wrapper.find('form').trigger('submit.prevent')
+
+        expect(mockedSendingEvent).toHaveBeenCalledTimes(1)
+
+        const callArg = mockedSendingEvent.mock.calls[0][0]
+        expect(callArg.props).toMatchObject(baseProps)
+        expect(typeof callArg.emit).toBe('function')
+        expect(callArg.e).toBeDefined()
+    })
+
+    it('emite evento register quando botão registrar é clicado (type=login)', async () => {
+        const wrapper = mount(AuthForm, {
+            props: baseProps,
+            global: {
+                directives: {
+                    mask: maskStub
+                }
+            }
+        })
+
+        const registerButton = wrapper.findAllComponents({ name: 'Button' }).find(btn => btn.text() === 'Registrar')
+        expect(registerButton).toBeTruthy()
+        await registerButton?.trigger('click')
+
+        expect(wrapper.emitted()).toHaveProperty('register')
+    })
+
+    it('emite evento login quando botão voltar é clicado (type=register)', async () => {
+        const wrapper = mount(AuthForm, {
+            props: {
+                ...baseProps,
+                type: 'register',
+            },
+            global: {
+                directives: {
+                    mask: maskStub
+                }
+            }
+        })
+
+        const backButton = wrapper.findAllComponents({ name: 'Button' }).find(btn => btn.text() === 'Voltar')
+        expect(backButton).toBeTruthy()
+        await backButton?.trigger('click')
+
+        expect(wrapper.emitted()).toHaveProperty('login')
+    })
+})

src/features/auth/__tests__/SendingEvente.test.ts

@@ -0,0 +1,131 @@
+import { sendingEvent } from '../services/sendingEvent'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import { toast } from 'vue3-toastify'
+import type { BaseAuth } from '../types/auth.interface'
+
+vi.mock('vue3-toastify', () => ({
+    toast: {
+        error: vi.fn(),
+    },
+}))
+
+describe('sendingEvent', () => {
+    const mockEmit = vi.fn()
+
+    beforeEach(() => {
+        vi.clearAllMocks()
+    })
+
+    function createMockEvent(inputs: Record<string, string>) {
+        const form = document.createElement('form')
+        Object.entries(inputs).forEach(([name, value]) => {
+            const input = document.createElement('input')
+            input.id = name
+            input.value = value
+            if (name.toLowerCase().includes('password')) {
+                input.type = 'password'
+            } else if (name.toLowerCase().includes('document')) {
+                input.type = 'text'
+            } else {
+                input.type = 'text'
+            }
+
+            form.appendChild(input)
+        })
+
+        return {
+            preventDefault: vi.fn(),
+            target: form,
+        } as unknown as Event & { target: HTMLFormElement; preventDefault: () => void }
+    }
+
+    const basePropsLogin: BaseAuth = {
+        type: 'login',
+        inputs: [
+            { id: 'document', label: 'Documento', type: 'text', required: true },
+            { id: 'password', label: 'Senha', type: 'password', required: true },
+        ],
+        isLoading: false,
+    }
+
+    const basePropsRegister: BaseAuth = {
+        type: 'register',
+        inputs: [
+            { id: 'name', label: 'Nome', type: 'text', required: true },
+            { id: 'document', label: 'Documento', type: 'text', required: true },
+            { id: 'password', label: 'Senha', type: 'password', required: true },
+            { id: 'passwordConfirmation', label: 'Confirmação de senha', type: 'password', required: true },
+        ],
+        isLoading: false,
+    }
+
+    it('deve impedir submissão e emitir evento login com dados válidos', () => {
+        const e = createMockEvent({
+            document: '12345678909',
+            password: 'Password1!',
+        })
+
+        sendingEvent({ e, props: basePropsLogin, emit: mockEmit })
+
+        expect(e.preventDefault).toHaveBeenCalled()
+        expect(mockEmit).toHaveBeenCalledWith('submit', {
+            document: '12345678909',
+            password: 'Password1!',
+        })
+    })
+
+    it('deve exibir erro para CPF inválido', () => {
+        const e = createMockEvent({
+            document: 'invalid-cpf',
+            password: 'Password1!',
+        })
+
+        sendingEvent({ e, props: basePropsLogin, emit: mockEmit })
+
+        expect(toast.error).toHaveBeenCalledWith('Documento inválido')
+        expect(mockEmit).not.toHaveBeenCalled()
+    })
+
+    it('deve exibir erro para senha inválida', () => {
+        const e = createMockEvent({
+            document: '12345678909',
+            password: '123',
+        })
+
+        sendingEvent({ e, props: basePropsLogin, emit: mockEmit })
+
+        expect(toast.error).toHaveBeenCalledWith('Senha inválida')
+        expect(mockEmit).not.toHaveBeenCalled()
+    })
+
+    it('deve exibir erro para nome vazio no register', () => {
+        const e = createMockEvent({
+            name: '   ',
+            document: '12345678909',
+            password: 'Password1!',
+            passwordConfirmation: 'Password1!',
+        })
+
+        sendingEvent({ e, props: basePropsRegister, emit: mockEmit })
+
+        expect(toast.error).toHaveBeenCalledWith('Nome é obrigatório')
+        expect(mockEmit).not.toHaveBeenCalled()
+    })
+
+    it('deve exibir erro se não confirmar senha no register', () => {
+        const e = createMockEvent({
+            name: 'Leonardo',
+            document: '12345678909',
+            password: 'Password1!',
+            passwordConfirmation: '',
+        })
+
+        sendingEvent({ e, props: basePropsRegister, emit: mockEmit })
+
+        expect(toast.error).toHaveBeenCalledWith('Confirme a senha')
+        expect(mockEmit).not.toHaveBeenCalled()
+    })
+
+
+})