[GitHub] diogo5santos5 opened a new issue #8725: (chartInit) is not working properly with Karma/Jasmine testing

[GitBox <gi...@apache.org>]

diogo5santos5 opened a new issue #8725: (chartInit) is not working properly with Karma/Jasmine testing
URL: https://github.com/apache/incubator-echarts/issues/8725
 
 
   I am having weird issues regarding Angular Testing with a component that uses `echarts`.
   
   In my html I have this div:
   
       <div class="jmCanvas">
         <div id="usersLineChart" echarts [options]="optionUsersLineChart" (chartInit)="onChartInitUsersLine($event)" class="demo-chartUsers"></div>
       </div>
   
   And, in the components I have this part of a code:
   
         onChartInitUsersLine(ec) {
           console.log("setLine");
           this.echartLine = ec;
         }
   And in the onInit method:
   
       console.log(this.echartLine.setOption);
       this.echartLine.setOption(this.optionUsersLineChart);
   
   Being the `this.optionUsersLineChart`the option file that gets changed according to the model.
   
   This works really well when running normally the application, no problems at all.
   
   But, when running the spec.ts file using:
   
       import { async, ComponentFixture, TestBed, getTestBed } from '@angular/core/testing';
       
       import { HttpClientTestingModule } from '@angular/common/http/testing';
       import { UsersViewComponent } from './users-view.component';
       import { FormsModule, ReactiveFormsModule } from '@angular/forms';
       import { MyDateRangePickerModule } from 'mydaterangepicker';
       import { NgxEchartsModule, NgxEchartsService } from 'ngx-echarts';
       import { Observable } from 'rxjs';
       import { SessionService } from '../Services/session.service';
       import { SortingService } from '../sorting.service';
       import { testSet } from '../test/testSet';
       import { Session } from '../models/Session';
       
       class MockService {
         getSessions(user: string, pageTitle: string, deviceType: string, browser: string, beginDate: number, endDate: number, os: string, screenRes: string,company:string): Observable<any[]> {
           return Observable.of(testSet);
         }      
       }
       
       describe('UsersViewComponent', () => {
         let component: UsersViewComponent;
         let service;
         let fixture: ComponentFixture<UsersViewComponent>;
       
         function fireEvent(id, event) {
           const nativeElement = fixture.nativeElement;
           const elem = nativeElement.querySelector('#' + id);
           elem.dispatchEvent(new Event(event));
         }
       
         beforeEach(() => {
       
           // Create a fake Service with a spy
           //const sessionService = jasmine.createSpyObj('sessionService', ['getSessions']);
           // Make the spy return a synchronous Observable with the test data
           //var spy = sessionService.getSessions.and.callFake(function () {
            // console.log("called");
           //  return Observable.of(testSet);
           //});
           TestBed.configureTestingModule({
             imports: [FormsModule, ReactiveFormsModule, MyDateRangePickerModule, NgxEchartsModule, HttpClientTestingModule],
             declarations: [UsersViewComponent]
           }).overrideComponent(UsersViewComponent,{
             set: {
                   providers: [
               NgxEchartsService,
               {provide:SessionService,useClass:MockService},
               SortingService
             ]
           }});
           fixture = TestBed.createComponent(UsersViewComponent);
           component = fixture.componentInstance;
           fireEvent("usersLineChart", "chartInit");
           fixture.detectChanges();
         });
       
         it('should create', () => {
           fixture.whenStable().then(() => {
             expect(component).toBeTruthy();
           });
         });
   
   It fires an error of:
   
       TypeError: _this.echartLine.setOption is not a function
   
   The event gets fired, according to the console log, but apparently it doesn't find the setOption function in the chart Instance.
   
   Any clue what it might be?
   
   I have tried a number of things and I am stuck with this error for a while now.
   
   

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services

---------------------------------------------------------------------
To unsubscribe, e-mail: dev-unsubscribe@echarts.apache.org
For additional commands, e-mail: dev-help@echarts.apache.org