Using this package with Angular 5 and Karma/PhantomJS gives error

[skynet2]

Using this package with Angular 5 and Karma/PhantomJS gives error

[ddouras]

thanks @skynet2 , I use karma/jasmine/phantomJS for all tests/mocks, no specific mock library

[skynet2]

Hi @ddouras ,

Can you provide an example of your component`s test?
Do you use angular-cli ?

Thanks,
Stas

[ddouras]

@skynet2 yes I use angular-cli

Here's a simple snippet of my spec file

import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NO_ERRORS_SCHEMA } from '@angular/core';
import { GooglePlaceModule } from 'ngx-google-places-autocomplete';

describe('MyComponent component', () => {
  let component: MyComponent;
  let fixture: ComponentFixture<MyComponent>;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [
        GooglePlaceModule
      ],
      declarations: [
        MyComponent
      ],
      schemas: [NO_ERRORS_SCHEMA],]
    }).compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(MyComponent);
    component = fixture.componentInstance;

  });

  it('Should create component', () => {
    fixture.detectChanges();
    expect(component).toBeTruthy();
  });
});

I have also included below script to my index file. No sure if I am missing something. The screen works works perfectly fine with the auto complete, only issue I have is with karma.

<script src="https://maps.googleapis.com/maps/api/js?key={{MY_KEY}}&libraries=places&sensor=false&language=en"></script>

[skynet2]

Hi @ddouras ,

I found pretty similar issue angular-ui/angular-google-maps#270

Looks like there few ways to resolve it, but the most suitable, I think will be to mock google object (last few messages from angular-ui discussion) https://github.com/ScottieR/angular-google-maps-mock

Thanks,
Stas

[ddouras]

thanks @skynet2

I now get another error.

        TypeError: undefined is not a function (evaluating 'this.autocomplete.addListener('place_changed', function () {
                    _this.handleChangeEvent();
                })') in http://localhost:9876/_karma_webpack_/vendor.bundle.js (line 213559)

Do you think there is a way to mock the entire directive on my test?

[skynet2]

Hi @ddouras ,

I added an additional check in a directive, can you try the latest version? 2.0.1
Not very familiar with karma, unfortunately.

Thanks,
Stas

[ddouras]

Unfortunately, still same issue, I guess this needs to be addressed as Karma is very commonly used with Angular 4/5

[skynet2]

Hi @ddouras ,

Yep, I`ll take a look at weekends.

Which mock lib you are using?

Thanks,
Stas

[gitneeraj]

@ddouras @skynet2 I'm facing the same issue when testing with Karma/Jasmine in Angular 7
Error - ReferenceError: google is not defined

Is there any fix for this?

My Unit test
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { FormsModule } from '@angular/forms';
import { GooglePlaceModule } from "ngx-google-places-autocomplete";
import { RouterTestingModule } from '@angular/router/testing';

import { DefaultComponent } from './default.component';

describe('DefaultComponent', () => {
let component: DefaultComponent;
let fixture: ComponentFixture;

beforeEach(async(() => {
    TestBed.configureTestingModule({
        imports: [
            FormsModule,
            GooglePlaceModule,
            RouterTestingModule
        ],
        declarations: [DefaultComponent]
    })
        .compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(DefaultComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
});

it('should create', () => {
    expect(component).toBeTruthy();
});

});

I have included my google places api script tag in index.html

Any help much appreciated.

[gitneeraj]

Hey,

It worked for me this way -

All I did was followed the link https://github.com/ScottieR/angular-google-maps-mock

And copied the actual js content from 'https://maps.googleapis.com/maps/api/js?sensor=false'
and put into a file inside tests/mocks/gogole.js

In src/karma.config.js
files: [
'../tests/mocks/google.js'
]

That's it! Tests passed.

[akash-int]

Hi @gitneeraj
I have tried your process but it's not working. Sometimes it's showing errors-

1. Error: Google maps library cannot be found karma
2. TypeError: google.maps.places.Autocomplete is not a constructor
   Any help much appreciated.

====== spec.ts file =======
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AddCompanyComponent } from './add-company.component';
import { SharedModule } from 'src/app/shared/shared.module';
import { HttpClientModule } from '@angular/common/http';
import { RouterTestingModule } from '@angular/router/testing';
import { ToastrModule } from 'ngx-toastr';

describe('AddCompanyComponent', () => {
let component: AddCompanyComponent;
let fixture: ComponentFixture;

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [AddCompanyComponent],
        imports: [SharedModule, HttpClientModule, RouterTestingModule, ToastrModule.forRoot()]
    }).compileComponents();
}));

beforeEach(() => {
    fixture = TestBed.createComponent(AddCompanyComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
    component.ngOnInit();
});

it('component should create', () => {
    expect(component).toBeTruthy();
});

});

===== karma.config.js file =====
files: [
'app/service/mocks/google.js', // <- Only added this
],