learn-co-curriculum / receiving-api-posts-lab

Receiving API POSTs Lab

Objectives

1. Send form via POST request with jQuery.
2. Create resources from an AJAX POST.
3. Render and consume JSON responses for created resources.

Introduction

In this lab, we're going to continue to enhance our product and order system, this time updating the product creation page to create and display new products without requiring a refresh or redirect.

The solution for the previous lab has been included for you.

Instructions

1. Update the new product page to submit the form via AJAX POST.
2. Update the product create action to render a JSON representation of the product after successfully creating it.
3. Display the product details of the newly created product on the new page without refreshing or redirecting.
4. Make sure those tests pass!

receiving-api-posts-lab's Issues

Tests do not pass using let, only var

Could not pass tests ./spec/controllers/products_controller_spec.rb:14 and ./spec/features/product_feature_spec.rb:12 unless I replaced let with var in the following code:

<script type="text/javascript"> $(function (){ $('form').submit(function(event){ event.preventDefault() let values = $(this).serialize() let posting = $.post('/products', values) posting.done(function(data){ let product = data $("#productName").text(product.name) $("#productInventory").text(product.inventory) $("#productPrice").text(product.price) $("#productDescription").text(product.description) }) }) }) </script>

Issue with line 13 in product_feature_spec.rb

If I write the following:

`<script type="text/javascript">
$(function (){
$('form').submit(function(event){

  event.preventDefault()

  let values = $(this).serialize()
  debugger
  let posting = $.post('/products', values)

  posting.done(function(data){
    let product = data
    $(".productName").text(product.name)
    $(".productInventory").text(product.inventory)
    $(".productPrice").text(product.price)
    $(".productDescription").text(product.description)
  })
})

})
</script>`

The test will fail, but if I write it using var instead:

<script type="text/javascript"> $(function (){ $('form').submit(function(event){ event.preventDefault() var values = $(this).serialize() debugger var posting = $.post('/products', values) posting.done(function(data){ var product = data $(".productName").text(product.name) $(".productInventory").text(product.inventory) $(".productPrice").text(product.price) $(".productDescription").text(product.description) }) }) }) </script>

The test will pass. In previous lessons, we were told always use let in place of var. It might be nice to have this test updated for consistency.

Test not passing - ./spec/features/product_feature_spec.rb:18

Getting this error:
expected: "/products/new"
got: "/products"
even though when testing in the browser the submitted form does appear on '/products/new', without getting redirected to '/products'.

When running learn I'm getting these lines before the error:
Capybara starting Puma...

• Version 3.12.0 , codename: Llamas in Pajamas
• Min threads: 0, max threads: 4
• Listening on tcp://127.0.0.1:46729
  shows created product and does not redirect (FAILED - 1)`

Could not find an executable ["phantomjs"] on your path.

Capybara starting Puma...
* Version 3.12.0 , codename: Llamas in Pajamas
* Min threads: 0, max threads: 4
* Listening on tcp://127.0.0.1:54714
    shows created product and does not redirect (FAILED - 1)
  products show
    requires javascript to go next (FAILED - 2)
    loads next product without page refresh (FAILED - 3)
  products index
    gets the description and inventory (FAILED - 4)

1) Products creating products shows created product and does not redirect
     Got 0 failures and 2 other errors:

     1.1) Failure/Error: visit new_product_path
          
          Cliver::Dependency::NotFound:
            Could not find an executable ["phantomjs"] on your path.

FIX:
Match the following code under group :development, :test in your gemfile:

  gem 'poltergeist'
  gem 'phantomjs', :require => 'phantomjs/poltergeist'

ActiveModelSerializers section needs update

The lessons/labs dealing with ActiveModelSerializers need a bit of an update:

• As first noted here, in 0.10.x the serialized JSON is no longer nested in the same manner as it was in 0.9.x. function(data) { var product = data["product"]; ... becomes function(product) { ...
• Similarly, in the spec tests for each lab, body = JSON.parse(response.body)["product"] becomes body = JSON.parse(response.body)
• In the OrderSerializer, attributes :id, :created_at; has_many :products, serializer: SimpleProductSerializer becomes attributes :id, :created_at, :products, which (again pointed out first in the issue thread linked above) serializes the entire Product object; not just the name. This change renders the 'simplified serializer' concept introduced in this lesson moot, but there's probably a way to code out the same functionality using the updated ActiveModelSerializers syntax.

Selenium web-driver causes errors for tests

multiple students have issues with missing geckodriver. Doing a brew install for the driver fixes it but students using the IDE or not in a Mac env may take hours getting everything set up just for the tests to work. using the poltergeist gem works around this issue:

In the Gemfile

gem 'poltergeist'

In rails_helper.rb

require 'capybara/poltergeist'
Capybara.javascript_driver = :poltergeist

Test spec not working: ./spec/features/product_feature_spec.rb:18

Lab working in the browser. Not the test spec.
After submiting the form page.current_path == "/products" instead of "/products/new".
Failure/Error: expect(page.current_path).to eq new_product_path

   expected: "/products/new"
        got: "/products"
 
   (compared using ==)
 # ./spec/features/product_feature_spec.rb:18:in `block (3 levels) in <top (required)>'

Overly restrictive tests

The test does not request JSON, so if you use respond_to in the controller the test will fail even if everything is built properly.