funcunit
Version:
<!-- @hide title
157 lines (142 loc) • 4.27 kB
HTML
<html>
<head>
<title>Untitled Document</title>
<style>
#drag, #drop {
width:20px;
height:20px;
position:relative;
}
#drag {
border:1px solid green;
background-color:green;
left:0px;
top:0px;
}
#drop {
border:1px solid yellow;
background-color:yellow;
left:40px;
top:40px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<input id="typehere"/>
<input type='submit' value="Copy" id='copy'/>
<input id="typehereexpectnoclick"/>
<input id="numberinput" type="number"/>
<p id='seewhatnumberyoutyped'></p>
<p id='seewhatyoutyped'></p>
<p id='seewhatyouchanged'></p>
<iframe src='myotherapp.html' name='a'></iframe>
<div id='clickToChange'>Change Thist Text</div>
<a href="javascript:changeText()" id='changelink'>Change</a>
<div id='drag'></div>
<div id='drop'></div>
<h3>hasClass</h3>
<div id='hasClass'>Click Me</div>
<h3>Exists</h3>
<div id='exists'>Click Me</div>
<h3>Trigger Custom Event</h3>
<div id='trigger'>Trigger Me</div>
<div id='confirm'>Confirm Me
<div class='result'></div>
</div>
<div id='rightclick'>Right Click Me</div>
<div class='rightclickResult'></div>
<div class='hidden' style='display:none;'></div>
<div id="testData"></div>
<script type='text/javascript' src='../node_modules/steal/steal.js'>
var $ = require("funcunit/browser/jquery");
window.jQuery = $;
$('#testData').data('idval', 1000);
$("#rightclick").bind("contextmenu", function(){
$(".rightclickResult").text("Right Clicked")
})
// on key up, write the value
$("#typehere")
.keyup(function(){
$("#seewhatyoutyped").html("typed "+this.value)
})
.change(function(){
$("#seewhatyouchanged").html("changed "+this.value)
})
$("#numberinput")
.keyup(function(){
$("#seewhatnumberyoutyped").html("typed "+this.value)
})
// on key up, write the value, but if a click was found, then ignore the typed text
// this allows the test for sendKeys to be specific to detecting clicks
$("#typehereexpectnoclick")
.keyup(function(){
if( $('#seewhatyoutyped').text().indexOf("whoops") !== -1) {
$("#seewhatyoutyped").html("whoops, click was detected, so ignoring typed text!");
}
else {
$("#seewhatyoutyped").html("typed "+this.value)
}
})
.change(function(){
$("#seewhatyouchanged").html("changed "+this.value)
}).click(function() {
$("#seewhatyoutyped").html("whoops, click was detected, not expecting this!")
})
//when copy is clicked, change the text
$("#copy").click(function(){
//run slowwwww
var sum = 0, date = new Date();
for(var i =0; i< 10; i++){
$("*").each(function(){
$(this).width()
$(this).height()
})
}
$("#seewhatyoutyped").html("copied "+$("#typehere").val())
})
$('#clickToChange').click(function(){
setTimeout(function(){
$('#clickToChange').html("changed")
},300)
})
//has class
$("#hasClass").click(function(){
setTimeout(function(){
$("#hasClass").addClass('someClass')
},200)
})
//exists
$("#exists").click(function(){
setTimeout(function(){
$("#exists").append("<p>I exist</p>")
},200)
})
$('#trigger').bind('myCustomEvent', function(){
$("#trigger").append("<p>I was triggered</p>")
})
//confirm
$('#confirm').bind('click', function(){
if(confirm("are you sure?")){
$("#confirm .result").html("<p>I was confirmed</p>")
} else {
$("#confirm .result").html("<p>I was not confirmed</p>")
}
})
window.changeText = function(){
$('#changelink').text('Changed')
}
$('#drag').on("draginit", function(){})
.on("dragover", function(){
$(this).css('background-color', 'black').addClass("dragover")
})
$('#drop').on("dropover", function(){
$(this).css('background-color', 'blue').addClass("dropover")
})
$('#drop').on("dropout", function(){
$(this).css('background-color', 'green').addClass("dropout")
})
</script>
</body>
</html>