Add diff mode toggle and counter

Author: tommysitu

src/app/shared/models/usage.model.ts

@@ -6,6 +6,7 @@ export interface Usage {
 export interface ModeCounter {
   simulate: number;
   spy: number;
+  diff: number;
   capture: number;
   modify: number;
   synthesize: number;

src/app/shared/services/hoverfly.service.spec.ts

@@ -53,6 +53,7 @@ describe('Service: Hoverfly', () => {
       usage: {
         counters: {
           capture: 0,
+          diff: 0,
           modify: 0,
           simulate: 0,
           spy: 0,

src/app/views/dashboard/dashboard.component.html

@@ -36,6 +36,7 @@
           <a (click)="setMode($event)" name="capture" [class.btn-primary]="hoverfly.mode === 'capture'" class="btn btn-xs btn-default btn-mode">Capture</a>
           <a (click)="setMode($event)" name="simulate"  [class.btn-primary]="hoverfly.mode ==='simulate'" class="btn btn-default btn-xs btn-mode">Simulate</a>
           <a (click)="setMode($event)" name="spy"  [class.btn-primary]="hoverfly.mode ==='spy'" class="btn btn-default btn-xs btn-mode">Spy</a>
+          <a (click)="setMode($event)" name="diff"  [class.btn-primary]="hoverfly.mode ==='diff'" class="btn btn-default btn-xs btn-mode">Diff</a>
           <a (click)="setMode($event)" name="modify" [class.btn-primary]="hoverfly.mode ==='modify'" class="btn btn-default btn-xs btn-mode">Modify</a>
           <a (click)="setMode($event)" name="synthesize" [class.btn-primary]="hoverfly.mode ==='synthesize'" class="btn btn-default btn-xs btn-mode">Synthesize</a>
         </div>
@@ -52,13 +53,15 @@
               <th>Captured</th>
               <th>Simulated</th>
               <th>Spied</th>
+              <th>Diffed</th>
               <th>Modified</th>
               <th>Synthesized</th>
             </tr>
             <tr id="hoverfly-counters">
               <td><span class="label label-default">{{ hoverfly?.usage?.counters?.capture || 0 }}</span></td>
               <td><span class="label label-default">{{ hoverfly?.usage?.counters?.simulate || 0 }}</span></td>
               <td><span class="label label-default">{{ hoverfly?.usage?.counters?.spy || 0 }}</span></td>
+              <td><span class="label label-default">{{ hoverfly?.usage?.counters?.diff || 0 }}</span></td>
               <td><span class="label label-default">{{ hoverfly?.usage?.counters?.modify || 0 }}</span></td>
               <td><span class="label label-default">{{ hoverfly?.usage?.counters?.synthesize || 0 }}</span></td>
             </tr>

src/app/views/dashboard/dashboard.component.spec.ts

@@ -127,8 +127,9 @@ describe('Component: Dashboard', () => {
             capture: 100,
             simulate: 200,
             spy: 300,
-            modify: 400,
-            synthesize: 500
+            diff: 400,
+            modify: 500,
+            synthesize: 600
           }
         }
     });
@@ -143,6 +144,7 @@ describe('Component: Dashboard', () => {
       expect(counters.children[2].nativeElement.textContent).toBe('300');
       expect(counters.children[3].nativeElement.textContent).toBe('400');
       expect(counters.children[4].nativeElement.textContent).toBe('500');
+      expect(counters.children[5].nativeElement.textContent).toBe('600');
     });
   }));