Layout optimization and test fix

Author: dhcode

angular.json

@@ -122,7 +122,8 @@
           "options": {
             "main": "projects/openapi-viewer/src/test.ts",
             "tsConfig": "projects/openapi-viewer/tsconfig.spec.json",
-            "karmaConfig": "projects/openapi-viewer/karma.conf.js"
+            "karmaConfig": "projects/openapi-viewer/karma.conf.js",
+            "codeCoverage": true
           }
         },
         "lint": {

karma.conf.js

@@ -27,6 +27,12 @@ module.exports = function(config) {
     autoWatch: true,
     browsers: ['Chrome'],
     singleRun: false,
-    restartOnFileChange: true
+    restartOnFileChange: true,
+    customLaunchers: {
+      ChromeHeadlessCI: {
+        base: 'ChromeHeadless',
+        flags: ['--no-sandbox']
+      }
+    }
   });
 };

package.json

@@ -8,6 +8,8 @@
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
+    "test:lib": "ng test openapi-viewer",
+    "test:lib:ci": "ng test openapi-viewer --watch=false --no-progress --browsers=ChromeHeadlessCI",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },

projects/openapi-viewer/karma.conf.js

@@ -2,31 +2,12 @@
 // https://karma-runner.github.io/1.0/config/configuration-file.html
 
 module.exports = function(config) {
+  require('../../karma.conf')(config);
   config.set({
-    basePath: '',
-    frameworks: ['jasmine', '@angular-devkit/build-angular'],
-    plugins: [
-      require('karma-jasmine'),
-      require('karma-chrome-launcher'),
-      require('karma-jasmine-html-reporter'),
-      require('karma-coverage-istanbul-reporter'),
-      require('@angular-devkit/build-angular/plugins/karma')
-    ],
-    client: {
-      clearContext: false // leave Jasmine Spec Runner output visible in browser
-    },
     coverageIstanbulReporter: {
       dir: require('path').join(__dirname, '../../coverage/openapi-viewer'),
       reports: ['html', 'lcovonly'],
       fixWebpackSourcePaths: true
-    },
-    reporters: ['progress', 'kjhtml'],
-    port: 9876,
-    colors: true,
-    logLevel: config.LOG_INFO,
-    autoWatch: true,
-    browsers: ['Chrome'],
-    singleRun: false,
-    restartOnFileChange: true
+    }
   });
 };

projects/openapi-viewer/src/lib/method-header/method-header.component.html

@@ -1,4 +1,4 @@
-<h3 (click)="toggleOpen()" class="oav-method-header">
+<h3 (click)="toggleOpen()" [className]="'oav-method-header oav-method-bg method-' + method.toLowerCase()">
   <a routerLink [fragment]="fragment" class="mainlink" (click)="toggleOpen(); $event.stopPropagation()">
     <span [className]="'method method-' + method.toLowerCase()">{{ method.toUpperCase() }}</span>
     <span class="path">{{ path }}</span>

projects/openapi-viewer/src/lib/openapi-viewer.scss

@@ -50,6 +50,14 @@ $method-colors: (
   }
 }
 
+.oav-method-bg {
+  @each $method, $color in $method-colors {
+    &.method-#{$method} {
+      background-color: rgba($color, 0.1);
+    }
+  }
+}
+
 oav-method-header {
   h3 {
     cursor: pointer;
@@ -103,15 +111,8 @@ oav-method-header {
 }
 
 .openapi-operation {
-  background: #f1f1f1;
   margin: 0.5rem 0;
 
-  @each $method, $color in $method-colors {
-    &.method-#{$method} {
-      background-color: rgba($color, 0.1);
-    }
-  }
-
   .oav-operation-details {
     display: none;
   }
@@ -130,6 +131,7 @@ oav-method-header {
 }
 
 .oav-operation-details {
+  margin: 0.5rem 0;
   padding: 0 2rem;
 
   .send-btn {
@@ -158,7 +160,7 @@ oav-method-header {
 
 .oav-operation-layout {
   display: flex;
-  .openapi-operation {
+  .oav-operation-details {
     flex: 1;
   }
   .oav-operation-requests {

projects/openapi-viewer/src/lib/operation/operation.component.html

@@ -1,4 +1,4 @@
-<div class="oav-operation-layout">
+<div>
   <div
     [className]="'openapi-operation method-' + operationItem.method"
     [class.deprecated]="operation.deprecated"
@@ -15,31 +15,32 @@
       {{ operation.summary }}
     </oav-method-header>
 
-    <div class="oav-operation-details">
-      <p *ngIf="operationItem.operation.description">
-        {{ operationItem.operation.description }}
-      </p>
+    <div class="oav-operation-layout">
+      <div [className]="'oav-operation-details oav-method-bg method-' + operationItem.method">
+        <p *ngIf="operationItem.operation.description">
+          {{ operationItem.operation.description }}
+        </p>
 
-      <form (submit)="send()" [formGroup]="formGroup">
-        <ng-container *ngIf="operationItem.parameters?.length">
-          <h4>Parameters</h4>
-          <oav-parameter *ngFor="let param of operationItem.parameters" [parameter]="param" [formGroup]="formGroup"></oav-parameter>
-        </ng-container>
-        <button class="send-btn" [disabled]="formGroup.invalid">Send request</button>
-      </form>
+        <form (submit)="send()" [formGroup]="formGroup">
+          <ng-container *ngIf="operationItem.parameters?.length">
+            <h4>Parameters</h4>
+            <oav-parameter *ngFor="let param of operationItem.parameters" [parameter]="param" [formGroup]="formGroup"></oav-parameter>
+          </ng-container>
+          <button class="send-btn" [disabled]="formGroup.invalid">Send request</button>
+        </form>
 
-      <h4 class="oav-divided-container toggle-button left" oavOpenable #openable="openable">
-        <span class="main">Responses</span>
-        <select class="response-type-select" name="responseType" [(ngModel)]="responseType" (click)="$event.stopPropagation()">
-          <option *ngFor="let resType of operationItem.responseTypes" [value]="resType">{{ resType }}</option>
-        </select>
-      </h4>
+        <h4 class="oav-divided-container toggle-button left" oavOpenable #openable="openable">
+          <span class="main">Responses</span>
+          <select class="response-type-select" name="responseType" [(ngModel)]="responseType" (click)="$event.stopPropagation()">
+            <option *ngFor="let resType of operationItem.responseTypes" [value]="resType">{{ resType }}</option>
+          </select>
+        </h4>
 
-      <oav-responses [responses]="operationItem.responses" [responseType]="responseType" [hidden]="!openable.open"></oav-responses>
+        <oav-responses [responses]="operationItem.responses" [responseType]="responseType" [hidden]="!openable.open"></oav-responses>
+      </div>
+      <div class="oav-operation-requests" [hidden]="!requests.length">
+        <oav-requests-list [requests]="requests"></oav-requests-list>
+      </div>
     </div>
   </div>
-
-  <div class="oav-operation-requests" [hidden]="!requests.length">
-    <oav-requests-list [requests]="requests"></oav-requests-list>
-  </div>
 </div>

projects/openapi-viewer/src/lib/util/data-generator.util.ts

@@ -9,6 +9,7 @@ const formatExamples = {
   string_email: () => '[email protected]',
   'string_date-time': () => formatExampleDate.toISOString(),
   string_date: () => formatExampleDate.toISOString().substring(0, 10),
+  string_time: () => formatExampleDate.toISOString().substring(11),
   string_uuid: () => '3fa85f64-5717-4562-b3fc-2c963f66afa6',
   string_hostname: () => 'example.com',
   string_ipv4: () => '198.51.100.42',