From 01aa23cf45d57402896ba8d7d37e885bb98c9dc7 Mon Sep 17 00:00:00 2001 From: thomas Date: Fri, 10 Mar 2023 14:32:03 +0100 Subject: [PATCH] test(cypress): test cypress --- apps/router-testing/README.md | 21 ++++++---- apps/router-testing/cypress.config.ts | 6 +++ .../cypress/fixtures/example.json | 5 +++ .../cypress/support/commands.ts | 42 +++++++++++++++++++ .../cypress/support/component-index.html | 13 ++++++ .../cypress/support/component.ts | 17 ++++++++ apps/router-testing/cypress/tsconfig.cy.json | 17 ++++++++ apps/router-testing/project.json | 9 ++++ .../src/app/app.component.cy.ts | 23 ++++++++++ .../src/app/search.component.ts | 1 + apps/router-testing/tsconfig.app.json | 12 +++++- apps/router-testing/tsconfig.json | 3 ++ 12 files changed, 160 insertions(+), 9 deletions(-) create mode 100644 apps/router-testing/cypress.config.ts create mode 100644 apps/router-testing/cypress/fixtures/example.json create mode 100644 apps/router-testing/cypress/support/commands.ts create mode 100644 apps/router-testing/cypress/support/component-index.html create mode 100644 apps/router-testing/cypress/support/component.ts create mode 100644 apps/router-testing/cypress/tsconfig.cy.json create mode 100644 apps/router-testing/src/app/app.component.cy.ts diff --git a/apps/router-testing/README.md b/apps/router-testing/README.md index c0b7c9b..874daaa 100644 --- a/apps/router-testing/README.md +++ b/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. router testing diff --git a/apps/router-testing/cypress.config.ts b/apps/router-testing/cypress.config.ts new file mode 100644 index 0000000..ade9ea3 --- /dev/null +++ b/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), +}); diff --git a/apps/router-testing/cypress/fixtures/example.json b/apps/router-testing/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/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" +} diff --git a/apps/router-testing/cypress/support/commands.ts b/apps/router-testing/cypress/support/commands.ts new file mode 100644 index 0000000..e6c8976 --- /dev/null +++ b/apps/router-testing/cypress/support/commands.ts @@ -0,0 +1,42 @@ +/// +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 { + 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) => { ... }) diff --git a/apps/router-testing/cypress/support/component-index.html b/apps/router-testing/cypress/support/component-index.html new file mode 100644 index 0000000..0dd8fb9 --- /dev/null +++ b/apps/router-testing/cypress/support/component-index.html @@ -0,0 +1,13 @@ + + + + + + + router-testing Components App + + + +
+ + diff --git a/apps/router-testing/cypress/support/component.ts b/apps/router-testing/cypress/support/component.ts new file mode 100644 index 0000000..e3684db --- /dev/null +++ b/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'; diff --git a/apps/router-testing/cypress/tsconfig.cy.json b/apps/router-testing/cypress/tsconfig.cy.json new file mode 100644 index 0000000..9025c2a --- /dev/null +++ b/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" + ] +} diff --git a/apps/router-testing/project.json b/apps/router-testing/project.json index 04bce77..25e09f9 100644 --- a/apps/router-testing/project.json +++ b/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": [] diff --git a/apps/router-testing/src/app/app.component.cy.ts b/apps/router-testing/src/app/app.component.cy.ts new file mode 100644 index 0000000..f02e346 --- /dev/null +++ b/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 + }); +}); diff --git a/apps/router-testing/src/app/search.component.ts b/apps/router-testing/src/app/search.component.ts index 0aa7bc5..b6f8666 100644 --- a/apps/router-testing/src/app/search.component.ts +++ b/apps/router-testing/src/app/search.component.ts @@ -44,6 +44,7 @@ import { availableBooks } from './book.model';