├── src
    ├── assets
    │   ├── .gitkeep
    │   ├── listing.jpg
    │   └── homes.json
    ├── app
    │   ├── app.component.less
    │   ├── src
    │   │   ├── components
    │   │   │   ├── book
    │   │   │   │   ├── book.component.less
    │   │   │   │   ├── book.component.html
    │   │   │   │   ├── book.component.ts
    │   │   │   │   └── book.component.spec.ts
    │   │   │   ├── header
    │   │   │   │   ├── header.component.less
    │   │   │   │   ├── header.component.ts
    │   │   │   │   ├── header.component.spec.ts
    │   │   │   │   └── header.component.html
    │   │   │   └── homes
    │   │   │   │   ├── homes.component.less
    │   │   │   │   ├── homes.component.ts
    │   │   │   │   ├── homes.component.html
    │   │   │   │   └── homes.component.spec.ts
    │   │   └── services
    │   │   │   ├── dialog.service.ts
    │   │   │   ├── dialog.service.spec.ts
    │   │   │   ├── data.service.ts
    │   │   │   └── data.service.spec.ts
    │   ├── app.component.spec.ts
    │   ├── app.component.html
    │   ├── app.component.ts
    │   └── app.module.ts
    ├── favicon.ico
    ├── environments
    │   ├── environment.prod.ts
    │   └── environment.ts
    ├── styles.less
    ├── tsconfig.app.json
    ├── tslint.json
    ├── tsconfig.spec.json
    ├── index.html
    ├── main.ts
    ├── browserslist
    ├── test.ts
    ├── karma.conf.js
    └── polyfills.ts
├── README.md
├── e2e
    ├── tsconfig.e2e.json
    ├── src
    │   ├── app.po.ts
    │   └── app.e2e-spec.ts
    └── protractor.conf.js
├── .editorconfig
├── tsconfig.json
├── .gitignore
├── package.json
├── tslint.json
└── angular.json


/src/assets/.gitkeep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.less:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/src/components/book/book.component.less:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Test-Driven Development with Angular
2 | 


--------------------------------------------------------------------------------
/src/app/src/components/header/header.component.less:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/src/components/homes/homes.component.less:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/src/app/app.component.spec.ts:
--------------------------------------------------------------------------------
1 | describe('AppComponent', () => {
2 | });
3 | 


--------------------------------------------------------------------------------
/src/app/app.component.html:
--------------------------------------------------------------------------------
1 | <app-header></app-header>
2 | <app-homes></app-homes>
3 | 


--------------------------------------------------------------------------------
/src/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/irek02/tdd-angular/HEAD/src/favicon.ico


--------------------------------------------------------------------------------
/src/assets/listing.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/irek02/tdd-angular/HEAD/src/assets/listing.jpg


--------------------------------------------------------------------------------
/src/environments/environment.prod.ts:
--------------------------------------------------------------------------------
1 | export const environment = {
2 |   production: true
3 | };
4 | 


--------------------------------------------------------------------------------
/src/styles.less:
--------------------------------------------------------------------------------
1 | @import "../node_modules/uikit/src/less/uikit.theme.less";
2 | @import "~@angular/material/prebuilt-themes/indigo-pink.css";
3 | 


--------------------------------------------------------------------------------
/src/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "types": []
 6 |   },
 7 |   "exclude": [
 8 |     "test.ts",
 9 |     "**/*.spec.ts"
10 |   ]
11 | }
12 | 


--------------------------------------------------------------------------------
/src/app/app.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-root',
 5 |   templateUrl: './app.component.html',
 6 |   styleUrls: ['./app.component.less']
 7 | })
 8 | export class AppComponent {
 9 |   title = 'tdd-angular';
10 | }
11 | 


--------------------------------------------------------------------------------
/e2e/tsconfig.e2e.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/app",
 5 |     "module": "commonjs",
 6 |     "target": "es5",
 7 |     "types": [
 8 |       "jasmine",
 9 |       "jasminewd2",
10 |       "node"
11 |     ]
12 |   }
13 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # Editor configuration, see https://editorconfig.org
 2 | root = true
 3 | 
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 2
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.md]
12 | max_line_length = off
13 | trim_trailing_whitespace = false
14 | 


--------------------------------------------------------------------------------
/e2e/src/app.po.ts:
--------------------------------------------------------------------------------
 1 | import { browser, by, element } from 'protractor';
 2 | 
 3 | export class AppPage {
 4 |   navigateTo() {
 5 |     return browser.get(browser.baseUrl) as Promise<any>;
 6 |   }
 7 | 
 8 |   getTitleText() {
 9 |     return element(by.css('app-root h1')).getText() as Promise<string>;
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tslint.json",
 3 |   "rules": {
 4 |     "directive-selector": [
 5 |       true,
 6 |       "attribute",
 7 |       "app",
 8 |       "camelCase"
 9 |     ],
10 |     "component-selector": [
11 |       true,
12 |       "element",
13 |       "app",
14 |       "kebab-case"
15 |     ]
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/src/tsconfig.spec.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "../tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "outDir": "../out-tsc/spec",
 5 |     "types": [
 6 |       "jasmine",
 7 |       "node"
 8 |     ]
 9 |   },
10 |   "files": [
11 |     "test.ts",
12 |     "polyfills.ts"
13 |   ],
14 |   "include": [
15 |     "**/*.spec.ts",
16 |     "**/*.d.ts"
17 |   ]
18 | }
19 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | <head>
 4 |   <meta charset="utf-8">
 5 |   <title>TddAngular</title>
 6 |   <base href="/">
 7 | 
 8 |   <meta name="viewport" content="width=device-width, initial-scale=1">
 9 |   <link rel="icon" type="image/x-icon" href="favicon.ico">
10 | </head>
11 | <body>
12 |   <app-root></app-root>
13 | </body>
14 | </html>
15 | 


--------------------------------------------------------------------------------
/src/app/src/services/dialog.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { MatDialog } from '@angular/material/dialog';
 3 | 
 4 | @Injectable({
 5 |   providedIn: 'root'
 6 | })
 7 | export class DialogService {
 8 | 
 9 |   constructor(public dialog: MatDialog) { }
10 | 
11 |   open(component, info) {
12 |     this.dialog.open(component, info);
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/app/src/components/header/header.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | 
 3 | @Component({
 4 |   selector: 'app-header',
 5 |   templateUrl: './header.component.html',
 6 |   styleUrls: ['./header.component.less']
 7 | })
 8 | export class HeaderComponent implements OnInit {
 9 | 
10 |   constructor() { }
11 | 
12 |   ngOnInit() {
13 |   }
14 | 
15 | }
16 | 


--------------------------------------------------------------------------------
/src/app/src/services/dialog.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed } from '@angular/core/testing';
 2 | 
 3 | import { DialogService } from './dialog.service';
 4 | 
 5 | xdescribe('DialogService', () => {
 6 |   beforeEach(() => TestBed.configureTestingModule({}));
 7 | 
 8 |   it('should be created', () => {
 9 |     const service: DialogService = TestBed.get(DialogService);
10 |     expect(service).toBeTruthy();
11 |   });
12 | });
13 | 


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
 1 | import { enableProdMode } from '@angular/core';
 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 3 | 
 4 | import { AppModule } from './app/app.module';
 5 | import { environment } from './environments/environment';
 6 | 
 7 | if (environment.production) {
 8 |   enableProdMode();
 9 | }
10 | 
11 | platformBrowserDynamic().bootstrapModule(AppModule)
12 |   .catch(err => console.error(err));
13 | 


--------------------------------------------------------------------------------
/src/browserslist:
--------------------------------------------------------------------------------
 1 | # This file is currently used by autoprefixer to adjust CSS to support the below specified browsers
 2 | # For additional information regarding the format and rule options, please see:
 3 | # https://github.com/browserslist/browserslist#queries
 4 | #
 5 | # For IE 9-11 support, please remove 'not' from the last line of the file and adjust as needed
 6 | 
 7 | > 0.5%
 8 | last 2 versions
 9 | Firefox ESR
10 | not dead
11 | not IE 9-11


--------------------------------------------------------------------------------
/src/assets/homes.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "title": "Home 1",
 4 |     "image": "assets/listing.jpg",
 5 |     "location": "new york",
 6 |     "price": "125"
 7 |   },
 8 |   {
 9 |     "title": "Home 2",
10 |     "image": "assets/listing.jpg",
11 |     "location": "boston",
12 |     "price": "225"
13 |   },
14 |   {
15 |     "title": "Home 3",
16 |     "image": "assets/listing.jpg",
17 |     "location": "chicago",
18 |     "price": "325"
19 |   }
20 | ]
21 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compileOnSave": false,
 3 |   "compilerOptions": {
 4 |     "baseUrl": "./",
 5 |     "outDir": "./dist/out-tsc",
 6 |     "sourceMap": true,
 7 |     "declaration": false,
 8 |     "module": "es2015",
 9 |     "moduleResolution": "node",
10 |     "emitDecoratorMetadata": true,
11 |     "experimentalDecorators": true,
12 |     "importHelpers": true,
13 |     "target": "es5",
14 |     "typeRoots": [
15 |       "node_modules/@types"
16 |     ],
17 |     "lib": [
18 |       "es2018",
19 |       "dom"
20 |     ]
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/src/app/src/services/data.service.ts:
--------------------------------------------------------------------------------
 1 | import { Injectable } from '@angular/core';
 2 | import { HttpClient } from '@angular/common/http';
 3 | import { of } from 'rxjs';
 4 | 
 5 | @Injectable({
 6 |   providedIn: 'root'
 7 | })
 8 | export class DataService {
 9 | 
10 |   constructor(private httpClient: HttpClient) { }
11 | 
12 |   getHomes$() {
13 | 
14 |     return this.httpClient.get('assets/homes.json');
15 | 
16 |   }
17 | 
18 |   bookHome$() {
19 | 
20 |     return this.httpClient.post('http://www.mocky.io/v2/5d674012330000f9ae44a00e', {});
21 | 
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/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: any;
11 | 
12 | // First, initialize the Angular testing environment.
13 | getTestBed().initTestEnvironment(
14 |   BrowserDynamicTestingModule,
15 |   platformBrowserDynamicTesting()
16 | );
17 | // Then we find all the tests.
18 | const context = require.context('./', true, /\.spec\.ts$/);
19 | // And load the modules.
20 | context.keys().map(context);
21 | 


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/e2e/src/app.e2e-spec.ts:
--------------------------------------------------------------------------------
 1 | import { AppPage } from './app.po';
 2 | import { browser, logging } from 'protractor';
 3 | 
 4 | describe('workspace-project App', () => {
 5 |   let page: AppPage;
 6 | 
 7 |   beforeEach(() => {
 8 |     page = new AppPage();
 9 |   });
10 | 
11 |   it('should display welcome message', () => {
12 |     page.navigateTo();
13 |     expect(page.getTitleText()).toEqual('Welcome to tdd-angular!');
14 |   });
15 | 
16 |   afterEach(async () => {
17 |     // Assert that there are no errors emitted from the browser
18 |     const logs = await browser.manage().logs().get(logging.Type.BROWSER);
19 |     expect(logs).not.toContain(jasmine.objectContaining({
20 |       level: logging.Level.SEVERE,
21 |     } as logging.Entry));
22 |   });
23 | });
24 | 


--------------------------------------------------------------------------------
/.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 | 


--------------------------------------------------------------------------------
/e2e/protractor.conf.js:
--------------------------------------------------------------------------------
 1 | // Protractor configuration file, see link for more information
 2 | // https://github.com/angular/protractor/blob/master/lib/config.ts
 3 | 
 4 | const { SpecReporter } = require('jasmine-spec-reporter');
 5 | 
 6 | exports.config = {
 7 |   allScriptsTimeout: 11000,
 8 |   specs: [
 9 |     './src/**/*.e2e-spec.ts'
10 |   ],
11 |   capabilities: {
12 |     'browserName': 'chrome'
13 |   },
14 |   directConnect: true,
15 |   baseUrl: 'http://localhost:4200/',
16 |   framework: 'jasmine',
17 |   jasmineNodeOpts: {
18 |     showColors: true,
19 |     defaultTimeoutInterval: 30000,
20 |     print: function() {}
21 |   },
22 |   onPrepare() {
23 |     require('ts-node').register({
24 |       project: require('path').join(__dirname, './tsconfig.e2e.json')
25 |     });
26 |     jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
27 |   }
28 | };


--------------------------------------------------------------------------------
/src/app/src/components/homes/homes.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit } from '@angular/core';
 2 | import { DataService } from '../../services/data.service';
 3 | import { DialogService } from '../../services/dialog.service';
 4 | import { BookComponent } from '../book/book.component';
 5 | 
 6 | @Component({
 7 |   selector: 'app-homes',
 8 |   templateUrl: './homes.component.html',
 9 |   styleUrls: ['./homes.component.less']
10 | })
11 | export class HomesComponent implements OnInit {
12 | 
13 |   homes$;
14 | 
15 |   constructor(
16 |     private dataService: DataService,
17 |     private dialogService: DialogService
18 |   ) { }
19 | 
20 |   ngOnInit() {
21 |     this.homes$ = this.dataService.getHomes$();
22 |   }
23 | 
24 |   openDialog(home) {
25 |     this.dialogService.open(BookComponent, {
26 |       width: '500px',
27 |       data: { home }
28 |     });
29 |   }
30 | 
31 | }
32 | 


--------------------------------------------------------------------------------
/src/app/src/components/homes/homes.component.html:
--------------------------------------------------------------------------------
 1 | <div
 2 |   class="uk-container uk-container-expand uk-padding-remove-horizontal uk-margin-left uk-margin-right">
 3 |   <h1 class="uk-heading-primary">Homes</h1>
 4 | 
 5 |   <div
 6 |     class="uk-grid-match uk-child-width-1-5@l uk-child-width-1-4@m uk-child-width-1-2@s"
 7 |     uk-grid>
 8 |     <div *ngFor="let home of homes$ | async"
 9 |       data-test="home">
10 |       <div class="uk-card">
11 |         <div data-test="image" class="uk-card-media-top">
12 |           <img src="{{ home.image }}" />
13 |         </div>
14 |         <div class="uk-card-body uk-padding-remove">
15 |           <div data-test="title" class="uk-text-bold">
16 |             {{ home.title }}
17 |           </div>
18 |           <div data-test="location" class="uk-text-muted">
19 |             {{ home.location }}
20 |           </div>
21 |           <div data-test="book-btn">
22 |             <button class="uk-button uk-button-primary"
23 |               (click)="openDialog(home)">Book</button>
24 |           </div>
25 |         </div>
26 |       </div>
27 |     </div>
28 |   </div>
29 | </div>
30 | 


--------------------------------------------------------------------------------
/src/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-istanbul-reporter'),
13 |       require('@angular-devkit/build-angular/plugins/karma')
14 |     ],
15 |     client: {
16 |       clearContext: false // leave Jasmine Spec Runner output visible in browser
17 |     },
18 |     coverageIstanbulReporter: {
19 |       dir: require('path').join(__dirname, '../coverage/tdd-angular'),
20 |       reports: ['html', 'lcovonly', 'text-summary'],
21 |       fixWebpackSourcePaths: true
22 |     },
23 |     reporters: ['progress', 'kjhtml'],
24 |     port: 9876,
25 |     colors: true,
26 |     logLevel: config.LOG_INFO,
27 |     autoWatch: true,
28 |     browsers: ['Chrome'],
29 |     singleRun: false,
30 |     restartOnFileChange: true
31 |   });
32 | };
33 | 


--------------------------------------------------------------------------------
/src/app/src/services/data.service.spec.ts:
--------------------------------------------------------------------------------
 1 | import { TestBed, fakeAsync, tick } from '@angular/core/testing';
 2 | import { DataService } from './data.service';
 3 | import { HttpClient } from '@angular/common/http';
 4 | import { HttpClientTestingModule } from '@angular/common/http/testing';
 5 | import { of } from 'rxjs';
 6 | 
 7 | describe('DataService', () => {
 8 | 
 9 |   let dataService: DataService;
10 |   let httpClient: HttpClient;
11 | 
12 |   beforeEach(() => TestBed.configureTestingModule({
13 |     imports: [HttpClientTestingModule]
14 |   }));
15 | 
16 |   beforeEach(() => {
17 | 
18 |     dataService = TestBed.get(DataService);
19 |     httpClient = TestBed.get(HttpClient);
20 | 
21 |   });
22 | 
23 |   it('should call API endpoind and return result', fakeAsync(() => {
24 | 
25 |     const spy = jasmine.createSpy('spy');
26 | 
27 |     const homes = require('../../../assets/homes.json');
28 | 
29 |     spyOn(httpClient, 'get').and.returnValue(of(homes));
30 | 
31 |     dataService.getHomes$().subscribe(spy);
32 | 
33 |     tick();
34 | 
35 |     expect(httpClient.get).toHaveBeenCalledWith('assets/homes.json');
36 |     expect(spy).toHaveBeenCalledWith(homes);
37 | 
38 |   }));
39 | });
40 | 


--------------------------------------------------------------------------------
/src/app/src/components/book/book.component.html:
--------------------------------------------------------------------------------
 1 | <div data-test="title" mat-dialog-title>Book
 2 |   {{ data.home.title }}</div>
 3 | <div data-test="price" class="uk-margin"><span
 4 |     class="uk-text-large uk-text-bold uk-text-primary">${{ data.home.price }}</span>
 5 |   per night</div>
 6 | <div data-test="check-in">
 7 |   <mat-form-field>
 8 |     <input matInput [matDatepicker]="checkInPicker"
 9 |       placeholder="Choose check in date"
10 |       [(ngModel)]="checkIn">
11 |     <mat-datepicker-toggle matSuffix [for]="checkInPicker">
12 |     </mat-datepicker-toggle>
13 |     <mat-datepicker #checkInPicker></mat-datepicker>
14 |   </mat-form-field>
15 | </div>
16 | <div data-test="check-out">
17 |   <mat-form-field>
18 |     <input matInput [matDatepicker]="checkOutPicker"
19 |       placeholder="Choose check out date"
20 |       [(ngModel)]="checkOut">
21 |     <mat-datepicker-toggle matSuffix [for]="checkOutPicker">
22 |     </mat-datepicker-toggle>
23 |     <mat-datepicker #checkOutPicker></mat-datepicker>
24 |   </mat-form-field>
25 | </div>
26 | <div data-test="total" class="uk-text-bold">
27 |   Total: {{ calculateTotal(checkIn, checkOut) }}
28 | </div>
29 | <div data-test="book-btn" class="uk-margin">
30 |   <button (click)="bookHome()"
31 |     class="uk-button uk-button-primary uk-button-large uk-width-1-1">Book</button>
32 | </div>
33 | 


--------------------------------------------------------------------------------
/src/app/src/components/book/book.component.ts:
--------------------------------------------------------------------------------
 1 | import { Component, OnInit, Inject } from '@angular/core';
 2 | import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 3 | import * as moment from 'moment';
 4 | import { DataService } from '../../services/data.service';
 5 | import { MatSnackBar } from '@angular/material/snack-bar';
 6 | 
 7 | @Component({
 8 |   selector: 'app-book',
 9 |   templateUrl: './book.component.html',
10 |   styleUrls: ['./book.component.less']
11 | })
12 | export class BookComponent implements OnInit {
13 | 
14 |   checkIn;
15 |   checkOut;
16 | 
17 |   constructor(
18 |     @Inject(MAT_DIALOG_DATA) public data: any,
19 |     private dataService: DataService,
20 |     public dialogRef: MatDialogRef<BookComponent>,
21 |     private snackBar: MatSnackBar
22 |   ) { }
23 | 
24 |   ngOnInit() {
25 |   }
26 | 
27 |   calculateTotal(checkIn, checkOut) {
28 | 
29 |     const checkInDate = moment(checkIn, 'MM-DD-YY');
30 |     const checkOutDate = moment(checkOut, 'MM-DD-YY');
31 |     const nights = checkOutDate.diff(checkInDate, 'days');
32 | 
33 |     const total = nights * this.data.home.price;
34 | 
35 |     if (total > 0 && total < 900000) {
36 |       return '$' + total;
37 |     } else {
38 |       return '--';
39 |     }
40 | 
41 |   }
42 | 
43 |   bookHome() {
44 | 
45 |     this.dataService.bookHome$().subscribe(() => {
46 |       this.dialogRef.close();
47 |       this.snackBar.open('Home booked!', null, {
48 |         duration: 2000,
49 |       });
50 |     });
51 | 
52 |   }
53 | 
54 | }
55 | 


--------------------------------------------------------------------------------
/src/app/app.module.ts:
--------------------------------------------------------------------------------
 1 | import { BrowserModule } from '@angular/platform-browser';
 2 | import { NgModule } from '@angular/core';
 3 | import { HttpClientModule } from '@angular/common/http';
 4 | import { AppComponent } from './app.component';
 5 | import { HeaderComponent } from './src/components/header/header.component';
 6 | import { HomesComponent } from './src/components/homes/homes.component';
 7 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 8 | import { MatDialogModule } from '@angular/material/dialog';
 9 | import { MatSnackBarModule } from '@angular/material/snack-bar';
10 | import { BookComponent } from './src/components/book/book.component';
11 | import { FormsModule } from '@angular/forms';
12 | import { MatDatepickerModule } from '@angular/material/datepicker';
13 | import { MatNativeDateModule } from '@angular/material/core';
14 | import { MatFormFieldModule } from '@angular/material/form-field';
15 | import { MatInputModule } from '@angular/material';
16 | 
17 | @NgModule({
18 |   declarations: [
19 |     AppComponent,
20 |     HeaderComponent,
21 |     HomesComponent,
22 |     BookComponent
23 |   ],
24 |   imports: [
25 |     BrowserModule,
26 |     HttpClientModule,
27 |     BrowserAnimationsModule,
28 |     MatDialogModule,
29 |     MatSnackBarModule,
30 |     FormsModule,
31 |     MatDatepickerModule,
32 |     MatNativeDateModule,
33 |     MatFormFieldModule,
34 |     MatInputModule
35 |   ],
36 |   entryComponents: [
37 |     BookComponent
38 |   ],
39 |   providers: [],
40 |   bootstrap: [AppComponent]
41 | })
42 | export class AppModule { }
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "tdd-angular",
 3 |   "version": "0.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": "^7.2.15",
15 |     "@angular/cdk": "^8.1.3",
16 |     "@angular/common": "~7.2.0",
17 |     "@angular/compiler": "~7.2.0",
18 |     "@angular/core": "^8.2.3",
19 |     "@angular/forms": "~7.2.0",
20 |     "@angular/material": "^8.1.3",
21 |     "@angular/platform-browser": "~7.2.0",
22 |     "@angular/platform-browser-dynamic": "~7.2.0",
23 |     "@angular/router": "~7.2.0",
24 |     "core-js": "^2.5.4",
25 |     "jasmine-es6-spies": "0.0.4",
26 |     "jquery": "^3.4.0",
27 |     "moment": "^2.24.0",
28 |     "rxjs": "~6.3.3",
29 |     "tslib": "^1.9.0",
30 |     "uikit": "^3.1.4",
31 |     "zone.js": "~0.8.26"
32 |   },
33 |   "devDependencies": {
34 |     "@angular-devkit/build-angular": "~0.13.0",
35 |     "@angular/cli": "~7.3.8",
36 |     "@angular/compiler-cli": "~7.2.0",
37 |     "@angular/language-service": "~7.2.0",
38 |     "@types/node": "~8.9.4",
39 |     "@types/jasmine": "~2.8.8",
40 |     "@types/jasminewd2": "~2.0.3",
41 |     "codelyzer": "~4.5.0",
42 |     "jasmine-core": "~3.4.0",
43 |     "jasmine-spec-reporter": "~4.2.1",
44 |     "karma": "~4.0.0",
45 |     "karma-chrome-launcher": "~2.2.0",
46 |     "karma-coverage-istanbul-reporter": "~2.0.1",
47 |     "karma-jasmine": "~2.0.1",
48 |     "karma-jasmine-html-reporter": "^1.4.2",
49 |     "protractor": "~5.4.0",
50 |     "ts-node": "~7.0.0",
51 |     "tslint": "~5.11.0",
52 |     "typescript": "~3.2.2"
53 |   }
54 | }
55 | 


--------------------------------------------------------------------------------
/tslint.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "tslint:recommended",
 3 |   "rulesDirectory": ["codelyzer"],
 4 |   "rules": {
 5 |     "array-type": false,
 6 |     "arrow-parens": false,
 7 |     "deprecation": {
 8 |       "severity": "warn"
 9 |     },
10 |     "import-blacklist": [true, "rxjs/Rx"],
11 |     "interface-name": false,
12 |     "max-classes-per-file": false,
13 |     "max-line-length": [true, 140],
14 |     "member-access": false,
15 |     "member-ordering": [
16 |       true,
17 |       {
18 |         "order": [
19 |           "static-field",
20 |           "instance-field",
21 |           "static-method",
22 |           "instance-method"
23 |         ]
24 |       }
25 |     ],
26 |     "no-consecutive-blank-lines": false,
27 |     "no-console": [true, "debug", "info", "time", "timeEnd", "trace"],
28 |     "no-empty": false,
29 |     "no-inferrable-types": [true, "ignore-params"],
30 |     "no-non-null-assertion": true,
31 |     "no-redundant-jsdoc": true,
32 |     "no-unused-variable": true,
33 |     "no-switch-case-fall-through": true,
34 |     "no-use-before-declare": true,
35 |     "no-var-requires": false,
36 |     "object-literal-key-quotes": [true, "as-needed"],
37 |     "object-literal-sort-keys": false,
38 |     "ordered-imports": false,
39 |     "quotemark": [true, "single"],
40 |     "trailing-comma": false,
41 |     "no-output-on-prefix": true,
42 |     "use-input-property-decorator": true,
43 |     "use-output-property-decorator": true,
44 |     "use-host-property-decorator": true,
45 |     "no-input-rename": true,
46 |     "no-output-rename": true,
47 |     "use-life-cycle-interface": true,
48 |     "use-pipe-transform-interface": true,
49 |     "component-class-suffix": true,
50 |     "directive-class-suffix": true
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/app/src/components/header/header.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HeaderComponent } from './header.component';
 4 | 
 5 | describe('HeaderComponent', () => {
 6 |   let component: HeaderComponent;
 7 |   let fixture: ComponentFixture<HeaderComponent>;
 8 | 
 9 |   beforeEach(async(() => {
10 |     TestBed.configureTestingModule({
11 |       declarations: [HeaderComponent]
12 |     })
13 |       .compileComponents();
14 |   }));
15 | 
16 |   beforeEach(() => {
17 |     fixture = TestBed.createComponent(HeaderComponent);
18 |     component = fixture.componentInstance;
19 |     fixture.detectChanges();
20 |   });
21 | 
22 |   it('should show logo', () => {
23 | 
24 |     expect(fixture.nativeElement.querySelector('[data-test="logo"]')).toBeTruthy();
25 | 
26 |   });
27 | 
28 |   it('should show search', () => {
29 | 
30 |     expect(fixture.nativeElement.querySelector('[data-test="search"]')).toBeTruthy();
31 | 
32 |   });
33 | 
34 |   it('should show menu', () => {
35 | 
36 |     expect(fixture.nativeElement.querySelector('[data-test="menu"]')).toBeTruthy();
37 | 
38 |   });
39 | 
40 |   it('should filters', () => {
41 | 
42 |     expect(fixture.nativeElement.querySelector('[data-test="home-type"]')).toBeTruthy();
43 |     expect(fixture.nativeElement.querySelector('[data-test="dates"]')).toBeTruthy();
44 |     expect(fixture.nativeElement.querySelector('[data-test="guests"]')).toBeTruthy();
45 |     expect(fixture.nativeElement.querySelector('[data-test="price"]')).toBeTruthy();
46 |     expect(fixture.nativeElement.querySelector('[data-test="rooms"]')).toBeTruthy();
47 |     expect(fixture.nativeElement.querySelector('[data-test="amenities"]')).toBeTruthy();
48 | 
49 |   });
50 | });
51 | 


--------------------------------------------------------------------------------
/src/app/src/components/homes/homes.component.spec.ts:
--------------------------------------------------------------------------------
 1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 2 | 
 3 | import { HomesComponent } from './homes.component';
 4 | import { DataService } from '../../services/data.service';
 5 | import { of } from 'rxjs';
 6 | import { spyOnClass } from 'jasmine-es6-spies';
 7 | import { DialogService } from '../../services/dialog.service';
 8 | 
 9 | describe('HomesComponent', () => {
10 |   let component: HomesComponent;
11 |   let fixture: ComponentFixture<HomesComponent>;
12 |   let dataService: jasmine.SpyObj<DataService>;
13 |   let dialogService: jasmine.SpyObj<DialogService>;
14 | 
15 |   beforeEach(async(() => {
16 |     TestBed.configureTestingModule({
17 |       declarations: [HomesComponent],
18 |       providers: [
19 |         { provide: DataService, useFactory: () => spyOnClass(DataService) },
20 |         { provide: DialogService, useFactory: () => spyOnClass(DialogService) },
21 |       ]
22 |     })
23 |       .compileComponents();
24 |   }));
25 | 
26 |   beforeEach(() => {
27 | 
28 |     fixture = TestBed.createComponent(HomesComponent);
29 |     component = fixture.componentInstance;
30 | 
31 |   });
32 | 
33 |   beforeEach(() => {
34 | 
35 |     dataService = TestBed.get(DataService);
36 |     dialogService = TestBed.get(DialogService);
37 | 
38 |     const homes = require('../../../../assets/homes.json');
39 |     dataService.getHomes$.and.returnValue(of(homes));
40 | 
41 |     fixture.detectChanges();
42 | 
43 |   });
44 | 
45 |   it('should show homes', () => {
46 | 
47 |     expect(fixture.nativeElement.querySelectorAll('[data-test="home"]').length).toBe(3);
48 | 
49 |   });
50 | 
51 |   it('should show home info', () => {
52 | 
53 |     const home = fixture.nativeElement.querySelector('[data-test="home"]');
54 | 
55 |     expect(home.querySelector('[data-test="image"]')).toBeTruthy();
56 |     expect(home.querySelector('[data-test="title"]').innerText).toEqual('Home 1');
57 |     expect(home.querySelector('[data-test="location"]').innerText).toEqual('new york');
58 | 
59 |   });
60 | 
61 |   it('should show Book button', () => {
62 | 
63 |     const home = fixture.nativeElement.querySelector('[data-test="home"]');
64 | 
65 |     expect(home.querySelector('[data-test="book-btn"]')).toBeTruthy();
66 | 
67 |   });
68 | 
69 |   it('should use dialog service to open a dialog when clicking on Book button', () => {
70 | 
71 |     // grab the button to click
72 |     const bookBtn = fixture.nativeElement.querySelector('[data-test="home"] button');
73 |     // click the button
74 |     bookBtn.click();
75 |     // assert that the dialog service was used to open a dialog
76 |     expect(dialogService.open).toHaveBeenCalled();
77 | 
78 |   });
79 | 
80 | });
81 | 


--------------------------------------------------------------------------------
/src/app/src/components/header/header.component.html:
--------------------------------------------------------------------------------
 1 | <header>
 2 |   <div
 3 |     class="uk-container uk-container-expand uk-padding-remove">
 4 |     <div class="uk-background-default"
 5 |       uk-sticky="sel-target: .uk-navbar-container; cls-active: uk-navbar-sticky">
 6 |       <nav class="uk-background-default uk-margin-left"
 7 |         uk-navbar>
 8 |         <div class="uk-navbar-left uk-flex-nowrap">
 9 |           <a data-test="logo"
10 |             class="uk-navbar-item uk-logo uk-padding-remove-left">
11 |             <img src="favicon.ico" width="40" />
12 |           </a>
13 |         </div>
14 | 
15 |         <div data-test="search"
16 |           class="uk-navbar-left uk-width-5-6@s uk-width-large@m">
17 |           <form
18 |             class="uk-search uk-search-default uk-box-shadow-small uk-card-hover uk-width-5-6">
19 |             <span uk-search-icon></span>
20 |             <input class="uk-search-input" type="search"
21 |               placeholder="Anywhere • Homes" />
22 |           </form>
23 |         </div>
24 |         <div class="uk-navbar-right">
25 |           <ul data-test="menu"
26 |             class="uk-navbar-nav uk-visible@m uk-margin-right">
27 |             <li><a href="">Become a host</a></li>
28 |             <li><a href="">Help</a></li>
29 |             <li><a href="">Sign up</a></li>
30 |             <li><a href="">Login</a></li>
31 |           </ul>
32 |         </div>
33 |       </nav>
34 | 
35 |       <hr class="uk-margin-small uk-margin-remove-top" />
36 | 
37 |       <div
38 |         class="uk-flex uk-flex-nowrap uk-grid-small uk-margin-left">
39 |         <div data-test="home-type"
40 |           class="uk-padding-remove-left">
41 |           <button
42 |             class="uk-button uk-button-default uk-button-small uk-text-nowrap">
43 |             Home type
44 |           </button>
45 |         </div>
46 |         <div data-test="dates">
47 |           <button
48 |             class="uk-button uk-button-default uk-button-small uk-text-nowrap">
49 |             Dates
50 |           </button>
51 |         </div>
52 |         <div data-test="guests">
53 |           <button
54 |             class="uk-button uk-button-default uk-button-small uk-text-nowrap">
55 |             Guests
56 |           </button>
57 |         </div>
58 |         <div data-test="price">
59 |           <button
60 |             class="uk-button uk-button-default uk-button-small uk-text-nowrap">
61 |             Price
62 |           </button>
63 |         </div>
64 |         <div data-test="rooms">
65 |           <button
66 |             class="uk-button uk-button-default uk-button-small uk-text-nowrap">
67 |             Rooms and beds
68 |           </button>
69 |         </div>
70 |         <div data-test="amenities">
71 |           <button
72 |             class="uk-button uk-button-default uk-button-small uk-text-nowrap">
73 |             Amenities
74 |           </button>
75 |         </div>
76 |       </div>
77 | 
78 |       <hr class="uk-margin-small uk-margin-remove-bottom" />
79 |     </div>
80 |   </div>
81 | </header>
82 | 


--------------------------------------------------------------------------------
/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 | /** IE10 and 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.ts';
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__BLACK_LISTED_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 | 


--------------------------------------------------------------------------------
/angular.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  3 |   "version": 1,
  4 |   "newProjectRoot": "projects",
  5 |   "projects": {
  6 |     "tdd-angular": {
  7 |       "root": "",
  8 |       "sourceRoot": "src",
  9 |       "projectType": "application",
 10 |       "prefix": "app",
 11 |       "schematics": {
 12 |         "@schematics/angular:component": {
 13 |           "style": "less"
 14 |         }
 15 |       },
 16 |       "architect": {
 17 |         "build": {
 18 |           "builder": "@angular-devkit/build-angular:browser",
 19 |           "options": {
 20 |             "outputPath": "dist/tdd-angular",
 21 |             "index": "src/index.html",
 22 |             "main": "src/main.ts",
 23 |             "polyfills": "src/polyfills.ts",
 24 |             "tsConfig": "src/tsconfig.app.json",
 25 |             "assets": [
 26 |               "src/favicon.ico",
 27 |               "src/assets"
 28 |             ],
 29 |             "styles": [
 30 |               "src/styles.less"
 31 |             ],
 32 |             "scripts": [
 33 |               "node_modules/jquery/dist/jquery.min.js",
 34 |               "node_modules/uikit/dist/js/uikit.min.js",
 35 |               "node_modules/uikit/dist/js/uikit-icons.min.js"
 36 |             ],
 37 |             "es5BrowserSupport": true
 38 |           },
 39 |           "configurations": {
 40 |             "production": {
 41 |               "fileReplacements": [
 42 |                 {
 43 |                   "replace": "src/environments/environment.ts",
 44 |                   "with": "src/environments/environment.prod.ts"
 45 |                 }
 46 |               ],
 47 |               "optimization": true,
 48 |               "outputHashing": "all",
 49 |               "sourceMap": false,
 50 |               "extractCss": true,
 51 |               "namedChunks": false,
 52 |               "aot": true,
 53 |               "extractLicenses": true,
 54 |               "vendorChunk": false,
 55 |               "buildOptimizer": true,
 56 |               "budgets": [
 57 |                 {
 58 |                   "type": "initial",
 59 |                   "maximumWarning": "2mb",
 60 |                   "maximumError": "5mb"
 61 |                 }
 62 |               ]
 63 |             }
 64 |           }
 65 |         },
 66 |         "serve": {
 67 |           "builder": "@angular-devkit/build-angular:dev-server",
 68 |           "options": {
 69 |             "browserTarget": "tdd-angular:build"
 70 |           },
 71 |           "configurations": {
 72 |             "production": {
 73 |               "browserTarget": "tdd-angular:build:production"
 74 |             }
 75 |           }
 76 |         },
 77 |         "extract-i18n": {
 78 |           "builder": "@angular-devkit/build-angular:extract-i18n",
 79 |           "options": {
 80 |             "browserTarget": "tdd-angular:build"
 81 |           }
 82 |         },
 83 |         "test": {
 84 |           "builder": "@angular-devkit/build-angular:karma",
 85 |           "options": {
 86 |             "main": "src/test.ts",
 87 |             "polyfills": "src/polyfills.ts",
 88 |             "tsConfig": "src/tsconfig.spec.json",
 89 |             "karmaConfig": "src/karma.conf.js",
 90 |             "styles": [
 91 |               "src/styles.less"
 92 |             ],
 93 |             "scripts": [],
 94 |             "assets": [
 95 |               "src/favicon.ico",
 96 |               "src/assets"
 97 |             ]
 98 |           }
 99 |         },
100 |         "lint": {
101 |           "builder": "@angular-devkit/build-angular:tslint",
102 |           "options": {
103 |             "tsConfig": [
104 |               "src/tsconfig.app.json",
105 |               "src/tsconfig.spec.json"
106 |             ],
107 |             "exclude": [
108 |               "**/node_modules/**"
109 |             ]
110 |           }
111 |         }
112 |       }
113 |     },
114 |     "tdd-angular-e2e": {
115 |       "root": "e2e/",
116 |       "projectType": "application",
117 |       "prefix": "",
118 |       "architect": {
119 |         "e2e": {
120 |           "builder": "@angular-devkit/build-angular:protractor",
121 |           "options": {
122 |             "protractorConfig": "e2e/protractor.conf.js",
123 |             "devServerTarget": "tdd-angular:serve"
124 |           },
125 |           "configurations": {
126 |             "production": {
127 |               "devServerTarget": "tdd-angular:serve:production"
128 |             }
129 |           }
130 |         },
131 |         "lint": {
132 |           "builder": "@angular-devkit/build-angular:tslint",
133 |           "options": {
134 |             "tsConfig": "e2e/tsconfig.e2e.json",
135 |             "exclude": [
136 |               "**/node_modules/**"
137 |             ]
138 |           }
139 |         }
140 |       }
141 |     }
142 |   },
143 |   "defaultProject": "tdd-angular"
144 | }
145 | 


--------------------------------------------------------------------------------
/src/app/src/components/book/book.component.spec.ts:
--------------------------------------------------------------------------------
  1 | import { async, ComponentFixture, TestBed } from '@angular/core/testing';
  2 | 
  3 | import { BookComponent } from './book.component';
  4 | import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
  5 | import { FormsModule } from '@angular/forms';
  6 | import { DataService } from '../../services/data.service';
  7 | import { spyOnClass } from 'jasmine-es6-spies';
  8 | import { of } from 'rxjs';
  9 | import { MatSnackBar } from '@angular/material/snack-bar';
 10 | import { MatDatepickerModule } from '@angular/material/datepicker';
 11 | import { MatNativeDateModule } from '@angular/material/core';
 12 | import { MatFormFieldModule } from '@angular/material/form-field';
 13 | import { MatInputModule } from '@angular/material';
 14 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 15 | 
 16 | describe('BookComponent', () => {
 17 |   let component: BookComponent;
 18 |   let fixture: ComponentFixture<BookComponent>;
 19 |   let dialogData;
 20 |   let dataService: jasmine.SpyObj<DataService>;
 21 |   let dialogService: jasmine.SpyObj<MatDialogRef<BookComponent>>;
 22 |   let notificationService: jasmine.SpyObj<MatSnackBar>;
 23 | 
 24 |   const el = (selector) => fixture.nativeElement.querySelector(selector);
 25 | 
 26 |   beforeEach(async(() => {
 27 |     TestBed.configureTestingModule({
 28 |       imports: [
 29 |         FormsModule,
 30 |         MatDatepickerModule,
 31 |         MatNativeDateModule,
 32 |         MatFormFieldModule,
 33 |         MatInputModule,
 34 |         BrowserAnimationsModule
 35 |       ],
 36 |       declarations: [BookComponent],
 37 |       providers: [
 38 |         { provide: MAT_DIALOG_DATA, useValue: {} },
 39 |         { provide: DataService, useFactory: () => spyOnClass(DataService) },
 40 |         { provide: MatDialogRef, useFactory: () => spyOnClass(MatDialogRef) },
 41 |         { provide: MatSnackBar, useFactory: () => spyOnClass(MatSnackBar) },
 42 |       ]
 43 |     })
 44 |       .compileComponents();
 45 |   }));
 46 | 
 47 |   beforeEach(() => {
 48 |     fixture = TestBed.createComponent(BookComponent);
 49 |     dialogData = TestBed.get(MAT_DIALOG_DATA);
 50 |     component = fixture.componentInstance;
 51 |     dataService = TestBed.get(DataService);
 52 |     dialogService = TestBed.get(MatDialogRef);
 53 |     notificationService = TestBed.get(MatSnackBar);
 54 | 
 55 |     const homes = require('../../../../assets/homes.json');
 56 |     dialogData.home = homes[0];
 57 |     fixture.detectChanges();
 58 |   });
 59 | 
 60 |   it('should show title', () => {
 61 | 
 62 |     expect(el('[data-test="title"]').textContent)
 63 |       .toContain('Book Home 1');
 64 | 
 65 |   });
 66 | 
 67 |   it('should show price', () => {
 68 | 
 69 |     expect(el('[data-test="price"]').textContent)
 70 |       .toContain('$125 per night');
 71 | 
 72 |   });
 73 | 
 74 |   it('should show check in date field', () => {
 75 | 
 76 |     expect(el('[data-test="check-in"]'))
 77 |       .toBeTruthy();
 78 | 
 79 |   });
 80 | 
 81 |   it('should show check out date field', () => {
 82 | 
 83 |     expect(el('[data-test="check-out"]'))
 84 |       .toBeTruthy();
 85 | 
 86 |   });
 87 | 
 88 |   it('should show total', () => {
 89 | 
 90 |     // user enters check in date: 12/20/19
 91 |     const checkIn = el('[data-test="check-in"] input');
 92 |     checkIn.value = '12/20/19';
 93 |     checkIn.dispatchEvent(new Event('input'));
 94 | 
 95 |     // user enter check out date: 12/23/19
 96 |     const checkOut = el('[data-test="check-out"] input');
 97 |     checkOut.value = '12/23/19';
 98 |     checkOut.dispatchEvent(new Event('input'));
 99 | 
100 |     fixture.detectChanges();
101 | 
102 |     // assert that the total shows 3x125=375
103 |     expect(el('[data-test="total"]').textContent)
104 |       .toContain('Total: $375');
105 | 
106 |   });
107 | 
108 |   it('should show -- for total when dates are invalid', () => {
109 | 
110 |     const checkIn = el('[data-test="check-in"] input');
111 |     checkIn.value = '';
112 |     checkIn.dispatchEvent(new Event('input'));
113 | 
114 |     const checkOut = el('[data-test="check-out"] input');
115 |     checkOut.value = '';
116 |     checkOut.dispatchEvent(new Event('input'));
117 | 
118 |     fixture.detectChanges();
119 | 
120 |     expect(el('[data-test="total"]').textContent)
121 |       .toContain('Total: --');
122 | 
123 |   });
124 | 
125 |   it('should book home after clicking the Book button', () => {
126 | 
127 |     dataService.bookHome$.and.returnValue(of(null));
128 | 
129 |     // user enters check in date: 12/20/19
130 |     const checkIn = el('[data-test="check-in"] input');
131 |     checkIn.value = '12/20/19';
132 |     checkIn.dispatchEvent(new Event('input'));
133 | 
134 |     // user enter check out date: 12/23/19
135 |     const checkOut = el('[data-test="check-out"] input');
136 |     checkOut.value = '12/23/19';
137 |     checkOut.dispatchEvent(new Event('input'));
138 | 
139 |     fixture.detectChanges();
140 | 
141 |     // click in the Book
142 |     el('[data-test="book-btn"] button').click();
143 | 
144 |     // assert that the data service was used to book the home
145 |     expect(dataService.bookHome$).toHaveBeenCalled();
146 | 
147 |   });
148 | 
149 |   it('should close the dialog and show notification after clicking Book button', () => {
150 | 
151 |     dataService.bookHome$.and.returnValue(of(null));
152 | 
153 |     // user enters check in date: 12/20/19
154 |     const checkIn = el('[data-test="check-in"] input');
155 |     checkIn.value = '12/20/19';
156 |     checkIn.dispatchEvent(new Event('input'));
157 | 
158 |     // user enter check out date: 12/23/19
159 |     const checkOut = el('[data-test="check-out"] input');
160 |     checkOut.value = '12/23/19';
161 |     checkOut.dispatchEvent(new Event('input'));
162 | 
163 |     fixture.detectChanges();
164 | 
165 |     // click in the Book
166 |     el('[data-test="book-btn"] button').click();
167 | 
168 |     expect(dialogService.close).toHaveBeenCalled();
169 |     expect(notificationService.open).toHaveBeenCalled();
170 | 
171 |   });
172 | 
173 | 
174 | });
175 | 


--------------------------------------------------------------------------------