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

* Fixed createEffect that did not fire a new action as a result. * Added change detector for multi-iput.
cloudera · Apr 3, 2024 · b4e9bd7 · b4e9bd7
1 parent 08683de
commit b4e9bd7
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 13 deletions.
diff --git a/...src/app/chain-page/components/custom-form/components/multi-input/multi-input.component.ts b/...src/app/chain-page/components/custom-form/components/multi-input/multi-input.component.ts
@@ -10,7 +10,17 @@
  * limitations governing your use of the file.
  */
 
-import {Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges} from '@angular/core';
+import {
+  AfterContentChecked,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  OnChanges,
+  OnInit,
+  Output,
+  SimpleChanges
+} from '@angular/core';
 import {UntypedFormControl} from '@angular/forms';
 
 import {CustomFormConfig} from '../../custom-form.component';
@@ -20,19 +30,21 @@ import {CustomFormConfig} from '../../custom-form.component';
   templateUrl: './multi-input.component.html',
   styleUrls: ['./multi-input.component.scss']
 })
-export class MultiInputComponent implements OnInit, OnChanges {
+export class MultiInputComponent implements OnInit, OnChanges, AfterContentChecked {
 
   @Input() config: CustomFormConfig;
   @Input() value: string | any[] = "";
   @Input() selectedSource: string;
-  @Input() indexingFieldMap: Map<string,Map<string, boolean>>;
+  @Input() indexingFieldMap: Map<string, Map<string, boolean>>;
   @Output() changeValue = new EventEmitter<{ [key: string]: string }[]>();
-
-  count = 0;
   controls = [];
   ignoreColumns: string[] = [];
   mappingColumns: string[] = [];
   selectSearchValue = "";
+
+  constructor(private _changeDetector: ChangeDetectorRef) {
+  }
+
   ngOnInit() {
     if (Array.isArray(this.value)) {
       this.controls = this.value.filter(item => !!item[this.config.name]).map(item =>
@@ -51,10 +63,14 @@ export class MultiInputComponent implements OnInit, OnChanges {
     }
   }
 
+  ngAfterContentChecked(): void {
+    this._changeDetector.detectChanges();
+  }
+
   onAddClick() {
-    if (this.config.multipleValues) {
+    if (this.config.multipleValues ) {
       this.controls.push(
-          new UntypedFormControl('')
+        new UntypedFormControl('')
       );
     }
   }
@@ -86,7 +102,7 @@ export class MultiInputComponent implements OnInit, OnChanges {
   }
 
   selectSearch($event: string) {
-    this.selectSearchValue=$event;
+    this.selectSearchValue = $event;
   }
 
   private _updateDropdownLists() {
@@ -96,7 +112,7 @@ export class MultiInputComponent implements OnInit, OnChanges {
 
     // split the items into two lists based on the boolean value
     if (this.indexingFieldMap && this.selectedSource) {
-      this.indexingFieldMap.get(this.selectedSource).forEach((value, key) => {
+      this.indexingFieldMap.get(this.selectedSource)?.forEach((value, key) => {
         if (value) {
           this.ignoreColumns.push(key);
         } else {

diff --git a/...ntend/parser-chains-client/src/app/chain-page/components/live-view/live-view.component.ts b/...ntend/parser-chains-client/src/app/chain-page/components/live-view/live-view.component.ts
@@ -82,6 +82,9 @@ export class LiveViewComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnDestroy(): void {
+    this.sampleDataChange$.unsubscribe();
+    this.sampleDataForceChange$.unsubscribe();
+    this.featureToggleChange$.unsubscribe();
     this._unsubscribe$.next();
     this._unsubscribe$.complete();
   }
@@ -100,7 +103,6 @@ export class LiveViewComponent implements OnInit, AfterViewInit, OnDestroy {
     });
 
     this.featureToggleChange$.pipe(
-      takeUntil(this._unsubscribe$),
       filter(value => value !== null),
     ).subscribe(value => {
       this._store.dispatch(onOffToggleChanged({ value }));

diff --git a/...rontend/parser-chains-client/src/app/chain-page/components/live-view/live-view.effects.ts b/...rontend/parser-chains-client/src/app/chain-page/components/live-view/live-view.effects.ts
@@ -56,7 +56,7 @@ export class LiveViewEffects {
     tap(({ sampleData }) => {
       localStorage.setItem(LiveViewConsts.SAMPLE_DATA_STORAGE_KEY, JSON.stringify(sampleData));
     })
-  ));
+  ), { dispatch: false });
 
   persistingOnOffToggle$ = createEffect( () => this._actions$.pipe(
     ofType(
@@ -65,7 +65,7 @@ export class LiveViewEffects {
     tap(({ value }) => {
       localStorage.setItem(LiveViewConsts.FEATURE_TOGGLE_STORAGE_KEY, JSON.stringify(value));
     })
-  ));
+  ), { dispatch: false });
 
   restoreSampleDataFromLocalStore: Observable<Action> = createEffect( () => this._actions$.pipe(
     ofType(

diff --git a/...vice/frontend/parser-chains-client/src/app/chain-page/components/route/route.component.ts b/...vice/frontend/parser-chains-client/src/app/chain-page/components/route/route.component.ts
@@ -10,7 +10,7 @@
  * limitations governing your use of the file.
  */
 
-import {Component, EventEmitter, Input, NgZone, OnDestroy, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from '@angular/core';
 import {select, Store} from '@ngrx/store';
 import {Subscription} from 'rxjs';