*

Author: lyndontavares

README.md

@@ -4,20 +4,57 @@ Aplicação web utilizando framework Angular e JSON Server para registro de prod
 
 ## Projeto Final
 
+Instalção json-server
+
+```bash
+npm i -g json-server
+```
+
+Instalação App
+
+```bash
+cd frontend
+npm i
+```
+
+Instalação Cypress
+
+```bash
+npx cypress run
+```
+
+Executar testes com Jasmine
+
 ```bash
 npm run test:cover
 ```
+
+Executar testes com Cypress
+
+```bash
+npm run server:json
+ng serve
+npx cypress run
+ou
+yarn cypress open
+```
+
 ### App
 
 ![](assets/app.PNG)
 
 ### Tests
 
-![](assets/karma.PNG)
+![](assets/amgular-karma.PNG)
 
 ### Coverage
 
-![](assets/coverage.PNG)
+![](assets/angular-coverage.PNG)
+
+
+### Cypress
+
+![](assets/angular-cypress.PNG)
 
 
 ## Github

assets/coverage.PNG renamed to assets/angular-coverage.PNG

@@ -0,0 +1,71 @@
+describe('example to-do app', () => {
+  beforeEach(() => {
+    // Cypress inicia com uma folha em branco para cada teste
+    // então devemos dizer a ele para visitar nosso website com o comando `cy.visit ()`.
+    // Como queremos visitar o mesmo URL no início de todos os nossos testes,
+    // nós o incluímos em nossa função beforeEach para que seja executado antes de cada teste
+    // https://docs.cypress.io/api/commands
+    cy.visit('http://localhost:4200/')
+  })
+
+  it('Verifica título da App', () => {
+      // Além de usar o comando `get` para obter um elemento por seletor,
+      // também podemos usar o comando `contains` para obter um elemento por seu conteúdo.
+      // No entanto, isso resultará em <label>, que é o elemento de nível mais baixo que contém o texto.
+      // Para verificar o item, encontraremos o elemento <input> para este <label>
+      // percorrendo o dom até o elemento pai. A partir daí, podemos `encontrar`
+      // o elemento <input> da caixa de seleção filho e use o comando `check` para verificá-lo.
+      cy.contains('Angular Testing')
+        .parent()
+        .find('.title') // encontra por css
+        .should('have.text', 'Angular Testing')
+
+      cy.contains('Angular Testing')
+        .parent()
+       .find('#title') // encontra por id
+        .should('have.text', 'Angular Testing')
+    })
+
+  it('Verifica se lista de itens contém itens por padrão', () => {
+    // Usamos o comando `cy.get ()` para obter todos os elementos que correspondem ao seletor.
+    // Então, usamos `deveria` para afirmar que existem dois itens correspondentes,
+    // quais são os dois itens padrão.
+    cy.get('tr').should('have.length', 9) // linhas da tabela contando com o Header deve ser igual a 9 linhas
+
+    // Podemos ir ainda mais longe e verificar se cada padrão todos contém
+    // o texto correto. Usamos as funções `primeiro` e` último`
+    // para obter apenas o primeiro e o último elemento correspondido individualmente,
+    // e então realizar uma asserção com `deveria`.
+    cy.get('td').first().should('have.text', ' 9fd43452-b17b-4671-8e9a-bd1b63d557e0 ')
+   })
+
+  it('Verifica adição de item', () => {
+    const produto = { name:'IPhone X', price: 1000, quantity: 1000 }
+
+    // Vamos pegar o elemento de entrada e usar o comando `type` para
+    // insira nosso novo item de lista. Depois de digitar o conteúdo do nosso item,
+    // também precisamos digitar a chave enter para enviar a entrada.
+    // Melhores práticas: https://on.cypress.io/selecting-elements
+    cy.get('#btnAdicionar').click()
+    cy.get('#mat-input-1').type(`${produto.name}`)
+    cy.get('#mat-input-2').type(`${produto.price}`)
+    cy.get('#mat-input-3').type(`${produto.quantity}`)
+    cy.get('#action-button').click()
+
+    // Agora que digitamos nosso novo item, vamos verificar se ele realmente foi adicionado à lista.
+    // Por ser o item mais recente, ele deve existir como o último elemento da lista.
+    // Além disso, com os 9 itens padrão, devemos ter um total de 10 elementos na lista.
+    //cy.get('tr').should('have.length', 10) // linhas da tabela após adicionar item
+
+    //remove o item adicionado para deixar teste repetitível
+    cy.wait(1000)
+    //cy.wait('@actions')
+    cy.get('tr').last().find('a').last().click()
+    //cy.wait(5000)
+    cy.get('#action-button').click()
+    cy.get('tr').should('have.length', 9) // linhas da tabela contando com o Header deve ser igual a 9 linhas
+
+
+  })
+
+})

assets/angular-cypress.PNG

@@ -0,0 +1,22 @@
+/// <reference types="cypress" />
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+/**
+ * @type {Cypress.PluginConfig}
+ */
+// eslint-disable-next-line no-unused-vars
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+}

assets/karma.PNG renamed to assets/angular-karma.PNG

@@ -0,0 +1,25 @@
+// ***********************************************
+// This example commands.js 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) => { ... })

frontend/cypress/integration/1-basico/app.spec.js

@@ -0,0 +1,20 @@
+// ***********************************************************
+// This example support/index.js 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')

frontend/cypress/plugins/index.js

@@ -17,7 +17,7 @@
 <div class="container text-center">
 
   <div class="btn-actions">
-    <button mat-button (click)="openDialog('Adicionar',{})" mat-flat-button color="primary">Adicionar Produto</button>
+    <button mat-button id="btnAdicionar" (click)="openDialog('Adicionar',{})" mat-flat-button color="primary">Adicionar Produto</button>
   </div>
 
   <table mat-table [dataSource]="products" #mytable class="my-table mat-elevation-z8">