12 |
--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
1 | import { AppPage } from './app.po';
2 |
3 | describe('User List App', () => {
4 | const page = new AppPage();
5 |
6 | beforeEach(async () => {
7 | await page.getDashboard();
8 | });
9 |
10 | it('should have a header', async () => {
11 | const text = await page.getHeaderText();
12 | expect(text).toBe('Active Users');
13 | });
14 |
15 | it('should have 16 users on page load', async () => {
16 | const users = page.getListItems();
17 | expect(await users.count()).toBe(16);
18 | });
19 | });
--------------------------------------------------------------------------------
/src/app/mocks/user-list-interceptor.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 |
3 | import { UserListInterceptorService } from './user-list-interceptor.service';
4 |
5 | describe('UserListInterceptorService', () => {
6 | let service: UserListInterceptorService;
7 |
8 | beforeEach(() => {
9 | TestBed.configureTestingModule({});
10 | service = TestBed.inject(UserListInterceptorService);
11 | });
12 |
13 | it('should be created', () => {
14 | expect(service).toBeTruthy();
15 | });
16 | });
17 |
--------------------------------------------------------------------------------
/src/app/services/error-metadata.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable, ErrorHandler } from '@angular/core';
2 |
3 | @Injectable({
4 | providedIn: 'root'
5 | })
6 | export class ErrorMetadataService implements ErrorHandler {
7 |
8 | public handleError(error: unknown): void {
9 | const date = new Date();
10 |
11 | console.error({
12 | timestamp: date.toISOString(),
13 | message: (error as { message: string }).message,
14 | zone: (error as { zone: unknown }).zone
15 | });
16 | }
17 |
18 | }
19 |
--------------------------------------------------------------------------------
/src/app/pipes/highlight-text.pipe.ts:
--------------------------------------------------------------------------------
1 | import { Pipe, PipeTransform } from '@angular/core';
2 |
3 | @Pipe({
4 | name: 'highlightText'
5 | })
6 | export class HighlightTextPipe implements PipeTransform {
7 |
8 | transform(value: string, filter: string): string {
9 | if (filter.length === 0) {
10 | return value;
11 | }
12 |
13 | const search = new RegExp(filter, 'ig');
14 |
15 | return value.replace(search, (match) => {
16 | return `${match}`;
17 | });
18 | }
19 |
20 | }
21 |
--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
1 |
2 | Contribution Agreement
3 | ======================
4 |
5 | This repository does not accept pull requests (PRs). All pull requests will be closed.
6 |
7 | However, if any contributions (through pull requests, issues, feedback or otherwise) are provided, as a contributor, you represent that the code you submit is your original work or that of your employer (in which case you represent you have the right to bind your employer). By submitting code (or otherwise providing feedback), you (and, if applicable, your employer) are licensing the submitted code (and/or feedback) to LinkedIn and the open source community subject to the BSD 2-Clause license.
8 |
--------------------------------------------------------------------------------
/src/app/services/web-storage.service.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed } from '@angular/core/testing';
2 | import { HttpClient } from '@angular/common/http';
3 |
4 | import { WebStorageService } from './web-storage.service';
5 |
6 | describe('WebStorageService', () => {
7 | let service: WebStorageService;
8 |
9 | beforeEach(() => {
10 | TestBed.configureTestingModule({
11 | providers: [
12 | { provide: HttpClient, useValue: jasmine.createSpyObj('HttpClient', [ 'get', 'put' ]) }
13 | ]
14 | });
15 | service = TestBed.inject(WebStorageService);
16 | });
17 |
18 | it('should be created', () => {
19 | expect(service).toBeTruthy();
20 | });
21 | });
22 |
--------------------------------------------------------------------------------
/src/environments/environment.ts:
--------------------------------------------------------------------------------
1 | // This file can be replaced during build by using the `fileReplacements` array.
2 | // `ng build --prod` replaces `environment.ts` with `environment.prod.ts`.
3 | // The list of file replacements can be found in `angular.json`.
4 |
5 | export const environment = {
6 | production: false
7 | };
8 |
9 | /*
10 | * For easier debugging in development mode, you can import the following file
11 | * to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
12 | *
13 | * This import should be commented out in production mode because it will have a negative impact
14 | * on performance if an error is thrown.
15 | */
16 | // import 'zone.js/dist/zone-error'; // Included with Angular CLI.
17 |
--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
2 | # For additional information regarding the format and rule options, please see:
3 | # https://github.com/browserslist/browserslist#queries
4 |
5 | # For the full list of supported browsers by the Angular framework, please see:
6 | # https://angular.io/guide/browser-support
7 |
8 | # You can see what browsers were selected by your queries by running:
9 | # npx browserslist
10 |
11 | last 1 Chrome version
12 | last 1 Firefox version
13 | last 2 Edge major versions
14 | last 2 Safari major versions
15 | last 2 iOS major versions
16 | Firefox ESR
17 | not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
18 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See http://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # compiled output
4 | /dist
5 | /tmp
6 | /out-tsc
7 | # Only exists if Bazel was run
8 | /bazel-out
9 |
10 | # dependencies
11 | /node_modules
12 |
13 | # profiling files
14 | chrome-profiler-events*.json
15 | speed-measure-plugin*.json
16 |
17 | # IDEs and editors
18 | /.idea
19 | .project
20 | .classpath
21 | .c9/
22 | *.launch
23 | .settings/
24 | *.sublime-workspace
25 |
26 | # IDE - VSCode
27 | .vscode/*
28 | !.vscode/settings.json
29 | !.vscode/tasks.json
30 | !.vscode/launch.json
31 | !.vscode/extensions.json
32 | .history/*
33 |
34 | # misc
35 | /.sass-cache
36 | /connect.lock
37 | /coverage
38 | /libpeerconnection.log
39 | npm-debug.log
40 | yarn-error.log
41 | testem.log
42 | /typings
43 |
44 | # System Files
45 | .DS_Store
46 | Thumbs.db
47 |
--------------------------------------------------------------------------------
/src/test.ts:
--------------------------------------------------------------------------------
1 | // This file is required by karma.conf.js and loads recursively all the .spec and framework files
2 |
3 | import 'zone.js/dist/zone-testing';
4 | import { getTestBed } from '@angular/core/testing';
5 | import {
6 | BrowserDynamicTestingModule,
7 | platformBrowserDynamicTesting
8 | } from '@angular/platform-browser-dynamic/testing';
9 |
10 | declare const require: {
11 | context(path: string, deep?: boolean, filter?: RegExp): {
12 | keys(): string[];
13 | (id: string): T;
14 | };
15 | };
16 |
17 | // First, initialize the Angular testing environment.
18 | getTestBed().initTestEnvironment(
19 | BrowserDynamicTestingModule,
20 | platformBrowserDynamicTesting()
21 | );
22 | // Then we find all the tests.
23 | const context = require.context('./', true, /\.spec\.ts$/);
24 | // And load the modules.
25 | context.keys().map(context);
26 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */
2 | {
3 | "compileOnSave": false,
4 | "compilerOptions": {
5 | "baseUrl": "./",
6 | "outDir": "./dist/out-tsc",
7 | "forceConsistentCasingInFileNames": true,
8 | "strict": true,
9 | "noImplicitReturns": true,
10 | "noFallthroughCasesInSwitch": true,
11 | "sourceMap": true,
12 | "declaration": false,
13 | "downlevelIteration": true,
14 | "experimentalDecorators": true,
15 | "moduleResolution": "node",
16 | "importHelpers": true,
17 | "target": "es2015",
18 | "module": "es2020",
19 | "lib": [
20 | "es2018",
21 | "dom"
22 | ]
23 | },
24 | "angularCompilerOptions": {
25 | "strictInjectionParameters": true,
26 | "strictInputAccessModifiers": true,
27 | "strictTemplates": true
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { TestBed, ComponentFixture } from '@angular/core/testing';
2 |
3 | import { AppComponent } from './app.component';
4 |
5 | describe('App Component', () => {
6 | let component: AppComponent;
7 | let fixture: ComponentFixture;
8 |
9 | beforeEach(async () => {
10 | await TestBed.configureTestingModule({
11 | declarations: [ AppComponent ]
12 | })
13 | .compileComponents();
14 |
15 | fixture = TestBed.createComponent(AppComponent);
16 | component = fixture.componentInstance;
17 | fixture.detectChanges();
18 | });
19 |
20 | it('should have a title', () => {
21 | const compiled = fixture.nativeElement;
22 | const title = compiled.querySelector('h2').textContent;
23 | expect(title).toBe('Active Users');
24 | });
25 | });
--------------------------------------------------------------------------------
/src/app/services/web-storage.service.ts:
--------------------------------------------------------------------------------
1 | import { Injectable } from '@angular/core';
2 | import { HttpClient } from '@angular/common/http';
3 | import { Observable } from 'rxjs';
4 |
5 | @Injectable({
6 | providedIn: 'root'
7 | })
8 | export class WebStorageService {
9 |
10 | constructor(
11 | private http: HttpClient
12 | ) { }
13 |
14 | public get(key: string): string | null {
15 | return window.localStorage.getItem(key);
16 | }
17 |
18 | public set(key: string, value: string): void {
19 | window.localStorage.setItem(key, value);
20 | }
21 |
22 | public getRemote(): Observable {
23 | return this.http.get('/mock/api/filter');
24 | }
25 |
26 | public setRemote(payload: string): Observable {
27 | return this.http.put('/mock/api/filter', payload);
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/src/app/mocks/users.ts:
--------------------------------------------------------------------------------
1 | import { User } from '../user/user';
2 |
3 | export const USERS: User[] = [
4 | { name: 'Johnny Allen', locationId: 0 },
5 | { name: 'Jacqueline Brewer', locationId: 8 },
6 | { name: 'Maria Greene', locationId: 1 },
7 | { name: 'Theresa Mitchell', locationId: 9 },
8 | { name: 'Michael Davis', locationId: 2 },
9 | { name: 'Crystal Hansen', locationId: 10 },
10 | { name: 'Gloria Cooper', locationId: 3 },
11 | { name: 'Kelly Davis', locationId: 11 },
12 | { name: 'Ty Taylor', locationId: 4 },
13 | { name: 'Brooklyn Paquette', locationId: 12 },
14 | { name: 'Sebastian Belanger', locationId: 5 },
15 | { name: 'Callie Cote', locationId: 13 },
16 | { name: 'Nate Levesque', locationId: 6 },
17 | { name: 'Camden Chan', locationId: 14 },
18 | { name: 'Elliot Gauthier', locationId: 7 },
19 | { name: 'Gavin Paquette', locationId: 15 },
20 | ];
21 |
--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Social Network, Inc.
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
Social Network, Inc.
18 | Finding Users…
19 |
20 |
21 |
22 |
23 |
24 |
--------------------------------------------------------------------------------
/src/app/pipes/highlight-text.pipe.spec.ts:
--------------------------------------------------------------------------------
1 | import { HighlightTextPipe } from './highlight-text.pipe';
2 |
3 | describe('HighlightTextPipe', () => {
4 | const pipe = new HighlightTextPipe();
5 |
6 | it('create an instance', () => {
7 | expect(pipe).toBeTruthy();
8 | });
9 |
10 | it('wrap a simple string in a ', () => {
11 | expect(pipe.transform('foobar', 'foo')).toBe('foobar');
12 | });
13 |
14 | it('wrap an uppercase string in a ', () => {
15 | expect(pipe.transform('FOOBAR', 'foo')).toBe('FOOBAR');
16 | });
17 |
18 | it('wrap a string with spaces in a ', () => {
19 | expect(pipe.transform('FOO BAR', 'foo')).toBe('FOO BAR');
20 | });
21 |
22 | it('wrap multiple words in a ', () => {
23 | expect(pipe.transform('FOO FOO', 'foo')).toBe('FOOFOO');
24 | });
25 | });
26 |
--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
1 | // @ts-check
2 | // Protractor configuration file, see link for more information
3 | // https://github.com/angular/protractor/blob/master/lib/config.ts
4 |
5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
6 |
7 | /**
8 | * @type { import("protractor").Config }
9 | */
10 | exports.config = {
11 | allScriptsTimeout: 11000,
12 | specs: [
13 | './src/**/*.e2e-spec.ts'
14 | ],
15 | capabilities: {
16 | browserName: 'chrome'
17 | },
18 | directConnect: true,
19 | SELENIUM_PROMISE_MANAGER: false,
20 | baseUrl: 'http://localhost:4200/',
21 | framework: 'jasmine',
22 | jasmineNodeOpts: {
23 | showColors: true,
24 | defaultTimeoutInterval: 30000,
25 | print: function() {}
26 | },
27 | onPrepare() {
28 | require('ts-node').register({
29 | project: require('path').join(__dirname, './tsconfig.json')
30 | });
31 | jasmine.getEnv().addReporter(new SpecReporter({
32 | spec: {
33 | displayStacktrace: StacktraceOption.PRETTY
34 | }
35 | }));
36 | }
37 | };
--------------------------------------------------------------------------------
/src/app/user-list/user-list.component.spec.ts:
--------------------------------------------------------------------------------
1 | import { ComponentFixture, TestBed } from '@angular/core/testing';
2 |
3 | import { UserListComponent } from './user-list.component';
4 | import { WebStorageService } from '../services/web-storage.service';
5 |
6 | describe('UserListComponent', () => {
7 | let component: UserListComponent;
8 | let fixture: ComponentFixture;
9 |
10 | beforeEach(async () => {
11 | await TestBed.configureTestingModule({
12 | declarations: [ UserListComponent ],
13 | providers: [
14 | { provide: WebStorageService, useValue: jasmine.createSpyObj('WebStorageService', [ 'getRemote', 'setRemote' ]) }
15 | ]
16 | })
17 | .compileComponents();
18 | });
19 |
20 | beforeEach(() => {
21 | fixture = TestBed.createComponent(UserListComponent);
22 | component = fixture.componentInstance;
23 | fixture.detectChanges();
24 | });
25 |
26 | it('should create', () => {
27 | expect(component).toBeTruthy();
28 | });
29 | });
30 |
--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | 'env': {
3 | 'browser': true,
4 | 'es2021': true,
5 | 'node': true,
6 | 'jasmine': true,
7 | 'protractor': true
8 | },
9 | 'extends': [
10 | 'eslint:recommended',
11 | 'plugin:@typescript-eslint/recommended',
12 | 'plugin:import/errors',
13 | 'plugin:import/warnings',
14 | 'plugin:import/typescript',
15 | ],
16 | 'parser': '@typescript-eslint/parser',
17 | 'parserOptions': {
18 | 'ecmaVersion': 12,
19 | 'sourceType': 'module'
20 | },
21 | 'plugins': [
22 | '@typescript-eslint',
23 | 'prefer-arrow',
24 | 'jsdoc'
25 | ],
26 | 'rules': {
27 | 'indent': [
28 | 'error',
29 | 4
30 | ],
31 | 'linebreak-style': [
32 | 'error',
33 | 'unix'
34 | ],
35 | 'quotes': [
36 | 'error',
37 | 'single'
38 | ],
39 | 'semi': [
40 | 'error',
41 | 'always'
42 | ]
43 | }
44 | };
45 |
--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
1 | import { NgModule, ErrorHandler } from '@angular/core';
2 | import { BrowserModule } from '@angular/platform-browser';
3 | import { AppRoutingModule } from './app-routing.module';
4 | import { AppComponent } from './app.component';
5 | import { UserListComponent } from './user-list/user-list.component';
6 |
7 | import { ErrorMetadataService } from './services/error-metadata.service';
8 | import { HighlightTextPipe } from './pipes/highlight-text.pipe';
9 | import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
10 | import { UserListInterceptorService } from './mocks/user-list-interceptor.service';
11 |
12 | @NgModule({
13 | declarations: [
14 | AppComponent,
15 | UserListComponent,
16 | HighlightTextPipe
17 | ],
18 | imports: [
19 | BrowserModule,
20 | AppRoutingModule,
21 | HttpClientModule
22 | ],
23 | providers: [
24 | // { provide: ErrorHandler, useClass: ErrorMetadataService },
25 | { provide: HTTP_INTERCEPTORS, useClass: UserListInterceptorService, multi: true }
26 | ],
27 | bootstrap: [AppComponent]
28 | })
29 | export class AppModule { }
30 |
--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE.md:
--------------------------------------------------------------------------------
1 |
7 |
8 | ## Issue Overview
9 |
10 |
11 | ## Describe your environment
12 |
13 |
14 | ## Steps to Reproduce
15 |
16 | 1.
17 | 2.
18 | 3.
19 | 4.
20 |
21 | ## Expected Behavior
22 |
23 |
24 | ## Current Behavior
25 |
26 |
27 | ## Possible Solution
28 |
29 |
30 | ## Screenshots / Video
31 |
32 |
33 | ## Related Issues
34 |
35 |
--------------------------------------------------------------------------------
/src/app/user-list/user-list.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, OnInit } from '@angular/core';
2 | import { User } from '../user/user';
3 | import { UserListService } from './user-list.service';
4 |
5 | import { WebStorageService } from '../services/web-storage.service';
6 |
7 | @Component({
8 | selector: 'app-user-list',
9 | templateUrl: './user-list.component.html',
10 | styleUrls: ['./user-list.component.css']
11 | })
12 | export class UserListComponent implements OnInit {
13 | public users: Promise | null = null;
14 |
15 | constructor(
16 | private userListService: UserListService,
17 | private webStorageService: WebStorageService
18 | ) { }
19 |
20 | public async ngOnInit(): Promise {
21 | this.webStorageService.getRemote().subscribe(filtered => {
22 | this.users = (filtered === null) ? this.userListService.getAll() : this.userListService.filter(filtered);
23 | }, error => {
24 | console.error('ngOnInit Error', error);
25 | });
26 | }
27 |
28 | public async update(text: string): Promise {
29 | this.webStorageService.setRemote(text).subscribe(filtered => {
30 | this.users = (filtered === null) ? this.userListService.getAll() : this.userListService.filter(filtered);
31 | });
32 | }
33 |
34 | }
35 |
--------------------------------------------------------------------------------
/src/app/mocks/user-list-interceptor.service.ts:
--------------------------------------------------------------------------------
1 | import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
2 | import { Injectable } from '@angular/core';
3 | import { Observable } from 'rxjs';
4 |
5 | @Injectable({
6 | providedIn: 'root'
7 | })
8 | export class UserListInterceptorService implements HttpInterceptor {
9 | private readonly API_URL = '/mock/api/filter';
10 | private readonly STORAGE_KEY = 'MOCK_API_FILTER';
11 |
12 | intercept(request: HttpRequest, next: HttpHandler): Observable> {
13 |
14 | if (request.url === this.API_URL && request.method === 'GET') {
15 | return this.getFilter();
16 | }
17 |
18 | if (request.url === this.API_URL && request.method === 'PUT') {
19 | return this.setFilter(request.body);
20 | }
21 |
22 | return next.handle(request);
23 | }
24 |
25 | private getFilter(): Observable> {
26 | return new Observable(observer => {
27 | observer.next(new HttpResponse({
28 | status: 200,
29 | body: window.localStorage.getItem(this.STORAGE_KEY)
30 | }));
31 |
32 | observer.complete();
33 | });
34 | }
35 |
36 | private setFilter(filter: string): Observable> {
37 | window.localStorage.setItem(this.STORAGE_KEY, filter);
38 | return this.getFilter();
39 | }
40 |
41 | }
42 |
--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
1 | // Karma configuration file, see link for more information
2 | // https://karma-runner.github.io/1.0/config/configuration-file.html
3 |
4 | module.exports = function (config) {
5 | config.set({
6 | basePath: '',
7 | frameworks: ['jasmine', '@angular-devkit/build-angular'],
8 | plugins: [
9 | require('karma-jasmine'),
10 | require('karma-chrome-launcher'),
11 | require('karma-jasmine-html-reporter'),
12 | require('karma-coverage'),
13 | require('@angular-devkit/build-angular/plugins/karma')
14 | ],
15 | client: {
16 | jasmine: {
17 | // you can add configuration options for Jasmine here
18 | // the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
19 | // for example, you can disable the random execution with `random: false`
20 | // or set a specific seed with `seed: 4321`
21 | },
22 | clearContext: false // leave Jasmine Spec Runner output visible in browser
23 | },
24 | jasmineHtmlReporter: {
25 | suppressAll: true // removes the duplicated traces
26 | },
27 | coverageReporter: {
28 | dir: require('path').join(__dirname, './coverage/ng-testing-and-debugging'),
29 | subdir: '.',
30 | reporters: [
31 | { type: 'html' },
32 | { type: 'text-summary' }
33 | ]
34 | },
35 | reporters: ['progress', 'kjhtml'],
36 | port: 9876,
37 | colors: true,
38 | logLevel: config.LOG_INFO,
39 | autoWatch: true,
40 | browsers: ['Chrome'],
41 | singleRun: false,
42 | restartOnFileChange: true
43 | });
44 | };
45 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "ng-testing-and-debugging",
3 | "version": "2021.0.0",
4 | "scripts": {
5 | "ng": "ng",
6 | "start": "ng serve",
7 | "build": "ng build",
8 | "test": "ng test",
9 | "lint": "ng lint",
10 | "e2e": "ng e2e"
11 | },
12 | "private": true,
13 | "dependencies": {
14 | "@angular/animations": "~11.0.6",
15 | "@angular/common": "~11.0.6",
16 | "@angular/compiler": "~11.0.6",
17 | "@angular/core": "~11.0.6",
18 | "@angular/forms": "~11.0.6",
19 | "@angular/platform-browser": "~11.0.6",
20 | "@angular/platform-browser-dynamic": "~11.0.6",
21 | "@angular/router": "~11.0.6",
22 | "rxjs": "~6.6.0",
23 | "tslib": "^2.0.0",
24 | "zone.js": "~0.10.2"
25 | },
26 | "devDependencies": {
27 | "@angular-devkit/build-angular": "~0.1100.6",
28 | "@angular/cli": "~11.0.6",
29 | "@angular/compiler-cli": "~11.0.6",
30 | "@types/jasmine": "~3.6.0",
31 | "@types/node": "^12.11.1",
32 | "@typescript-eslint/eslint-plugin": "^4.16.1",
33 | "@typescript-eslint/parser": "^4.16.1",
34 | "codelyzer": "^6.0.0",
35 | "eslint": "^7.21.0",
36 | "eslint-plugin-import": "^2.22.1",
37 | "eslint-plugin-jsdoc": "^32.2.0",
38 | "eslint-plugin-prefer-arrow": "^1.2.3",
39 | "jasmine-core": "~3.6.0",
40 | "jasmine-spec-reporter": "~5.0.0",
41 | "karma": "~5.1.0",
42 | "karma-chrome-launcher": "~3.1.0",
43 | "karma-coverage": "~2.0.3",
44 | "karma-jasmine": "~4.0.0",
45 | "karma-jasmine-html-reporter": "^1.5.0",
46 | "protractor": "~7.0.0",
47 | "ts-node": "~8.3.0",
48 | "typescript": "~4.0.2"
49 | }
50 | }
51 |
--------------------------------------------------------------------------------
/NOTICE:
--------------------------------------------------------------------------------
1 | Copyright 2021 LinkedIn Corporation
2 | All Rights Reserved.
3 |
4 | Licensed under the LinkedIn Learning Exercise File License (the "License").
5 | See LICENSE in the project root for license information.
6 |
7 | ATTRIBUTIONS:
8 | Angular
9 | https://github.com/angular/angular
10 | Copyright (c) 2010-2021 Google LLC. https://angular.io/license
11 | License: MIT
12 | https://opensource.org/licenses/MIT
13 |
14 | Please note, this project may automatically load third party code from external
15 | repositories (for example, NPM modules, Composer packages, or other dependencies).
16 | If so, such third party code may be subject to other license terms than as set
17 | forth above. In addition, such third party code may also depend on and load
18 | multiple tiers of dependencies. Please review the applicable licenses of the
19 | additional dependencies.
20 |
21 | =-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
22 |
23 | MIT License
24 |
25 | Permission is hereby granted, free of charge, to any person obtaining a copy
26 | of this software and associated documentation files (the "Software"), to deal
27 | in the Software without restriction, including without limitation the rights
28 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
29 | copies of the Software, and to permit persons to whom the Software is
30 | furnished to do so, subject to the following conditions:
31 |
32 | The above copyright notice and this permission notice shall be included in all
33 | copies or substantial portions of the Software.
34 |
35 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
36 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
37 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
38 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
39 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
40 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
41 | SOFTWARE.
42 |
--------------------------------------------------------------------------------
/src/polyfills.ts:
--------------------------------------------------------------------------------
1 | /**
2 | * This file includes polyfills needed by Angular and is loaded before the app.
3 | * You can add your own extra polyfills to this file.
4 | *
5 | * This file is divided into 2 sections:
6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main
8 | * file.
9 | *
10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that
11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera),
12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile.
13 | *
14 | * Learn more in https://angular.io/guide/browser-support
15 | */
16 |
17 | /***************************************************************************************************
18 | * BROWSER POLYFILLS
19 | */
20 |
21 | /** IE11 requires the following for NgClass support on SVG elements */
22 | // import 'classlist.js'; // Run `npm install --save classlist.js`.
23 |
24 | /**
25 | * Web Animations `@angular/platform-browser/animations`
26 | * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27 | * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28 | */
29 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30 |
31 | /**
32 | * By default, zone.js will patch all possible macroTask and DomEvents
33 | * user can disable parts of macroTask/DomEvents patch by setting following flags
34 | * because those flags need to be set before `zone.js` being loaded, and webpack
35 | * will put import in the top of bundle, so user need to create a separate file
36 | * in this directory (for example: zone-flags.ts), and put the following flags
37 | * into that file, and then add the following code before importing zone.js.
38 | * import './zone-flags';
39 | *
40 | * The flags allowed in zone-flags.ts are listed here.
41 | *
42 | * The following flags will work for all browsers.
43 | *
44 | * (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
45 | * (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
46 | * (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
47 | *
48 | * in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
49 | * with the following flag, it will bypass `zone.js` patch for IE/Edge
50 | *
51 | * (window as any).__Zone_enable_cross_context_check = true;
52 | *
53 | */
54 |
55 | /***************************************************************************************************
56 | * Zone JS is required by default for Angular itself.
57 | */
58 | import 'zone.js/dist/zone'; // Included with Angular CLI.
59 |
60 |
61 | /***************************************************************************************************
62 | * APPLICATION IMPORTS
63 | */
64 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Angular: Testing and Debugging
2 | This is the repository for the LinkedIn Learning course Angular: Testing and Debugging. The full course is available from [LinkedIn Learning][lil-course-url].
3 |
4 | ![Angular: Testing and Debugging][lil-thumbnail-url]
5 | Errors caused by missing dependencies, undefined variables, or poorly formatted data can cause your web application to stop working. In this course, learn how to track down and eliminate these types of errors in your Angular applications through the process of testing and debugging. Instructor Derek Peruo breaks down common error messages and goes over a variety of testing and debugging options. He also covers code linting, shares some tips and tricks for avoiding pitfalls during development, and goes into writing custom error handlers to make it easier to work with errors as your application grows.
6 |
7 | ## Instructions
8 | This repository has branches for each of the videos in the course. You can use the branch pop up menu in github to switch to a specific branch and take a look at the course at that stage, or you can add `/tree/BRANCH_NAME` to the URL to go to the branch you want to access.
9 |
10 | ## Branches
11 | The branches are structured to correspond to the videos in the course. The naming convention is `CHAPTER#_MOVIE#`. As an example, the branch named `02_03` corresponds to the second chapter and the third video in that chapter.
12 | Some branches will have a beginning and an end state. These are marked with the letters `b` for "beginning" and `e` for "end". The `b` branch contains the code as it is at the beginning of the movie. The `e` branch contains the code as it is at the end of the movie. The `main` branch holds the final state of the code when in the course.
13 |
14 | When switching from one exercise files branch to the next after making changes to the files, you may get a message like this:
15 |
16 | error: Your local changes to the following files would be overwritten by checkout: [files]
17 | Please commit your changes or stash them before you switch branches.
18 | Aborting
19 |
20 | To resolve this issue:
21 |
22 | Add changes to git using this command: git add .
23 | Commit changes using this command: git commit -m "some message"
24 |
25 | ## Installing
26 | 1. To use these exercise files, you must have the following installed:
27 | - [Node and npm](https://nodejs.org/)
28 | - [Visual Studio Code](https://code.visualstudio.com/) (optional - use any editor you like)
29 | - [Google Chrome](https://www.google.com/chrome/) (optional - use any browser you like)
30 | - Mac, Windows, Linux
31 | 2. Clone this repository into your local machine using the terminal (Mac), CMD (Windows), or a GUI tool like [SourceTree](https://www.sourcetreeapp.com/).
32 | 3. Run `npm install` from the `main` branch to install project dependencies.
33 |
34 | ### Instructor
35 |
36 | **Derek Peruo**
37 |
38 | _Angular.js Architect_
39 |
40 | Check out my other courses on [LinkedIn Learning](https://www.linkedin.com/learning/instructors/derek-peruo?u=104).
41 |
42 | [lil-course-url]: https://www.linkedin.com/learning/angular-testing-and-debugging-10201318
43 | [lil-thumbnail-url]: https://cdn.lynda.com/course/2875342/2875342-1619631339971-16x9.jpg
44 |
45 |
--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "tslint:recommended",
3 | "rulesDirectory": [
4 | "codelyzer"
5 | ],
6 | "rules": {
7 | "align": {
8 | "options": [
9 | "parameters",
10 | "statements"
11 | ]
12 | },
13 | "array-type": false,
14 | "arrow-return-shorthand": true,
15 | "curly": true,
16 | "deprecation": {
17 | "severity": "warning"
18 | },
19 | "eofline": true,
20 | "import-blacklist": [
21 | true,
22 | "rxjs/Rx"
23 | ],
24 | "import-spacing": true,
25 | "indent": {
26 | "options": [
27 | "spaces"
28 | ]
29 | },
30 | "max-classes-per-file": false,
31 | "max-line-length": [
32 | true,
33 | 140
34 | ],
35 | "member-ordering": [
36 | true,
37 | {
38 | "order": [
39 | "static-field",
40 | "instance-field",
41 | "static-method",
42 | "instance-method"
43 | ]
44 | }
45 | ],
46 | "no-console": [
47 | true,
48 | "debug",
49 | "info",
50 | "time",
51 | "timeEnd",
52 | "trace"
53 | ],
54 | "no-empty": false,
55 | "no-inferrable-types": [
56 | true,
57 | "ignore-params"
58 | ],
59 | "no-non-null-assertion": true,
60 | "no-redundant-jsdoc": true,
61 | "no-switch-case-fall-through": true,
62 | "no-var-requires": false,
63 | "object-literal-key-quotes": [
64 | true,
65 | "as-needed"
66 | ],
67 | "quotemark": [
68 | true,
69 | "single"
70 | ],
71 | "semicolon": {
72 | "options": [
73 | "always"
74 | ]
75 | },
76 | "space-before-function-paren": {
77 | "options": {
78 | "anonymous": "never",
79 | "asyncArrow": "always",
80 | "constructor": "never",
81 | "method": "never",
82 | "named": "never"
83 | }
84 | },
85 | "typedef": [
86 | true,
87 | "call-signature"
88 | ],
89 | "typedef-whitespace": {
90 | "options": [
91 | {
92 | "call-signature": "nospace",
93 | "index-signature": "nospace",
94 | "parameter": "nospace",
95 | "property-declaration": "nospace",
96 | "variable-declaration": "nospace"
97 | },
98 | {
99 | "call-signature": "onespace",
100 | "index-signature": "onespace",
101 | "parameter": "onespace",
102 | "property-declaration": "onespace",
103 | "variable-declaration": "onespace"
104 | }
105 | ]
106 | },
107 | "variable-name": {
108 | "options": [
109 | "ban-keywords",
110 | "check-format",
111 | "allow-pascal-case"
112 | ]
113 | },
114 | "whitespace": {
115 | "options": [
116 | "check-branch",
117 | "check-decl",
118 | "check-operator",
119 | "check-separator",
120 | "check-type",
121 | "check-typecast"
122 | ]
123 | },
124 | "component-class-suffix": true,
125 | "contextual-lifecycle": true,
126 | "directive-class-suffix": true,
127 | "no-conflicting-lifecycle": true,
128 | "no-host-metadata-property": true,
129 | "no-input-rename": true,
130 | "no-inputs-metadata-property": true,
131 | "no-output-native": true,
132 | "no-output-on-prefix": true,
133 | "no-output-rename": true,
134 | "no-outputs-metadata-property": true,
135 | "template-banana-in-box": true,
136 | "template-no-negated-async": true,
137 | "use-lifecycle-interface": true,
138 | "use-pipe-transform-interface": true,
139 | "directive-selector": [
140 | true,
141 | "attribute",
142 | "app",
143 | "camelCase"
144 | ],
145 | "component-selector": [
146 | true,
147 | "element",
148 | "app",
149 | "kebab-case"
150 | ]
151 | }
152 | }
153 |
--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
1 | {
2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3 | "version": 1,
4 | "newProjectRoot": "projects",
5 | "projects": {
6 | "ng-testing-and-debugging": {
7 | "projectType": "application",
8 | "schematics": {
9 | "@schematics/angular:application": {
10 | "strict": true
11 | }
12 | },
13 | "root": "",
14 | "sourceRoot": "src",
15 | "prefix": "app",
16 | "architect": {
17 | "build": {
18 | "builder": "@angular-devkit/build-angular:browser",
19 | "options": {
20 | "outputPath": "dist/ng-testing-and-debugging",
21 | "index": "src/index.html",
22 | "main": "src/main.ts",
23 | "polyfills": "src/polyfills.ts",
24 | "tsConfig": "tsconfig.app.json",
25 | "aot": true,
26 | "assets": [
27 | "src/favicon.ico",
28 | "src/assets"
29 | ],
30 | "styles": [
31 | "src/styles.css"
32 | ],
33 | "scripts": []
34 | },
35 | "configurations": {
36 | "production": {
37 | "fileReplacements": [
38 | {
39 | "replace": "src/environments/environment.ts",
40 | "with": "src/environments/environment.prod.ts"
41 | }
42 | ],
43 | "optimization": true,
44 | "outputHashing": "all",
45 | "sourceMap": false,
46 | "namedChunks": false,
47 | "extractLicenses": true,
48 | "vendorChunk": false,
49 | "buildOptimizer": true,
50 | "budgets": [
51 | {
52 | "type": "initial",
53 | "maximumWarning": "500kb",
54 | "maximumError": "1mb"
55 | },
56 | {
57 | "type": "anyComponentStyle",
58 | "maximumWarning": "2kb",
59 | "maximumError": "4kb"
60 | }
61 | ]
62 | }
63 | }
64 | },
65 | "serve": {
66 | "builder": "@angular-devkit/build-angular:dev-server",
67 | "options": {
68 | "browserTarget": "ng-testing-and-debugging:build"
69 | },
70 | "configurations": {
71 | "production": {
72 | "browserTarget": "ng-testing-and-debugging:build:production"
73 | }
74 | }
75 | },
76 | "extract-i18n": {
77 | "builder": "@angular-devkit/build-angular:extract-i18n",
78 | "options": {
79 | "browserTarget": "ng-testing-and-debugging:build"
80 | }
81 | },
82 | "test": {
83 | "builder": "@angular-devkit/build-angular:karma",
84 | "options": {
85 | "main": "src/test.ts",
86 | "polyfills": "src/polyfills.ts",
87 | "tsConfig": "tsconfig.spec.json",
88 | "karmaConfig": "karma.conf.js",
89 | "assets": [
90 | "src/favicon.ico",
91 | "src/assets"
92 | ],
93 | "styles": [
94 | "src/styles.css"
95 | ],
96 | "scripts": []
97 | }
98 | },
99 | "lint": {
100 | "builder": "@angular-devkit/build-angular:tslint",
101 | "options": {
102 | "tsConfig": [
103 | "tsconfig.app.json",
104 | "tsconfig.spec.json",
105 | "e2e/tsconfig.json"
106 | ],
107 | "exclude": [
108 | "**/node_modules/**"
109 | ]
110 | }
111 | },
112 | "e2e": {
113 | "builder": "@angular-devkit/build-angular:protractor",
114 | "options": {
115 | "protractorConfig": "e2e/protractor.conf.js",
116 | "devServerTarget": "ng-testing-and-debugging:serve"
117 | },
118 | "configurations": {
119 | "production": {
120 | "devServerTarget": "ng-testing-and-debugging:serve:production"
121 | }
122 | }
123 | }
124 | }
125 | }
126 | },
127 | "defaultProject": "ng-testing-and-debugging"
128 | }
129 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | LinkedIn Learning Exercise Files License Agreement
2 | ==================================================
3 |
4 | This License Agreement (the "Agreement") is a binding legal agreement
5 | between you (as an individual or entity, as applicable) and LinkedIn
6 | Corporation (“LinkedIn”). By downloading or using the LinkedIn Learning
7 | exercise files in this repository (“Licensed Materials”), you agree to
8 | be bound by the terms of this Agreement. If you do not agree to these
9 | terms, do not download or use the Licensed Materials.
10 |
11 | 1. License.
12 | - a. Subject to the terms of this Agreement, LinkedIn hereby grants LinkedIn
13 | members during their LinkedIn Learning subscription a non-exclusive,
14 | non-transferable copyright license, for internal use only, to 1) make a
15 | reasonable number of copies of the Licensed Materials, and 2) make
16 | derivative works of the Licensed Materials for the sole purpose of
17 | practicing skills taught in LinkedIn Learning courses.
18 | - b. Distribution. Unless otherwise noted in the Licensed Materials, subject
19 | to the terms of this Agreement, LinkedIn hereby grants LinkedIn members
20 | with a LinkedIn Learning subscription a non-exclusive, non-transferable
21 | copyright license to distribute the Licensed Materials, except the
22 | Licensed Materials may not be included in any product or service (or
23 | otherwise used) to instruct or educate others.
24 |
25 | 2. Restrictions and Intellectual Property.
26 | - a. You may not to use, modify, copy, make derivative works of, publish,
27 | distribute, rent, lease, sell, sublicense, assign or otherwise transfer the
28 | Licensed Materials, except as expressly set forth above in Section 1.
29 | - b. Linkedin (and its licensors) retains its intellectual property rights
30 | in the Licensed Materials. Except as expressly set forth in Section 1,
31 | LinkedIn grants no licenses.
32 | - c. You indemnify LinkedIn and its licensors and affiliates for i) any
33 | alleged infringement or misappropriation of any intellectual property rights
34 | of any third party based on modifications you make to the Licensed Materials,
35 | ii) any claims arising from your use or distribution of all or part of the
36 | Licensed Materials and iii) a breach of this Agreement. You will defend, hold
37 | harmless, and indemnify LinkedIn and its affiliates (and our and their
38 | respective employees, shareholders, and directors) from any claim or action
39 | brought by a third party, including all damages, liabilities, costs and
40 | expenses, including reasonable attorneys’ fees, to the extent resulting from,
41 | alleged to have resulted from, or in connection with: (a) your breach of your
42 | obligations herein; or (b) your use or distribution of any Licensed Materials.
43 |
44 | 3. Open source. This code may include open source software, which may be
45 | subject to other license terms as provided in the files.
46 |
47 | 4. Warranty Disclaimer. LINKEDIN PROVIDES THE LICENSED MATERIALS ON AN “AS IS”
48 | AND “AS AVAILABLE” BASIS. LINKEDIN MAKES NO REPRESENTATION OR WARRANTY,
49 | WHETHER EXPRESS OR IMPLIED, ABOUT THE LICENSED MATERIALS, INCLUDING ANY
50 | REPRESENTATION THAT THE LICENSED MATERIALS WILL BE FREE OF ERRORS, BUGS OR
51 | INTERRUPTIONS, OR THAT THE LICENSED MATERIALS ARE ACCURATE, COMPLETE OR
52 | OTHERWISE VALID. TO THE FULLEST EXTENT PERMITTED BY LAW, LINKEDIN AND ITS
53 | AFFILIATES DISCLAIM ANY IMPLIED OR STATUTORY WARRANTY OR CONDITION, INCLUDING
54 | ANY IMPLIED WARRANTY OR CONDITION OF MERCHANTABILITY OR FITNESS FOR A
55 | PARTICULAR PURPOSE, AVAILABILITY, SECURITY, TITLE AND/OR NON-INFRINGEMENT.
56 | YOUR USE OF THE LICENSED MATERIALS IS AT YOUR OWN DISCRETION AND RISK, AND
57 | YOU WILL BE SOLELY RESPONSIBLE FOR ANY DAMAGE THAT RESULTS FROM USE OF THE
58 | LICENSED MATERIALS TO YOUR COMPUTER SYSTEM OR LOSS OF DATA. NO ADVICE OR
59 | INFORMATION, WHETHER ORAL OR WRITTEN, OBTAINED BY YOU FROM US OR THROUGH OR
60 | FROM THE LICENSED MATERIALS WILL CREATE ANY WARRANTY OR CONDITION NOT
61 | EXPRESSLY STATED IN THESE TERMS.
62 |
63 | 5. Limitation of Liability. LINKEDIN SHALL NOT BE LIABLE FOR ANY INDIRECT,
64 | INCIDENTAL, SPECIAL, PUNITIVE, CONSEQUENTIAL OR EXEMPLARY DAMAGES, INCLUDING
65 | BUT NOT LIMITED TO, DAMAGES FOR LOSS OF PROFITS, GOODWILL, USE, DATA OR OTHER
66 | INTANGIBLE LOSSES . IN NO EVENT WILL LINKEDIN'S AGGREGATE LIABILITY TO YOU
67 | EXCEED $100. THIS LIMITATION OF LIABILITY SHALL:
68 | - i. APPLY REGARDLESS OF WHETHER (A) YOU BASE YOUR CLAIM ON CONTRACT, TORT,
69 | STATUTE, OR ANY OTHER LEGAL THEORY, (B) WE KNEW OR SHOULD HAVE KNOWN ABOUT
70 | THE POSSIBILITY OF SUCH DAMAGES, OR (C) THE LIMITED REMEDIES PROVIDED IN THIS
71 | SECTION FAIL OF THEIR ESSENTIAL PURPOSE; AND
72 | - ii. NOT APPLY TO ANY DAMAGE THAT LINKEDIN MAY CAUSE YOU INTENTIONALLY OR
73 | KNOWINGLY IN VIOLATION OF THESE TERMS OR APPLICABLE LAW, OR AS OTHERWISE
74 | MANDATED BY APPLICABLE LAW THAT CANNOT BE DISCLAIMED IN THESE TERMS.
75 |
76 | 6. Termination. This Agreement automatically terminates upon your breach of
77 | this Agreement or termination of your LinkedIn Learning subscription. On
78 | termination, all licenses granted under this Agreement will terminate
79 | immediately and you will delete the Licensed Materials. Sections 2-7 of this
80 | Agreement survive any termination of this Agreement. LinkedIn may discontinue
81 | the availability of some or all of the Licensed Materials at any time for any
82 | reason.
83 |
84 | 7. Miscellaneous. This Agreement will be governed by and construed in
85 | accordance with the laws of the State of California without regard to conflict
86 | of laws principles. The exclusive forum for any disputes arising out of or
87 | relating to this Agreement shall be an appropriate federal or state court
88 | sitting in the County of Santa Clara, State of California. If LinkedIn does
89 | not act to enforce a breach of this Agreement, that does not mean that
90 | LinkedIn has waived its right to enforce this Agreement. The Agreement does
91 | not create a partnership, agency relationship, or joint venture between the
92 | parties. Neither party has the power or authority to bind the other or to
93 | create any obligation or responsibility on behalf of the other. You may not,
94 | without LinkedIn’s prior written consent, assign or delegate any rights or
95 | obligations under these terms, including in connection with a change of
96 | control. Any purported assignment and delegation shall be ineffective. The
97 | Agreement shall bind and inure to the benefit of the parties, their respective
98 | successors and permitted assigns. If any provision of the Agreement is
99 | unenforceable, that provision will be modified to render it enforceable to the
100 | extent possible to give effect to the parties’ intentions and the remaining
101 | provisions will not be affected. This Agreement is the only agreement between
102 | you and LinkedIn regarding the Licensed Materials, and supersedes all prior
103 | agreements relating to the Licensed Materials.
104 |
105 | Last Updated: March 2019
106 |
--------------------------------------------------------------------------------