denniswritescode · denniswritescode · Jul 7, 2020
diff --git a/katalon-chrome-scripts/ql-contacts.html b/katalon-chrome-scripts/ql-contacts.html
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+<head>
+	<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
+	<title>ql-contacts</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Fill Out Form</td></tr>
+</thead>
+<tbody>
+<tr><td>click</td><td>//i<datalist><option>//i</option><option>css=i.material-icons</option></datalist></td><td></td>
+</tr>
+<tr><td>type</td><td>id=company<datalist><option>id=company</option><option>//input[@id='company']</option><option>//form[@id='contact-form']/app-input-text/mat-form-field/div/div/div/input</option><option>//input</option><option>css=#company</option></datalist></td><td>Google</td>
+</tr>
+<tr><td>type</td><td>id=firstName<datalist><option>id=firstName</option><option>//input[@id='firstName']</option><option>//form[@id='contact-form']/app-input-text[2]/mat-form-field/div/div/div/input</option><option>//app-input-text[2]/mat-form-field/div/div/div/input</option><option>css=#firstName</option></datalist></td><td>Dennis</td>
+</tr>
+<tr><td>type</td><td>id=lastName<datalist><option>id=lastName</option><option>//input[@id='lastName']</option><option>//form[@id='contact-form']/app-input-text[3]/mat-form-field/div/div/div/input</option><option>//app-input-text[3]/mat-form-field/div/div/div/input</option><option>css=#lastName</option></datalist></td><td>Porter</td>
+</tr>
+<tr><td>type</td><td>id=phone<datalist><option>id=phone</option><option>//input[@id='phone']</option><option>//form[@id='contact-form']/app-input-text[4]/mat-form-field/div/div/div[2]/input</option><option>//div[2]/input</option><option>css=#phone</option></datalist></td><td>3135551212</td>
+</tr>
+<tr><td>type</td><td>id=email<datalist><option>id=email</option><option>//input[@id='email']</option><option>//form[@id='contact-form']/app-input-text[5]/mat-form-field/div/div/div/input</option><option>//app-input-text[5]/mat-form-field/div/div/div/input</option><option>css=#email</option></datalist></td><td>johen@john.com</td>
+</tr>
+<tr><td>type</td><td>id=address<datalist><option>id=address</option><option>//input[@id='address']</option><option>//form[@id='contact-form']/app-input-text[6]/mat-form-field/div/div/div/input</option><option>//app-input-text[6]/mat-form-field/div/div/div/input</option><option>css=#address</option></datalist></td><td>1234 Easy St</td>
+</tr>
+<tr><td>type</td><td>id=city<datalist><option>id=city</option><option>//input[@id='city']</option><option>//form[@id='contact-form']/app-input-text[8]/mat-form-field/div/div/div/input</option><option>//app-input-text[8]/mat-form-field/div/div/div/input</option><option>css=#city</option></datalist></td><td>Detroit</td>
+</tr>
+<tr><td>type</td><td>id=state<datalist><option>id=state</option><option>//input[@id='state']</option><option>//form[@id='contact-form']/app-input-text[9]/mat-form-field/div/div/div/input</option><option>//app-input-text[9]/mat-form-field/div/div/div/input</option><option>css=#state</option></datalist></td><td>Mi</td>
+</tr>
+<tr><td>type</td><td>id=zipCode<datalist><option>id=zipCode</option><option>//input[@id='zipCode']</option><option>//form[@id='contact-form']/app-input-text[10]/mat-form-field/div/div/div/input</option><option>//app-input-text[10]/mat-form-field/div/div/div/input</option><option>css=#zipCode</option></datalist></td><td>12345</td>
+</tr>
+<tr><td>click</td><td>//button[@id='create-contact-submit']/span<datalist><option>//button[@id='create-contact-submit']/span</option><option>//mat-dialog-actions/button[2]/span</option><option>css=#create-contact-submit &gt; span.mat-button-wrapper</option></datalist></td><td></td>
+</tr>
+</tbody></table>
+</body>
+</html>
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -29,6 +29,7 @@ import { ContactAddComponent } from './view/contacts/contact-add/contact-add.com
 import { NameCellComponent } from './view/contacts/contact-cells/name-cell/name-cell.component';
 import { NameHeaderComponent } from './view/contacts/contact-cells/name-header/name-header.component';
 import { PhoneCellComponent } from './view/contacts/contact-cells/phone-cell/phone-cell.component';
+import { ContactColumnsComponent } from './view/contacts/contact-columns/contact-columns.component';
 import { ContactDetailsComponent } from './view/contacts/contact-details/contact-details.component';
 import { DetailItemComponent } from './view/contacts/contact-details/detail-item/detail-item.component';
 import { ContactFormComponent } from './view/contacts/contact-form/contact-form.component';
@@ -54,6 +55,7 @@ import { ViewComponent } from './view/view.component';
     NameCellComponent,
     NameHeaderComponent,
     PhoneCellComponent,
+    ContactColumnsComponent,
   ],
   entryComponents: [
     ContactFormComponent,

diff --git a/src/app/interfaces/shared.interfaces.ts b/src/app/interfaces/shared.interfaces.ts
@@ -14,6 +14,11 @@ export interface IContact extends IBaseContact {
   index: number;
 }
 
+export interface ITableColumnConfig {
+  name: string;
+  header: string;
+}
+
 export interface IFormContact extends IBaseContact {
   address2: string;
   city: string;

diff --git a/src/app/view/contacts/contact-columns/contact-columns.component.html b/src/app/view/contacts/contact-columns/contact-columns.component.html
@@ -0,0 +1,35 @@
+<!-- LOOP THROUGH BASIC COLUMN DEFINITIONS -->
+<ng-container [matColumnDef]="column.name">
+
+  <!-- COLUMN HEADER -->
+  <th mat-header-cell *matHeaderCellDef>
+
+    <div [ngSwitch]="column.name">
+
+      <!-- Only the column with the name 'name' uses a special template -->
+      <app-name-header *ngSwitchCase="'name'" [mobile]="mobile"></app-name-header>
+
+      <div *ngSwitchDefault>{{column.header}}</div>
+
+    </div>
+
+  </th>
+
+  <!-- COLUMN CELL -->
+  <td mat-cell *matCellDef="let data">
+
+    <div [ngSwitch]="column.name">
+
+      <app-name-cell *ngSwitchCase="'name'" [contact]="data" [mobile]="mobile"></app-name-cell>
+
+      <app-phone-cell *ngSwitchCase="'phone'" [phone]="data.phone"></app-phone-cell>
+
+      <mat-icon class="show-more" *ngSwitchCase="'more'">add_circle</mat-icon>
+
+      <div *ngSwitchDefault>{{data[column.name]}}</div>
+
+    </div>
+
+  </td>
+
+</ng-container>
diff --git a/src/app/view/contacts/contact-columns/contact-columns.component.scss b/src/app/view/contacts/contact-columns/contact-columns.component.scss
@@ -0,0 +1,29 @@
+@import 'src/scss/variables';
+
+th.mat-header-cell,
+td.mat-cell {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+
+th.mat-header-cell {
+  font-size: 1.4em;
+}
+
+.mat-column-phone,
+.mat-column-more {
+  text-align: center;
+}
+
+.mat-column-more {
+  .show-more {
+    position: relative;
+    top: 5px;
+    color: lighten($color: $primary, $amount: 30);
+  }
+}
+
+.mat-cell {
+  border-bottom-width: 0;
+}
diff --git a/src/app/view/contacts/contact-columns/contact-columns.component.spec.ts b/src/app/view/contacts/contact-columns/contact-columns.component.spec.ts
@@ -0,0 +1,29 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactColumnsComponent } from './contact-columns.component';
+
+describe('ContactColumnsComponent', () => {
+  let component: ContactColumnsComponent;
+  let fixture: ComponentFixture<ContactColumnsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactColumnsComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactColumnsComponent);
+    component = fixture.componentInstance;
+    component.column = {
+      name: 'hey',
+      header: 'dude',
+    }
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/view/contacts/contact-columns/contact-columns.component.ts b/src/app/view/contacts/contact-columns/contact-columns.component.ts
@@ -0,0 +1,24 @@
+import { AfterViewInit, Component, Input, Optional, ViewChild } from '@angular/core';
+import { MatColumnDef, MatTable } from '@angular/material/table';
+import { ITableColumnConfig } from 'src/app/interfaces/shared.interfaces';
+
+@Component({
+  selector: 'app-contact-columns',
+  templateUrl: './contact-columns.component.html',
+  styleUrls: [ './contact-columns.component.scss' ],
+})
+export class ContactColumnsComponent implements AfterViewInit {
+
+  @Input() mobile: boolean;
+  @Input() column: ITableColumnConfig;
+
+  @ViewChild(MatColumnDef) columnDef: MatColumnDef;
+
+  constructor(@Optional() public table: MatTable<any>) { }
+
+  ngAfterViewInit() {
+    if (this.table) {
+      this.table.addColumnDef(this.columnDef);
+    }
+  }
+}
diff --git a/src/app/view/contacts/contact-form/contact-form.component.spec.ts b/src/app/view/contacts/contact-form/contact-form.component.spec.ts
@@ -94,6 +94,8 @@ describe('ContactFormComponent', () => {
   });
 
   it('should populate the state\'s autocomplete property', () => {
+    component.formData = CONTACT_SAMPLE_FORM_DATA;
+    fixture.detectChanges();
     const stateObject = component.formData.find(n => n.config.id === 'state');
 
     expect(stateObject.autocomplete.length).toBe(1);

diff --git a/src/app/view/contacts/contacts-table.config.ts b/src/app/view/contacts/contacts-table.config.ts
@@ -1,22 +1,22 @@
 export const CONTACT_TABLE_CONFIG = [
   {
-    col: 'name',
+    name: 'name',
     header: 'Contact',
   },
   {
-    col: 'phone',
+    name: 'phone',
     header: 'Phone',
   },
   {
-    col: 'company',
+    name: 'company',
     header: 'Company',
   },
   {
-    col: 'email',
+    name: 'email',
     header: 'Email',
   },
   {
-    col: 'more',
+    name: 'more',
     header: '',
   },
 ];
diff --git a/src/app/view/contacts/contacts.component.html b/src/app/view/contacts/contacts.component.html
@@ -1,45 +1,18 @@
 <div class="contacts">
 
   <div class="contacts-loader" *ngIf="!dataLength">
+
     <mat-spinner color="accent" diameter="50"></mat-spinner>
+
   </div>
 
   <table mat-table multiTemplateDataRows [dataSource]="dataSource" *ngIf="dataLength">
 
     <!-- LOOP THROUGH BASIC COLUMN DEFINITIONS -->
-    <ng-container [matColumnDef]="cfg.col" *ngFor="let cfg of tableConfig">
-
-      <!-- COLUMN HEADER -->
-      <th mat-header-cell *matHeaderCellDef>
-
-        <div [ngSwitch]="cfg.col">
-
-          <app-name-header *ngSwitchCase="'name'" [mobile]="mobile()"></app-name-header>
-
-          <div *ngSwitchDefault>{{cfg.header}}</div>
-
-        </div>
-
-      </th>
-
-      <!-- COLUMN CELL -->
-      <td mat-cell *matCellDef="let data">
-
-        <div [ngSwitch]="cfg.col">
-
-          <app-name-cell *ngSwitchCase="'name'" [contact]="data" [mobile]="mobile()"></app-name-cell>
-
-          <app-phone-cell *ngSwitchCase="'phone'" [phone]="data.phone"></app-phone-cell>
-
-          <mat-icon class="show-more" *ngSwitchCase="'more'">add_circle</mat-icon>
-
-          <div *ngSwitchDefault>{{data[cfg.col]}}</div>
-
-        </div>
-
-      </td>
-
-    </ng-container>
+    <app-contact-columns
+      *ngFor="let config of columns"
+      [mobile]="viewport.mobile()"
+      [column]="config"></app-contact-columns>
 
     <!-- DEFINE A TABLE WIDE COLUMN (which will be expandable) -->
     <ng-container matColumnDef="expandable">
@@ -56,7 +29,6 @@
 
     </ng-container>
 
-
     <!-- DEFINE ROW TEMPLATES -->
     <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 

diff --git a/src/app/view/contacts/contacts.component.scss b/src/app/view/contacts/contacts.component.scss
@@ -15,30 +15,6 @@
   table.mat-table {
     width: 100%;
 
-    th.mat-header-cell,
-    td.mat-cell {
-      -webkit-box-sizing: border-box;
-      -moz-box-sizing: border-box;
-      box-sizing: border-box;
-    }
-
-    th.mat-header-cell {
-      font-size: 1.4em;
-    }
-
-    .mat-column-phone,
-    .mat-column-more {
-      text-align: center;
-    }
-
-    .mat-column-more {
-      .show-more {
-        position: relative;
-        top: 5px;
-        color: lighten($color: $primary, $amount: 30);
-      }
-    }
-
     .mat-column-phone {
       a {
         color: $accent;

diff --git a/src/app/view/contacts/contacts.component.spec.ts b/src/app/view/contacts/contacts.component.spec.ts
@@ -16,18 +16,9 @@ describe('ContactsComponent', () => {
   let component: ContactsComponent;
   let viewport: FakeViewportService;
   let fixture: ComponentFixture<ContactsComponent>;
-  const oneContact: IContact = {
-    _id: '5de91c005b98615393e74931',
-    index: 0,
-    firstName: 'Browning',
-    lastName: 'Graham',
-    company: 'MELBACOR',
-    email: 'browninggraham@melbacor.com',
-    phone: '+1 (906) 585-2525',
-    address: '920 Hastings Street, Roosevelt, Puerto Rico, 5573',
-  };
+  const oneElement = { test: 'value' };
   const observers = [];
-  const contactsObservable: Observable<IContact[]> = new Observable((observer) => {
+  const observableData: Observable<any[]> = new Observable((observer) => {
     observers.push(observer);
     return { unsubscribe() { } };
   });
@@ -44,9 +35,6 @@ describe('ContactsComponent', () => {
         // small third party components whose code doesn't need to be "double tested"
         // by us. So we mock them.)
         MockComponent({ selector: 'app-contact-details', inputs: [ 'contact' ] }),
-        MockComponent({ selector: 'app-name-cell', inputs: [ 'contact', 'mobile' ] }),
-        MockComponent({ selector: 'app-name-header', inputs: [ 'mobile' ] }),
-        MockComponent({ selector: 'app-phone-cell', inputs: [ 'phone' ] }),
         MockComponent({ selector: 'mat-icon' }),
         MockComponent({ selector: 'mat-spinner' }),
         MockComponent({ selector: 'mat-paginator', inputs: [ 'length', 'pageSize', 'pageIndex' ] }),
@@ -76,7 +64,7 @@ describe('ContactsComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(ContactsComponent);
     component = fixture.componentInstance;
-    component.contacts = contactsObservable;
+    component.data = observableData;
     fixture.detectChanges();
   });
 
@@ -100,26 +88,12 @@ describe('ContactsComponent', () => {
     })
   );
 
-  it('should user the viewport service for responsive data',
-    fakeAsync(() => {
-      viewport.setFullscreen();
-      tick();
-      expect(viewport.mobile()).toBe(false);
-      expect(component.mobile()).toBe(false);
-
-      viewport.setMobile();
-      tick();
-      expect(viewport.mobile()).toBe(true);
-      expect(component.mobile()).toBe(true);
-    })
-  );
-
-  it('retrieve the contacts list, and populate the data source',
+  it('retrieve data, and populate the data source',
     fakeAsync(() => {
       expect(component.dataLength).toBeUndefined();
       expect(component.dataSource).toBeUndefined();
 
-      observers.forEach(o => o.next([ oneContact ]));
+      observers.forEach(o => o.next([ oneElement ]));
       tick();
 
       expect(component.dataLength).toBe(1);