[CYB-201] [UI][COMPONENT] Fixed Karma Unit tests.

* Fixed merge-conflict.

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/indexing-form/indexing-form.component.ts

@@ -1,6 +1,6 @@
 import {Component, EventEmitter, OnDestroy, OnInit, Output} from '@angular/core';
 import {ConfigChangedEvent} from "../parser/advanced-editor/advanced-editor.component";
-import {FormBuilder, FormGroup, UntypedFormBuilder, UntypedFormGroup} from "@angular/forms";
+import {UntypedFormBuilder, UntypedFormGroup} from "@angular/forms";
 import {select, Store} from "@ngrx/store";
 import {ChainPageState, getIndexMappings} from "../../chain-page.reducers";
 import {GetIndexMappingsAction} from "../../chain-page.actions";

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/diff-popup/diff-popup.component.spec.ts

@@ -9,7 +9,6 @@ import {CommonModule} from "@angular/common";
 import {NzModalModule} from "ng-zorro-antd/modal";
 import {NoopAnimationsModule} from "@angular/platform-browser/animations";
 import {TextDiffViewComponent} from "../text-diff-view/text-diff-view.component";
-import {MonacoEditorModule} from "@materia-ui/ngx-monaco-editor";
 import {MockComponent} from "ng-mocks";
 import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from "@angular/core";
 
@@ -25,7 +24,6 @@ describe('DiffPopupComponent', () => {
         CommonModule,
         NoopAnimationsModule,
         NzModalModule,
-        MonacoEditorModule
       ],
       providers: [
         provideMockStore({

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/parser-by-parser/parser-by-parser.component.spec.ts

@@ -10,7 +10,7 @@
  * limitations governing your use of the file.
  */
 
-import {ComponentFixture, fakeAsync, TestBed, tick, waitForAsync} from '@angular/core/testing';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {CheckCircleOutline, CloseCircleOutline, WarningFill} from '@ant-design/icons-angular/icons';
 import {NzIconModule} from 'ng-zorro-antd/icon';
@@ -28,9 +28,7 @@ import {NzModalModule} from "ng-zorro-antd/modal";
 import {NzPopoverModule} from "ng-zorro-antd/popover";
 import {FormsModule} from "@angular/forms";
 import {NoopAnimationsModule} from "@angular/platform-browser/animations";
-import {findEl} from "../../../../shared/test/test-helper";
 import {ShowDiffModalAction} from "../diff-popup/diff-popup.actions";
-import {MonacoEditorModule} from "@materia-ui/ngx-monaco-editor";
 import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from "@angular/core";
 import {MockComponent} from "ng-mocks";
 
@@ -56,7 +54,6 @@ describe('ParserByParserComponent', () => {
         NzTimelineModule,
         NzResultModule,
         NoopAnimationsModule,
-        MonacoEditorModule,
         NzIconModule.forRoot([CheckCircleOutline, CloseCircleOutline, WarningFill])
       ],
       providers: [

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/sample-data-form/sample-data-text-folder-input/sample-data-text-folder-input.component.ts

@@ -1,24 +1,26 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {
-    SampleDataInternalModel,
-    SampleDataModel,
-    SampleDataType,
-    SampleTestStatus
+  SampleDataInternalModel,
+  SampleDataModel,
+  SampleDataType,
+  SampleTestStatus
 } from "../../models/sample-data.model";
 import {EntryParsingResultModel} from "../../models/live-view.model";
 import {select, Store} from "@ngrx/store";
 import {SampleDataTextFolderInputState} from "./sample-data-text-folder-input.reducers";
 import {
-    getEditModalVisible,
-    getExecutionStatus,
-    getRunResults,
-    getSampleData, getSampleFolderPath
+  getEditModalVisible,
+  getExecutionStatus,
+  getRunResults,
+  getSampleData,
+  getSampleFolderPath
 } from "./sample-data-text-folder-input.selectors";
 import {Observable, Subject} from "rxjs";
 import {
-    FetchSampleListTriggeredAction, SampleFolderViewInitializedAction,
-    SaveSampleListTriggeredAction,
-    ShowEditModalAction
+  FetchSampleListTriggeredAction,
+  SampleFolderViewInitializedAction,
+  SaveSampleListTriggeredAction,
+  ShowEditModalAction
 } from "./sample-data-text-folder-input.actions";
 import {UntypedFormBuilder, UntypedFormGroup} from "@angular/forms";
 import {map, takeUntil} from "rxjs/operators";

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/text-diff-view/text-diff-view.component.html

@@ -3,7 +3,7 @@
         <form class="form-inline" role="form">
            <div class="form-check mb-2 mr-sm-2">
                 <label class="form-check-label">
-                    <input class="form-check-input" type="checkbox" (change)="onChangeInline($event.target.checked)"> Inline Diff
+                    <input class="form-check-input" type="checkbox" (change)="onChangeInline($any($event.target).checked)"> Inline Diff
                 </label>
             </div>
         </form>

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/text-diff-view/text-diff-view.component.spec.ts

@@ -1,16 +1,16 @@
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 
 import { TextDiffViewComponent } from './text-diff-view.component';
-import {MonacoEditorModule} from "@materia-ui/ngx-monaco-editor";
 import {CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA} from "@angular/core";
+import {MonacoEditorModule} from "ngx-monaco-editor-v2";
 
 describe('TextDiffViewComponent', () => {
   let component: TextDiffViewComponent;
   let fixture: ComponentFixture<TextDiffViewComponent>;
 
   beforeEach(waitForAsync( () => {
     TestBed.configureTestingModule({
-      imports: [MonacoEditorModule],
+      imports: [],
       declarations: [ TextDiffViewComponent ],
       schemas: [CUSTOM_ELEMENTS_SCHEMA, NO_ERRORS_SCHEMA]
     })
@@ -20,8 +20,8 @@ describe('TextDiffViewComponent', () => {
   beforeEach(() => {
     fixture = TestBed.createComponent(TextDiffViewComponent);
     component = fixture.componentInstance;
-    component.originalModel = 'original';
-    component.modifiedModel = 'modified';
+    component.originalModelJson = 'original';
+    component.modifiedModelJson = 'modified';
     fixture.detectChanges();
   });
 

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/live-view/text-diff-view/text-diff-view.component.ts

@@ -25,7 +25,7 @@ export class TextDiffViewComponent implements OnChanges {
         }
     }
 
-    onChangeInline(checked) {
-        this.diffOptions = Object.assign({}, this.diffOptions, {renderSideBySide: !checked});
+    onChangeInline(checked: boolean) {
+        this.diffOptions = {...this.diffOptions, renderSideBySide: !checked};
     }
 }

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/chain-page/components/parser/advanced-editor/advanced-editor.component.spec.ts

@@ -15,6 +15,7 @@ import { FormsModule } from '@angular/forms';
 
 import { AdvancedEditorComponent } from './advanced-editor.component';
 import {NzFormModule} from "ng-zorro-antd/form";
+import {MonacoEditorModule} from "ngx-monaco-editor-v2";
 
 describe('AdvancedEditorComponent', () => {
   let component: AdvancedEditorComponent;
@@ -24,6 +25,7 @@ describe('AdvancedEditorComponent', () => {
     TestBed.configureTestingModule({
       imports: [
         FormsModule,
+        MonacoEditorModule.forRoot({}),
         NzFormModule,
       ],
       declarations: [ AdvancedEditorComponent ]

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/components/popup/json-editor-popup/json-editor-popup.component.html

@@ -1,4 +1,4 @@
-<div class="popup-content">
+<div class="popup-content" >
   <h1 cdkDrag
       cdkDragHandle
       cdkDragRootElement=".cdk-overlay-pane"
@@ -13,13 +13,13 @@
     <button mat-flat-button
             class="popup-action-button"
             color="primary"
-            [mat-dialog-close]="json" cdkFocusInitial>
+            [mat-dialog-close]="json">
       Save
     </button>
     <button mat-flat-button
             class="popup-action-button"
             [mat-dialog-close]="json"
-            cdkFocusInitial>
+            >
       Cancel
     </button>
   </div>

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/app/components/popup/json-editor-popup/json-editor-popup.component.spec.ts

@@ -1,21 +1,39 @@
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 
-import { JsonEditorPopupComponent } from './json-editor-popup.component';
+import {JsonEditorPopupComponent} from './json-editor-popup.component';
+import {MAT_DIALOG_DATA, MatDialogModule, MatDialogRef} from "@angular/material/dialog";
+import {MockComponent} from "ng-mocks";
+import {AdvancedEditorComponent} from "../../../chain-page/components/parser/advanced-editor/advanced-editor.component";
 
 describe('JsonEditorPopupComponent', () => {
   let component: JsonEditorPopupComponent;
   let fixture: ComponentFixture<JsonEditorPopupComponent>;
+  let dialogRef: MatDialogRef<JsonEditorPopupComponent>;
 
-  beforeEach(async () => {
-    await TestBed.configureTestingModule({
-      declarations: [ JsonEditorPopupComponent ]
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [MatDialogModule],
+      declarations: [JsonEditorPopupComponent, MockComponent(AdvancedEditorComponent)],
+      providers: [
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            json: {foo: 'bar'}
+          }
+        },
+        {
+          provide: MatDialogRef,
+          useValue: jasmine.createSpyObj('MatDialogRef', ['closeDialog'])
+        }
+      ]
     })
-    .compileComponents();
-  });
+      .compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(JsonEditorPopupComponent);
     component = fixture.componentInstance;
+    dialogRef = TestBed.inject(MatDialogRef);
     fixture.detectChanges();
   });
 

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/karma.conf.js

@@ -41,9 +41,9 @@ module.exports = function (config) {
     port: 9876,
     colors: true,
     logLevel: config.INFO,
-    autoWatch: false,
-    browsers: ['ChromeHeadless'],
-    singleRun: true,
-    restartOnFileChange: false
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
   });
 };

flink-cyber/metron-parser-chain/parser-chains-config-service/frontend/parser-chains-client/src/styles.scss

@@ -1,13 +1,20 @@
-
-// Custom Theming for Angular Material
-// For more information: https://material.angular.io/guide/theming
+/*!
+ * Copyright 2020 - 2022 Cloudera. All Rights Reserved.
+ *
+ * This file is licensed under the Apache License Version 2.0 (the "License"). You may not use this file
+ * except in compliance with the License. You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
+ * either express or implied. Refer to the License for the specific permissions and
+ * limitations governing your use of the file.
+ */
 @use '@angular/material' as mat;
-// Plus imports for other components in your app.
 
-// Include the common styles for Angular Material. We include this here so that you only
-// have to load a single css file for Angular Material in your app.
-// Be sure that you only ever include this mixin once!
 @include mat.core();
+@import "./theme.scss";
+@import "./custom-component-theme";
+@import "./custom-palite";
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -33,24 +40,6 @@ $parser-chaining-theme: mat.define-light-theme((
 // that you are using.
 @include mat.all-component-themes($parser-chaining-theme);
 
-/*!
- * Copyright 2020 - 2022 Cloudera. All Rights Reserved.
- *
- * This file is licensed under the Apache License Version 2.0 (the "License"). You may not use this file
- * except in compliance with the License. You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
- * either express or implied. Refer to the License for the specific permissions and
- * limitations governing your use of the file.
- */
-@use '@angular/material' as mat;
-
-@include mat.core();
-@import "./theme.scss";
-@import "./custom-component-theme";
-@import "./custom-palite";
-
 @include mat.all-component-themes($theming-material-components-theme);
 @include custom-components-theme($theming-material-components-theme, $notifications-theme);