angular-university / angular-testing-course

Angular Testing Course - A complete guide to Angular Unit Testing and E2E Testing

Angular Testing Course

This repository contains the code of the Angular Testing Course.

This course repository is updated to Angular v17, and there is a package-lock.json file available, for avoiding semantic versioning installation issues.

Installation pre-requisites

Please install Node 18 Long Term Support Edition (LTE).

Installing the Angular CLI

With the following command the angular-cli will be installed globally in your machine:

npm install -g @angular/cli 

How To install this repository

We can install the master branch using the following commands:

git clone https://github.com/angular-university/angular-testing-course.git

This repository is made of several separate npm modules, that are installable separately. For example, to run the au-input module, we can do the following:

cd angular-testing-course
npm install

Its also possible to install the modules as usual using npm:

npm install 

NPM 5 or above has the big advantage that if you use it you will be installing the exact same dependencies than I installed in my machine, so you wont run into issues caused by semantic versioning updates.

This should take a couple of minutes. If there are issues, please post the complete error message in the Questions section of the course.

To Run the Development Backend Server

We can start the sample application backend with the following command:

npm run server

This is a small Node REST API server.

To run the Development UI Server

To run the frontend part of our code, we will use the Angular CLI:

npm start 

The application is visible at port 4200: http://localhost:4200

Important

This repository has multiple branches, have a look at the beginning of each section to see the name of the branch.

At certain points along the course, you will be asked to checkout other remote branches other than master. You can view all branches that you have available remotely using the following command:

git branch -a

The remote branches have their starting in origin, such as for example 1-navigation-and-containers.

We can checkout the remote branch and start tracking it with a local branch that has the same name, by using the following command:

  git checkout -b section-1 origin/1-navigation-and-containers

It's also possible to download a ZIP file for a given branch, using the branch dropdown on this page on the top left, and then selecting the Clone or Download / Download as ZIP button.

Other Courses

Modern Angular With Signals

If you are looking for the Modern Angular With Signals Course, the repo with the full code can be found here:

Angular Core Deep Dive Course

If you are looking for the Angular Core Deep Dive Course, the repo with the full code can be found here:

RxJs In Practice

If you are looking for the RxJs In Practice, the repo with the full code can be found here:

NgRx In Depth

If you are looking for the NgRx In Depth, the repo with the full code can be found here:

Serverless Angular with Firebase Course

If you are looking for the Serverless Angular with Firebase Course, the repo with the full code can be found here:

Angular Universal Course

If you are looking for the Angular Universal Course, the repo with the full code can be found here:

Angular PWA Course

If you are looking for the Angular PWA Course, the repo with the full code can be found here:

Angular Security Masterclass

If you are looking for the Angular Security Masterclass, the repo with the full code can be found here:

Angular Security Masterclass.

Angular Advanced Library Laboratory Course

If you are looking for the Angular Advanced Course, the repo with the full code can be found here:

Angular Advanced Library Laboratory Course: Build Your Own Library.

RxJs and Reactive Patterns Angular Architecture Course

If you are looking for the RxJs and Reactive Patterns Angular Architecture Course code, the repo with the full code can be found here:

RxJs and Reactive Patterns Angular Architecture Course

Complete Typescript Course - Build A REST API

If you are looking for the Complete Typescript 2 Course - Build a REST API, the repo with the full code can be found here:

https://angular-university.io/course/typescript-2-tutorial

Github repo for this course

angular-testing-course's Issues

mat-tab-group 13 problems

I am using windows 10, node 16.13.2, npm 8.1.2, angular-cli 13.0.4.

I saw 13 problems, why is that?:

[{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "'mat-tab-group' is not a known element:\n1. If 'mat-tab-group' is an Angular component, then verify that it is part of this module.\n2. If 'mat-tab-group' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.",
	"source": "ng",
	"startLineNumber": 5,
	"startColumn": 3,
	"endLineNumber": 34,
	"endColumn": 19
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the \"@NgModule.declarations\".",
	"source": "ng",
	"startLineNumber": 8,
	"startColumn": 5,
	"endLineNumber": 18,
	"endColumn": 20
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "Can't bind to 'ngIf' since it isn't a known property of 'ng-container'.\n1. If 'ngIf' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.\n2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.",
	"source": "ng",
	"startLineNumber": 8,
	"startColumn": 19,
	"endLineNumber": 8,
	"endColumn": 72
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "The pipe 'async' could not be found",
	"source": "ng",
	"startLineNumber": 8,
	"startColumn": 20,
	"endLineNumber": 8,
	"endColumn": 44
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "'mat-tab' is not a known element:\n1. If 'mat-tab' is an Angular component, then verify that it is part of this module.\n2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.",
	"source": "ng",
	"startLineNumber": 10,
	"startColumn": 7,
	"endLineNumber": 16,
	"endColumn": 17
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the \"@NgModule.declarations\".",
	"source": "ng",
	"startLineNumber": 10,
	"startColumn": 7,
	"endLineNumber": 16,
	"endColumn": 17
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "Can't bind to 'ngIf' since it isn't a known property of 'mat-tab'.\n1. If 'mat-tab' is an Angular component and it has 'ngIf' input, then verify that it is part of this module.\n2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.",
	"source": "ng",
	"startLineNumber": 10,
	"startColumn": 34,
	"endLineNumber": 10,
	"endColumn": 69
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the \"@NgModule.declarations\".",
	"source": "ng",
	"startLineNumber": 21,
	"startColumn": 5,
	"endLineNumber": 32,
	"endColumn": 20
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "Can't bind to 'ngIf' since it isn't a known property of 'ng-container'.\n1. If 'ngIf' is an Angular directive, then add 'CommonModule' to the '@NgModule.imports' of this component.\n2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.",
	"source": "ng",
	"startLineNumber": 21,
	"startColumn": 19,
	"endLineNumber": 21,
	"endColumn": 72
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "The pipe 'async' could not be found",
	"source": "ng",
	"startLineNumber": 21,
	"startColumn": 20,
	"endLineNumber": 21,
	"endColumn": 44
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "'mat-tab' is not a known element:\n1. If 'mat-tab' is an Angular component, then verify that it is part of this module.\n2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.",
	"source": "ng",
	"startLineNumber": 23,
	"startColumn": 7,
	"endLineNumber": 30,
	"endColumn": 17
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "Property binding ngIf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the \"@NgModule.declarations\".",
	"source": "ng",
	"startLineNumber": 23,
	"startColumn": 7,
	"endLineNumber": 30,
	"endColumn": 17
},{
	"resource": "/c:/Udemy/angular-testing-course/src/app/courses/home/home.component.html",
	"owner": "_generated_diagnostic_collection_name_#3",
	"severity": 8,
	"message": "Can't bind to 'ngIf' since it isn't a known property of 'mat-tab'.\n1. If 'mat-tab' is an Angular component and it has 'ngIf' input, then verify that it is part of this module.\n2. If 'mat-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.\n3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component.",
	"source": "ng",
	"startLineNumber": 23,
	"startColumn": 33,
	"endLineNumber": 23,
	"endColumn": 68
}]

Courses Services Subscribe Confusion

Hi, when I am changing the expected values inside of the subscribe for findAllCourses, like the one found here: https://github.com/angular-university/angular-testing-course/blob/1-finished/src/app/courses/services/courses.services.spec.ts#L37, I don't see any failures happening. I am wanting to see it fail if I change the length from 12 to 11. Why would this not be picking up the failure?

Typescript Unable to Compile

Hello. I saw the following TS error after cloning the repo, checking out the branch, then running npm ci, npm audit fix, and then npm run server. npm start worked fine to compile the angular code, though.

Users-MacBook-Pro% npm run server

[email protected] server
ts-node -P ./server/server.tsconfig.json ./server/server.ts

/Users/user/coding/angular-testing-course/node_modules/ts-node/src/index.ts:307
throw new TSError(formatDiagnostics(diagnosticList, cwd, ts, lineOffset))
^
TSError: ⨯ Unable to compile TypeScript
server/search-lessons.route.ts (17,33): Argument of type 'string | ParsedQs | string[] | ParsedQs[]' is not assignable to parameter of type 'string'.
Type 'ParsedQs' is not assignable to type 'string'. (2345)
server/search-lessons.route.ts (18,31): Argument of type 'string | ParsedQs | string[] | ParsedQs[]' is not assignable to parameter of type 'string'. (2345)
server/search-lessons.route.ts (20,59): This condition will always return 'false' since the types 'number' and 'string | ParsedQs | string[] | ParsedQs[]' have no overlap. (2367)
server/search-lessons.route.ts (23,97): Property 'toLowerCase' does not exist on type 'string | ParsedQs | string[] | ParsedQs[]'.

master branch issue with npm install

I pulled the codebase down this morning to try and resolve my project which I started earlier this year but ran into the problem with npm install.

Are you going to fix this?

angular-testing-course-master]$ npm install
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/tslint
npm ERR!   dev tslint@"~6.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer tslint@"^3.9.0" from [email protected]
npm ERR! node_modules/codelyzer
npm ERR!   dev codelyzer@"^0.0.28" from the root project
npm ERR! 
npm ERR! Conflicting peer dependency: [email protected]
npm ERR! node_modules/tslint
npm ERR!   peer tslint@"^3.9.0" from [email protected]
npm ERR!   node_modules/codelyzer
npm ERR!     dev codelyzer@"^0.0.28" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 
npm ERR! See /home/userme/.npm/eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/userme/.npm/_logs/2022-10-27T13_38_08_457Z-debug-0.log
angular-testing-course-master$ 

Angular Unit Testing Prep Material

fix issue of code coverage package