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

* Fixed console error.
cloudera · Mar 28, 2024 · bc185cb · bc185cb
1 parent 33e5316
commit bc185cb
Show file tree

Hide file tree

Showing 14 changed files with 130 additions and 119 deletions.
diff --git a/...ins-config-service/frontend/parser-chains-client/src/app/chain-page/chain-page.actions.ts b/...ins-config-service/frontend/parser-chains-client/src/app/chain-page/chain-page.actions.ts
@@ -21,6 +21,7 @@ import {
   RouteModel
 } from './chain-page.models';
 import {CustomFormConfig} from './components/custom-form/custom-form.component';
+import {ParserDescriptor} from "./chain-page.reducers";
 
 export const LOAD_CHAIN_DETAILS = '[Chain Details] load start';
 export const LOAD_CHAIN_DETAILS_SUCCESS = '[Chain Details] load success';
@@ -119,7 +120,7 @@ export class GetFormConfigAction implements Action {
 
 export class GetFormConfigSuccessAction implements Action {
   readonly type = GET_FORM_CONFIG_SUCCESS;
-  constructor(public payload: { parserType: string, formConfig: CustomFormConfig[] }) {}
+  constructor(public payload: { parserType: string, formConfig: ParserDescriptor }) {}
 }
 
 export class GetFormConfigFailAction implements Action {
@@ -134,7 +135,7 @@ export class GetFormConfigsAction implements Action {
 
 export class GetFormConfigsSuccessAction implements Action {
   readonly type = GET_FORM_CONFIGS_SUCCESS;
-  constructor(public payload: { formConfigs: { [key: string]: CustomFormConfig[] } }) {}
+  constructor(public payload: { formConfigs: { [key: string]: ParserDescriptor } }) {}
 }
 
 export class GetFormConfigsFailAction implements Action {

diff --git a/...config-service/frontend/parser-chains-client/src/app/chain-page/chain-page.component.html b/...config-service/frontend/parser-chains-client/src/app/chain-page/chain-page.component.html
@@ -16,6 +16,7 @@
       <nz-tabset class="left-side-tabs">
         <nz-tab class="parsers-tab" nzTitle="Parser config">
           <app-chain-view
+            *ngIf="this.parserToBeInvestigated?.length || this.breadcrumbs?.length || this.chain?.parsers?.length"
             [parsers]="parsers"
             [chainId]="(breadcrumbs.length > 0 && breadcrumbs[breadcrumbs.length - 1].id) || (chain && chain.id)"
             [dirtyParsers]="dirtyParsers"
@@ -78,7 +79,6 @@
                   formControlName="name"
                   required
                   nz-input
-                  #chainNameInput
                   type="text"
                   placeholder="Min 3 Characters"
                   data-qe-id="chain-name-field" />

diff --git a/...fig-service/frontend/parser-chains-client/src/app/chain-page/chain-page.component.spec.ts b/...fig-service/frontend/parser-chains-client/src/app/chain-page/chain-page.component.spec.ts
@@ -72,6 +72,7 @@ describe('ChainPageComponent', () => {
                 },
               dirtyParsers: [],
               dirtyChains: [],
+              path: [],
               parserToBeInvestigated: ""
             },
             'live-view': {

diff --git a/...s-config-service/frontend/parser-chains-client/src/app/chain-page/chain-page.component.ts b/...s-config-service/frontend/parser-chains-client/src/app/chain-page/chain-page.component.ts
@@ -10,7 +10,7 @@
  * limitations governing your use of the file.
  */
 
-import {Component, ElementRef, OnDestroy, OnInit, ViewChild} from '@angular/core';
+import {Component, NgZone, OnDestroy, OnInit} from '@angular/core';
 import {UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators} from '@angular/forms';
 import {ActivatedRoute, NavigationStart, Router} from '@angular/router';
 import {select, Store} from '@ngrx/store';
@@ -52,7 +52,6 @@ export class ChainPageComponent implements OnInit, OnDestroy, DeactivatePrevente
   chainIdBeingEdited: string;
   getChainsSubscription: Subscription;
   popOverVisible = false;
-  @ViewChild('chainNameInput', { static: false }) chainNameInput: ElementRef;
   editChainNameForm: UntypedFormGroup;
   failedParser$: Observable<string>;
   indexingFieldMap: Map<string,Map<string, boolean>>;
@@ -62,7 +61,8 @@ export class ChainPageComponent implements OnInit, OnDestroy, DeactivatePrevente
     private activatedRoute: ActivatedRoute,
     private modal: NzModalService,
     private router: Router,
-    private fb: UntypedFormBuilder
+    private fb: UntypedFormBuilder,
+    private zone: NgZone
   ) { }
 
   get dirty() {
@@ -83,13 +83,16 @@ export class ChainPageComponent implements OnInit, OnDestroy, DeactivatePrevente
 
   ngOnInit() {
     this.activatedRoute.params.subscribe((params) => {
-      this.chainId = params.id;
+      this.zone.run(() => {
+        this.chainId = params.id;
+      });
     });
 
     this.getChainsSubscription = this.store.pipe(select(getPathWithChains)).subscribe((path) => {
-      this.breadcrumbs = path;
+      this.zone.run(() => {
+        this.breadcrumbs = path;
+      });
     });
-
     this.getChainSubscription = this.store.pipe(select(getChain({ id: this.chainId }))).subscribe((chain: ParserChainModel) => {
       if (!chain) {
         this.store.dispatch(new fromActions.LoadChainDetailsAction({
@@ -101,12 +104,16 @@ export class ChainPageComponent implements OnInit, OnDestroy, DeactivatePrevente
     });
 
     this.store.pipe(select(getDirtyStatus)).subscribe((status) => {
-      this.dirtyParsers = status.dirtyParsers;
-      this.dirtyChains = status.dirtyChains;
+      this.zone.run(() => {
+        this.dirtyParsers = status.dirtyParsers;
+        this.dirtyChains = status.dirtyChains;
+      });
     });
     this.chainConfig$ = this.store.pipe(select(getChainDetails({ chainId: this.chainId })));
     this.store.pipe(select(getParserToBeInvestigated)).subscribe((id: string) => {
-      this.parserToBeInvestigated = id === '' ? [] : [id];
+      this.zone.run(() => {
+        this.parserToBeInvestigated = id === '' ? [] : [id];
+      });
     });
 
     this.router.events.subscribe((event) => {

diff --git a/...onfig-service/frontend/parser-chains-client/src/app/chain-page/chain-page.effects.spec.ts b/...onfig-service/frontend/parser-chains-client/src/app/chain-page/chain-page.effects.spec.ts
@@ -24,14 +24,12 @@ import * as fromActions from './chain-page.actions';
 import {ChainPageEffects} from './chain-page.effects';
 import {NzMessageService} from "ng-zorro-antd/message";
 import {CustomFormConfig} from "./components/custom-form/custom-form.component";
-
-export class MockService {
-}
+import {ParserDescriptor} from "./chain-page.reducers";
 
 describe('chain parser page: effects', () => {
   let actions: ReplaySubject<any>;
   let effects: ChainPageEffects;
-  let service: ChainPageService;
+  let service: jasmine.SpyObj<ChainPageService>;
 
   const initialState = {
     'chain-page': {
@@ -86,12 +84,12 @@ describe('chain parser page: effects', () => {
           initialState: initialState,
           selectors: []
         }),
-        {provide: ChainPageService, useClass: MockService},
+        {provide: ChainPageService, useValue: jasmine.createSpyObj('ChainPageService', ['getChain', 'saveParserConfig', 'getFormConfig', 'getFormConfigs', 'getIndexMappings'])},
         NzMessageService
       ]
     });
     effects = TestBed.inject(ChainPageEffects);
-    service = TestBed.inject(ChainPageService);
+    service = TestBed.inject(ChainPageService) as jasmine.SpyObj<ChainPageService>;
   });
 
   it('load should receive the parser config and normalize it', (done) => {
@@ -158,9 +156,8 @@ describe('chain parser page: effects', () => {
         }
       }
     };
-    service.getChain = () => of(chain);
+    service.getChain.and.returnValue(of(chain));
 
-    const getChainSpy = spyOn(service, 'getChain').and.callThrough();
 
     actions = new ReplaySubject(1);
     actions.next(new fromActions.LoadChainDetailsAction({
@@ -171,12 +168,11 @@ describe('chain parser page: effects', () => {
       expect(result).toEqual(new fromActions.LoadChainDetailsSuccessAction(normalizedChain));
       done();
     });
-    expect(getChainSpy).toHaveBeenCalledWith('123');
+    expect(service.getChain).toHaveBeenCalledWith('123');
   });
 
   it('save should send the denormalized parser config', (done) => {
-    service.saveParserConfig = () => of(void 0);
-    const saveParserConfigSpy = spyOn(service, 'saveParserConfig').and.callThrough();
+    service.saveParserConfig.and.returnValue(of(void 0));
 
     actions = new ReplaySubject(1);
     actions.next(new fromActions.SaveParserConfigAction({
@@ -188,7 +184,7 @@ describe('chain parser page: effects', () => {
       done();
     });
 
-    expect(saveParserConfigSpy).toHaveBeenCalledWith('123', {
+    expect(service.saveParserConfig).toHaveBeenCalledWith('123', {
       id: '123',
       name: 'main chain',
       parsers: [{
@@ -215,14 +211,18 @@ describe('chain parser page: effects', () => {
   });
 
   it('getFormConfig should return the form config', (done) => {
-    const formConfig: CustomFormConfig[] = [{
-      type: 'bazz',
-      id: '1',
-      name: 'foo'
-
-    }];
-    service.getFormConfig = () => of(formConfig);
-    const getFormConfigSpy = spyOn(service, 'getFormConfig').and.callThrough();
+    const descriptor: {[key: string] : ParserDescriptor} = {
+      foo: {
+        id: 'foo-descriptor',
+        name: 'foo-descriptor',
+        schemaItems: [{
+          type: 'bazz',
+          id: '1',
+          name: 'foo-schema-item'
+        }]
+      }
+    };
+    service.getFormConfig.and.returnValue(of(descriptor['foo']));
 
     actions = new ReplaySubject(1);
     actions.next(new fromActions.GetFormConfigAction({
@@ -232,45 +232,47 @@ describe('chain parser page: effects', () => {
     effects.getFormConfig$.subscribe(result => {
       expect(result).toEqual(new fromActions.GetFormConfigSuccessAction({
         parserType: 'foo',
-        formConfig
+        formConfig: descriptor['foo']
       }));
       done();
     });
 
-    expect(getFormConfigSpy).toHaveBeenCalledWith('foo');
+    expect(service.getFormConfig).toHaveBeenCalledWith('foo');
   });
 
   it('getFormConfigs should return the form configs', (done) => {
-    const formConfigs = {
-      foo: [{
-        type: 'bazz',
-        id: '1',
-        name: 'foo'
-      }]
+    const descriptor: {[key: string] : ParserDescriptor} = {
+      foo: {
+        id: 'foo-descriptor',
+        name: 'foo-descriptor',
+        schemaItems: [{
+          type: 'bazz',
+          id: '1',
+          name: 'foo-schema-item'
+        }]
+      }
     };
-    service.getFormConfigs = () => of(formConfigs);
-    const getFormConfigsSpy = spyOn(service, 'getFormConfigs').and.callThrough();
+    service.getFormConfigs.and.returnValue(of(descriptor));
 
     actions = new ReplaySubject(1);
     actions.next(new fromActions.GetFormConfigsAction());
 
     effects.getFormConfigs$.subscribe(result => {
       expect(result).toEqual(new fromActions.GetFormConfigsSuccessAction({
-        formConfigs
+        formConfigs: descriptor
       }));
       done();
     });
 
-    expect(getFormConfigsSpy).toHaveBeenCalledWith();
+    expect(service.getFormConfigs).toHaveBeenCalledWith();
   });
 
   it('getIndexMappings should return the index mappings', (done) => {
     const indexMappings = {
       path: 'foo',
       result: new Map<string, object>()
     };
-    service.getIndexMappings = () => of(indexMappings);
-    const getIndexMappingsSpy = spyOn(service, 'getIndexMappings').and.callThrough();
+    service.getIndexMappings.and.returnValue(of(indexMappings));
 
     actions = new ReplaySubject(1);
     actions.next(new fromActions.GetIndexMappingsAction({
@@ -282,7 +284,6 @@ describe('chain parser page: effects', () => {
       done();
     });
 
-    expect(getIndexMappingsSpy).toHaveBeenCalledWith({filePath: 'foo'});
+    expect(service.getIndexMappings).toHaveBeenCalledWith({filePath: 'foo'});
   });
-
 });
diff --git a/...ins-config-service/frontend/parser-chains-client/src/app/chain-page/chain-page.effects.ts b/...ins-config-service/frontend/parser-chains-client/src/app/chain-page/chain-page.effects.ts
@@ -20,7 +20,7 @@ import {catchError, map, switchMap, withLatestFrom} from 'rxjs/operators';
 import {ChainPageService} from '../services/chain-page.service';
 import * as fromActions from './chain-page.actions';
 import {ChainDetailsModel} from './chain-page.models';
-import {getChainPageState} from './chain-page.reducers';
+import {getChainPageState, ParserDescriptor} from './chain-page.reducers';
 import {denormalizeParserConfig, normalizeParserConfig} from './chain-page.utils';
 import {CustomFormConfig} from './components/custom-form/custom-form.component';
 
@@ -78,10 +78,10 @@ export class ChainPageEffects {
     ofType(fromActions.GET_FORM_CONFIG),
     switchMap((action: fromActions.GetFormConfigAction) => {
       return this.chainPageService.getFormConfig(action.payload.type).pipe(
-        map((formConfig: CustomFormConfig[]) => {
+        map((descriptor: ParserDescriptor) => {
           return new fromActions.GetFormConfigSuccessAction({
             parserType: action.payload.type,
-            formConfig
+            formConfig: descriptor
           });
         }),
         catchError((error: { message: string }) => {
@@ -96,7 +96,7 @@ export class ChainPageEffects {
     ofType(fromActions.GET_FORM_CONFIGS),
     switchMap((action: fromActions.GetFormConfigsAction) => {
       return this.chainPageService.getFormConfigs().pipe(
-        map((formConfigs: { [key: string]: CustomFormConfig[] }) => {
+        map((formConfigs: { [key: string]: ParserDescriptor }) => {
           return new fromActions.GetFormConfigsSuccessAction({
             formConfigs
           });