Back To Course Home

Learn Front-End Development and Automated Testing with Angular

0% completed

Before We Begin

Course Introduction Who is this course for?Let's Get Lunch: The Project App How Web Applications Work The Client-server Model Required Tools and Technologies

API Setup and Installation

Run MongoDB and Set up Required Accounts Let's Get Lunch API Running the API Verifying the Database Concluding API Setup and Installation

Introduction to Angular

Introduction to Angular Exploring the Code Modules Services Directives and Pipes Conclusion on Introduction to Angular Quiz on Angular Concepts

Let's Develop Client-Side

Angular's Client-Side Recreate the Project App Creating the HomeComponent Bootstrap Configuration Update AppComponent Test Conclusion on Client-Side Quiz on Client-Side Challenge: Adding Routes

Apps' Testing Refresher

Testing Types How to Test an App?Writing Tests Test-Driven Development Quiz on Testing

User Signup

Auth Service - Signup

Signup Mock Test: Success

Implement Signup Function

Add Signup Routing Feature

Build Signup Form

Add Users' Dietary Preferences

Signup Test: Failure

Auth Service - Login

Automate Login After Signup

Adding Tests for Signup Component

Tests for Signup Form

Tests for Signup Page

Conclusion on User Signup

Quiz on User Signup Functionality

Challenge: Use Service

User Dashboard

Adding Dashboard Feature Redirecting Users E2E Testing with Cypress E2E Tests for Signup Component Conclusion of User Dashboard Quiz on User Dashboard Challenge: Writing an E2E test

Route Guard (AuthGuard)

Auth Service Auth Guard Add Auth Guard to Dashboard Dashboard E2E tests Conclusion on Route Guard: AuthGuard Quiz on Route Guard: AuthGuard

Navigation Bar

Navbar Component Event Emitter Update Navbar Tests Complete Navbar Tests Navbar E2E Test Conclusion on Navigation Bar Quiz on Navigation Bar Challenge: Writing Cypress Commands

User Login

Module and Component Login Unit Tests Update navbar Login E2E Testing Conclusion on User Login Quiz on User Login Challenge: Component Testing

Creating Events

Setup and Routing Auth Interceptor Unit Tests for Interceptor Create Event Service Auth Service - Current User Add Packages and Modules Create Event Form Setup Add Google Places Autocomplete Form Submission Functionality E2E Tests for Event Creation Conclusion on Create Events Quiz on Event Creation Challenge: Form Validation

Dashboard Calendar

Get User Events Dashboard Tests Angular's Calendar Adding Events to the Calendar Update Calendar Tests Update Dashboard E2E Test Conclusion on Dashboard Calendar Quiz on Dashboard Calendar Challenge: Using Literal Strings

Event View

Event View Component Test Get Event Functionality Add Call to Event View Update Event View Test Event View E2E Tests Conclusion on Event View Quiz on Event View Challenge: Using date-fns Function

Event Comments

Comments Service Comments Module and Component Tests for Comments Component Create Comments Test Comments Creation Event Comments E2E Tests Conclusion on Event Comments Quiz on Event Comments Challenge: Using Placeholder

Events List

Listing All Events Events List Module Tests for Listing All Events Update Navigation Bar Events List E2E Tests Conclusion on Event List Quiz on Event List Challenge: Modifying Templates

Event Subscribe/Unsubscribe

Events Service Members List Module Subscribe/Unsubscribe to an Event Implement Subscribe Method Members List Test Event Subscribe/Unsubscribe E2E Tests Conclusion on Event Subscribe/Unsubscribe Quiz on Event Subscribe/Unsubscribe Challenge: Practicing Directives

Event Recommendations

Recommendations Service Recommendations List Update Recommendations List Tests Add Recommendations List Tests Event Recommendations E2E tests Conclusion on Event Recommendations Quiz on Event Recommendations

Event Update

Update Event Service Create Event Update Component Implement Event Update Functionality Event Update E2E tests Conclusion on Event Update Quiz on Event Update Challenge: Practicing Routers

Route Guard (EventGuard)

Event Guard Event Guard Test Conclusion on Event Guard Quiz on Event Guard

Deploy to Heroku

Adding API Property MongoDB Atlas Setup Heroku Angular App Restrict Google Maps API Key Conclusion on Deploy to Heroku

Appendix: Practice

Public APIs Alternative to APIs

Appendix: Installation

Install and Run Angular Application Install and Run Cypress Install Heroku

Conclusion

Tests for Signup Page

Let's add a test for successful user creation and a test for failed user creation due to short password length.

Our TestBed has been configured and our signupPage has been instantiated using our SignupPage class, so we can write our first test.

This is our updated application code:

Get hands-on with 1300+ tech skills courses.