Replace a function within a placeholder

Question

Replace a function within a placeholder

Looking to validate the functionality of my custom Google Maps geocoder directive. In my code, I've set up a geocode constructor that I have already partially implemented:

...
link: function(scope) {
    var map,
        geocoder,
        myLatLng,
        mapOptions = {
            zoom: 1,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

    geocoder = new google.maps.Geocoder();
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    geocoder.geocode({'address': 'New York'}, function(results, status) {
        myLatLng = new google.maps.LatLng(results[0].geometry.location.lat(),
            results[0].geometry.location.lng());
    }});
}

This is followed by my stubbing code:

MapsGeocoderStub = sinon.stub();
$window.google = {
    maps: {
        Geocoder: MapsGeocoderStub
    }
};

I am interested in testing the geocode.geocoder() function to see if it's being called correctly. To achieve this, I believe I may need to modify the stub to mimic the behavior of the constructor google.maps.Geocoder().

Is utilizing a stub the most appropriate approach for achieving this task?

javascript angularjs angularjs-directive karma-runner sinon

Answer 1

Answer №1

In your testing scenario, consider including the following code:

var geocodeInstance = {
    geocode: sinon.spy()
};

$window.google = {
    maps: {
        Geocoder: sinon.stub().returns(geocodeInstance);
    }
};

This setup specifies that when you call $window.google.maps.Geocoder(), it will return a geocodeInstance object with a geocode method. I opted for sinon.spy() to confirm its invocation, but a stub could also work.

Subsequently, include this assertion in your test:

expect(geocodeInstance.geocode).calledOnce;

I chose to use expect in my tests for consistency. Additionally, try incorporating $window into your directive and execute:

geocoder = new $window.google.maps.Geocoder();

Answer 2

In your testing scenario, consider including the following code:

var geocodeInstance = {
    geocode: sinon.spy()
};

$window.google = {
    maps: {
        Geocoder: sinon.stub().returns(geocodeInstance);
    }
};

This setup specifies that when you call $window.google.maps.Geocoder(), it will return a geocodeInstance object with a geocode method. I opted for sinon.spy() to confirm its invocation, but a stub could also work.

Subsequently, include this assertion in your test:

expect(geocodeInstance.geocode).calledOnce;

I chose to use expect in my tests for consistency. Additionally, try incorporating $window into your directive and execute:

geocoder = new $window.google.maps.Geocoder();

Replace a function within a placeholder

Answer №1

Similar questions

A guide on adding two fields together in AngularJS and displaying the output in a label

Multipart form data processing without specifying files

Deliver a JSON response using Express

Obtain the total sum and count of values stored in a VueJS checkbox data attribute

Form containing a pair of buttons

Mastering parameter passing in Node.js functions: A comprehensive guide

Tips for sending information to an Express API through AJAX

The signature provided by the pusher is invalid: The expected HMAC SHA256 in hexadecimal digest is

The first time I try to load(), it only works partially

Node.js 5.0.0 facing compatibility issues with installing NPM packages

Expanding and collapsing DIV elements using JavaScript upon clicking navigation menu items

Creating a redux store with an object using typescript: A step-by-step guide

When a button is clicked in AngularJS, set the checkbox to its default state

What is the recommended lifecycle hook in Vue.js2 to execute a function when the page is loaded?

Deploying AngularJS and Ruby on Rails applications on Heroku platform

What is the best way to transfer data from a clicked table row to another component?

Uploading Files with Angular and Including Extra Data in ASP.NET Web API

Leaflet Alert: The number of child elements is not the same as the total number of markers

Ways to monitor the scores in Player versus Computer matchups

jQuery Each Loop failing to retrieve data during iteration