{"id":28144556,"url":"https://github.com/juanpms2/9_react_testing_exercise","last_synced_at":"2026-05-06T11:36:50.415Z","repository":{"id":42743740,"uuid":"274739305","full_name":"juanpms2/9_React_Testing_Exercise","owner":"juanpms2","description":"Práctica del módulo 9 del máster. Testing en React con Jest y Cypress. Integración continua en Travis y Circle CI.","archived":false,"fork":false,"pushed_at":"2023-03-05T07:07:08.000Z","size":1703,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2023-04-25T10:50:36.905Z","etag":null,"topics":["circleci","cypress","integration","jest","react","testing","travis"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juanpms2.png","metadata":{"files":{"readme":"README-CYPRESS.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-06-24T18:18:25.000Z","updated_at":"2023-04-25T10:50:36.905Z","dependencies_parsed_at":"2023-01-28T09:46:26.867Z","dependency_job_id":null,"html_url":"https://github.com/juanpms2/9_React_Testing_Exercise","commit_stats":null,"previous_names":[],"tags_count":null,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanpms2%2F9_React_Testing_Exercise","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanpms2%2F9_React_Testing_Exercise/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanpms2%2F9_React_Testing_Exercise/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juanpms2%2F9_React_Testing_Exercise/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juanpms2","download_url":"https://codeload.github.com/juanpms2/9_React_Testing_Exercise/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254235710,"owners_count":22036966,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["circleci","cypress","integration","jest","react","testing","travis"],"created_at":"2025-05-14T22:12:46.743Z","updated_at":"2026-05-06T11:36:45.394Z","avatar_url":"https://github.com/juanpms2.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Cypress tests e2e | [![CircleCI](https://circleci.com/gh/juanpms2/9_React_Testing_Exercise.svg?style=svg)](https://circleci.com/gh/juanpms2/9_React_Testing_Exercise/tree/master)\n\n_Para la integración continua es necesario subir al repositorio `package-lock.json`_\n\n#### Instalación de Cypress\n\n`npm install cypress -D`\n\n#### Verificamos y arrancamos Cypress\n\nEl siguiente comando nos verifica si Cypress puede correr, lo abre creando una carpeta en el raiz y nos abre una estancia de cypress en el navegador.\n\n`node_modules/.bin/cypress open`\n\n#### Creamos los script en el `package.json` parar Cypress\n\n```json\n\n\"scripts\": {\n  ...\n    \"test:e2e\": \"npm-run-all -p -l start:dev start:e2e\",\n    \"start:e2e\": \"cypress open\",\n    \"test:e2e:ci\": \"npm-run-all -p -l -r start:dev run:e2e\",\n    \"run:e2e\": \"cypress run\"\n  ...\n}\n\n```\n\n#### Agregamos la siguiente línea de código al inicio de nuestros ficheros spec para tener intelligence en el editor.\n\n```html\n/// \u003creference types=\"Cypress\" /\u003e\n```\n\n#### Cypress también nos crea el archivo `cypress.json` donde podemos añadir configuración de Cypress. Por ejemplo:\n\n```json\n{\n  \"baseUrl\": \"http://localhost:8080\"\n}\n```\n\nAl arrancar Cypress por primera vez nos pide una serie de pasos y seguido nos crea en el raíz una carpeta con su mismo nombre. Dentro de ella tenemos otra llamada `integration` donde crearemos nuestros tests, otra llamada `fixtures` donde crearemos los mocks de datos y otra llamada `support` donde crearemos nuestros comandos personalizados.\n\nPara la integración continua se ha utilizado CircleCI que debemos conectar con nuestro repositorio de GitHub. En el directorio raíz crearemos la carpeta `.circleci` y dentro el archivo de configuración `config.yml`.\n\n`config.yml`\n\n```yml\nversion: 2\njobs:\n  build:\n    working_directory: ~/test-ci-code\n    docker:\n      - image: circleci/node:12\n    steps:\n      - checkout\n      - run:\n          name: install cypress dependencies\n          command: 'sudo apt-get install xvfb libgtk-3-dev libnotify-dev libgconf-2-4 libnss3 libxss1 libasound2'\n      - run:\n          name: install\n          command: 'npm install'\n      - run:\n          name: test:e2e\n          command: 'npm run test:e2e:ci'\n      - run:\n          name: test\n          command: 'npm run test'\n```\n\n## Tests\n\n`1-login-input.spec.js`\n\n```typescript\n/// \u003creference types=\"Cypress\" /\u003e\n\ndescribe('Login input', () =\u003e {\n  beforeEach(() =\u003e {\n    cy.visit('/');\n  });\n\n  it('visits the login page and login', () =\u003e {\n    const typedText = 'admin';\n    const typedPassword = 'test';\n\n    cy.get(\"[type='text']\").should('have.focus');\n\n    cy.get(\n      '[data-testid=test-input-name] \u003e .MuiInputBase-root \u003e .MuiInputBase-input'\n    )\n      .type(typedText)\n      .should('have.value', typedText);\n\n    cy.get(\n      '[data-testid=test-input-password] \u003e .MuiInputBase-root \u003e .MuiInputBase-input'\n    )\n      .type(typedPassword)\n      .should('have.value', typedPassword);\n\n    cy.get('.MuiButtonBase-root').click().loadAndVisitHotelCollection();\n  });\n});\n```\n\n`2-hotel-viewer-init.spec.js`\n\n```typescript\n/// \u003creference types=\"Cypress\" /\u003e\n\ndescribe('Hotel viewer init', () =\u003e {\n  it('displays hotels on page load', () =\u003e {\n    cy.loadAndVisitHotelCollection();\n    cy.get('[data-testid=\"div-hotel-container\"] \u003e div').should(\n      'have.length',\n      2\n    );\n  });\n  it('should navigate to hotel-edit', () =\u003e {\n    cy.get(\n      ':nth-child(1) \u003e .MuiCardActions-root \u003e [data-testid=test-button-editHotel]'\n    ).click();\n  });\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuanpms2%2F9_react_testing_exercise","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuanpms2%2F9_react_testing_exercise","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuanpms2%2F9_react_testing_exercise/lists"}