Working with google.maps

[Keithkdl]

Issue description or question

I am using openlayers, with google maps @types/googlemaps.

When I try to test a component which is using the googlemaps, e.g.

private _searchResults: google.maps.places.AutocompletePrediction[]

I am getting an error in the wallaby test only

ReferenceError: google is not defined

I assume this is because i am not importing googlemaps from the nodes folder?

How do I fix this please?

Jasmine / karam run fine with no error

Wallaby.js configuration file

var wallabyWebpack = require( 'wallaby-webpack' );
var path = require( 'path' );

var compilerOptions = Object.assign(
    require( './tsconfig.json' ).compilerOptions,
    require( './src/tsconfig.spec.json' ).compilerOptions );

module.exports = function ( wallaby ) {

    var webpackPostprocessor = wallabyWebpack( {
        entryPatterns: [
            'src/wallabyTest.js',
            'src/**/*spec.js'
        ],
        module: {
            rules: [
                { test: /\.css$/,   loader: ['raw-loader', 'css-loader'] },
                { test: /\.html$/,  loader: 'raw-loader' },
                { test: /\.ts$/,    loader: '@ngtools/webpack',         include: /node_modules/, query: { tsConfigPath: 'tsconfig.json' } },
                { test: /\.js$/,    loader: 'angular2-template-loader', exclude: /node_modules/ },
                { test: /\.json$/,  loader: 'json-loader' },
                { test: /\.styl$/,  loaders: ['raw-loader', 'stylus-loader'] },
                { test: /\.less$/,  loaders: ['raw-loader', 'less-loader'] },
                { test: /\.scss$|\.sass$/, loaders: [ 'raw-loader', { loader: 'sass-loader', options: { includePaths: ['./src/app/styles'] } } ] },
                { test: /\.(jpg|png)$/,     loader: 'url-loader?limit=128000' }
            ]
        },

        resolve: {
            extensions: [ '.js', '.ts' ],
            modules: [
                path.join( wallaby.projectCacheDir, 'src/app' ),
                path.join( wallaby.projectCacheDir, 'src' ),
                'node_modules',
                'node_modules/@ngx-translate',
                'node_modules/@angular/material'
            ],
            alias: {
                '@env':           path.resolve(wallaby.projectCacheDir, 'src/environments'),
                "@components":    path.resolve(wallaby.projectCacheDir, 'src/app/components'),
                "@services":      path.resolve(wallaby.projectCacheDir, 'src/app/services'),
                "@interfaces":    path.resolve(wallaby.projectCacheDir, 'src/app/shared/interfaces'),
                "@directives":    path.resolve(wallaby.projectCacheDir, 'src/app/directives')
            }
        },
        node: {
            fs: 'empty',
            net: 'empty',
            tls: 'empty',
            dns: 'empty'
        }
    } );

    return {
        files: [
            { pattern: 'src/**/*.+(ts|css|less|scss|sass|styl|html|json|svg)', load: false },
            { pattern: 'src/**/*.d.ts', ignore: true },
            { pattern: 'src/**/*spec.ts', ignore: true },
            { pattern: 'src/test.ts', ignore: true }
        ],
        filesWithNoCoverageCalculated: [
            'src/main.ts',
            'src/app/**/*.module.ts',
            'src/environments/**',
        ],
        tests: [
            { pattern: 'src/**/*.spec.ts', load: false },
            { pattern: 'src/**/*e2e-spec.ts', ignore: true }

        ],

        testFramework: 'jasmine',

        compilers: {
            '**/*.ts': wallaby.compilers.typeScript( compilerOptions )
        },

        middleware: function ( app, express ) {
            var path = require( 'path' );
            app.use( '/favicon.ico', express.static( path.join( __dirname, 'src/favicon.ico' ) ) );
            app.use( '/assets', express.static( path.join( __dirname, 'src/assets' ) ) );
        },

        env: {
            kind: 'electron'
        },

        postprocessor: webpackPostprocessor,

        setup: function () {
            window.__moduleBundler.loadTests();
        },

        workers: {
            initial: 6,
            regular: 3
        },

        delays: {
            run: 1000
        },

        debug: false,
        name: 'tests',
        slowTestThreshold: 200,
        lowCoverageThreshold: 90, // 90%
        maxConsoleMessagesPerTest: 100,
        reportConsoleErrorAsError: true
    };
};

Code editor or IDE name and version

Visual Studio Code v1.21.6

OS name and version

Windows 10

[smcenlly]

Can you please provide us with details on how the google maps file is loaded in your jasmine/karma configurations? Otherwise, can you please provide us with a sample repo that reproduces the problem?

[KeithLyonGSI]

the only thing relating to google maps is in th emodule.exports = function ( config )

files: [ 'https://maps.googleapis.com/maps/api/js?key=BLAH&libraries=places' ],

[ArtemGovorov]

Thanks for providing the details. Here is the way to make it work in wallaby: in your src/wallabyTest.ts file, add the following code:

var xhrObj = new XMLHttpRequest();
xhrObj.open('GET', 'https://maps.googleapis.com/maps/api/js?key=BLAH&libraries=places', false); // <- adjust the URL 
xhrObj.send('');
var se = document.createElement('script');
se.type = "text/javascript";
se.text = xhrObj.responseText;
document.getElementsByTagName('head')[0].appendChild(se);

[KeithLyonGSI]

I am getting the error message

Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'https://maps.googleapis.com/maps/api/js?key=HIDDEN_KEY_FOR_GITHUB&libraries=places'.​​
​​at http://localhost:58653/____wallaby-bundle.js?1534931496235&wallabyFileId=bundle:209107​​

It sounds like it may be due to me using using Angular CLI.

[ArtemGovorov]

Try changing your env setting as follows:

    env: {
-     kind: 'electron',
+     kind: 'chrome',
+     params: {
+       runner: '--headless --disable-web-security'
+     }
    },

and applying the previously suggested change.

[KeithLyonGSI]

Perfect !!!!!

Thank you, working perfectly now