![\"https://media.giphy.com/media/jvu00LhbjzAJi/giphy.gif\"](\"https://media.giphy.com/media/jvu00LhbjzAJi/giphy.gif\")
Falaaaa Galera!
\nEstou muito animada para esse post, hoje vamos aprender a testar uma API com tdd e utilizar typescript no nodejs principalmente se você for iniciante, então esse artigo vai ser bem técnico! Já prepara o café e abre o vscode!
\n
Mas antes de iniciar você precisa das seguintes ferramentas:
\n\nCom as ferramentas em mãos, agora só botar a mão na massa.
\nIndo direto ao ponto o TDD (Test-driven development) é uma metodologia para escrever os testes primeiro para um determinado módulo/regra de negócio e para a implementação real depois.
\nO TDD e um processo de 3 etapas:
\nSe você nunca utilizou. Espero que esse artigo te motive a utilizar, por que e sensacional!
\n![\"https://media.giphy.com/media/ZO91JimmRdDrV6qzFT/giphy.gif\"](\"https://media.giphy.com/media/ZO91JimmRdDrV6qzFT/giphy.gif\")
Iremos criar uma api de todo list.
\nEsse projeto e com foco 100% em testes, aqui não vamos aprender sobre JWT, configuração do banco de dados, segurança etc.
\nFuncionalidades:
\nTempos atrás fiz um post de Como criar testes no front-end em ReactJs caso tenha interesse também de testar o seu front!
\nAqui são os modelos do como os dados deve retornar no JSON.
\ntask:
\n{\n \"id\": \"\",\n \"task\": \"\",\n \"status\": \"\"\n}Aqui você vai conseguir ter a visão das rotas que iremos criar no nosso back-end.
\n[GET] api/todo - View all todos\n[GET] api/todo/:id - Search by id\n[POST] api/todo - Save new todo\n[PUT] api/todo - Update todo\n[DELETE] api/todo/:id - Delete todoMaravilha, agora a gente tem tudo que a gente precisa para criar nossa api. Bora por a mão no código!
\nPara iniciar o projeto e bem simples, se certifique que está utilizando o npm ok?
\nmkdir node-todos-testing\ncd node-todos-testing\nnpm initnpm install --save typescript @types/express express body-parser nodemonNa raiz do projeto crie um arquivo chamado tsconfig.json e coloque o seguinte bloco de código
{\n \"compilerOptions\": {\n \"module\": \"commonjs\",\n \"esModuleInterop\": true,\n \"target\": \"es6\",\n \"noImplicitAny\": true,\n \"moduleResolution\": \"node\",\n \"sourceMap\": true,\n \"outDir\": \"dist\",\n \"baseUrl\": \".\",\n \"paths\": {\n \"*\": [\"node_modules/*\"]\n }\n },\n \"include\": [\"src/**/*\", \"__tests__/**/*\"],\n \"exclude\": [\"node_modules\", \"dist\"]\n}Vamos criar também o arquivo de configuração do nodemon.json para ele entender nossos arquivos .ts
{\n \"ignore\": [\"**/*.test.ts\", \"**/*.spec.ts\", \".git\", \"node_modules\"],\n \"watch\": [\"src\"],\n \"exec\": \"npm run dev:server-debug\",\n \"ext\": \"ts\"\n}Agora vamos criar a estrura do projeto src e arquivo app.ts mas vamos deixar esse arquivo em branco inicialmente ok?
.\n├── node_modules\n├── nodemon.json\n├── package-lock.json\n├── package.json\n├── src\n│ ├── app.ts\n└── tsconfig.jsonAgora vamos instalar mais algumas dependências para os testes e realizar nosso primeiro test!
\nnpm i -D jest ts-jest supertest @types/jest @types/supertestEm seguida, adicione mais um arquivo de configuração para o Jest: jest.config.js
module.exports = {\n preset: \"ts-jest\",\n testEnvironment: \"node\",\n}Depois de adicionar o script de teste ao ./package.json:
{\n...\n \"scripts\": {\n...\n \"test\": \"jest\",\n...\n },\n...\n}Crie mais uma pasta na raiz do projeto __tests__ e chame nosso arquio src/app lembrando que esse arquivo está em branco!
Mas agora vamos adicionar código nele. Vamos revisar nossa estrutura de projeto, verifique se está igual a sua.
\n.\n├── __tests__\n│ ├── app.test\n├── node_modules\n├── nodemon.json\n├── jest.config.js\n├── package-lock.json\n├── package.json\n├── src\n│ ├── app.ts\n└── tsconfig.jsonUFAAAA! Agora podemos escrever nosso primeiro teste \\o
\n![\"https://media.giphy.com/media/3oKIPnAiaMCws8nOsE/giphy.gif\"](\"https://media.giphy.com/media/3oKIPnAiaMCws8nOsE/giphy.gif\")
No arquivo app.test vamos adicionar um endpoint de hello world, para ver se está tudo funcionando.
import { newApp } from \"../src/app\"\nimport request from \"supertest\"\n\nconst app = newApp()\n\ndescribe(\"Test public routes\", () => {\n it(\"should respond with a 200 response and a 'Hello World' body in / \", () => {\n return request(app).get(\"/\").expect(200, \"Hello World!\")\n })\n})Provavelmente a primeira importação vai estar com erro, vamos adicionar o seguinte código no arquivo src/app
import express from \"express\"\nimport { Express } from \"express\"\n\nexport function newApp(): Express {\n const app = express()\n\n app.get(\"/\", (_, res: express.Response) => {\n res.send(\"Hello World!\")\n })\n\n return app\n}Se executarmos o comando no terminal: npm test
Você deve ter algo parecido com isso no seu terminal:
\nPASS __tests__/app.test.ts\n Test public routes\n ✓ should respond with a 200 response and a 'Hello World' body in / (32 ms)\n\nTest Suites: 1 passed, 1 total\nTests: 1 passed, 1 total\nSnapshots: 0 total\nTime: 1.055 sAgora precisamos refatorar nosso arquivo app né? transformar em class, e adicionar nosso arquivos de router;
Novo arquivo route.ts
import express from \"express\";\n\nexport class Routes {\n app = express();\n public routes(app: any): void {\n app.get(\"/\", (_: any, res: express.Response) => {\n res.send(\"Hello World!\");\n });\n }\n}Arquivo app.ts
import * as bodyParser from \"body-parser\";\nimport express from \"express\";\nimport { Routes } from \"./routes\";\n\nclass App {\n public app: express.Application;\n public routePrv: Routes = new Routes();\n\n constructor() {\n this.app = express();\n this.config();\n this.routePrv.routes(this.app);\n }\n\n private config(): void {\n this.app.use(bodyParser.json());\n this.app.use(bodyParser.urlencoded({ extended: false }));\n this.app.set(\"json spaces\", 2);\n }\n}\n\nexport default new App().app;Arquivo app.test.ts
import app from \"../src/app\"\nimport request from \"supertest\"\n\ndescribe(\"Test public routes\", () => {\n it(\"should respond with a 200 response and a 'Hello World' body in / route\", () => {\n return request(app).get(\"/\").expect(200, \"Hello World!\")\n })\n})Se você rodar o npm test
Vai ter o mesmo retorno de success!
\nSensacional né?
\nAgora vamos criar mais um teste que retorna a lista de todos:
\napp.test.ts
import app from \"../src/app\"\nimport request from \"supertest\"\n\ndescribe(\"Test public routes\", () => {\n it(\"should respond with a 200 response and a 'Hello World' body in / route\", () => {\n return request(app).get(\"/\").expect(200, \"Hello World!\")\n })\n\n it(\"should respond with a 200 response and a list todos body in /todos route\", async () => {\n const res = await request(app).get(\"/todos\")\n expect(res.status).toEqual(1)\n expect(res.body).toHaveLength(1)\n })\n})Se você rodar npm test vai ter o seguinte retorno:
FAIL __tests__/app.test.ts\n Test public routes\n ✓ should respond with a 200 response and a 'Hello World' body in / route (22 ms)\n ✕ should respond with a 200 response and a list todos body in /todos route (7 ms)\n\n ● Test public routes › should respond with a 200 response and a list todos body in /todos route\n\n expect(received).toEqual(expected) // deep equality\n\n Expected: 200\n Received: 404\n\n 9 | it(\"should respond with a 200 response and a list todos body in /todos route\", async () => {\n 10 | const res = await request(app).get(\"/todos\");\n > 11 | expect(res.status).toEqual(200);\n | ^\n 12 | expect(res.body).toHaveLength(1);\n 13 | });\n 14 | });\n\n at __tests__/app.test.ts:11:24\n at fulfilled (__tests__/app.test.ts:5:58)\n\nTest Suites: 1 failed, 1 total\nTests: 1 failed, 1 passed, 2 total\nSnapshots: 0 total\nTime: 2.346 s, estimated 3 s\nRan all test suites.\nnpm ERR! Test failed. See above for more details.Falhou, mas por que ainda não criamos o endpoint todos, vamos criar!
No arquivo routes.ts:
import express from \"express\";\n\nconst todos = [\n {\n id: \"1\",\n task: \"Go to the gym\",\n status: \"OK\",\n },\n];\n\nexport class Routes {\n app = express();\n public routes(app: any): void {\n app.get(\"/\", (_: any, res: express.Response) => {\n res.send(\"Hello World!\");\n });\n\n app.get(\"/todos\", (_: any, res: express.Response) => {\n res.send(todos);\n });\n }\n}Se você rodar npm test vai ter o seguinte retorno:
PASS __tests__/app.test.ts\n Test public routes\n ✓ should respond with a 200 response and a 'Hello World' body in / route (21 ms)\n ✓ should respond with a 200 response and a list todos body in /todos route (5 ms)\n\nTest Suites: 1 passed, 1 total\nTests: 2 passed, 2 total\nSnapshots: 0 total\nTime: 0.931 s, estimated 3 s\nRan all test suites.YEAHHHH!
\nAgora vamos seguir todo o fluxo: Primeiro o teste, depois implementação, como a gente fez no exemplo a cima!
\nInicialmente vai dar problema, mas vamos adaptando no meio do desenvolvimento, isso é TDD!
\nO arquivo completo de teste vai ficar desse jeito!
\nCriei um arquivo TaskType.ts
export type Task = {\n id?: string,\n task?: string,\n status?: string,\n}routes.ts
import express from \"express\";\nimport { Task } from \"./TaskType\";\n\nlet todos = [\n {\n id: \"1\",\n task: \"Go to the gym\",\n status: \"OK\",\n },\n];\n\nexport class Routes {\n app = express();\n public routes(app: any): void {\n app.get(\"/\", (_: any, res: express.Response) => {\n res.send(\"Hello World!\");\n });\n\n app.get(\"/todos\", (_: any, res: express.Response) => {\n res.send(todos);\n });\n\n app.get(\"/todo/:id\", (req: express.Request, res: express.Response) => {\n const { id } = req.params;\n todos = todos.filter(\n (task: Task) => task.id.toString() !== id.toString()\n );\n res.json(todos);\n });\n\n app.post(\"/todo\", (req: express.Request, res: express.Response) => {\n const task = req.body;\n todos.push(task);\n res.json(todos);\n });\n\n app.put(\"/todo\", (req: express.Request, res: express.Response) => {\n const taskToUpdate = req.body;\n todos = todos.map((task: Task) =>\n task.id === taskToUpdate.id ? { ...task, ...taskToUpdate } : task\n );\n res.json(todos);\n });\n }\n}app.test.ts
import app from \"../src/app\"\nimport request from \"supertest\"\nimport { Task } from \"../src/TaskType\"\n\ndescribe(\"Test public routes\", () => {\n it(\"should respond with a 200 response and a 'Hello World' body in / route\", () => {\n return request(app).get(\"/\").expect(200, \"Hello World!\")\n })\n\n it(\"should respond with a 200 response and a list todos body in /todos route\", async () => {\n const res = await request(app).get(\"/todos\")\n expect(res.status).toEqual(200)\n expect(res.body).toHaveLength(1)\n })\n\n it(\"should create new task in /todo route\", async () => {\n const task: Task = {\n id: \"2\",\n task: \"Learning IA\",\n status: \"NOT\",\n }\n\n const res = await request(app).post(\"/todo\").send(task)\n expect(res.status).toEqual(200)\n expect(res.body).toHaveLength(2)\n })\n\n it(\"should update a task in /todo route\", async () => {\n const taskToUpdate: Task = {\n id: \"2\",\n task: \"Learning IA\",\n status: \"OK\",\n }\n\n const res = await request(app).put(\"/todo\").send(taskToUpdate)\n const todos = res.body\n const obj = todos.find(\n (task: Task) => task.id.toString() === taskToUpdate.id.toString()\n )\n\n expect(res.status).toEqual(200)\n expect(res.body).toHaveLength(2)\n expect(obj.status).toBeTruthy()\n })\n\n it(\"should return a task in /todo:id route\", async () => {\n const res = await request(app).get(`/todo/${1}`)\n expect(res.status).toEqual(200)\n expect(res.body).toHaveLength(1)\n })\n})Testes criados! Agora você tem mais segurança para alterar o código e implementar novas regras de negócio.
\nPASS __tests__/app.test.ts\n Test public routes\n ✓ should respond with a 200 response and a 'Hello World' body in / route (22 ms)\n ✓ should respond with a 200 response and a list todos body in /todos route (6 ms)\n ✓ should create new task in /todo route (22 ms)\n ✓ should update a task in /todo route (4 ms)\n ✓ should return a task in /todo:id route (3 ms)\n\nTest Suites: 1 passed, 1 total\nTests: 5 passed, 5 total\nSnapshots: 0 total\nTime: 2.241 s, estimated 3 s\nRan all test suites.O código fonte você encontra aqui!
\nObrigada pelo seu tempo!
\n![\"https://media.giphy.com/media/13CoXDiaCcCoyk/giphy.gif\"](\"https://media.giphy.com/media/13CoXDiaCcCoyk/giphy.gif\")