E2E Tests - ODG

frontend/cypress.config.ts

@@ -0,0 +1,9 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  e2e: {
+    baseUrl: 'http://localhost:3000',
+    specPattern: 'cypress/e2e/**/*.cy.{js,jsx,ts,tsx}',
+    supportFile: 'cypress/support/e2e.ts',
+  },
+})

frontend/cypress.d.ts

@@ -0,0 +1 @@
+/// <reference types="cypress" />

frontend/cypress/e2e/example.cy.ts

@@ -0,0 +1,6 @@
+describe('My First Test', () => {
+  it('Visits the app', () => {
+    cy.visit('/')
+    cy.contains('h1', 'Dashboard del Reclutador')
+  })
+})

frontend/cypress/e2e/position.cy.ts

@@ -0,0 +1,65 @@
+import { getHandleSelector, getDroppableSelector } from '../support/util';
+
+interface Candidate {
+  id: number;
+  name: string;
+}
+
+interface CandidatesByColumn {
+  [key: string]: Candidate[];
+}
+
+describe('Position Details Page', () => {
+  const positionTitle = 'Senior Full-Stack Engineer';
+  const columns: string[] = ['Initial Screening', 'Technical Interview', 'Manager Interview'];
+  const candidates: CandidatesByColumn = {
+    'Initial Screening': [{ id: 3, name: 'Carlos García' }],
+    'Technical Interview': [{ id: 1, name: 'John Doe' }, { id: 2, name: 'Jane Smith' }],
+    'Manager Interview': []
+  };
+
+  beforeEach(() => {
+    cy.visit('/positions/1');
+  });
+
+  it('Carga de la Página de Position', () => {
+    cy.get('h2').should('contain', positionTitle);
+
+    columns.forEach((column, index) => {
+      cy.get('.row > div').eq(index).find('.card-header').should('contain', column);
+
+      const candidatesInColumn = candidates[column];
+      cy.get('.row > div').eq(index).find('.card-body > .card').should('have.length', candidatesInColumn.length);
+
+      candidatesInColumn.forEach(candidate => {
+        cy.get('.row > div').eq(index).find('.card').should('contain', candidate.name);
+      });
+    });
+  });
+
+  it('Cambio de Fase de un Candidato', () => {
+    const sourceColumn = 'Initial Screening';
+    const targetColumn = 'Technical Interview';
+    const candidateToMove = candidates[sourceColumn][0];
+
+    const sourceSelector = getDroppableSelector(columns.indexOf(sourceColumn));
+    const targetSelector = getDroppableSelector(columns.indexOf(targetColumn));
+    const draggableSelector = getHandleSelector(candidateToMove.id);
+
+    cy.get(sourceSelector).find(draggableSelector).as('dragHandle');
+
+    cy.get('@dragHandle')
+      .move({ to: targetSelector });
+
+    cy.get(targetSelector)
+      .find(draggableSelector)
+      .should('exist');
+
+    cy.get(sourceSelector)
+      .find(draggableSelector)
+      .should('not.exist');
+
+    cy.intercept('PUT', '/candidates/*').as('updateCandidate');
+    cy.wait('@updateCandidate').its('response.statusCode').should('eq', 200);
+  });
+});

frontend/cypress/support/commands.ts

@@ -0,0 +1,12 @@
+import * as keyCodes from './key-codes';
+
+Cypress.Commands.add('move', { prevSubject: 'element' }, (subject, options: { to: string }) => {
+  cy.wrap(subject)
+    .focus()
+    .trigger('keydown', { keyCode: keyCodes.space })
+    .trigger('keydown', { keyCode: keyCodes.arrowRight, force: true })
+    .wait(0.2 * 1000)
+    .trigger('keydown', { keyCode: keyCodes.space, force: true });
+
+  cy.get(options.to).should('exist');
+});

frontend/cypress/support/e2e.ts

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

frontend/cypress/support/index.d.ts

@@ -0,0 +1,5 @@
+declare namespace Cypress {
+  interface Chainable<Subject> {
+    move(options: { to: string }): Chainable<Subject>
+  }
+}

frontend/cypress/support/key-codes.ts

@@ -0,0 +1,13 @@
+// @flow
+export const tab: number = 9;
+export const enter: number = 13;
+export const escape: number = 27;
+export const space: number = 32;
+export const pageUp: number = 33;
+export const pageDown: number = 34;
+export const end: number = 35;
+export const home: number = 36;
+export const arrowLeft: number = 37;
+export const arrowUp: number = 38;
+export const arrowRight: number = 39;
+export const arrowDown: number = 40;

frontend/cypress/support/util.ts

@@ -0,0 +1,2 @@
+export const getHandleSelector = (id: number) => `[data-rbd-draggable-id='${id}']`;
+export const getDroppableSelector = (id: number) => `[data-rbd-droppable-id='${id}']`;