CODEWITHSUNDEEP
angularjsgoogle-mapsprotractorangular-google-maps
Paul Fitzgerald
Paul Fitzgerald

Reputation: 12129

protractor testing input box googlemaps

I am currently writing an application using Angular. I am making a GET request to an API and with the data it returns I am placing markers on a google map. I decided to use the angular-google maps library for this application -http://angular-ui.github.io/angular-google-maps/#!/

I have run into some issues whilst trying to carry out end to end testing using protractor. One simple thing, yet proving impossible, is that I want to get the text from the input box on my map.

My code is as follows:

<html ng-app="hailoApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hailo-App</title>
  <link rel="stylesheet" href="/css/style.css">
  <script src='http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false&language=en&v=3.17'></script>
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/jquery/dist/jquery.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="bower_components/lodash/dist/lodash.compat.js"></script>
  <script src="bower_components/angular-google-maps/dist/angular-google-maps.js"></script>
  <script type="text/javascript" src="bower_components/angular-mocks/angular-mocks.js"></script>
  <script src="js/hailo.js"></script>
</head>

  <body ng-controller="mapController">

    <header>
      <div id="logo"></div>
    <nav>
      <ul>
        <li>DRIVERS</li>
        <li>DOWNLOAD</li>
        <li>GITHUB</li>
      </ul>
    </nav>
    </header>

  <div ng-show='view == 1' id="arrival_time">
   <p>ETA is:</br> {{ETA}}</p>
  </div>
  <div ng-show='view ==2' id="exist_false">
    <p>No Such Location</p>
  </div>

  <div id="map_canvas">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable='true' options="options" events='map.events'>
    <ui-gmap-marker coords="marker.coords" icon="marker.icon" idkey="1" id="user" options='marker.options'></ui-gmap-marker>
    <ui-gmap-marker ng-repeat="marker in drivers" idkey="2" coords="marker" id="taxi">
    </ui-gmap-marker>
    <ui-gmap-search-box template="searchbox.template" events="map.events" position="searchbox.position"></ui-gmap-search-box>
    </ui-gmap-google-map>
  </div>

    <script type="text/ng-template" id="searchbox.tpl.html">
      <form>
          <input type="text" placeholder="ENTER LOCATION" id="searcher">
      </form>
    </script>
  </body>
</html>

My controller contains the following code relating to the input box:

$scope.searchbox = {
    template: 'searchbox.tpl.html',
    events: $scope.map.events,
    position: 'TOP_LEFT'
  };

Does anyone know how I could write a protractor test to target the searchbox, so I can enter text and then submit it, following which I can mock the API response? I have searched everywhere and tried everything but cannot solve this.

Thanks, Paul

Upvotes: 1

Views: 1976

Answers (1)

alecxe
alecxe

Reputation: 474151

For mocking API calls there is a handy protractor-http-mock library which I personally use.

In order to enter text to the search input and submit, you can use:

var searcher = element(by.id("searcher"));

searcher.sendKeys("Location");
searcher.submit();

Or:

searcher.sendKeys("Location");
searcher.sendKeys(protractor.Key.ENTER);  // or protractor.Key.RETURN

Also, you may need to use an Explicit Wait to wait for the input to appear before interacting with the element. browser.wait() with a presenceOf Expected Condition should help:

var EC = protractor.ExpectedConditions;
browser.wait(EC.presenceOf(searcher), 10000, "Searcher was not found")

searcher.sendKeys("Location");

Upvotes: 2

Related Questions