[Tests] Create a mock endpoint and tests for cicero api

[DietBepis1]

I am starting to run into issues with our "policy" for Cicero. Since it is such an integral part of our application, I think it is a high priority to create a fake endpoint for testing instead of relying on a trial key.

Back-end todos:

• [x] Create a POST endpoint and add to the apiRouter.
• [x] Return a selection of representatives as json. They don't have to even be real people, but the data must follow the schema below.
• [x] Write a set of integration tests for that route. They should cover things like successful API calls and error handling.
• [x] To keep front-end complexity down, perhaps it would be best to create a middleware function to intercept the representatives call and redirect to this test endpoint. That way, the front-end can use the same axios.post request but the source will change depending on NODE_ENV.

Other todos:

• [x] Document your work 🙂

Here is the schema that is returned for each representative from Cicero:

{
  id: 343935,
  name: 'Lloyd Austin III',
  title: 'Secretary of Defense',
  address_line1: 'U.S. Department of Defense',
  address_line2: '1000 Defense Pentagon',
  address_city: 'Washington',
  address_state: 'DC',
  address_zip: '20301-1000',
  address_country: 'US',
  email: 'Not Made Public',
  contactPage: 'https://www.defense.gov/our-story/meet-the-team/secretary-of-defense/',
  photoUrl: 'https://media.defense.gov/2021/Jan/29/2002592436/825/780/0/210123-A-CN110-0001.JPG',
  socialMediaPages: [
    {
       type: 'facebook',
       url: 'https://facebook.com/DeptofDefense',
       icon: 'fa-brands fa-facebook-f',
       color: '#4267B2'
    },
    {
      type: 'instagram',
      url: 'https://instagram.com/austin_lloy',
      icon: 'fa-brands fa-instagram',
      color: '#C13584'
    },
    {
      type: 'twitter',
      url: 'https://twitter.com/SecDef',
      icon: 'fa-brands fa-twitter',
      color: '#1DA1F2'
    },
    {
      type: 'twitter',
      url: 'https://twitter.com/DeptofDefense',
      icon: 'fa-brands fa-twitter',
      color: '#1DA1F2'
    }
  ],
  photoCroppingCSS: 'center center'
}

[knowaveragejoe]

As far as locally faking the endpoint goes, we could use something like json-server: https://github.com/typicode/json-server.

For local configuration, could we not just set something like CICERO_ENDPOINT_URL in .env to the test endpoint locally vs. the real one in production?

[knowaveragejoe]

I put together a small prototype locally using json-server. You can inject the routes it generates into the apiRouter after the other routes are defined, and all of them will work(i.e. /api/campaigns will work as usual, /api/representatives will return fake data from the json-server schema defined in db.json locally). We can just wrap this injection in a conditional that looks at the environment to ensure that it only happens locally.

I am a little confused by why this route should be a POST endpoint, however. It seems like if this is to simply return a list of representatives that should be GET? @DietBepis1 could you shed some light on that aspect?

[christina-ml]

Hey, is it ok if I join on this issue too? I've been wanting to work with API-related issues @DietBepis1 @knowaveragejoe

[knowaveragejoe]

@christina-ml I'd be happy to have you, check out this PR:

#511

[paramsiddharth]

I put together a small prototype locally using json-server. You can inject the routes it generates into the apiRouter after the other routes are defined, and all of them will work(i.e. /api/campaigns will work as usual, /api/representatives will return fake data from the json-server schema defined in db.json locally). We can just wrap this injection in a conditional that looks at the environment to ensure that it only happens locally. Hey @knowaveragejoe ! Good work setting that up. I think we can simply have that object stored in a JS object and return it under the server. However, I'd still like to have a look at what you've created and if it is good enough, we can go ahead and have that in the application. :)

I am a little confused by why this route should be a POST endpoint, however. It seems like if this is to simply return a list of representatives that should be GET? @DietBepis1 could you shed some light on that aspect?

Well, from what I've understood, the reason why most services do that is because POST has more possibilities — A request body is something most HTTP request frameworks don't support for GET.

[DietBepis1]

I put together a small prototype locally using json-server. You can inject the routes it generates into the apiRouter after the other routes are defined, and all of them will work(i.e. /api/campaigns will work as usual, /api/representatives will return fake data from the json-server schema defined in db.json locally). We can just wrap this injection in a conditional that looks at the environment to ensure that it only happens locally. Hey @knowaveragejoe ! Good work setting that up. I think we can simply have that object stored in a JS object and return it under the server. However, I'd still like to have a look at what you've created and if it is good enough, we can go ahead and have that in the application. :)

I am a little confused by why this route should be a POST endpoint, however. It seems like if this is to simply return a list of representatives that should be GET? @DietBepis1 could you shed some light on that aspect?

Well, from what I've understood, the reason why most services do that is because POST has more possibilities — A request body is something most HTTP request frameworks don't support for GET.

Honestly, the POST request could be a GET. @paramsiddharth is correct that many GET requests (including in Express.js) will ignore the request body, but in this case, we are just passing the zipcode as a parameter in the Cicero call, and all the Authentication is sent in the request headers.

[kalahasv]

@trushmi is it ok if I work on this as well?