feat: create presets

angular.json

@@ -44,7 +44,6 @@
                             "optimization": true,
                             "outputHashing": "all",
                             "sourceMap": false,
-                            "extractCss": true,
                             "namedChunks": false,
                             "aot": true,
                             "extractLicenses": true,

package.json

@@ -50,13 +50,13 @@
     "recording"
   ],
   "devDependencies": {
-    "@angular-devkit/build-angular": "0.1001.0",
-    "@angular/cli": "10.1.0",
-    "@angular/compiler-cli": "10.1.0",
+    "@angular-devkit/build-angular": "0.1102.6",
+    "@angular/cli": "11.2.6",
+    "@angular/compiler-cli": "11.2.7",
     "@commitlint/cli": "9.1.2",
     "@commitlint/config-conventional": "9.1.2",
-    "@ng-apimock/base-client": "2.0.1",
-    "@ng-apimock/core": "2.3.2",
+    "@ng-apimock/base-client": "2.0.2",
+    "@ng-apimock/core": "2.5",
     "@ng-apimock/protractor-plugin": "1.1.0",
     "@ng-apimock/test-application": "1.0.17",
     "@semantic-release/changelog": "5.0.1",
@@ -73,7 +73,7 @@
     "body-parser": "1.19.0",
     "bootstrap": "4.5.2",
     "chai": "4.2.0",
-    "codelyzer": "6.0.0",
+    "codelyzer": "^6.0.0",
     "commitizen": "4.2.1",
     "connect": "3.7.0",
     "connect-modrewrite": "0.10.2",
@@ -97,16 +97,18 @@
     "wait-on": "5.2.0"
   },
   "dependencies": {
-    "@angular/animations": "10.1.0",
-    "@angular/common": "10.1.0",
-    "@angular/compiler": "10.1.0",
-    "@angular/core": "10.1.0",
-    "@angular/forms": "10.1.0",
-    "@angular/platform-browser": "10.1.0",
-    "@angular/platform-browser-dynamic": "10.1.0",
-    "@angular/router": "10.1.0",
+    "@angular/animations": "11.2.7",
+    "@angular/cdk": "^11.2.6",
+    "@angular/common": "11.2.7",
+    "@angular/compiler": "11.2.7",
+    "@angular/core": "11.2.7",
+    "@angular/forms": "11.2.7",
+    "@angular/material": "^11.2.6",
+    "@angular/platform-browser": "11.2.7",
+    "@angular/platform-browser-dynamic": "11.2.7",
+    "@angular/router": "11.2.7",
     "rxjs": "6.6.3",
-    "tslib": "2.0.1",
-    "zone.js": "0.11.1"
+    "tslib": "^2.0.0",
+    "zone.js": "0.11.4"
   }
 }

proxy.config.json

@@ -1,6 +1,6 @@
 {
   "/ngapimock/*": {
-      "target": "http://localhost:9999",
+      "target": "http://localhost:3000",
     "secure": false,
     "logLevel": "debug"
   }

src/app/app.module.ts

@@ -1,5 +1,7 @@
 import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
+import { ReactiveFormsModule } from '@angular/forms';
+import { MatDialogModule } from '@angular/material/dialog';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { RouterModule, Routes } from '@angular/router';
 
 import { AppComponent } from './app.component';
@@ -9,7 +11,6 @@ import { OverviewComponent } from './mocks/overview/overview.component';
 import { PresetsModule } from './presets/presets.module';
 import { RecordingsModule } from './recordings/recordings.module';
 import { VariablesModule } from './variables/variables.module';
-
 export const routes: Routes = [{ path: '', component: OverviewComponent }];
 
 @NgModule({
@@ -18,12 +19,13 @@ export const routes: Routes = [{ path: '', component: OverviewComponent }];
         HeaderComponent
     ],
     imports: [
-        BrowserModule,
+        BrowserAnimationsModule,
         MocksModule,
         PresetsModule,
         VariablesModule,
         RecordingsModule,
-        RouterModule.forRoot(routes, { useHash: true })
+        MatDialogModule,
+        RouterModule.forRoot(routes, { useHash: true, relativeLinkResolution: 'legacy' })
     ],
     providers: [],
     bootstrap: [AppComponent]

src/app/header/header.component.scss

@@ -12,6 +12,7 @@
     background: #4caf50;
     color: white;
     text-align: center;
+	padding: 2rem;
   }
 }
 

src/app/mocks/mock-state.ts

@@ -1,5 +1,14 @@
+import { Mock } from '@ng-apimock/core/dist/mock/mock';
 export interface MockState {
-    delay: number;
-    echo: boolean;
-    scenario: string;
+  delay: number;
+  echo: boolean;
+  scenario: string;
 }
+
+// todo this could be done in core and exported to enforce strict typing
+export interface GetMocksResponse {
+  state: MocksWithState;
+  mocks: Mock[];
+}
+
+export type MocksWithState = Record<string, MockState>;

src/app/mocks/mocks.service.ts

@@ -1,8 +1,11 @@
+import { Mock } from '@ng-apimock/core/dist/mock/mock';
+
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 
 import { MockRequest } from './mock-request';
+import { GetMocksResponse, MockState } from './mock-state';
 
 /** Mocks service. */
 @Injectable()
@@ -18,10 +21,10 @@ export class MocksService {
 
     /**
      * Gets the mocks.
-     * @return {Observable<Object>} observable The observable.
+     * @return {Observable<GetMocksResponse>} observable The observable.
      */
-    getMocks(): Observable<any> {
-        return this.http.get(`${this.BASE_URL}/mocks`);
+    getMocks(): Observable<GetMocksResponse> {
+        return this.http.get<GetMocksResponse>(`${this.BASE_URL}/mocks`);
     }
 
     /**

src/app/mocks/overview/overview.component.html

@@ -32,6 +32,7 @@ <h2>Available mocks</h2>
             <td colspan="5" class="text-right">
                 <button (click)="resetMocksToDefaults()" class="btn-primary">Reset to defaults</button>
                 <button (click)="setMocksToPassThrough()" class="btn-primary">All to passThrough</button>
+				<button (click)="saveAsPreset()" class="btn-primary">Save mocked state as Preset</button>
             </td>
         </tr>
         </tfoot>

src/app/mocks/overview/overview.component.scss

@@ -35,22 +35,4 @@
     }
   }
 
-  .btn-primary {
-    background: #4caf50;
-    color: white;
-    border-radius: 0.25rem;
-    border-color: #4caf50;
-    margin-left: 5px;
-
-    &:hover {
-      border-color: #4caf50;
-    }
-
-    &:focus {
-      color: white;
-      background: #4caf50;
-      border-color: #4caf50;
-      outline: 0;
-    }
-  }
-}
+ }