Angular With Test Driven Development

Learn Angular by applying test driven development (incl. routing, forms, karma, jasmine, jest, testing-library)

What you'll learn
Build an application with Angular
Practice Test Driven Development in a complete project from beginning to the end
How to mock external dependencies in testing
Feel how the test driven development is giving confidence when refactoring your application
Not only learn karma & jasmine but also learn jest and testing-library
Requirements
Experience with javascript and typescript is required
Description
Angular is one of the most popular library for the client application development.In this course we will be learning angular by creating a web application with it. Also we will apply test driven development (TDD) methodology from beginning to the end.We will have two separate test setups. One of them is coming with the default angular project. Testing with karma and jasmine. And the other one is, we will create custom setup with the most popular test libraries of javascript. jest and testing-librarywhile building this application, we will learn main building blocks of angular. We will practicehow client-side routing is workinghow to use template driven and reactive formhow to use validations and how to create our own synchronous and asynchronous validatorshow observable is workingand we will seehow test driven development works.how it's affecting our code quality, reusabilityhow it's giving us the confidence about refactoring our implementationhow to avoid implementation details while creating testsThis course is purely built on practice. Each code piece we write, will be for our actual application implementation.In each section we will gradually build our application. We will not jump ahead and add functionality not needed for that moment. We will implement one requirement at a time. Each implementation will bring the next requirement to us.And following this practice, will help you to get a solid foundation about overall web application requirements and how to implement one of them with angular by following test driven development methodology.After completing the course, you will be able to use Angular in your next project and you will experience the benefits of test driven development.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 Methodology

Lecture 3 Create Project

Lecture 4 Test Setup

Lecture 5 Course Project

Lecture 6 Backend Project

Section 2: Sign Up

Lecture 7 First Component

Lecture 8 Layout

Lecture 9 Layout - Jest Tests

Lecture 10 Interactions

Lecture 11 Interactions - Jest Tests

Lecture 12 Submitting Request

Lecture 13 Mocking - Jasmine

Lecture 14 Mocking - Jest

Lecture 15 HttpClient

Lecture 16 HttpClient - Jest Tests

Lecture 17 Mocking API in Tests

Lecture 18 Proxy

Lecture 19 Styling

Lecture 20 Progress Indicator

Lecture 21 Progress Indicator - Jest Tests

Lecture 22 Sign Up Success

Lecture 23 Sign Up Success - Jest Tests

Lecture 24 Components - Alert & Button

Section 3: Refactoring

Lecture 25 Service

Lecture 26 Module

Lecture 27 Template Driven Form

Lecture 28 Reactive Form

Section 4: Validation

Lecture 29 Client-side Validation

Lecture 30 Client-side Validation - Jest Tests

Lecture 31 Simplifying Template

Lecture 32 Styling

Lecture 33 Dynamic Tests

Lecture 34 Task: Required Validation for E-mail & Password

Lecture 35 Required Validation for E-mail & Password

Lecture 36 Pattern Validation

Lecture 37 Cross-field Validation

Lecture 38 Cross-field Validation - Jest Tests

Lecture 39 Async Validation

Lecture 40 Async Validation - Jest Tests

Lecture 41 Backend Validation

Lecture 42 Backend Validation & Mock Service Worker

Lecture 43 Modify Button Enable Logic

Lecture 44 Button State

Lecture 45 Button State - Jest Tests

Section 5: Routing

Lecture 46 Routing

Lecture 47 Client-side Routing

Lecture 48 Client-side Routing - Jest Tests

Lecture 49 Task: New Pages

Lecture 50 New Pages

Lecture 51 NavBar

Lecture 52 NavBar - Jest Tests

Lecture 53 NavBar Style

Lecture 54 Account Activation

Lecture 55 Activated Route

Lecture 56 Observable

Lecture 57 Activation API Call

Lecture 58 Activation API Call - Jest Tests

Lecture 59 Progress Indicator

Lecture 60 Progress Indicator - Jest Tests

Section 6: User List & User Page

Lecture 61 User List

Lecture 62 User List - Jest Tests

Lecture 63 Fixing Page in Tests

Lecture 64 Fixing Page in Tests - Jest Tests

Lecture 65 Next & Previous Page

Lecture 66 Next & Previous Page - Jest Tests

Lecture 67 Style & Progress Indictor

Lecture 68 Style & Progress Indictor - Jest Tests

Lecture 69 Link to User Page

Lecture 70 Link to User Page - Jest Tests

Lecture 71 User List Item

Lecture 72 Task: User Page

Lecture 73 User Page

Lecture 74 User Page - Jest Tests

Section 7: Authentication

Lecture 75 Task: Login Page

Lecture 76 Login Page

Lecture 77 Login Page - Jest Tests

Lecture 78 Validation

Lecture 79 Validation - Jest Tests

Lecture 80 Error

Lecture 81 Error - Jest Tests

Lecture 82 Success Route

Lecture 83 Success Route - Jest Tests

Lecture 84 Logged in Layout

Lecture 85 Logged in Layout - Jest Tests

Lecture 86 Local Storage

Lecture 87 Local Storage - Jest Tests

Lecture 88 Logout

Lecture 89 Logout - Jest Tests

Lecture 90 Refactor

Developers who want to learn Angular,Developers who want to see Test Driven Development in action