Editing GoogleNews This edit will create a new revision. Your details (optional) Name Email (won’t be displayed; might be used for Gravatar) URL Test case details Title * Published (uncheck if you want to fiddle around before making the page public) Description (in case you feel further explanation is needed)(Markdown syntax is allowed) Are you a spammer? (just answer the question) Preparation code Preparation code HTML (this will be inserted in the <body> of a valid HTML5 document in standards mode) (useful when testing DOM operations or including libraries) <!doctype html> <head> <meta charset="UTF-8"> <title>GoogleNews</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://crane.io/lib/cranepreview.js"></script> <style> .titleDiv{ text-align: center; border-bottom: 1px solid black; padding: 10px; font-weight: bold; font-family: Helvetica, arial; font-size: 20px; background: rgb(181,189,200); /* Old browsers */ background: -moz-linear-gradient(top, rgba(181,189,200,1) 0%, rgba(112,120,127,1) 2%, rgba(40,52,59,1) 98%, rgba(130,140,149,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(181,189,200,1)), color-stop(2%,rgba(112,120,127,1)), color-stop(98%,rgba(40,52,59,1)), color-stop(100%,rgba(130,140,149,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(112,120,127,1) 2%,rgba(40,52,59,1) 98%,rgba(130,140,149,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(112,120,127,1) 2%,rgba(40,52,59,1) 98%,rgba(130,140,149,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(181,189,200,1) 0%,rgba(112,120,127,1) 2%,rgba(40,52,59,1) 98%,rgba(130,140,149,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(181,189,200,1) 0%,rgba(112,120,127,1) 2%,rgba(40,52,59,1) 98%,rgba(130,140,149,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#828c95',GradientType=0 ); /* IE6-9 */ } .contentDiv{ background-color: white; padding: 10px; font-weight: normal; font-family: Helvetica, arial; font-size: 14px; text-align: left; } .wrapperDiv{ border-radius: 5px; margin: 10px; top: 60px; width: 80%; left: 50%; position: relative; margin-left: -40%; overflow: hidden; border: 1px solid black; box-shadow: 0px 2px 10px rgba(0,0,0,0.3);} .titleDiv a{ color: white; text-shadow: 0px -1px 0px black, 0px 0px 3px black; } .searchDiv{ position: fixed; top: 0px; background-color: rgba(0,0,0,0.4); width: 100%; text-align: center; padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid black; z-index: 5; box-shadow: inset 0px 0px 10px black, inset 0px 0px 1px white; } .searchDiv button{ border-radius: 2px; padding: 5px; border: 1px solid black; font-weight: bold; color: white; box-shadow: 0px 0px 1px white, inset 0px 0px 1px gray; background: rgb(125,126,125); /* Old browsers */ background: -moz-linear-gradient(top, rgba(125,126,125,1) 0%, rgba(66,66,66,1) 3%, rgba(14,14,14,1) 97%, rgba(48,48,48,1) 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(125,126,125,1)), color-stop(3%,rgba(66,66,66,1)), color-stop(97%,rgba(14,14,14,1)), color-stop(100%,rgba(48,48,48,1))); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(66,66,66,1) 3%,rgba(14,14,14,1) 97%,rgba(48,48,48,1) 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(66,66,66,1) 3%,rgba(14,14,14,1) 97%,rgba(48,48,48,1) 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, rgba(125,126,125,1) 0%,rgba(66,66,66,1) 3%,rgba(14,14,14,1) 97%,rgba(48,48,48,1) 100%); /* IE10+ */ background: linear-gradient(to bottom, rgba(125,126,125,1) 0%,rgba(66,66,66,1) 3%,rgba(14,14,14,1) 97%,rgba(48,48,48,1) 100%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#303030',GradientType=0 ); /* IE6-9 */ } .searchDiv input{ border-radius: 2px; padding: 5px; border: 1px solid black; width: 150px; box-shadow: 0px 0px 2px white; } .snippetWrapper{ background: rgba(0,0,0,0.2); padding: 8px; margin: 5px; border-radius: 3px; border: 1px solid black; box-shadow: inset 0px 1px 5px rgba(0,0,0,0.3); color: white;} .snippetWrapper a{ color: white; decoration: none;} body{ background: darkgray; margin: 0px !important; } </style></head> <body> <button id="craneThrowErrorButton" style="display: none;" ></button> <script type="text/x-handlebars" data-template-name="application">{{outlet}}</script> <script type="text/x-handlebars" data-template-name="GoogleNewsTemplate"> <div id="" cranekey="a23824ae25046ea0a9a5b08c" class=" craneElement searchDiv" ><actionBox {{action refreshOnNewLine target="controller" on="keyUp"}}>{{view Ember.TextField id="" cranekey="97bfb5436985be0d170253c3" class=" craneElement " valueBinding="App.CountTextValue.value" placeholder="number of articles (0-10)" }}</actionBox><button type="button" id="" cranekey="0e9a4e414566efb87b4a5efd" class=" craneElement " {{action refreshButtonClick target="controller" on="click"}}>Refresh Article Count (0-10)</button> </div> {{#with responseData.feed}}{{#each entries}} <div id="" cranekey="6bd3938595b6fda48199ce6d" class=" craneElement wrapperDiv" > <div id="" cranekey="de284e5cdea2adc535f40069" class=" craneElement titleDiv" ><a {{bindAttr href="link" }} id="" cranekey="f694449d11275b4a195de3bd" class=" craneElement " target="_blank" >{{title}}</a> </div> <div id="" cranekey="b6fb66d2012ec6d4b9252fe4" class=" craneElement contentDiv" {{action alertme target="controller" on="click"}} >{{story content}} </div> </div> {{/each}} {{/with}}<br/><br/><br/><br/>{{#with responseData}}{{#if feed}}{{#with feed}}{{#each entries}} <div id="" cranekey="7b765f92c8847d0504981025" class=" craneElement snippetWrapper" ><a {{bindAttr href="link" }} id="" cranekey="a65e2e9cc9d84a609381984e" class=" craneElement " target="_blank" >{{contentSnippet}}</a> </div> {{/each}} {{/with}}{{/if}} {{/with}}</script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.rc.1/handlebars.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-pre.2/ember-1.0.0-pre.2.min.js"></script> </body></html> Include JavaScript libraries as follows: <script src="//cdn.ext/library.js"></script> Define setup for all tests (variables, functions, arrays or other objects that will be used in the tests) (runs before each clocked test loop, outside of the timed code region) (e.g. define local test variables, reset global variables, clear canvas, etc.) (see FAQ) Define teardown for all tests (runs after each clocked test loop, outside of the timed code region) (see FAQ) Code snippets to compare Test 1 Title Async (check if this is an asynchronous test) Code App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ templateName: 'application' }); App.ApplicationController = Ember.Controller.extend(); App.Router = Ember.Router.extend({ root: Ember.Route.extend({ falseindex: Ember.Route.extend({ route: '/', connectOutlets: function(router){ try{ router.get('applicationController').connectOutlet('googleNews', App.GoogleNewsData.populateNews(5) ); }catch(err){ throwCraneError(err, "e698639321fbe17bcd099f04", 0);} } }) }) }); // View and View Controller code. App.GoogleNewsController = Ember.ObjectController.extend({ refreshButtonClick: function(){ try{ this.set("content", {} ); App.GoogleNewsData.populateNews(App.CountTextValue.value); }catch(err){ throwCraneError(err, "580e8f7fd34d971e41ee1f53", 0);} }, refreshOnNewLine: function(e){ try{ if (e.keyCode == 13) { this.set("content", {} ); App.GoogleNewsData.populateNews(App.CountTextValue.value); } }catch(err){ throwCraneError(err, "580e8f7fd34d971e41ee1f53", 1);} } }); App.GoogleNewsView = Ember.View.extend({ templateName: 'GoogleNewsTemplate', title: "GoogleNews" }); App.GoogleNewsData = Ember.Object.extend(); App.GoogleNewsData.reopenClass({ populateNews: function(count){ try{ App.GoogleNewsData.create({}) ); }catch(err){ throwCraneError(err, "580e8f7fd34d971e41ee1f53", 2);} } }); App.CountTextValue = Ember.Object.create({ value: '' }); // This helper injects the html from the json directly into the DOM Handlebars.registerHelper('story', function(property, options) { try{ var value = Ember.Handlebars.get(this, property, options); return new Handlebars.SafeString(value);}catch(err){ throwCraneError(err, "580e8f7fd34d971e41ee1f53", 4);} }); Test 2 Title Async (check if this is an asynchronous test) Code App = Ember.Application.create(); App.ApplicationView = Ember.View.extend({ templateName: 'application' }); App.ApplicationController = Ember.Controller.extend(); App.Router = Ember.Router.extend({ root: Ember.Route.extend({ falseindex: Ember.Route.extend({ route: '/', connectOutlets: function(router){ router.get('applicationController').connectOutlet('googleNews', App.GoogleNewsData.populateNews(5) ); } }) }) }); // View and View Controller code. App.GoogleNewsController = Ember.ObjectController.extend({ refreshButtonClick: function(){ this.set("content", {} ); App.GoogleNewsData.populateNews(App.CountTextValue.value); }, refreshOnNewLine: function(e){ if (e.keyCode == 13) { this.set("content", {} ); App.GoogleNewsData.populateNews(App.CountTextValue.value); } } }); App.GoogleNewsView = Ember.View.extend({ templateName: 'GoogleNewsTemplate', title: "GoogleNews" }); App.GoogleNewsData = Ember.Object.extend(); App.GoogleNewsData.reopenClass({ populateNews: function(count){ $.ajax({ url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + count+ "&q=http%3A%2F%2Fnews.google.com%2Fnews%3Foutput%3Drss%26num%3D10", dataType: 'jsonp', context: this, success: function(response){ App.router.googleNewsController.set("content", } }); } }); App.CountTextValue = Ember.Object.create({ value: '' }); // This helper injects the html from the json directly into the DOM Handlebars.registerHelper('story', function(property, options) { var value = Ember.Handlebars.get(this, property, options); return new Handlebars.SafeString(value); });