feat: install cypress and add tests

.eslintrc.json

@@ -1,6 +1,9 @@
 {
-  "extends": ["@rocketseat/eslint-config/react", "plugin:@next/next/recommended"],
+  "extends": ["@rocketseat/eslint-config/react", "plugin:@next/next/recommended", "plugin:cypress/recommended"],
   "rules" : {
     "@typescript-eslint/no-explicit-any": "off"
+  },
+  "globals": {
+    "cy": true
   }
 }

cypress.config.ts

@@ -0,0 +1,16 @@
+import { defineConfig } from 'cypress'
+import { readFile } from 'fs/promises'
+
+export default defineConfig({
+  screenshotOnRunFailure: false,
+  chromeWebSecurity: false,
+  video: false,
+
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    viewportWidth: 1200,
+    viewportHeight: 800,
+  },
+
+  env: {},
+})

cypress/e2e/suggestions.spec.cy.ts

@@ -0,0 +1,8 @@
+// describe('suggestions', () => {
+//   it('add ticker from suggestions card', () => {
+//     cy.visit('/')
+//     cy.acceptTermsOfUse()
+
+//     cy.get('[data-testid="suggestions-card"] > :nth-child(1) > button').click()
+//   })
+// })

cypress/e2e/term.spec.cy.ts

@@ -0,0 +1,12 @@
+describe('terms of use', () => {
+  it('show modal', () => {
+    cy.visit('/')
+    cy.contains('Termos de uso').should('be.visible')
+    cy.contains('Aceito e continuar navegando').should('be.visible')
+  })
+
+  it('accept and close modal', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+  })
+})

cypress/e2e/tickers.spec.cy.ts

@@ -0,0 +1,103 @@
+describe('tickers', () => {
+  it('add tickers to portfolio', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+    cy.addTicker('XPLG11')
+  })
+
+  it('remove tickers from portfolio', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+    cy.addTicker('XPLG11')
+
+    cy.get('[data-testid="btn-remove-ticker-XPLG11"]')
+      .should('be.visible')
+      .click()
+  })
+
+  it('hide and show tickers', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+
+    cy.get('.tremor-MultiSelectBox-text').click()
+    cy.get('.bg-gray-50 > .w-full').type('XPLG11')
+    cy.get('.tremor-MultiSelectBoxItem-checkbox').click()
+    cy.get('body').type('{esc}')
+
+    cy.get('[data-testid="button-add-ticker"]').click()
+
+    cy.get('[data-testid="btn-visibility-ticker-XPLG11"]')
+      .should('be.visible')
+      .click()
+
+    cy.get('[data-testid="btn-visibility-ticker-XPLG11"]')
+      .should('be.visible')
+      .click()
+  })
+
+  it('show tickers details', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+    cy.addTicker('XPLG11')
+
+    // ticker
+    cy.get('[data-testid="row-ticker-XPLG11"] > :nth-child(2)')
+      .should('be.visible')
+      .should('contain', 'XPLG11')
+
+    // price
+    cy.get('[data-testid="row-ticker-XPLG11"] > :nth-child(3)')
+      .should('be.visible')
+      .should('contain', 'R$ 107,00')
+
+    // pvp
+    cy.get('[data-testid="row-ticker-XPLG11"] > :nth-child(4)')
+      .should('be.visible')
+      .should('contain', '1.05')
+
+    // dy
+    cy.get('[data-testid="row-ticker-XPLG11"] > :nth-child(5)')
+      .should('be.visible')
+      .should('contain', '8.21%')
+
+    // dividend
+    cy.get('[data-testid="row-ticker-XPLG11"] > :nth-child(6)')
+      .should('be.visible')
+      .should('contain', 'R$ 0,74')
+
+    // sum dividend last 12 months
+    cy.get('[data-testid="row-ticker-XPLG11"] > :nth-child(7)')
+      .should('be.visible')
+      .should('contain', 'R$ 8,79')
+  })
+
+  it('show error when ticker not found', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+    cy.addTicker('XPLG11')
+
+    cy.addTicker('KNCA11')
+    cy.get('[data-testid="row-ticker-KNCA11"]').should(
+      'contain',
+      'Infelizmente ocorreu um erro ao tentar carregar os dados desse ativo!',
+    )
+  })
+
+  it('disable visibility button when ticker not found', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+
+    cy.addTicker('KNCA11')
+    cy.get('[data-testid="btn-visibility-ticker-KNCA11"]').should('be.disabled')
+  })
+
+  it('remove ticker when ticker not found', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+
+    cy.addTicker('KNCA11')
+    cy.get('[data-testid="btn-remove-ticker-KNCA11"]')
+      .should('be.visible')
+      .click()
+  })
+})

cypress/e2e/tooltip.spec.cy.ts

@@ -0,0 +1,61 @@
+describe('tooltip', () => {
+  it('open and close tooltip ticker', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+
+    cy.get('[data-testid="header-portfolio"] > :nth-child(2) button').click()
+    cy.get('[data-testid="title"]').should('contain', 'Papel')
+
+    cy.get('[data-testid="close-btn"] > .tremor-Button-text').click()
+  })
+
+  it('open and close tooltip price', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+
+    cy.get('[data-testid="header-portfolio"] > :nth-child(3) button').click()
+    cy.get('[data-testid="title"]').should('contain', 'Valor Atual')
+
+    cy.get('[data-testid="close-btn"] > .tremor-Button-text').click()
+  })
+
+  it('open and close tooltip pvp', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+
+    cy.get('[data-testid="header-portfolio"] > :nth-child(4) button').click()
+    cy.get('[data-testid="title"]').should('contain', 'PV/P')
+
+    cy.get('[data-testid="close-btn"] > .tremor-Button-text').click()
+  })
+
+  it('open and close tooltip dy', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+
+    cy.get('[data-testid="header-portfolio"] > :nth-child(5) button').click()
+    cy.get('[data-testid="title"]').should('contain', 'DY 12M')
+
+    cy.get('[data-testid="close-btn"] > .tremor-Button-text').click()
+  })
+
+  it('open and close tooltip dividens', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+
+    cy.get('[data-testid="header-portfolio"] > :nth-child(6) button').click()
+    cy.get('[data-testid="title"]').should('contain', 'Últ. Rend.')
+
+    cy.get('[data-testid="close-btn"] > .tremor-Button-text').click()
+  })
+
+  it('open and close tooltip dividens last 12 months', () => {
+    cy.visit('/')
+    cy.acceptTermsOfUse()
+
+    cy.get('[data-testid="header-portfolio"] > :nth-child(7) button').click()
+    cy.get('[data-testid="title"]').should('contain', 'Últ. Rend. 12M')
+
+    cy.get('[data-testid="close-btn"] > .tremor-Button-text').click()
+  })
+})

cypress/support/commands.ts

@@ -0,0 +1,17 @@
+/// <reference types="cypress" />
+// ***********************************************
+
+Cypress.Commands.add('acceptTermsOfUse' as any, () => {
+  cy.contains('Aceito e continuar navegando').click()
+  cy.contains('Termos de uso').should('not.exist')
+})
+
+Cypress.Commands.add('addTicker' as any, (ticker) => {
+  cy.get('.tremor-MultiSelectBox-text').click()
+  cy.get('.bg-gray-50 > .w-full').type(ticker as string)
+  cy.get('.tremor-MultiSelectBoxItem-checkbox').click()
+  cy.get('body').type('{esc}')
+
+  cy.get('[data-testid="button-add-ticker"]').click()
+  cy.get(`[data-testid="row-ticker-${ticker as string}"]`).should('be.visible')
+})

cypress/support/e2e.ts

@@ -0,0 +1 @@
+import './commands'

cypress/support/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="cypress" />
+export {}
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      acceptTermsOfUse(): Chainable<any>
+      addTicker(ticker: string): Chainable<any>
+    }
+  }
+}

mock-server/config/initializer.json

@@ -5,7 +5,7 @@
       "path": "/finance/stock_price",
       "queryStringParameters": {
         "symbol": ["XPLG11"],
-        "key": ["abcd123456"],
+        "key": [".*"],
         "format": ["json-cors"]
      }
     },
@@ -64,7 +64,7 @@
       "queryStringParameters": {
         "days_ago": ["20"],
         "symbol": ["XPLG11"],
-        "key": ["abcd123456"],
+        "key": [".*"],
         "format": ["json-cors"]
      }
     },
@@ -534,7 +534,7 @@
       "path": "/finance/stock_dividends",
       "queryStringParameters": {
         "symbol": ["XPLG11"],
-        "key": ["abcd123456"],
+        "key": [".*"],
         "format": ["json-cors"]
      }
     },