book
/
book_admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175
							<!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 Form unit tests</title>
  <script src="../vendor/evidence.js"></script>
  <script src="evidence_runner.js"></script>
  <script>
    // avoid caching
    (function(){
      function load(scripts){
        scripts.split(' ').forEach(function(script){
          document.write('<script src="../src/'+script+'.js?'+(+new Date)+'"></scr'+'ipt>')
        })
      }

      load('zepto event form ie')
    })()
  </script>
</head>
<body>
  <h1>Zepto Form unit tests</h1>
  <p id="results">
    Running… see browser console for results
  </p>

  <div id="fixtures">
  <form id="login_form" target="formtarget" action="./idontexist.html">
    <input name="email" value="koss@nocorp.me">
    <input name="password" value="123456">
    <input name="unchecked_hasValue" value="myValue" type="checkbox">
    <input name="unchecked_noValue" type="checkbox">
    <input name="checked_hasValue" checked value="myValue" type="checkbox">
    <input name="checked_disabled" checked value="ImDisabled" type="checkbox" disabled>
    <input name="checked_noValue" checked type="checkbox">
    <input type="text" id="no_name">
    <input type="file" name="file_upload">

    <fieldset>
      <input type="radio" name="radio1" value="r1">
      <input type="radio" name="radio1" checked value="r2">
      <input type="radio" name="radio1" value="r3">
    </fieldset>

    <select name="selectbox">
      <option value="selectopt1">select1</option>
      <option value="selectopt2">select2</option>
      <option value="selectopt3">select3</option>
    </select>

    <select name="users[id][]" multiple>
      <option value="1">a</option>
      <option value="2" selected>b</option>
      <option value="3" selected>c</option>
      <option value="4">d</option>
    </select>

    <div class="actions">
      <!--
        The name of the following element can't be "submit",
        as this breaks on IE 10 (the form's "submit" method
        is overwritten by an accessor to the input field
        with the "submit" name). Yes, that's a dumb bug.
      -->
      <input type="submit" name="submit_button" value="Save">

      <input type="button" name="preview" value="Preview">
      <input type="reset" name="clear" value="Clear form">
      <button name="button">I'm a button</button>
    </div>
  </form>

  <iframe name="formtarget"></iframe>
  </div>

  <script>
  (function(){

    // TODO: do we really need this function? This should be refactored.
    var isObjectEquals = function(obj1, obj2){
      for (var key in obj1)
        switch(typeof(obj1[key])) {
          case 'object':
            if (!isObjectEquals(obj1[key], obj2[key]))
              return false
            break

          case 'function':
            if (typeof(obj2[key]) == 'undefined' ||
              (obj1[key].toString() != obj2[key].toString()))
              return false
            break

          default:
            if (obj1[key] != obj2[key])
              return false
        }

      for (key in obj2)
        if (typeof(obj1[key]) == 'undefined')
          return false

      return true
    }

    Evidence.Assertions.assertEqualObject = function(expected, actual, message) {
      this._assertExpression(
        isObjectEquals(expected, actual),
        message || 'Failed assertion.',
        'Expected %o, got %o.', expected, actual
      )
    }

    Evidence('FormTest', {

      testSerializeArray: function(t){
        var loginForm = $('#login_form')
        t.assertEqualObject(
          [
              { name: 'email', value: 'koss@nocorp.me' },
              { name: 'password', value: '123456' },
              { name: 'checked_hasValue', value: 'myValue' },
              { name: 'checked_noValue', value: 'on' },
              { name: 'radio1', value: 'r2' },
              { name: 'selectbox', value: 'selectopt1' },
              { name: 'users[id][]', value: '2' },
              { name: 'users[id][]', value: '3' }
          ],
          loginForm.serializeArray()
        )
      },

      testSerialize: function(t){
        var loginForm = $('#login_form')
        t.assertEqual('email=koss%40nocorp.me&password=123456&checked_hasValue=myValue&checked_noValue=on&radio1=r2&selectbox=selectopt1&users%5Bid%5D%5B%5D=2&users%5Bid%5D%5B%5D=3', loginForm.serialize())
      },

      testFormSubmit: function(t){
        var eventTriggered = false
        $('#login_form').submit(function(event){
          eventTriggered = true
          event.preventDefault()
        })
        $('#login_form').submit()
        t.assert(eventTriggered)
      },

      testFormSubmitBindFalse: function(t){
        var eventPropagated = false
        $(document).on('submit', function(){
          eventPropagated = true
        })

        try {
          var form = $('#login_form')
          form.submit(false)
          form.submit()
          t.assertFalse(eventPropagated)
        } finally {
          $(document).off('submit')
        }
      },

      testSerializeEmptyCollection: function(t){
        t.assertIdentical(0, $().serializeArray().length)
        t.assertIdentical("", $().serialize())
      }

    })
  })()
  </script>
</body>
</html>