Welcome to JS Bin

JS Bin

Save
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="https://code.jquery.com/qunit/qunit-git.css" rel="stylesheet" type="text/css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/qunit/1.18.0/qunit.min.js"></script>
​
<meta name="description" content="can-fixture+jquery test demo">
<meta name="" content="" />
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
​
  <div id="qunit"></div>
  <div id="qunit-fixture"></div>
  
​
  <script src='https://rawgit.com/canjs/can-fixture/v0.3.0/dist/global/can-fixture.js'></script>
  <script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  
</body>
</html>
 
// client code -----------
function getAndShowTodos(id){
  return $.getJSON("/todos?due=today").then(function(response){
    var lis = response.data.map(function(todo){
      return "<li>"+todo.name+"</li>";
    });
    var out = document.getElementById(id);
    if(lis.length) {
      out.innerHTML = lis.join("");
    } else {
      out.innerHTML = "<li>no todos</li>";
    }
​
  });
}
​
// test code --------
​
QUnit.module("my-app",{});
​
QUnit.asyncTest("shows todo names", function(){
  
  fixture("GET /todos", function(){
    return {
      data: [
        {id: 1, name: "dishes"},
        {id: 2, name: "lawn"}
      ]
    };
  });
  
  getAndShowTodos("qunit-fixture").then(function(){
    var names = $.map($("#qunit-fixture li"),function(li){
      return $(li).text();
    });
    deepEqual(names, ["dishes","lawn"]);
    start();
  });
});
​
QUnit.asyncTest("shows no todos when there are none", function(){
  
  fixture("GET /todos", function(req){
    equal(req.data.due,"today");
    return {
      data: []
    };
  });
  
  getAndShowTodos("qunit-fixture").then(function(){
    var names = $.map($("#qunit-fixture li"),function(li){
      return $(li).text();
    });
    deepEqual(names, ["no todos"]);
    start();
  });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x