Testing front end code.

[ielole]

I'm having trouble getting my front end code to work the way that I expect. I understand the theoretical structure of the events and ui functions and the api ajax calls, but I'm still having issues. Is there a good way to test my front end code, something like a curl request, but for the front end? I've tried to get a console log message from my success/ failure methods without success, which makes me think that the problem might be what I'm including or missing in my ajax calls.

[raq929]

If your success/failure methods aren't working, it's likely that you're not getting to the point where you're making an ajax call.
(There are ways of testing click handlers, but they're a bit more involved than our testing framework is set up for right now.)

I like to be very methodical about my front end code:

1. Create my HTML element.
2. Create a click handler attached to that element.
   2a. Have the click handler console.log('hello') AND DO NOTHING ELSE.
3. Verify that any data I want to pass to my api call is the data I expect it to be when I have it in the click handler. (Using console.log())
4. Add an ajax call to my click handler.
5. Verify that the backend server is doing what I expect when I make the ajax call. Check the server log and/or the rails console.
6. Have the success function console.log('success!!') AND DO NOTHING ELSE.
7. Have the success function add "Hello" to the HTML using jQuery
8. Have the success function console.log the data I get back from the server.
9. Add that data to the HTML using jQuery or handlebars. (or do something else, as appropriate.)

[ielole]

So, I think that I've successfully completed step 5. Here is the what my back end server is saying when I try to get all books.

Started GET "/books" for ::1 at 2016-12-02 09:41:33 -0500
Processing by BooksController#index as /
User Load (0.3ms) SELECT "users".* FROM "users" WHERE "users"."token" = $1 LIMIT 1 [["token", "03181a9cb0f00883493023fcb767fa4d"]]
Book Load (0.7ms) SELECT "books".* FROM "books"
[active_model_serializers] Rendered ActiveModel::Serializer::CollectionSerializer with ActiveModelSerializers::Adapter::Json (1.91ms)
Completed 200 OK in 7ms (Views: 4.2ms | ActiveRecord: 0.9ms)

But, I'm not having any success with step 6.

[raq929]

Can you post the code? The success function, and where you use it. Before you do that, double check that you're using the success function that you think you're using. 😉

[ielole]

//events.js
const onGetBooks = function() {
  console.log('bad mood');
  api.getIndex()
    .then(ui.success)
    .catch(ui.failure);
};

//api.js
const getIndex = () =>
    $.ajax ({
    url: config.host + '/books',
    method: 'GET',
    headers: {
      Authorization: 'Token token=' + store.user.token
      }
    });

//ui.js
const success = () => {
  console.log('YAY!!!!');
};

[raq929]

Are you getting any errors on the front end?

[ielole]

Nope, just this in the console:

jquery.js:9536 XHR finished loading: GET "http://localhost:4741/books".send @ jquery.js:9536ajax @ jquery.js:9143getIndex @ api.js:17onGetBooks @ events.js:19dispatch @ jquery.js:5201elemData.handle @ jquery.js:5009

[ielole]

I wasn't actually exporting the functions because I had:

module.*export* = {
  success,
  failure,
  addBookSuccess,
  addBookFailure,
};

//INSTEAD OF

module.*exports* = {
  success,
  failure,
  addBookSuccess,
  addBookFailure,
};