Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Angular Testing with Jest and Cypress

Angular Testing with Jest and Cypress

Again and again, testing in the frontend is put on the back burner. Yet for a modern business application, it is inevitable to write reasonable tests in the frontend as well. In the development of Angular, testability was part of the concept from the very beginning. In this workshop, Fabian Gosebrink shows how to put your Angular applications through their paces. We will take a look at the tools and the different possibilities of testing, so that in the end no case remains untested.

Fabian Gosebrink

February 24, 2022
Tweet

More Decks by Fabian Gosebrink

Other Decks in Technology

Transcript

  1. Fabian
    Gosebrink

    View full-size slide

  2. Why do
    we test?

    View full-size slide

  3. Why don't
    we test?

    View full-size slide

  4. https://twitter.com/SwissDevJobs/status/1496386345169793027

    View full-size slide

  5. Why do
    we test?

    View full-size slide

  6. Why do
    we test?

    View full-size slide

  7. Documentation

    View full-size slide

  8. Refactorings

    View full-size slide

  9. {
    "projects": {
    "my-app": {
    "architect": {
    "test": {
    "builder": "@angular-devkit/build-angular:jest",
    "options": {
    "tsConfig": "tsconfig.spec.json",
    "polyfills": ["zone.js", "zone.js/testing"]
    }
    }
    }
    }
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15

    View full-size slide

  10. {
    "projects": {
    "my-app": {
    "architect": {
    "test": {
    "builder": "@angular-devkit/build-angular:jest",
    "options": {
    "tsConfig": "tsconfig.spec.json",
    "polyfills": ["zone.js", "zone.js/testing"]
    }
    }
    }
    }
    }
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    "builder": "@angular-devkit/build-angular:jest",
    {
    1
    "projects": {
    2
    "my-app": {
    3
    "architect": {
    4
    "test": {
    5
    6
    "options": {
    7
    "tsConfig": "tsconfig.spec.json",
    8
    "polyfills": ["zone.js", "zone.js/testing"]
    9
    }
    10
    }
    11
    }
    12
    }
    13
    }
    14
    }
    15

    View full-size slide

  11. $ ng g component toTest

    View full-size slide

  12. Code
    Pipes
    Spies
    Testbed
    Snapshots

    View full-size slide

  13. https://bit.ly/3BiOtBJ

    View full-size slide

  14. Cypress example

    View full-size slide

  15. Cypress example

    View full-size slide

  16. Cypress example

    View full-size slide

  17. Cypress example

    View full-size slide

  18. Cypress example

    View full-size slide

  19. Cypress example

    View full-size slide

  20. Cypress example

    View full-size slide

  21. Cypress example

    View full-size slide

  22. Cypress example

    View full-size slide

  23. Cypress example

    View full-size slide

  24. @FabianGosebrink

    View full-size slide