Ajustes

Turma1093/aula7/listaDeTarefas/.env

@@ -0,0 +1,3 @@
+VITE_SHOW_VIDEO=true
+VITE_START_CLOCK=5
+VITE_END_CLOCK=30

Turma1093/aula7/listaDeTarefas/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

Turma1093/aula7/listaDeTarefas/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

Turma1093/aula7/listaDeTarefas/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 Michael Douglas Barbosa Araujo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Turma1093/aula7/listaDeTarefas/README.md

@@ -0,0 +1,75 @@
+# Projeto de Sistema de Tarefas com React + TypeScript + Vite + Rust + cypress
+
+Este projeto é uma aplicação web que permite aos usuários gerenciar suas tarefas e lista de afazeres. Ele foi construído com uma variedade de tecnologias para estudo de caso.
+
+## Tecnologias Utilizadas
+
+Este projeto é desenvolvido usando as seguintes tecnologias:
+
+- **React**: Uma biblioteca JavaScript popular para a criação de interfaces de usuário interativas e reativas.
+
+- **TypeScript**: Uma extensão do JavaScript que adiciona tipos estáticos ao código, tornando-o mais seguro e legível.
+
+- **Vite**: Um construtor de aplicativos web que fornece um ambiente de desenvolvimento rápido e eficiente para projetos web modernos.
+
+- **Rust (SWC)**: Uma linguagem de programação segura e de alto desempenho usada para otimizar partes críticas do código do aplicativo.
+
+- **Cypress**: Cypress é uma ferramenta de teste de front-end para aplicativos da web. 
+
+### Versão do Node
+
+A versão deve ser igual ou superior a: `v14.20.0` e o npm: `6.14.17`
+
+## Instruções de Execução
+
+Siga estas etapas para executar o projeto localmente:
+
+1. Clone este repositório em seu computador:
+
+```bash
+   git clone https://github.com/seurepositorio/seuprojeto.git
+```
+
+2. Navegue até o diretório:
+
+```bash
+cd seuprojeto
+```
+
+3. Instale as dependências:
+
+```bash
+npm install
+```
+
+4. Inicie o servidor de desenvolvimento:
+
+```bash
+npm run dev
+```
+
+### Alteração do padrão do projeto
+
+Caso deseje alterar o tempo inicial, final e remover o vídeo do login basta alterar as variáveis de ambiente:
+
+```bash
+VITE_SHOW_VIDEO=true
+VITE_START_CLOCK=5
+VITE_END_CLOCK=30
+```
+
+### Detalhes do Login
+
+Você pode usar as seguintes credenciais para fazer login no sistema:
+
+ - Usuário: demonstracao@itau.com.br
+ - Senha: demonstracao
+
+### Motivação
+A motivação por trás deste projeto é criar um sistema de tarefas eficiente e prático para ajudar as pessoas a gerenciar suas tarefas diárias. O uso de tecnologias como React, TypeScript, Vite e Rust (SWC) permite que o aplicativo seja rápido, seguro e escalável.
+
+### Screenshots
+
+Veja o como ficou o projeto:
+
+![Projeto](./public/projeto.gif)

Turma1093/aula7/listaDeTarefas/cypress.config.ts

@@ -0,0 +1,19 @@
+import { defineConfig } from "cypress";
+
+export default defineConfig({
+  env: {
+    codeCoverage: {
+      exclude: "cypress/**/*.*",
+    },
+  },
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+  },
+  component: {
+    supportFile: false,
+    devServer: {
+      framework: "react",
+      bundler: "vite",
+    }
+  },
+});

Turma1093/aula7/listaDeTarefas/cypress/e2e/api/api.cy.ts

@@ -0,0 +1,59 @@
+/// <reference types="cypress" />
+
+describe("Verificar API ViaCEP", () => {
+  const ceps = ["06755260", "01452002", "00000000"]; // Adicionando um CEP que não existe
+
+  it("Verificar CEPs válidos", () => {
+    ceps
+      .filter((cep) => cep !== "00000000")
+      .forEach((cep) => {
+        cy.request({
+          method: "GET",
+          url: `https://viacep.com.br/ws/${cep}/json`,
+        }).then((response) => {
+          expect(response.status).to.eq(200); // Espera um status 200 (OK)
+          const cepWithoutHyphen = cep.replace("-", "");
+          const cepReturned = response.body.cep.replace("-", "");
+          expect(cepReturned).to.equal(cepWithoutHyphen);
+          expect(response.body)
+            .to.have.property("logradouro")
+            .that.is.a("string");
+          expect(response.body).to.have.property("bairro").that.is.a("string");
+          expect(response.body)
+            .to.have.property("localidade")
+            .that.is.a("string");
+          expect(response.body)
+            .to.have.property("uf")
+            .that.is.a("string")
+            .and.have.lengthOf(2);
+          expect(response.body)
+            .to.have.property("ibge")
+            .that.is.a("string")
+            .and.have.lengthOf.at.least(1);
+          expect(response.body)
+            .to.have.property("gia")
+            .that.is.a("string")
+            .and.have.lengthOf.at.least(1);
+          expect(response.body)
+            .to.have.property("ddd")
+            .that.is.a("string")
+            .and.have.lengthOf.at.least(1);
+          expect(response.body)
+            .to.have.property("siafi")
+            .that.is.a("string")
+            .and.have.lengthOf.at.least(1);
+        });
+      });
+  });
+
+  it("Verificar CEPs inválidos", () => {
+    const cep = "00000000";
+    cy.request({
+      method: "GET",
+      url: `https://viacep.com.br/ws/${cep}/json`,
+    }).then((response) => {
+      expect(response.status).to.eq(200); // Ainda espera um status 200, pois a requisição foi bem-sucedida
+      expect(response.body).to.have.property("erro", true); // Verifica se a propriedade "erro" é true
+    });
+  });
+});

Turma1093/aula7/listaDeTarefas/cypress/e2e/spec.cy.ts

@@ -0,0 +1,6 @@
+/// <reference types="cypress" />
+describe('Visita o sistema', () => {
+  it('Apenas realiza a visita ao sistema', () => {
+    cy.visit('/')
+  })
+})

Turma1093/aula7/listaDeTarefas/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

Turma1093/aula7/listaDeTarefas/cypress/support/commands.ts

@@ -0,0 +1,37 @@
+/// <reference types="cypress" />
+// ***********************************************
+// This example commands.ts shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add('login', (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
+//
+// declare global {
+//   namespace Cypress {
+//     interface Chainable {
+//       login(email: string, password: string): Chainable<void>
+//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
+//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
+//     }
+//   }
+// }

Turma1093/aula7/listaDeTarefas/cypress/support/component-index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>Components App</title>
+
+</head>
+
+<body>
+
+  <div data-cy-root></div>
+</body>
+
+</html>

Turma1093/aula7/listaDeTarefas/cypress/support/component.ts

@@ -0,0 +1,42 @@
+// ***********************************************************
+// This example support/component.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import "@cypress/code-coverage/support"
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')
+
+import { mount } from 'cypress/react18'
+// Ensure global app styles are loaded:
+import '../../src/index.css';
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      mount: typeof mount
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount)
+
+// Example use:
+// cy.mount(<MyComponent />)

Turma1093/aula7/listaDeTarefas/cypress/support/e2e.ts

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/e2e.ts is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

Turma1093/aula7/listaDeTarefas/index.html

@@ -0,0 +1,16 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="https://www.itau.com.br/images/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Lista de tarefas Itaú</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
+</html>