Posted almost 3 years ago. Visible to the public.

Consuming external APIs with Javascript

Example 1: Google Maps

  • In MovieDB, add a new field “Principal filming location”.
  • In a movie’s show view, geocode that location and show a Google map centered around it
  • Keep the Inspector’s Network tab open while the map is loading. Then observe the tab as you zoom and pan around in the map. Can you get some insight how Google Maps works?

Testing

Write a Cucumber feature that tests that the map shows the correct location. Hint: Use execute_script to talk with the Javascript that creates and centers the map.

Example 2: Gender API

  • In MovieDB, add a field "gender" to the Actor model
  • In the actor form. automatically set the gender as the user types a name
    • Also read this card for an issue you might encounter.
  • Use https://gender-api.com/ for this.

Testing

Write a Cucumber feature that tests the functionality above. Use two different techniques to write the test:

  1. Actually talk to the Gender API during tests.
  2. Only in tests, replace $.fn.genderApi with a fake implementation that maps a fixed list of names to their genders. It should have the same callback-based API as the original Gender API client for jQuery.

Talk with your mentor about the pros and cons of each approach.

Author of this card:

Avatar
Henning Koch
Last edit:
11 months ago
by Michael Leimstädtner
Posted by Henning Koch to makandra Curriculum
This website uses cookies to improve usability and analyze traffic.
Accept or learn more