mapView.spec.js

var Backbone = require('backbone');
var MapView = require('../../../../../src/apps/products/list/views/mapView');
var productsListChannel = Backbone.Wreqr.radio.channel('productsList');

describe('Map View', function () {
    beforeEach(function () {
        window.google = {
            maps: {}
        };

        this.fakeModel = new Backbone.Model();
        this.mapView = new MapView({model: this.fakeModel});
    });

    describe('#initialize', function () {
        beforeEach(function () {
            this.fakeMapIcons = 'Fake icons';
            spyOn(this.mapView, 'getMapIcons').and.returnValue(this.fakeMapIcons);

            this.mapView.initialize();
        });

        it('should store map icons', function () {
            expect(this.mapView.mapIcons).toEqual(this.fakeMapIcons);
        });
    });

    describe('#getMapIcons', function () {
        beforeEach(function () {
            this.fakeThemeIcons = {
                regular: 'Fake marker 1',
                highlighted: 'Fake marker 2',
                regularSelected: 'Fake marker 3',
                highlightedSelected: 'Fake marker 4',
                cluster1: 'Fake marker 5',
                cluster2: 'Fake marker 6',
                cluster3: 'Fake marker 7'
            };
            this.fakeThemeAssets = {
                markers: this.fakeThemeIcons
            };

            this.fakeMarkers = this.mapView.getMapIcons(this.fakeThemeAssets);
        });

        it('should return a shortcut for the theme icon markers', function () {
            expect(this.fakeMarkers).toEqual(this.fakeThemeIcons);
        });
    });

    describe('#onRender', function () {
        beforeEach(function () {
            spyOn(this.mapView, 'renderMap');
            spyOn(this.mapView, 'renderMarkers');

            this.fakeAttribute = 'Fake attribute';
            this.mapView.model.set({
                fakeAttribute: this.fakeAttribute
            });

            this.mapView.render();
        });

        it('should call renderMap and renderMarkers', function () {
            expect(this.mapView.renderMap).toHaveBeenCalled();
            expect(this.mapView.renderMarkers).toHaveBeenCalledWith(this.mapView.model.attributes);
        });
    });

    describe('#renderMarkers', function () {
        beforeEach(function () {
            this.fakeBounds = 'Fake bounds';
            this.fakeMarkers = {
                listedHotelMarkers: ['1', '2'],
                nonListedHotelMarkers: ['3', '4']
            };
            this.mapView.mapIcons = {
                cluster1: 'Fake cluster 1',
                cluster2: 'Fake cluster 2',
                cluster3: 'Fake cluster 3'
            };
            this.clustererOptions = {
                maxZoom: 15,
                styles: [{
                    textColor: 'white',
                    url: this.mapView.mapIcons.cluster1,
                    height: 28,
                    width: 28
                }, {
                    textColor: 'white',
                    url: this.mapView.mapIcons.cluster2,
                    height: 33,
                    width: 33
                }, {
                    textColor: 'white',
                    url: this.mapView.mapIcons.cluster3,
                    height: 39,
                    width: 39
                }]
            };

            this.mapView.map = {
                fitBounds: jasmine.createSpy('fitBounds')
            };

            spyOn(this.mapView, 'createBounds').and.returnValue(this.fakeBounds);
            spyOn(this.mapView, 'createMarkerClusterer');
            spyOn(this.mapView, 'displayHotelMarker');
            spyOn(this.mapView, 'displayNonListedHotelMarker');
        });

        it('should create google maps bounds', function () {
            this.mapView.renderMarkers(this.fakeMarkers);

            expect(this.mapView.bounds).toEqual(this.fakeBounds);
        });

        it('should create a markerClusterer if the cluster option is true', function () {
            this.mapView.model.set('cluster', true);

            this.mapView.renderMarkers(this.fakeMarkers);

            expect(this.mapView.createMarkerClusterer).toHaveBeenCalledWith(this.mapView.map, this.clustererOptions);
        });

        it('should not create a markerClusterer if the cluster option is false', function () {
            this.mapView.model.set('cluster', false);
            var MarkerClusterer = jasmine.createSpy('MarkerClusterer');

            this.mapView.renderMarkers(this.fakeMarkers);

            expect(MarkerClusterer).not.toHaveBeenCalled();
        });

        it('should call displayHotelMarker and displayNonListedHotelMarker as many times as markers are in each category', function () {
            this.mapView.renderMarkers(this.fakeMarkers);

            expect(this.mapView.displayHotelMarker.calls.count()).toEqual(this.fakeMarkers.listedHotelMarkers.length);
            expect(this.mapView.displayNonListedHotelMarker.calls.count()).toEqual(this.fakeMarkers.nonListedHotelMarkers.length);
        });

        it('should center the map around the results', function () {
            this.mapView.renderMarkers(this.fakeMarkers);

            expect(this.mapView.map.fitBounds).toHaveBeenCalledWith(this.fakeBounds);
        });
    });

    describe('#createBounds', function () {
        it('calls googles LatLngBounds method', function () {
            window.google.maps.LatLngBounds = jasmine.createSpy('LatLngBounds');
            this.mapView.createBounds();
            expect(window.google.maps.LatLngBounds).toHaveBeenCalled();
        });
    });

    describe('#createMarkerClusterer', function () {
        it('calls googles MarkerClusterer method', function () {
            window.MarkerClusterer = jasmine.createSpy('MarkerClusterer');
            this.mapView.createMarkerClusterer('fake map', 'fake options');
            expect(window.MarkerClusterer).toHaveBeenCalledWith('fake map', [], 'fake options');
        });
    });

    describe('#createPoint', function () {
        it('calls googles latlng method', function () {
            window.google.maps.LatLng = function () {};

            spyOn(window.google.maps, 'LatLng');
            this.mapView.createPoint({
                latitude: '123',
                longitude: '456'
            });
            expect(window.google.maps.LatLng).toHaveBeenCalledWith('123', '456');
        });
    });

    describe('#displayHotelMarker', function () {
        beforeEach(function () {
            this.markerData = {
                coordinates: 'SOME_FAKE_COORDS',
                info: {
                    productId: 'SOME_PRODUCT_ID'
                }
            };
            this.mapView.bounds = {
                extend: jasmine.createSpy('extend')
            };

            this.fakePoint = 'Fake point';
            this.fakeMarker = {
                addListener: jasmine.createSpy('addListener')
            };

            spyOn(this.mapView, 'bindMarkerEvent');
            spyOn(this.mapView, 'createPoint').and.returnValue(this.fakePoint);
            spyOn(this.mapView, 'addMarker').and.returnValue(this.fakeMarker);
        });

        describe('when there are marker coordinates passes', function () {
            beforeEach(function () {
                this.mapView.displayHotelMarker(this.markerData);
            });

            it('should adds a marker to the map', function () {
                expect(this.mapView.addMarker).toHaveBeenCalledWith(this.fakePoint, true, 'SOME_PRODUCT_ID');
            });

            it('should call bounds on view', function () {
                expect(this.mapView.bounds.extend).toHaveBeenCalledWith(this.fakePoint);
            });

            it('should create click events on the marker', function () {
                expect(this.fakeMarker.addListener).toHaveBeenCalled();
            });
        });

        it('doesn’t call bounds on view if no coordinates passed', function () {
            this.mapView.displayHotelMarker({});
            expect(this.mapView.bounds.extend).not.toHaveBeenCalled();
        });

    });

    describe('#triggerMapMarkerClickedEvent', function () {
        it('should trigger a "mapMarker:click" with the correct data', function () {
            spyOn(productsListChannel.commands, 'execute');
            this.mapView.triggerMapMarkerClickedEvent();
            expect(productsListChannel.commands.execute).toHaveBeenCalled();
        });
    });

    describe('#displayNonListedHotelMarker', function () {
        beforeEach(function () {
            this.markerData = {
                coordinates: 'SOME_FAKE_COORDS'
            };
            this.fakeMarker = 'Fake marker';
            this.fakePoint = 'Fake point';

            spyOn(this.mapView, 'bindMarkerEvent');
            spyOn(this.mapView, 'createPoint').and.returnValue(this.fakePoint);
            spyOn(this.mapView, 'addMarker').and.returnValue(this.fakeMarker);
        });

        it('doesn’ add a marker to the map if nothing passed', function () {
            this.mapView.displayNonListedHotelMarker({});
            expect(this.mapView.addMarker).not.toHaveBeenCalled();
        });

        it('adds a marker to the map', function () {
            this.mapView.displayNonListedHotelMarker(this.markerData);
            expect(this.mapView.addMarker).toHaveBeenCalledWith(this.fakePoint, false);
        });

        it('adds the marker to the cluster if there is one', function () {
            this.mapView.markerClusterer = {
                addMarker: jasmine.createSpy('addMarker')
            };

            this.mapView.displayNonListedHotelMarker(this.markerData);

            expect(this.mapView.markerClusterer.addMarker).toHaveBeenCalledWith(this.fakeMarker);
        });
    });

    describe('#renderMap', function () {
        beforeEach(function () {
            spyOn(this.mapView, 'createMap');
            spyOn(this.mapView, '$').and.returnValue(['My Fake Element']);
        });

        it('should create a new map', function () {
            this.mapView.renderMap();
            expect(this.mapView.createMap).toHaveBeenCalledWith('My Fake Element', { zoom: 14 });
        });
    });

    describe('#createMap', function () {
        it('calls googles Map method', function () {
            window.google.maps.Map = function () {};

            spyOn(window.google.maps, 'Map');
            this.mapView.createMap('el', 'fake options');
            expect(window.google.maps.Map).toHaveBeenCalledWith('el', 'fake options');
        });
    });

    describe('#renderMarker', function () {
        beforeEach(function () {
            spyOn(this.mapView, 'createPoint');

            this.mapView.map = {
                setCenter: jasmine.createSpy('setCenter')
            };

            spyOn(this.mapView, 'addMarker');

            this.mapView.renderMarker({
                latitude: 'Fake Lat',
                longitude: 'Fake Lng'
            });
        });

        it('should create a new LatLng', function () {
            expect(this.mapView.createPoint).toHaveBeenCalledWith('Fake Lat', 'Fake Lng');
        });

        it('should call to setCenter method', function () {
            expect(this.mapView.map.setCenter).toHaveBeenCalled();
        });

        it('should call to addMarker method', function () {
            expect(this.mapView.addMarker).toHaveBeenCalled();
        });
    });

    describe('#addMarker', function () {
        beforeEach(function () {
            this.mapView.mapIcons = {
                regular: 'Fake regular icon',
                highlighted: 'Fake highlighted icon'
            };
            this.fakeLatLng = 'Fake latLng';
            this.fakeMarker = 'Fake marker';

            spyOn(this.mapView, 'createMarker').and.returnValue(this.fakeMarker);
        });

        it('should create a marker', function () {
            var expectedMarker = this.mapView.addMarker(this.fakeLatLng);
            expect(expectedMarker).toEqual(this.fakeMarker);
        });

        it('should pass the proper options and regular icon', function () {
            var isAltIcon = false;

            this.mapView.addMarker(this.fakeLatLng, isAltIcon, 'SOME_PRODUCT_ID');

            expect(this.mapView.createMarker).toHaveBeenCalledWith({
                position: this.fakeLatLng,
                map: this.mapView.map,
                title: '',
                icon: this.mapView.mapIcons.regular,
                productId: 'SOME_PRODUCT_ID'
            });
        });

        it('should pass the proper options and highlighted icon', function () {
            var isAltIcon = true;

            this.mapView.addMarker(this.fakeLatLng, isAltIcon, 'SOME_PRODUCT_ID');

            expect(this.mapView.createMarker).toHaveBeenCalledWith({
                position: this.fakeLatLng,
                map: this.mapView.map,
                title: '',
                icon: this.mapView.mapIcons.highlighted,
                productId: 'SOME_PRODUCT_ID'
            });
        });
    });

    describe('#createMarker', function () {
        it('calls googles Marker method', function () {
            window.google.maps.Marker = function () {};

            spyOn(window.google.maps, 'Marker');
            this.mapView.createMarker('fake options');
            expect(window.google.maps.Marker).toHaveBeenCalledWith('fake options');
        });
    });

    describe('#markerClickEvent', function () {
        beforeEach(function () {
            this.marker = {
                setIcon: jasmine.createSpy('fakeMarker'),
                icon: 'SOME_ICON_1'
            };
            this.mapView.markerSelected = this.marker;
        });

        describe('when the markerSelected has been set', function () {

            it('should set the Icon with a highlighted selected icon', function () {
                this.mapView.mapIcons.highlightedSelected = 'SOME_ICON_1';
                this.mapView.mapIcons.highlighted = 'HIGHLIGHTED_ICON';

                this.mapView.markerClickEvent(this.marker, 'SOME_DATA', true);

                expect(this.mapView.markerSelected.setIcon).toHaveBeenCalledWith('HIGHLIGHTED_ICON');
            });

            it('should set the Icon with regular selected icon', function () {
                this.mapView.mapIcons.highlightedSelected = false;
                this.mapView.mapIcons.highlighted = false;
                this.mapView.mapIcons.regular = 'REGULAR_ICON';

                this.mapView.markerClickEvent(this.marker, 'SOME_DATA', true);

                expect(this.mapView.markerSelected.setIcon).toHaveBeenCalledWith('REGULAR_ICON');
            });
        });

        describe('when the marker has not been set', function () {

            beforeEach(function () {
                this.mapView.markerSelected =  false;
            });

            it('should set the marker icon to highlighted selected when it is shown in the page ', function () {
                this.mapView.mapIcons.highlightedSelected = 'HIGHLIGHTED_ICON';
                this.mapView.markerClickEvent(this.marker, 'SOME_DATA', true);

                expect(this.marker.setIcon).toHaveBeenCalledWith('HIGHLIGHTED_ICON');
            });

            it('should set the marker icon to regular selected when it is not shown in the page', function () {
                this.mapView.mapIcons.regularSelected = 'REGULAR_ICON';
                this.mapView.markerClickEvent(this.marker, 'SOME_DATA', false);

                expect(this.marker.setIcon).toHaveBeenCalledWith('REGULAR_ICON');
            });
        });
    });

    describe('App handler', function () {
        beforeEach(function () {
            this.expectedView = productsListChannel.reqres.request('new:map:view', this.fakeModel);
        });

        it('should return an instance of MapView with the correct model data', function () {
            expect(this.expectedView instanceof MapView).toBeTruthy();
            expect(this.expectedView.model).toBe(this.fakeModel);
        });
    });

});