test-search.html 4.92 KB
Newer Older
S Anand's avatar
S Anand committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>search tests</title>
  <script src="../node_modules/jquery/dist/jquery.min.js"></script>
  <script src="../dist/search.min.js"></script>
  <script src="tape.js"></script>
  <style>
  .select { stroke-width: 5; stroke: #000; }
  .d-none { display: none; }
  </style>
</head>

<body>
  <script>
    tape.onFinish(function () { window.renderComplete = true })
  </script>

  <input id="search-1" type="search" data-search="@text" data-target=".list1 .item" data-hide-class="d-none">
  <ul class="list1">
    <li class="item">First item</li>
    <li class="item">Second item</li>
    <li class="item">Third item</li>
  </ul>
  <script>
    function match(selector, is) {
      return $(selector).map(function () { return $(this).is(is)}).get()
    }
    function check(t, $input, list) {
      // "rst" matches First
      $input.val('rst').trigger('keyup')
      t.deepEquals(match(list + ' .item', '.d-none'), [false, true, true])
      // "ir" matches First and Third
      $input.val('ir').trigger('change')
      t.deepEquals(match(list + ' .item', '.d-none'), [false, true, false])
      // Clearing the search matches all items
      $input.val('').trigger('keyup')
      t.deepEquals(match(list + ' .item', '.d-none'), [false, false, false])
      t.end()
    }
    tape('$().search() on trigger hides list items', function(t) {
      check(t, $('#search-1').search(), '.list1')
    })
  </script>

  <div id="search-2" data-search="@text" data-target=".list2 .item" data-hide-class="na">
    <input type="search" data-hide-class="d-none">
  </div>
  <ul class="list2">
    <li class="item">First item</li>
    <li class="item">Second item</li>
    <li class="item">Third item</li>
  </ul>
  <script>
    var $input = $('#search-2').search().find('input')
    tape('$().search() on container hides list items', function(t) {
      check(t, $input, '.list2')
    })
    tape('$().search() caches results', function(t) {
      $('.list2').append('<li class="item">Fourth item</li>')
      $input.val('xxx').trigger('change')
      t.deepEquals(match('.list2 .item', '.d-none'), [true, true, true, false])
      t.end()
    })
    tape('$().search(): refresh refreshes the cache', function (t) {
      $input.trigger('refresh').val('xxx').trigger('change')
      t.deepEquals(match('.list2 .item', '.d-none'), [true, true, true, true])
      t.end()
    })
    tape('$().search(): search event refreshes the cache', function (t) {
      $('.list2').append('<li class="item">Fifth item</li>')
      $input.val('xxx').trigger('search')
      t.deepEquals(match('.list2 .item', '.d-none'), [true, true, true, true, true])
      t.end()
    })
  </script>

  <form id="search-form" data-search="fill" data-target=".result circle">
    <input type="search" id="search-3" data-search="title" data-target=".result rect" data-show-class="select">
    <input type="search" id="search-4" data-search="@text" data-target=".result rect" data-hide-class="d-none">
  </form>
  <svg width="880" height="40" class="result">
    <rect x="000" y="5" width="90" height="30" fill="#00f" title="Blue">Blue</rect>
    <rect x="100" y="5" width="90" height="30" fill="#0f0" title="Green">Green</rect>
    <rect x="200" y="5" width="90" height="30" fill="#f00" title="Red">Red</rect>
    <rect x="300" y="5" width="90" height="30" fill="#ff0" title="Yellow">Yellow</rect>
    <rect x="400" y="5" width="90" height="30" fill="#0ff" title="Cyan">Cyan</rect>
    <rect x="500" y="5" width="90" height="30" fill="#f0f" title="Purple">Purple</rect>
    <rect x="600" y="5" width="90" height="30" fill="#888" title="Grey">Grey</rect>
    <rect x="700" y="5" width="90" height="30" fill="#000" title="Black">Black</rect>
    <text x="810" y="15" dy=".35em"></text>
  </svg>
  <script>$('#search-form').search()</script>
  <script>
    $('body').on('shown.g.search', function (e) {
      $('.result text').text(e.matches + ' matches')
    })
  </script>
  <script>
    tape('$().search() show-class adds classes to matches', function (t) {
      // When we type "blue", all blues should be selected. No non-blue should be selected
      $('.d-none, .select').removeClass('d-none select')
      $('#search-3').val('blue').trigger('change')
      t.equals($('rect[title="Blue"].select').length, 1)
      t.equals($('rect[title!="Blue"].select').length, 0)
      t.equals($('.d-none').length, 0)
      t.equals($('.result text').text(), '1 matches')
      t.end()
    })
    tape('$().search() hide-class adds classes to non-matches', function (t) {
      // When we type "green", all greens should visible. No non-green should be visible
      $('.d-none, .select').removeClass('d-none select')
      $('#search-4').val('green').change()
      t.equals($('rect[title="Green"]:not(.d-none)').length, 1)
      t.equals($('rect[title!="Green"]:not(.d-none)').length, 0)
      t.equals($('.select').length, 0)
      t.equals($('.result text').text(), '1 matches')
      t.end()
    })
  </script>
</body>

</html>