Refactor UI

apps/billing/src/app/app.component.spec.ts

@@ -1,33 +1,49 @@
-import { TestBed, async } from '@angular/core/testing';
+import { TestBed, async, ComponentFixture } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { RouterTestingModule } from '@angular/router/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { CoreModule } from '@bill/core/core.module';
+import { SideNavComponent } from '@bill/core/sidenav/sidenav.component';
+import { NavComponent } from '@bill/core/nav/nav.component';
+import { FooterComponent } from '@bill/core/footer/footer.component';
 
 describe('AppComponent', () => {
+  let fixture: ComponentFixture<AppComponent>;
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [RouterTestingModule],
-      declarations: [AppComponent]
+      imports: [
+        RouterTestingModule,
+        CoreModule
+      ],
+      declarations: [AppComponent],
+      schemas: [NO_ERRORS_SCHEMA]
     }).compileComponents();
+
+    fixture = TestBed.createComponent(AppComponent);
   }));
 
   it('should create the app', () => {
-    const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();
   });
 
-  it(`should have as title 'billing'`, () => {
-    const fixture = TestBed.createComponent(AppComponent);
-    const app = fixture.debugElement.componentInstance;
-    expect(app.title).toEqual('billing');
+  it('should have sidenav', () => {
+    fixture.detectChanges();
+    const sidenavEl = fixture.debugElement.queryAll(By.directive(SideNavComponent));
+    expect(sidenavEl).toBeTruthy();
+  });
+
+  it('should have navbar', () => {
+    fixture.detectChanges();
+    const navEl = fixture.debugElement.queryAll(By.directive(NavComponent));
+    expect(navEl).toBeTruthy();
   });
 
-  it('should render title', () => {
-    const fixture = TestBed.createComponent(AppComponent);
+  it('should have footer', () => {
     fixture.detectChanges();
-    const compiled = fixture.debugElement.nativeElement;
-    expect(compiled.querySelector('h1').textContent).toContain(
-      'Welcome to billing!'
-    );
+    const footerEl = fixture.debugElement.queryAll(By.directive(FooterComponent));
+    expect(footerEl).toBeTruthy();
   });
 });

apps/billing/src/app/contacts/contact-create-modal/contact-create-modal.component.spec.ts

@@ -1,14 +1,17 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ContactCreateModalComponent } from './contact-create-modal.component';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
 
 describe('ContactCreateModalComponent', () => {
   let component: ContactCreateModalComponent;
   let fixture: ComponentFixture<ContactCreateModalComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ContactCreateModalComponent ]
+      declarations: [ ContactCreateModalComponent ],
+      schemas: [NO_ERRORS_SCHEMA]
     })
     .compileComponents();
   }));
@@ -19,7 +22,13 @@ describe('ContactCreateModalComponent', () => {
     fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should create the modal component', () => {
     expect(component).toBeTruthy();
   });
+
+  it('should be a modal per definition', () => {
+    const el = fixture.debugElement.queryAll(By.css('.modal'));
+
+    expect(el).toBeTruthy();
+  });
 });

apps/billing/src/app/contacts/contact-details/contact-details.component.spec.ts

@@ -1,14 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ContactDetailsComponent } from './contact-details.component';
+import { SharedModule } from '@bill/shared/shared.module';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
 
-describe('ContactDetailsComponent', () => {
+describe('🚦 ContactDetailsComponent', () => {
   let component: ContactDetailsComponent;
   let fixture: ComponentFixture<ContactDetailsComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ContactDetailsComponent ]
+      declarations: [ ContactDetailsComponent ],
+      imports: [SharedModule],
+      providers: [ActivatedRoute, Router],
+      schemas: [NO_ERRORS_SCHEMA]
     })
     .compileComponents();
   }));

apps/billing/src/app/contacts/contact-details/contact-details.component.ts

@@ -27,7 +27,8 @@ export class ContactDetailsComponent implements OnInit {
     this.invoicesTbl = {
       columns: ['Fatura', 'Ordem', 'Valor', 'Impostos'],
       dataset: [],
-      collection: `${this.id}/invoices`
+      collection: `${this.id}/invoices`,
+      title: 'Facturas'
     };
   }
 

apps/billing/src/app/contacts/contact-edit/contact-edit.component.spec.ts

@@ -1,14 +1,20 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
 import { ContactEditComponent } from './contact-edit.component';
+import { SharedModule } from '@bill/shared/shared.module';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { ContactFormComponent } from '../shared/contact-form/contact-form.component';
 
-describe('ContactEditComponent', () => {
+describe('🚦 ContactEditComponent', () => {
   let component: ContactEditComponent;
   let fixture: ComponentFixture<ContactEditComponent>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ContactEditComponent ]
+      declarations: [ ContactEditComponent ],
+      imports: [ SharedModule ],
+      schemas: [ NO_ERRORS_SCHEMA ]
     })
     .compileComponents();
   }));
@@ -17,9 +23,15 @@ describe('ContactEditComponent', () => {
     fixture = TestBed.createComponent(ContactEditComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  });
+  }); 
 
-  it('should create', () => {
-    expect(component).toBeTruthy();
+  it(`should contain 'Editar Contacto' as title `, () => {
+    expect(fixture.nativeElement.querySelector('h5').textContent).toContain('Editar Contacto');
   });
+
+  it('should have form to edit contact', () => {
+    const el = fixture.debugElement.queryAll(By.directive(ContactFormComponent));
+
+    expect(el).toBeTruthy();
+  })
 });

apps/billing/src/app/contacts/contacts.component.html

@@ -1,78 +1,11 @@
-<businx-page-title
-  [title]="'Contactos'"
-  [target]="'#contact-create-modal'"
-  [controls]="true"
-></businx-page-title>
+<businx-page-title [title]="'Contactos'" [target]="'#contact-create-modal'" [controls]="true"></businx-page-title>
 
 <div class="row">
   <div class="col-lg-4 mt-3" *ngFor="let card of contactsCrd">
-    <businx-resume-card
-      [card-config]="card"
-    ></businx-resume-card>
+    <businx-resume-card [card-config]="card"></businx-resume-card>
   </div>
 </div>
 
-<div class="card">
-  <div class="card-header actions-toolbar border-0">
-
-    <div class="actions-search" id="actions-search">
-      <div class="input-group input-group-merge input-group-flush">
-        <div class="input-group-prepend">
-          <span class="input-group-text bg-transparent"><i class="far fa-search"></i></span>
-        </div>
-        <input type="text" class="form-control form-control-flush" placeholder="Type and hit enter ...">
-        <div class="input-group-append">
-          <a href="#" class="input-group-text bg-transparent" data-action="search-close"
-            data-target="#actions-search"><i class="far fa-times"></i></a>
-        </div>
-      </div>
-    </div>
-
-    <div class="row justify-content-between align-items-center">
-      <div class="col">
-        <h6 class="d-inline-block mb-0">Contactos</h6>
-      </div>
-      <div class="col text-right">
-        <div class="actions"><a href="#" class="action-item mr-3" data-action="search-open"
-            data-target="#actions-search"><i class="far fa-search"></i></a>
-          <div class="dropdown mr-3">
-            <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true"
-              aria-expanded="false">
-              <i class="far fa-filter"></i>
-            </a>
-            <div class="dropdown-menu dropdown-menu-right">
-              <a class="dropdown-item" href="#">
-                <i class="far fa-sort-amount-down"></i>Mais novo
-              </a>
-              <a class="dropdown-item" href="#">
-                <i class="far fa-sort-alpha-down"></i>De A-Z
-              </a>
-              <a class="dropdown-item" href="#">
-                <i class="far fa-sort-alpha-up"></i>De Z-A
-              </a>
-            </div>
-          </div>
-          <div class="dropdown" data-toggle="dropdown">
-            <a href="#" class="action-item" role="button" data-toggle="dropdown" aria-haspopup="true"
-              aria-expanded="false">
-              <i class="far fa-ellipsis-h"></i>
-            </a>
-            <div class="dropdown-menu dropdown-menu-right">
-              <a href="#" class="dropdown-item">Atualizar</a>
-              <a href="#" class="dropdown-item">Açao</a>
-              <a href="#" class="dropdown-item">Açao</a>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-
-  </div>
-
-  <businx-table
-    [table-config]="contactsTbl"
-  ></businx-table>
-
-</div>
+<businx-table [table-config]="contactsTbl"></businx-table>
 
 <businx-contact-create-modal></businx-contact-create-modal>

apps/billing/src/app/contacts/contacts.component.spec.ts

@@ -1,25 +1,118 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { NO_ERRORS_SCHEMA } from '@angular/core';
+import { RouterTestingModule } from '@angular/router/testing';
 
+import { SharedModule } from '@bill/shared/shared.module';
 import { ContactsComponent } from './contacts.component';
+import { ResumeCard } from '@bill/shared/resume-card/resume-card';
+import { By } from '@angular/platform-browser';
+import { ResumeCardComponent } from '@bill/shared/resume-card/resume-card.component';
+import { PageTitleComponent } from '@bill/shared/page-title/page-title.component';
+import { ContactCreateModalComponent } from './contact-create-modal/contact-create-modal.component';
 
-describe('ContactsComponent', () => {
+describe('🚦 ContactsComponent', () => {
   let component: ContactsComponent;
   let fixture: ComponentFixture<ContactsComponent>;
 
+  const CARDS: ResumeCard [] = [
+    {
+      title: 'Novos contactos',
+      isCurrency: false,
+      icon: {
+        bg: 'bg-gradient-danger',
+        class: 'fa-users'
+      },
+      values: {
+        previews: 100000,
+        current: 20000
+      }
+    },
+    {
+      title: 'Vendas totais',
+      isCurrency: true,
+      icon: {
+        bg: 'bg-gradient-success',
+        class: 'fa-hand-holding-usd'
+      },
+      values: {
+        previews: 370000,
+        current: 872000
+      }
+    },
+    {
+      title: 'Encomendas',
+      isCurrency: false,
+      icon: {
+        bg: 'bg-gradient-info',
+        class: 'fa-tag'
+      },
+      values: {
+        previews: 72,
+        current: 72
+      }
+    },
+    {
+      title: 'Terceiros',
+      isCurrency: true,
+      icon: {
+        bg: 'bg-gradient-info',
+        class: 'fa-tag'
+      },
+      values: {
+        previews: 55000,
+        current: 47630
+      }
+    }
+  ];
+
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ContactsComponent ]
+      declarations: [ ContactsComponent ],
+      imports: [
+        RouterTestingModule,
+        SharedModule
+      ],
+      schemas: [NO_ERRORS_SCHEMA]
     })
     .compileComponents();
+
+
   }));
 
-  beforeEach(() => {
+  beforeEach(async (() => {
     fixture = TestBed.createComponent(ContactsComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-  });
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  it(`should have 'Contactos' as title`, () => {
+    const el = fixture.debugElement.query(By.directive(PageTitleComponent));
+
+    expect(el).toBeTruthy();
+    expect(fixture.nativeElement.querySelector('h5').textContent).toContain('Contactos');
+  });
+
+  it('should render all Cards in DOM', () => {
+    component.contactsCrd = CARDS;
+
+    expect(component.contactsCrd.length).toBe(4);
+
+    fixture.detectChanges();
+
+    const el = fixture.debugElement.queryAll(By.directive(ResumeCardComponent));
+
+    expect(el.length).toBe(4);
+  });
+
+  it('should have modal to create new contacts', () => {
+    const el = fixture.debugElement.queryAll(By.directive(ContactCreateModalComponent));
+
+    expect(el).toBeTruthy();
+  });
+
+
 });

apps/billing/src/app/contacts/contacts.component.ts

@@ -69,7 +69,8 @@ export class ContactsComponent implements OnInit {
     this.contactsTbl  = {
       columns: CONTACTS_TABLE_COLUMNS,
       dataset: this.data,
-      collection: 'contacts'
+      collection: 'contacts',
+      title: 'Clientes'
     }
   }