228 table component on customer list

angular.json

@@ -24,13 +24,22 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/datatables.net-dt/css/jquery.dataTables.css",
               "./node_modules/bootstrap/dist/css/bootstrap.min.css",
               "src/styles.scss",
-              "node_modules/ngx-toastr/toastr.css"
+              "node_modules/ngx-toastr/toastr.css",
+              "node_modules/datatables.net-buttons-dt/css/buttons.dataTables.css"
             ],
             "scripts": [
-              "./node_modules/jquery/dist/jquery.min.js",
-              "./node_modules/bootstrap/dist/js/bootstrap.min.js"
+              "node_modules/jquery/dist/jquery.js",
+              "./node_modules/bootstrap/dist/js/bootstrap.min.js",
+              "node_modules/datatables.net/js/jquery.dataTables.js",
+              "node_modules/jszip/dist/jszip.js",
+              "node_modules/datatables.net-buttons/js/dataTables.buttons.js",
+              "node_modules/datatables.net-buttons/js/buttons.colVis.js",
+              "node_modules/datatables.net-buttons/js/buttons.flash.js",
+              "node_modules/datatables.net-buttons/js/buttons.html5.js",
+              "node_modules/datatables.net-buttons/js/buttons.print.js"
             ]
           },
           "configurations": {

karma.conf.js

@@ -5,12 +5,18 @@ module.exports = function (config) {
   config.set({
     basePath: '',
     frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    files: [
+      'node_modules/jquery/dist/jquery.js',
+      'node_modules/datatables.net/js/jquery.dataTables.js',
+    ],
     plugins: [
       require('karma-jasmine'),
       require('karma-chrome-launcher'),
+      require('@angular-devkit/build-angular/plugins/karma'),
       require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
+      require('karma-spec-reporter'),
+      require('karma-coverage-istanbul-reporter')
+
     ],
     client: {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
@@ -26,7 +32,16 @@ module.exports = function (config) {
         functions: 80
       }
     },
-    reporters: ['progress', 'kjhtml'],
+    reporters: ['spec', 'kjhtml'],
+    specReporter: {
+      maxLogLines: 5,
+      suppressErrorSummary: false,
+      suppressFailed: false,
+      suppressPassed: false,
+      suppressSkipped: true,
+      showSpecTiming: false
+    },
+
     port: 9876,
     colors: true,
     logLevel: config.LOG_INFO,

package.json

@@ -23,19 +23,31 @@
     "@ngrx/effects": "^9.0.0",
     "@ngrx/store": "^9.0.0",
     "@ngrx/store-devtools": "^9.0.0",
+    "angular-datatables": "^9.0.2",
     "angular-ng-autocomplete": "^2.0.1",
     "bootstrap": "^4.4.1",
-    "jquery": "^3.5.0",
+    "datatables.net": "^1.10.21",
+    "datatables.net-dt": "^1.10.21",
+    "jquery": "^3.5.1",
     "minimist": "^1.2.5",
     "moment": "^2.25.3",
     "msal": "^1.2.1",
     "ngx-pagination": "^5.0.0",
     "ngx-toastr": "^12.0.1",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "~0.10.2"
+    "zone.js": "~0.10.2",
+    "jszip": "^3.4.0",
+    "datatables.net-buttons": "^1.6.2",
+    "datatables.net-buttons-dt": "^1.6.2",
+    "@types/datatables.net-buttons": "^1.4.3"
   },
   "devDependencies": {
+    "angular-ng-autocomplete": "^2.0.1",
+    "angular-datatables": "^9.0.2",
+    "jquery": "^3.5.1",
+    "datatables.net": "^1.10.21",
+    "datatables.net-dt": "^1.10.21",
     "@angular-devkit/build-angular": "^0.900.5",
     "@angular/cli": "~9.0.4",
     "@angular/compiler-cli": "~9.0.3",
@@ -47,14 +59,16 @@
     "@stryker-mutator/core": "^3.1.0",
     "@stryker-mutator/karma-runner": "^3.1.0",
     "@stryker-mutator/typescript": "^3.1.0",
+    "@types/datatables.net": "^1.10.19",
     "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
+    "@types/jquery": "^3.3.38",
     "@types/node": "^12.11.1",
     "codelyzer": "^5.1.2",
     "commit-message-validator": "^0.1.11",
     "husky": "^4.2.3",
     "jasmine-core": "~3.5.0",
-    "jasmine-spec-reporter": "~4.2.1",
+    "karma-spec-reporter": "^0.0.32",
     "karma": "^5.0.1",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~2.1.0",

src/app/app.module.ts

@@ -5,6 +5,7 @@ import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
+import { DataTablesModule } from 'angular-datatables';
 import { StoreModule } from '@ngrx/store';
 import { EffectsModule } from '@ngrx/effects';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
@@ -106,6 +107,7 @@ import { TimeDetailsPipe } from './modules/time-clock/pipes/time-details.pipe';
     ReactiveFormsModule,
     HttpClientModule,
     NgxPaginationModule,
+    DataTablesModule,
     AutocompleteLibModule,
     StoreModule.forRoot(reducers, {
       metaReducers,

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.html

@@ -1,14 +1,14 @@
-<table class="table table-sm table-bordered table-striped mb-0">
+<table *ngIf="customers" class="table table-sm table-bordered table-striped mb-0" datatable [dtTrigger]="dtTrigger" [dtOptions]="dtOptions">
   <thead class="thead-orange">
     <tr class="d-flex">
       <th class="col-9">Name</th>
-      <th class="col-3 text-center"></th>
+      <th class="col-3 text-center">Options</th>
     </tr>
   </thead>
   <tbody>
     <tr
       class="d-flex"
-      *ngFor="let customer of customers | paginate: { itemsPerPage: itemsPerPage, currentPage: initPage1, id: 'first' }"
+      *ngFor="let customer of customers"
     >
       <td class="col-sm-9">{{ customer.name }}</td>
       <td class="col-sm-3 text-center">
@@ -22,12 +22,3 @@
     </tr>
   </tbody>
 </table>
-<div class="d-flex align-items-end flex-column">
-  <pagination-controls
-    class="mt-auto p-2 custom-pagination"
-    (pageChange)="initPage1 = $event"
-    id="first"
-    previousLabel=""
-    nextLabel=""
-  ></pagination-controls>
-</div>

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.scss

@@ -1 +0,0 @@
-@import '../../../../../../../styles/colors.scss';

src/app/modules/customer-management/components/customer-info/components/customer-list/customer-list.component.spec.ts

@@ -1,58 +1,64 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MockStore, provideMockStore } from '@ngrx/store/testing';
-
-import { NgxPaginationModule } from 'ngx-pagination';
-import { CustomerListComponent } from './customer-list.component';
-import { allCustomers } from './../../../../store/customer-management.selectors';
-import { CustomerState, SetCustomerToEdit, DeleteCustomer } from 'src/app/modules/customer-management/store';
+import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {MockStore, provideMockStore} from '@ngrx/store/testing';
+
+import {NgxPaginationModule} from 'ngx-pagination';
+import {CustomerListComponent} from './customer-list.component';
+import {
+  CustomerManagementActionTypes,
+  CustomerState,
+  DeleteCustomer,
+  LoadCustomers,
+  SetCustomerToEdit
+} from 'src/app/modules/customer-management/store';
+import {DataTablesModule} from 'angular-datatables';
+import {ActionsSubject} from '@ngrx/store';
 
 describe('CustomerTableListComponent', () => {
   let component: CustomerListComponent;
   let fixture: ComponentFixture<CustomerListComponent>;
   let store: MockStore<CustomerState>;
-  let mockCustomerSelector;
+  const actionSub: ActionsSubject = new ActionsSubject();
 
   const state = {
-    data: [{ tenant_id: 'id', name: 'name', description: 'description' }],
+    data: [{tenant_id: 'id', name: 'name', description: 'description'}],
     isLoading: false,
     message: '',
     customerIdToEdit: '',
     customerId: ''
   };
 
 
-
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports: [NgxPaginationModule],
+      imports: [NgxPaginationModule, DataTablesModule],
       declarations: [CustomerListComponent],
       providers: [
-        provideMockStore({ initialState: state })
+        provideMockStore({initialState: state}),
+        {provide: ActionsSubject, useValue: actionSub}
       ],
     }).compileComponents();
   }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(CustomerListComponent);
     component = fixture.componentInstance;
-    fixture.detectChanges();
 
     store = TestBed.inject(MockStore);
     store.setState(state);
-    mockCustomerSelector = store.overrideSelector(allCustomers, state.data);
+    fixture.detectChanges();
+
   });
 
   it('component should be created', () => {
     expect(component).toBeTruthy();
   });
 
-  it('onNgInit customers are loaded from store executing an action', () => {
+  it('when the component is initialized the load customer action is triggered', () => {
     spyOn(store, 'dispatch');
 
     component.ngOnInit();
 
-    expect(store.dispatch).toHaveBeenCalled();
-    expect(component.customers).toEqual(state.data);
+    expect(store.dispatch).toHaveBeenCalledWith(new LoadCustomers());
   });
 
   it('onClick edit, dispatch SetCustomerToEdit and enable customer form', () => {
@@ -72,7 +78,71 @@ describe('CustomerTableListComponent', () => {
     expect(store.dispatch).toHaveBeenCalledWith(new DeleteCustomer('1'));
   });
 
+  const params = [
+    {actionName: 'delete', actionType: CustomerManagementActionTypes.DELETE_CUSTOMER_SUCCESS},
+    {actionName: 'update', actionType: CustomerManagementActionTypes.UPDATE_CUSTOMER_SUCCESS},
+    {actionName: 'create', actionType: CustomerManagementActionTypes.CREATE_CUSTOMER_SUCCESS}
+  ];
+
+  params.map(param =>
+    it(`on success ${param.actionName} customer, the load all customer action should be triggered`, () => {
+      const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
+      const action = {
+        type: param.actionType
+      };
+      spyOn(store, 'dispatch');
+
+      actionSubject.next(action);
+
+      expect(store.dispatch).toHaveBeenCalledWith(new LoadCustomers());
+    }));
+
+  params.map(param =>
+    it(`on success ${param.actionName} customer, the customer form should be disabled`, () => {
+      const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
+      const action = {
+        type: param.actionType
+      };
+      actionSubject.next(action);
+
+      expect(component.showCustomerForm).toBe(false);
+    }));
+
+  it('on success load customers, the customer list should be populated', () => {
+    const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
+    const action = {
+      type: CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS,
+      payload: state.data
+    };
+
+    actionSubject.next(action);
+
+    expect(component.customers).toEqual(state.data);
+  });
+
+  // it('on success load customer and the datatable was already initialized, then the datatable should be destroyed ' +
+  //   'before reloading the customer data', () => {
+  //   const actionSubject = TestBed.get(ActionsSubject) as ActionsSubject;
+  //   component.isDtInitialized = true;
+  //   const action = {
+  //     type: CustomerManagementActionTypes.LOAD_CUSTOMERS_SUCCESS,
+  //     payload: state.data
+  //   };
+  //   const dtApi: DataTables.Api = jasmine.createSpyObj<DataTables.Api>('dtApi', ['destroy']);
+  //   component.dtElement.dtInstance = Promise.resolve(dtApi);
+  //   spyOn(component.dtElement.dtInstance, 'then');
+  //
+  //   actionSubject.next(action);
+  //
+  //   expect(component.dtElement.dtInstance.then).toHaveBeenCalled();
+  //   // TODO Improve  this test. This is not testing the datatable is destroyed
+  //   // expect(dtApi.destroy).toHaveBeenCalled();
+  // });
+
   afterEach(() => {
+    component.dtTrigger.unsubscribe();
+    component.changeCustomerSubscription.unsubscribe();
+    component.loadCustomersSubscription.unsubscribe();
     fixture.destroy();
   });
 });