Professional Angular Testing

Part 1: Unit Tests

Unit tests with Jest

• Jasmine vs. Jest
• Test Coverage
• Extending Jest
• Asynchronicity
• fakeAsync vs. waitForAsync
• Mocking: jest.mock, jest.fn, jest.spyOn
• Stubbing

Testing of reactivity

• RxJS Marbles for pipe operators
• Use of RxJs Marbles in normal unit tests
• Unit tests for NGRX

Part 2: Component & Integration Tests

Component Tests

• TestBed and Dependency Injection
• DOM interaction
• Change detection
• Component Snapshots

Advanced component tests

• Nested components
• Testing @Input and @Output
• Testing directives and pipes
• Factory methods for reducing boilerplate code
• Spectator
• Testing Library
• Harnesses
• Reuse harnesses

Integration tests

• HttpTestingController
• RouterTestingModule
• NgRx and the MockStore

Best Practices

• Two approaches: London & Detroit
• Test strategies: when should I use what?
• Testable architecture

Part 3: End-to-End Tests with Cypress & Visual Regression

Visual regression with storybook

• Multiple Jest configurations
• Puppeteer
• Storybook
• StoryShots

Cypress

• Overview of existing E2E frameworks
• Difference between Web-Driver and Chrome DevTools protocol
• Cypress and its “awaiting” feature
• The cy object
• Implicit and explicit assertions

Cypress Advanced

• Page Object Models
• cy expand object
• Avoid Flaky Tests
• Mocking of HTTP requests
• Reuse Angular Harnesses
• Selectors and Actions via Accessibility Criterias

Cypress and Beyond

• Optimal test design
• Conditional tests
• Direct communication with the backend
• Unit tests in connection with Storybook
• Unit tests with Component Test Runner
• Test Coverage