test(cypress): test cypress

apps/router-testing/README.md

@@ -8,15 +8,19 @@ Testing is a crucial step in building scalable, maintainable, and trustworthy ap
 Testing should never be avoided, even in the face of short deadlines or strong pressure from the product team.
 Nowadays, there are numerous awesome tools available that make it easy to test your code and provide a great developer experience.
 
-In this series of testing exercises, we will learn and master Testing Library that simplifies DOM manipulation for testing any Angular component.
+In this series of testing exercises, we will learn and master [Testing Library](https://testing-library.com/docs/) and [Cypress Component Testing](https://docs.cypress.io/guides/component-testing/angular/overview) that simplifies DOM manipulation for testing any Angular component.
 
 ### Statement:
 
-We have a functional application that lists available books for searching. If the search is valid, you will be directed to one or more books, otherwise, you will end up on an error page.
+We have a functional application that lists available books for borrowing inside a library. If the book you searched is available, you will be directed to the corresponding book(s), otherwise, you will end up on an error page.
 
-The goal is to test this behavior.
+The goal is to test this behavior with Testing library and Cypress
 
-A file named `app.component.spec.ts`
+The file named `app.component.spec.ts` will let test your application using Testing Library. To run the test suits, you need to run `npx nx test router-testing`. You can also install [Jest Runner](https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner) to execute your test by clicking on the `Run` button above each `describe` or `it` blocks.
+
+For testing cypress, you will execute your test inside the `app.component.cy.ts` and run `npx nx component-test router-testing` to execute your test suits. You can add the `--watch` flag to execute your test in watch mode.
+
+I created some `it` blocks but feel free to add more test if you like to.
 
 ### Submitting your work
 
@@ -24,10 +28,11 @@ A file named `app.component.spec.ts`
 2. clone it
 3. npm install
 4. `npx nx serve router-testing` to play with the application
-5. `npx nx test router-testing` to test your application
-6. _...work on it_
-7. Commit your work
-8. Submit a PR with a title beginning with **Answer:17** that I will review and other dev can review.
+5. `npx nx test router-testing` to test your application with Testing Library
+6. `npx nx component-test router-testing --watch` to test your application with Cypress
+7. _...work on it_
+8. Commit your work
+9. Submit a PR with a title beginning with **Answer:17** that I will review and other dev can review.
 
 <a href="https://github.com/tomalaforge/angular-challenges/pulls?q=label%3A17+label%3Aanswer"><img src="https://img.shields.io/badge/-Solutions-green" alt="router testing"/></a>
 

apps/router-testing/cypress.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'cypress';
+import { nxComponentTestingPreset } from '@nrwl/angular/plugins/component-testing';
+
+export default defineConfig({
+  component: nxComponentTestingPreset(__filename),
+});

apps/router-testing/cypress/fixtures/example.json

@@ -0,0 +1,5 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io",
+  "body": "Fixtures are a great way to mock data for responses to routes"
+}

apps/router-testing/cypress/support/commands.ts

@@ -0,0 +1,42 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress/angular';
+
+// ***********************************************
+// This example commands.ts 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
+// ***********************************************
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+      login(email: string, password: string): void;
+      mount: typeof mount;
+    }
+  }
+}
+
+Cypress.Commands.add('mount', mount);
+
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: 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) => { ... })

apps/router-testing/cypress/support/component-index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <title>router-testing Components App</title>
+
+</head>
+<body>
+  <div data-cy-root></div>
+</body>
+</html>

apps/router-testing/cypress/support/component.ts

@@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/component.ts 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.ts using ES2015 syntax:
+import './commands';

apps/router-testing/cypress/tsconfig.cy.json

@@ -0,0 +1,17 @@
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["cypress", "node"]
+  },
+  "include": [
+    "support/**/*.ts",
+    "../cypress.config.ts",
+    "../**/*.cy.ts",
+    "../**/*.cy.tsx",
+    "../**/*.cy.js",
+    "../**/*.cy.jsx",
+    "../**/*.d.ts"
+  ]
+}

apps/router-testing/project.json

@@ -84,6 +84,15 @@
         "jestConfig": "apps/router-testing/jest.config.ts",
         "passWithNoTests": true
       }
+    },
+    "component-test": {
+      "executor": "@nrwl/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/router-testing/cypress.config.ts",
+        "testingType": "component",
+        "skipServe": true,
+        "devServerTarget": "router-testing:build"
+      }
     }
   },
   "tags": []

apps/router-testing/src/app/app.component.cy.ts

@@ -0,0 +1,23 @@
+import { AppComponent } from './app.component';
+
+describe(AppComponent.name, () => {
+  it('shows error message and disabled button because no search criteria are typed', () => {
+    //todo
+  });
+
+  it('shows No book found because no book match the search', () => {
+    //todo
+  });
+
+  it('shows One book because the search matches one book', () => {
+    //todo
+  });
+
+  it('shows One book because the search matches one book even with different cases', () => {
+    //todo
+  });
+
+  it('shows a list of books because the search matches multiples books', () => {
+    //todo
+  });
+});

apps/router-testing/src/app/search.component.ts

@@ -44,6 +44,7 @@ import { availableBooks } from './book.model';
       </div>
     </div>
     <button
+      data-cy="borrow-btn"
       routerLink="/shelf"
       [queryParams]="{ book: searchBook.value }"
       [disabled]="searchBook.errors"

apps/router-testing/tsconfig.app.json

@@ -6,5 +6,15 @@
   },
   "files": ["src/main.ts"],
   "include": ["src/**/*.d.ts"],
-  "exclude": ["jest.config.ts", "src/**/*.test.ts", "src/**/*.spec.ts"]
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "cypress/**/*",
+    "cypress.config.ts",
+    "**/*.cy.ts",
+    "**/*.cy.js",
+    "**/*.cy.tsx",
+    "**/*.cy.jsx"
+  ]
 }

apps/router-testing/tsconfig.json

@@ -20,6 +20,9 @@
     },
     {
       "path": "./tsconfig.editor.json"
+    },
+    {
+      "path": "./cypress/tsconfig.cy.json"
     }
   ],
   "extends": "../../tsconfig.base.json",