ceilwindowwidth 4 15 movieInfo 16 cssleft oneFourth width2oneFourth top 250 17

Ceilwindowwidth 4 15 movieinfo 16 cssleft onefourth

This preview shows page 241 - 243 out of 517 pages.

Math.ceil($(window).width() / 4); 15 $(’#movieInfo’). 16 css({’left’: oneFourth, ’width’: 2*oneFourth, ’top’: 250}). 17 html($(’<p>’ + jsonData.description + ’</p>’), 18 $(’<a id="closeLink" href="#"></a>’)). 19 show(); 20 // make the Close link in the hidden element work 21 $(’#closeLink’).click(MoviePopupJson.hideMovieInfo); 22 return(false); // prevent default link action 23 } 24 // hideMovieInfo omitted for brevity 25 }; Figure 6.27: This version of MoviePopup expects a JSON rather than HTML response (line 5), so the success function uses the returned JSON data structure to create new HTML elements inside the popup div (lines 17–19; observe that jQuery DOM-manipulation functions such as append can take multiple arguments of distinct pieces of HTML to create). The functions omitted for brevity are the same as in Figure 6.15 . 1 describe(’MoviePopupJson’, function() { 2 describe(’successful AJAX call’, function() { 3 beforeEach(function() { 4 loadFixtures(’movie_row.html’); 5 var jsonResponse = getJSONFixture(’movie_info.json’); 6 spyOn($, ’ajax’).and.callFake(function(ajaxArgs) { 7 ajaxArgs.success(jsonResponse, ’200’);
Image of page 241
8 }); 9 $(’#movies a’).trigger(’click’); 10 }); 11 // ’it’ clauses are same as in movie_popup_spec.js 12 }); 13 }); Figure 6.28: Jasmine-jQuery expects to find fixture files containing .json data in spec/javascripts/fixtures/json . After executing line 5, jsonResponse will contain the actual JavaScript object (not the raw JSON string!) that will get passed to the success handler. To make an AJAX call that expects a JSON-encoded response, we just ensure that the argument object passed to $.ajax includes a dataType property whose value is the string json , as Figure 6.27 shows. The presence of this property tells jQuery to automatically call JSON.parse on the returned data, so you don’t have to do so yourself. Of course, we must also arrange for the server to return a JSON object, as discussed above. How can we test this code without calling the server every time? Happily, Jasmine-jQuery’s fixture mechanism allows us to specify JSON fixtures as well as HTML fixtures, as Figure 6.28 shows. Summary of Single-Page Apps: Whereas JavaScript-enhanced traditional SaaS apps will typically render complete chunks of HTML (for example, using partials) that the client will simply “plug into” the current HTML page, SPAs will usually receive structured data from one or more services and use that data to synthesize new content or modify existing content on the page. JSON’s simplicity and its natural fit with JavaScript are rapidly making it the preferred format for interchanging structured data in SPAs. Rails can serialize simple ActiveRecord models to JSON with render :json=> object , but you can override ActiveRecord’s to_json method to serialize arbitrarily complex data structures. Setting the dataType property to ”json” in an $.ajax call tells jQuery to automatically deserialize the server’s response data into a JSON object. A spy that returns a JSON fixture can be used to simulate a server’s response in testing a SPA, allowing Jasmine tests to be isolated from the remote server(s) the SPA relies on.
Image of page 242
Image of page 243

You've reached the end of your free preview.

Want to read all 517 pages?

  • Spring '19
  • Dr.Marcos

What students are saying

  • Left Quote Icon

    As a current student on this bumpy collegiate pathway, I stumbled upon Course Hero, where I can find study resources for nearly all my courses, get online help from tutors 24/7, and even share my old projects, papers, and lecture notes with other students.

    Student Picture

    Kiran Temple University Fox School of Business ‘17, Course Hero Intern

  • Left Quote Icon

    I cannot even describe how much Course Hero helped me this summer. It’s truly become something I can always rely on and help me. In the end, I was not only able to survive summer classes, but I was able to thrive thanks to Course Hero.

    Student Picture

    Dana University of Pennsylvania ‘17, Course Hero Intern

  • Left Quote Icon

    The ability to access any university’s resources through Course Hero proved invaluable in my case. I was behind on Tulane coursework and actually used UCLA’s materials to help me move forward and get everything together on time.

    Student Picture

    Jill Tulane University ‘16, Course Hero Intern

Stuck? We have tutors online 24/7 who can help you get unstuck.
A+ icon
Ask Expert Tutors You can ask You can ask You can ask (will expire )
Answers in as fast as 15 minutes
A+ icon
Ask Expert Tutors