test/selector.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="test.css">
  <title>Zepto selector tests</title>
  <script src="../vendor/evidence.js"></script>
  <script src="evidence_runner.js"></script>
  <script src="../src/polyfill.js"></script>
  <script src="../src/zepto.js"></script>
  <script src="../src/selector.js"></script>
</head>
<body>
  <h1>Zepto selector tests</h1>
  <p id="results">
    Running… see browser console for results
  </p>
  <div id="fixtures">
    <ul id=list><li>one</li><li>two</li><ul>
    <div class=visibility id=vis>look at me!</div>
    <div class=visibility id=invis style="display:none">can't see me</div>
  </div><!-- fixtures -->

  <script>
  (function(){
    Evidence('SelectorTest', {
      testFirst: function(t) {
        var li = $('#list li:first')
        t.assertEqual(1, li.size())
        t.assertEqual('one', li.text())
        t.assertEqual('two', $('#list li:eq(1)').text())
      },
      testLast: function(t) {
        var li = $('#list li:last')
        t.assertEqual(1, li.size())
        t.assertEqual('two', li.text())
      },
      testParent: function(t) {
        var list = $('#list li:parent')
        t.assertEqual(1, list.size())
        t.assertEqual('list', list.attr('id'))
      },
      testContains: function(t) {
        t.assertEqual('two', $('#list li:contains("two")').text())
      },
      testVisibility: function(t) {
        t.assertEqual('vis', $('.visibility:visible').attr('id'))
        t.assertEqual('invis', $('.visibility:hidden').attr('id'))
      },
      testIs: function(t) {
        t.assert($('#list').is('ul'))
        t.assert($('#vis').is(':visible'))
        t.refute($('#invis').is(':visible'))
      }
    })
  })()
  </script>
</body>
</html>