Javascript testing made easy using the example of an angular application

Javascript testing made easy using the example of an angular application

Time and again, the testing in the frontend is put on the back burner. For a modern business application it is inevitable to write reasonable tests in the frontend as well. When developing Angular, testability was part of the concept right from the start. In this workshop Fabian Gosebrink shows how to test an Angular application thoroughly. A look is taken at the tools and the different possibilities of testing, so that no case is left untested in the end.

Fb89953d3a1b1fcb862a186585c37c25?s=128

Fabian Gosebrink

February 27, 2019
Tweet

Transcript

  1. Javascript Testing

  2. None
  3. @FabianGosebrink

  4. Why do we Test?

  5. None
  6. None
  7. None
  8. Testing

  9. Unit Testing

  10. Shallow Testing

  11. Integration Testing

  12. End 2 End Testing

  13. Strategies

  14. Smallest as possible

  15. Readable

  16. Do not mock…

  17. …that often

  18. Test driven

  19. Explore the tools

  20. Explore the tools Protractor Jasmine Karma

  21. Jasmine • Behaviour Driven Development • Fast

  22. None
  23. None
  24. None
  25. Some Jasmine Matchers expect(array).toContain(member); expect(mixed).toBeDefined(); expect(mixed).toBeFalsy(); expect(mixed).toBeNull(); expect(mixed).toBeUndefined(); expect(mixed).toEqual(mixed); expect(mixed).toMatch(pattern);

    expect(number).toBeCloseTo(number, decimalPlaces); expect(number).toBeGreaterThan(number); expect(number).toBeLessThan(number); expect(number).toBeNaN(); expect(spy).toHaveBeenCalled(); expect(spy).toHaveBeenCalledTimes(numb er);
  26. None
  27. None
  28. Skip Tests

  29. Karma • Test runner • Spawns browser & runs tests

    • Also on Commandline
  30. None
  31. None
  32. Protractor • End-to-end test framework • Runs in a real

    browser • Test like a user
  33. None
  34. component.ts

  35. component.spec.ts

  36. AngularCLI

  37. None
  38. None
  39. ARRANGE ACT ASSERT

  40. None
  41. Testing Pipes

  42. Testing Services

  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  49. Code...

  50. Testing Routing

  51. None
  52. None
  53. Testing Components

  54. None
  55. None
  56. Code...

  57. Automate

  58. None
  59. https://offering.solutions https://fabian-gosebrink.com https://github.com/FabianGosebrink/Angular-Testing @FabianGosebrink