Adds cypress test (#240)

* WIP

* WIP: Basic tests

* WIP: Tests for Practica

* Initial setup for running mirage

* Adds fixtures and routes for mirage

* Adds basic test for vote types

* Adds fixes for CI

* Adds cypress to github actions

* Removes percy

* Changes checkout

* Removes run

* Moves cypress to different job

* Removes wait-on

* Adds quote to wait on

* Breaks jobs

* f

* Changes test

* Test

* Adds headless and chrome

* Adds parallelization

* Turn off video recording

* NOW

* As vote type checks

* Removes .only

* Changes Cypress to run on PR's

.eslintrc.js

@@ -30,6 +30,7 @@ module.exports = {
  "plugin:import/warnings",
  "plugin:import/typescript",
  "plugin:jsx-a11y/strict",
+ "plugin:cypress/recommended",
  ],
  parserOptions: {
  ecmaFeatures: {

.github/workflows/cypress.yml

@@ -0,0 +1,25 @@
+name: Integration
+on: [pull_request]
+jobs:
+ cypress:
+ runs-on: ubuntu-latest
+ strategy:
+ matrix:
+ machines: [1, 2, 3]
+ steps:
+ - name: Checkout
+ uses: actions/checkout@main
+
+ - name: Install
+ run: yarn install --frozen-lockfile
+
+ - name: Build
+ run: yarn run build
+
+ - name: Test
+ uses: cypress-io/github-action@v2
+ with:
+ browser: chrome
+ headless: true
+ start: yarn run serve
+ wait-on: 'http://localhost:8000'

.github/workflows/tests.yml

@@ -1,24 +1,26 @@
-name: CI
+name: Tests
 on: [push, pull_request]
 jobs:
- build:
+ tests:
  runs-on: ubuntu-latest
  steps:
  - name: Checkout
- uses: actions/checkout@master
+ uses: actions/checkout@main
 
  - name: Install
- run: yarn
-
- - name: Lint
- run: yarn run lint
+ run: yarn install --frozen-lockfile
 
  - name: Tests
  run: yarn run test
 
- - name: Percy Test
- uses: percy/[email protected]
- with:
- build-directory: "public/"
- env:
- PERCY_TOKEN: ${{ secrets.PERCY_TOKEN }}
+ lint:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout
+ uses: actions/checkout@main
+
+ - name: Install
+ run: yarn install --frozen-lockfile
+
+ - name: Lint
+ run: yarn run lint

.gitignore

@@ -69,3 +69,6 @@ yarn-error.log
 .yarn-integrity
 
 .coverage
+
+cypress/screenshots
+cypress/videos

cypress.json

@@ -0,0 +1,7 @@
+{
+ "baseUrl": "http://localhost:8000",
+ "viewportHeight": 2000,
+ "viewportWidth":2000,
+ "chromeWebSecurity": false,
+ "video": false
+}

cypress/.eslintrc.js

@@ -0,0 +1,18 @@
+module.exports = {
+ root: true,
+ parser: "@typescript-eslint/parser", // Specifies the ESLint parser
+ env: {
+ "cypress/globals": true
+ },
+ plugins: [
+ "@typescript-eslint",
+ "cypress",
+ ],
+ extends: [
+ "eslint:recommended",
+ "plugin:@typescript-eslint/recommended",
+ "prettier/@typescript-eslint",
+ "plugin:prettier/recommended",
+ "plugin:cypress/recommended",
+ ]
+}

cypress/integration/colaboraciones.spec.ts

@@ -0,0 +1,11 @@
+describe("Colaboraciones", () => {
+ it("visiting /colaboraciones", () => {
+ cy.visit("/colaboraciones")
+
+ cy.findByTestId("proyecto-85").should("exist")
+ cy.findByTestId("quien-me-representa").should("exist")
+ cy.findByTestId("tu-voto-no-se-deja").should("exist")
+ cy.findByTestId("microjuris").should("exist")
+ cy.findByTestId("practica-tu-voto").should("exist")
+ })
+})

cypress/integration/inscribete.spec.ts

@@ -0,0 +1,10 @@
+describe("Inscribete", () => {
+ it("visiting /inscribete", () => {
+ cy.visit("/inscribete")
+
+ cy.findByTestId("tarjeta-electoral").should("exist")
+ cy.findByTestId("juntas-de-inscripcion-permanentes").should("exist")
+ cy.findByTestId("recordatorio").should("exist")
+ cy.findByTestId("electoral-status").should("exist")
+ })
+})

cypress/integration/practica.spec.ts

@@ -0,0 +1,241 @@
+import makeServer from "../../src/mirage"
+
+describe("Practica", () => {
+ let server
+
+ beforeEach(() => {
+ server = makeServer({ environment: "test" })
+ })
+
+ afterEach(() => {
+ server.shutdown()
+ })
+
+ it("visiting /practica", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("practica-tu-voto")
+ })
+
+ it("root route should redirect to /practica", () => {
+ cy.visit("/")
+
+ cy.url().should("eq", `${Cypress.config().baseUrl}/practica`)
+ })
+})
+
+describe("Practice - State Ballot", () => {
+ let server
+
+ beforeEach(() => {
+ server = makeServer({ environment: "test" })
+ })
+
+ afterEach(() => {
+ server.shutdown()
+ })
+
+ it("should be able to emit a straight party vote on the state ballot", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("start-practice").click()
+ cy.findByTestId("find-by-precint").click()
+ cy.findByTestId("confirm-precint").click()
+ cy.findByTestId("state-ballot").click()
+ cy.findByTestId("partido-nuevo-progresista").click()
+
+ cy.get('[data-vote-type="explicit-vote"]').should("have.length", 1)
+ cy.get('[data-vote-type="implicit-vote"]').should("have.length", 2)
+
+ cy.findByTestId("submit").click()
+ cy.findByTestId("voting-result").should("exist")
+ })
+
+ it("should be able to emit a mixed party vote on the state ballot", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("start-practice").click()
+ cy.findByTestId("find-by-precint").click()
+ cy.findByTestId("confirm-precint").click()
+ cy.findByTestId("state-ballot").click()
+ cy.findByTestId("partido-popular--democrático").click()
+ cy.findByTestId("luis-roberto-piñero").click()
+
+ cy.get('[data-vote-type="explicit-vote"]').should("have.length", 2)
+ cy.get('[data-vote-type="implicit-vote"]').should("have.length", 1)
+
+ cy.findByTestId("submit").click()
+ cy.findByTestId("voting-result").should("exist")
+ })
+
+ it("should be able to vote for candidates on the state ballot", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("start-practice").click()
+ cy.findByTestId("find-by-precint").click()
+ cy.findByTestId("confirm-precint").click()
+ cy.findByTestId("state-ballot").click()
+ cy.findByTestId("eliezer-molina-pérez").click()
+ cy.findByTestId("luis-roberto-piñero").click()
+
+ cy.get('[data-vote-type="explicit-vote"]').should("have.length", 2)
+ cy.get('[data-vote-type="implicit-vote"]').should("have.length", 0)
+
+ cy.findByTestId("submit").click()
+ cy.findByTestId("voting-result").should("exist")
+ })
+})
+
+describe("Practice - Municipal Ballot", () => {
+ let server
+
+ beforeEach(() => {
+ server = makeServer({ environment: "test" })
+ })
+
+ afterEach(() => {
+ server.shutdown()
+ })
+
+ it("should be able to emit a straight party vote", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("start-practice").click()
+ cy.findByTestId("find-by-precint").click()
+ cy.findByTestId("confirm-precint").click()
+ cy.findByTestId("municipal-ballot").click()
+ cy.findByTestId("partido-independentista--puertorriqueño").click()
+
+ cy.get('[data-vote-type="explicit-vote"]').should("have.length", 1)
+ cy.get('[data-vote-type="implicit-vote"]').should("have.length", 10)
+
+ cy.findByTestId("submit").click()
+ cy.findByTestId("voting-result").should("exist")
+ })
+
+ it("should be able to emit a mixed party vote", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("start-practice").click()
+ cy.findByTestId("find-by-precint").click()
+ cy.findByTestId("confirm-precint").click()
+ cy.findByTestId("municipal-ballot").click()
+ cy.findByTestId("partido-independentista--puertorriqueño").click()
+ cy.findByTestId("elvin-gil-boneta").click()
+ cy.findByTestId("arcelio-gonzález-vélez").click()
+
+ cy.get('[data-vote-type="explicit-vote"]').should("have.length", 3)
+ cy.get('[data-vote-type="implicit-vote"]').should("have.length", 8)
+
+ cy.findByTestId("submit").click()
+ cy.findByTestId("voting-result").should("exist")
+ })
+
+ it("should be able to emit a mixed party vote on the municipal ballot by chosing a different mayor", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("start-practice").click()
+ cy.findByTestId("find-by-precint").click()
+ cy.findByTestId("confirm-precint").click()
+ cy.findByTestId("municipal-ballot").click()
+ cy.findByTestId("partido-independentista--puertorriqueño").click()
+ cy.findByTestId("josé-hiram-soto--rivera").click()
+
+ cy.get('[data-vote-type="explicit-vote"]').should("have.length", 2)
+ cy.get('[data-vote-type="implicit-vote"]').should("have.length", 9)
+
+ cy.findByTestId("submit").click()
+ cy.findByTestId("voting-result").should("exist")
+ })
+
+ it("should be able to candidate vote", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("start-practice").click()
+ cy.findByTestId("find-by-precint").click()
+ cy.findByTestId("confirm-precint").click()
+ cy.findByTestId("municipal-ballot").click()
+ cy.findByTestId("josé-hiram-soto--rivera").click()
+ cy.findByTestId("elvin-gil-boneta").click()
+ cy.findByTestId("arcelio-gonzález-vélez").click()
+ cy.findByTestId("adalberto-lugo-boneta").click()
+ cy.findByTestId("axel-medina-caraballo").click()
+ cy.findByTestId("félix-colón-mercado").click()
+ cy.findByTestId("guadalupe-rivera-oquendo").click()
+ cy.findByTestId("carmen-cotty-pabón").click()
+ cy.findByTestId("rafael-pérez-núñez").click()
+ cy.findByTestId("jeniffer-arroyo-lópez").click()
+
+ cy.get('[data-vote-type="explicit-vote"]').should("have.length", 10)
+ cy.get('[data-vote-type="implicit-vote"]').should("have.length", 0)
+
+ cy.findByTestId("submit").click()
+ cy.findByTestId("voting-result").should("exist")
+ })
+})
+
+describe("Practice - Legislative Ballot", () => {
+ let server
+
+ beforeEach(() => {
+ server = makeServer({ environment: "test" })
+ })
+
+ afterEach(() => {
+ server.shutdown()
+ })
+
+ it("should be able to emit a straight party vote", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("start-practice").click()
+ cy.findByTestId("find-by-precint").click()
+ cy.findByTestId("confirm-precint").click()
+ cy.findByTestId("legislative-ballot").click()
+ cy.findByTestId("partido-popular--democrático").click()
+
+ cy.get('[data-vote-type="explicit-vote"]').should("have.length", 1)
+ cy.get('[data-vote-type="implicit-vote"]').should("have.length", 5)
+
+ cy.findByTestId("submit").click()
+ cy.findByTestId("voting-result").should("exist")
+ })
+
+ it("should be able to emit a mixed party vote", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("start-practice").click()
+ cy.findByTestId("find-by-precint").click()
+ cy.findByTestId("confirm-precint").click()
+ cy.findByTestId("legislative-ballot").click()
+ cy.findByTestId("partido-popular--democrático").click()
+ cy.findByTestId("josé-(maché)-ortiz").click()
+ cy.findByTestId("josé-antonio-vargas-vidot").click({ force: true })
+
+ cy.get('[data-vote-type="explicit-vote"]').should("have.length", 3)
+ cy.get('[data-vote-type="implicit-vote"]').should("have.length", 3)
+
+ cy.findByTestId("submit").click()
+ cy.findByTestId("voting-result").should("exist")
+ })
+
+ it("should be able to emit a mixed party vote", () => {
+ cy.visit("/practica")
+
+ cy.findByTestId("start-practice").click()
+ cy.findByTestId("find-by-precint").click()
+ cy.findByTestId("confirm-precint").click()
+ cy.findByTestId("legislative-ballot").click()
+ cy.findByTestId("edia-quiñones").click()
+ cy.findByTestId("josé-(maché)-ortiz").click()
+ cy.findByTestId("daniel-(danny)-ortiz").click()
+ cy.findByTestId("héctor-ferrer").click()
+ cy.findByTestId("josé-antonio-vargas-vidot").click({ force: true })
+
+ cy.get('[data-vote-type="explicit-vote"]').should("have.length", 5)
+ cy.get('[data-vote-type="implicit-vote"]').should("have.length", 0)
+
+ cy.findByTestId("submit").click()
+ cy.findByTestId("voting-result").should("exist")
+ })
+})

cypress/integration/sal-a-votar.spec.ts

@@ -0,0 +1,7 @@
+describe("Sal a votar", () => {
+ it("visiting /sal-a-votar", () => {
+ cy.visit("/sal-a-votar")
+
+ cy.findByTestId("voto-ausente-y-adelantado")
+ })
+})