learn-co-students / diy-json-serializer-lab-v-000

DIY JSON Serializer Lab

Objectives

1. Write a JSON Serializer
2. Use that JSON Serializer to render information without page reload

Introduction

We're going to use our product/order system and enhance it so that customers can browse the product catalog without refreshing the page.

You'll be modifying and building on the code from the previous lab, which is provided.

Instructions

1. Create a ProductSerializer that serializes all of a product's attributes (name, price, inventory and description) to JSON.
2. Create a route and action for /products/:id/data that returns a JSON-serialized product.
3. Create the product show page and route. Add a link to the products show page called "Next Product" that will use AJAX to load the data for the next product without refreshing the page.
4. Make sure tests pass, including already existing ones!

Note: The test suite makes use of selenium-webdriver to test the AJAX-enabled pages. You will need to have Firefox installed for the tests to pass.

diy-json-serializer-lab-v-000's Issues

Page not updating correctly

Using example from prior README doesn't update page correctly with next product (the same issue occurring in the README as well).

Missing Capybara::Poltergeist configuration to get test passing

I bumped into an error in the product_feature_spec.rb file, specifically under the 'loads next product without page refresh' test. Upon checking, the AJAX feature is functional and works well in the browser, without any errors in the console.

Here is a snippet of the error message:

1) Products loads next product without page refresh
     Failure/Error: expect(page).to have_content p2.name

     Capybara::Poltergeist::JavascriptError:
       One or more errors were raised in the Javascript code on the page. If you don't care about these errors, you can ignore them by setting js_errors: false in your Poltergeist configuration (see documentation for details).

       SyntaxError: Expected an identifier but found 'nextId' instead
       SyntaxError: Expected an identifier but found 'nextId' instead

Upon following the error message to set js_errors: false, I added the following lines of code:

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, {js_errors: false})
end

into rails_helper.rb after the Capybara.javascript_driver = :poltergeist line.

In terms of overall development practice, I'm not sure if it's advisable to ignore JS errors this way, but there didn't seem to be any errors that I could detect, so I went forward with this.

Errors with no solution - Visible 'click next' and 'loads next product without page refresh'

I worked with two tech coaches on these issues. None of us could figure out why these errors were occurring.
Solution: commented out lines 12 - 15 and 22 - 27 of product_feature_spec.rb

One thing that helped the code was adding 'event' in the third line of the <script>:
$(".js-next").on("click", function (event) {
and finish with 'event.preventDefault();

like so:

$(".js-next").attr("data-id", data["id"]);
});
event.preventDefault();

I clicked "Next Product" link and jquery keeps flickering

Hi, I had a weird bug where I had everything exactly as the solution did, but when I clicked the Next Product link, the next product info would flicker for a sec and revert back to the previous item.

I have no idea how it worked, but I was able to solve this by copying and pasting a Gemfile.lock file from the readme of the previous lab.

https://github.com/kevinYCKim33/diy-json-serializer-ruby-v-000

Failure/Error: expect(page).to have_content p2.name

Even though it was working correctly in the browser, a student was getting this error:

1) Products requires javascript to go next Failure/Error: expect(page).to have_content p2.name expected to find text "Test Product 2" in "Flatiron Widgets Store Next Product Test Product 0 2 This is a test description with more text than should be there." # ./spec/features/product_feature_spec.rb:15:in &#96;block (2 levels) in <top (required)>'

Adding js:true here got it to pass:

it 'requires javascript to go next' , js:true do ....

products_controller_spec issue

expected integer in JSON return body.
in spec/controllers/products_controller.rb line 45

expect(body["inventory"]).to eq product.inventory

body["inventory'] should equate to a stringified version of product.inventory

expect(body["inventory"]).to eq product.inventory.to_s

resolves this issue