mtrpcic/Testcase.html

## Testcase.html
/*
  The following is a concise outline of the test environment that I've set up to test the outcome described in
  Issue #13 on the PathJS master branch.  This setup is running on a Rails server.

  https://github.com/mtrpcic/pathjs/issues/13
*/

// Step 1 - Server, Routes, and Data

//  I set up a Rails 3.1.0 server with a 'Widget' model, and the following test route:
//  HTTP GET /widgets/:id
//
// I then created three widgets with IDs 1, 2, and 3 respectively, as well as a unique "name" attribute for each.


// Step 2 - Views

//  I set up a default layout that included jQuery and PathJS 0.8.1 (latest as of today).  I also tried with 0.8,
//  and could not reproduce with it either.  The DOM for the layout looked like this:

<!DOCTYPE html>
<html>
  <head>
    <title>Testbed</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
    <script type="text/javascript" src="/javascripts/path.js"></script>

    <script type="text/javascript">
      // Test code goes here
    </script>

  </head>
  <body>
    <div id="links">
      <a href="/widgets/1">One</a>
      <a href="/widgets/2">Two</a>
      <a href="/widgets/3">Three</a>
    </div>
    <div id="content" style="height: 400px; width: 400px; background-color: #CCC;">
      <%= yield %>
    </div>
  </body>
</html>

// On page load, the content (the unique name mentioned earlier) for each widget was placed in the "content" widget.


// Step 3 - The JavaScript

//  I loaded the following JavaScript up to test, as per the instructions on Issue 13:
        Path.map("/widgets/:page").to(function(){

            $("#content").html("loading...");
            console.log("Making AJAX Request to: " + this.params["page"]);

        });

        $(document).ready(function(){
            Path.history.listen();
            $("a").click(function(event){
                event.preventDefault();
                Path.history.pushState({}, "", $(this).attr("href"));
            });
         });

// The only changes I made to the code that was provided in the Issue was that I replaced the AJAX call with a console.log statement,
// and changed the resource from "pages" to "widgets".  There was no additional AJAX call upon page load.  I would load up the URL:
//
//    GET http://localhost:3000/widgets/1
//
// and there would be no immediate route call.  Clicking the links as appropriate would yield the expected results.
	/*
	The following is a concise outline of the test environment that I've set up to test the outcome described in
	Issue #13 on the PathJS master branch. This setup is running on a Rails server.

	https://github.com/mtrpcic/pathjs/issues/13
	*/

	// Step 1 - Server, Routes, and Data

	// I set up a Rails 3.1.0 server with a 'Widget' model, and the following test route:
	// HTTP GET /widgets/:id
	//
	// I then created three widgets with IDs 1, 2, and 3 respectively, as well as a unique "name" attribute for each.



	// Step 2 - Views

	// I set up a default layout that included jQuery and PathJS 0.8.1 (latest as of today). I also tried with 0.8,
	// and could not reproduce with it either. The DOM for the layout looked like this:

	<!DOCTYPE html>
	<html>
	<head>
	<title>Testbed</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"></script>
	<script type="text/javascript" src="/javascripts/path.js"></script>

	<script type="text/javascript">
	// Test code goes here
	</script>

	</head>
	<body>
	<div id="links">
	<a href="/widgets/1">One</a>
	<a href="/widgets/2">Two</a>
	<a href="/widgets/3">Three</a>
	</div>
	<div id="content" style="height: 400px; width: 400px; background-color: #CCC;">
	<%= yield %>
	</div>
	</body>
	</html>

	// On page load, the content (the unique name mentioned earlier) for each widget was placed in the "content" widget.



	// Step 3 - The JavaScript

	// I loaded the following JavaScript up to test, as per the instructions on Issue 13:
	Path.map("/widgets/:page").to(function(){

	$("#content").html("loading...");
	console.log("Making AJAX Request to: " + this.params["page"]);

	});

	$(document).ready(function(){
	Path.history.listen();
	$("a").click(function(event){
	event.preventDefault();
	Path.history.pushState({}, "", $(this).attr("href"));
	});
	});

	// The only changes I made to the code that was provided in the Issue was that I replaced the AJAX call with a console.log statement,
	// and changed the resource from "pages" to "widgets". There was no additional AJAX call upon page load. I would load up the URL:
	//
	// GET http://localhost:3000/widgets/1
	//
	// and there would be no immediate route call. Clicking the links as appropriate would yield the expected results.