Revert "Export"

This reverts commit b087adb7b7df900f9656425e5cea9dc7abdf935b.
author: Minkyu Kang <mk7.kang@samsung.com> 2012-09-10 17:04:29 +0900
committer: Minkyu Kang <mk7.kang@samsung.com> 2012-09-10 17:04:29 +0900
commit: f3bc06001f660ef156e0895f4be1e81a0ac99502 (patch)
tree: 4319859b727600c6d8382b95e68a0c0d52cf38f0 /tests
parent: b087adb7b7df900f9656425e5cea9dc7abdf935b (diff)
download: web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.tar.gz
web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.tar.bz2
web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.zip
80 files changed, 5390 insertions, 0 deletions
diff --git a/tests/coverage/README b/tests/coverage/README
new file mode 100644
index 00000000..36abe184
--- /dev/null
+++ b/tests/coverage/README
@@ -0,0 +1,14 @@
+Used to produce coverage reports from the automated tests
+via jscoverage (http://siliconforks.com/jscoverage/).
+
+You'll need to install jscoverage first.
+You'll also need Google Chrome.
+
+Then:
+
+$ cd tests/test-coverage
+$ ./instrument.sh
+
+See the Summary tab for the coverage report.
+
+This is only tested on Linux.
diff --git a/tests/coverage/instrument.sh b/tests/coverage/instrument.sh
new file mode 100755
index 00000000..e716ecad
--- /dev/null
+++ b/tests/coverage/instrument.sh
@@ -0,0 +1,62 @@
+#!/bin/bash
+# Run instrumented unit tests
+#
+# set CHROME_BIN to the path to/name of your Google Chrome binary
+# (default = `which google-chrome`)
+# set JS_COVERAGE_BIN to the path to/name of your jscoverage binary
+# (default = `which jscoverage`)
+
+# where are we?
+SCRIPT_PATH=`readlink -f $0`
+
+if [[ "x" == "x$SCRIPT_PATH" ]] ; then
+  DIR=`dirname $0`
+else
+  DIR=`dirname $SCRIPT_PATH`
+fi
+
+# programs we need to run
+if [[ "x" == "x$CHROME_BIN" ]] ; then
+  CHROME_BIN=`which google-chrome || which chromium-browser`
+fi
+
+if [[ "x$CHROME_BIN" == "x" ]] ; then
+  echo "*** ERROR: google-chrome not found - please make sure it's installed"
+  echo "Then either put it on your PATH or set the CHROME_BIN env variable"
+  exit 1
+fi
+
+if [[ "x" == "x$JSCOVERAGE_BIN" ]] ; then
+  JSCOVERAGE_BIN=`which jscoverage`
+fi
+
+if [[ "x$JSCOVERAGE_BIN" == "x" ]] ; then
+  echo "*** ERROR: jscoverage not found - please make sure it's installed"
+  echo "Then either put it on your PATH or set the JSCOVERAGE_BIN env variable"
+  exit 1
+fi
+
+# directory for instrumented files
+if [ -d $DIR/instrumented ] ; then
+  rm -Rf $DIR/instrumented
+fi
+
+# just instrument the tizen-web-ui-fw file
+$JSCOVERAGE_BIN --exclude tizen-web-ui-fw-libs.js --exclude jquery.js \
+  $DIR/../../build/tizen-web-ui-fw/latest/js $DIR/instrumented
+
+# copy all the unit tests to the instrumented directory
+cp -a $DIR/../unit-tests/* $DIR/instrumented/
+
+# edit links in all index.html test files
+for file in `find $DIR/instrumented/ -name index.html` ; do
+  # refer to the instrumented tizen-web-ui-fw JS file
+  sed -i -e 's%\.\.\/\.\.\/\.\.\/build\/tizen-web-ui-fw\/latest\/js\/tizen-web-ui-fw\.js%\.\.\/tizen-web-ui-fw\.js%' $file
+
+  # other files are just one directory further up
+  sed -i -e 's%\.\.\/\.\.\/build%\.\.\/\.\.\/\.\.\/build%' $file
+  sed -i -e 's%\.\.\/\.\.\/\libs%\.\.\/\.\.\/\.\.\/libs%' $file
+done
+
+# run the top-level test file through jscoverage
+$CHROME_BIN --allow-file-access-from-files file://$DIR/instrumented/jscoverage.html?index.html
diff --git a/tests/samples/change-page/configure.js b/tests/samples/change-page/configure.js
new file mode 100755
index 00000000..6ab2afb5
--- /dev/null
+++ b/tests/samples/change-page/configure.js
@@ -0,0 +1,3 @@
+$( document ).bind( "mobileinit", function() {
+	$.support.scrollview = true;
+});
diff --git a/tests/samples/change-page/index.html b/tests/samples/change-page/index.html
new file mode 100755
index 00000000..3c575952
--- /dev/null
+++ b/tests/samples/change-page/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+	<script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="configure.js"></script>
+	<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+	<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-viewport-scale=false>
+	</script>
+	<script src="main.js"></script>
+
+	<title>Change Page & Back</title>
+</head>
+
+<body>
+	<div data-role="page">
+		<div data-role="header" data-position="fixed">
+			<h1>First Page</h1>
+		</div>
+		<div data-role="content">
+			<p> Page Transition : None </p>
+			<a data-role="button" id="change">Move Page via '$.mobile.changePage()' </a>
+		</div>
+	</div>
+
+	<div data-role="page" id="secondPage">
+		<div data-role="header" data-position="fixed">
+			<h1>Second Page</h1>
+		</div>
+		<div data-role="content">
+			<a data-role="button" id="back">Back via 'history.back()'</a>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/tests/samples/change-page/main.js b/tests/samples/change-page/main.js
new file mode 100755
index 00000000..e0107aae
--- /dev/null
+++ b/tests/samples/change-page/main.js
@@ -0,0 +1,11 @@
+$( document ).bind("pagecreate", function () {
+	$('#change').bind( "vclick", function () {
+		console.log( "move page..");
+		$.mobile.changePage($("#secondPage"), {transition:"none"});
+	});
+
+	$('#back').bind( "vclick", function () {
+		history.back();
+	});
+
+});
diff --git a/tests/samples/change-page/tizen-web-ui-fw b/tests/samples/change-page/tizen-web-ui-fw
new file mode 120000
index 00000000..f51bed2e
--- /dev/null
+++ b/tests/samples/change-page/tizen-web-ui-fw
@@ -0,0 +1 @@
+../../../build/tizen-web-ui-fw
+\ No newline at end of file
diff --git a/tests/samples/rem-scaling/index.html b/tests/samples/rem-scaling/index.html
new file mode 100755
index 00000000..8cf5ff6e
--- /dev/null
+++ b/tests/samples/rem-scaling/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+	<script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+	<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<title>Tizen UI</title>
+
+	<!-- for compatibility test -->
+	<meta name="apple-mobile-web-app-capable" content="yes" />
+	<meta name="apple-mobile-web-app-status-bar-style" content="black" />
+	<link rel="apple-touch-icon" href="icon-tizen.png" />
+</head>
+
+<body>
+	<div data-role="page" data-add-back-btn="true">
+		<div data-role="header" data-position="fixed">
+			<h1>viewport-scale=false</h1>
+		</div>
+		<div data-role="content">
+			<p> content will be shown properly. -- not too small, not too big. </p>
+			<a data-role="button">Test button</a>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/tests/samples/rem-scaling/tizen-web-ui-fw b/tests/samples/rem-scaling/tizen-web-ui-fw
new file mode 120000
index 00000000..f51bed2e
--- /dev/null
+++ b/tests/samples/rem-scaling/tizen-web-ui-fw
@@ -0,0 +1 @@
+../../../build/tizen-web-ui-fw
+\ No newline at end of file
diff --git a/tests/samples/text-selection/index.html b/tests/samples/text-selection/index.html
new file mode 100755
index 00000000..298f97b2
--- /dev/null
+++ b/tests/samples/text-selection/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8" >
+	<script src="tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="configure.js"></script>
+	<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+	<script src="tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-viewport-scale=true>
+	</script>
+	<script src="main.js"></script>
+
+	<title>Text Selection</title>
+</head>
+
+<body>
+	<div data-role="page">
+		<div data-role="header" data-position="fixed">
+			<h1>User select</h1>
+		</div>
+		<div data-role="content">
+			<p> User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text. User can select text.</p>
+			<a href="#no-user-select" data-role="button">Go to 'no-select' page</a>
+		</div>
+	</div>
+
+	<div id="no-user-select" data-role="page" data-add-back-btn="footer">
+		<div data-role="header" data-position="fixed">
+			<h1>User no-select</h1>
+		</div>
+		<div data-role="content">
+			<p> User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text. User cannot select text.  </p>
+			<a data-role="button" id="back">Back</a>
+		</div>
+	</div>
+
+</body>
+</html>
diff --git a/tests/samples/text-selection/main.js b/tests/samples/text-selection/main.js
new file mode 100755
index 00000000..eb0a0cc5
--- /dev/null
+++ b/tests/samples/text-selection/main.js
@@ -0,0 +1,9 @@
+$( document ).bind("pagecreate", function () {
+	$('#back').bind( "vclick", function () {
+		history.back();
+	});
+});
+
+$( "#no-user-select" ).live( "pageshow", function () {
+	$.mobile.tizen.disableSelection( this );
+});
diff --git a/tests/samples/text-selection/tizen-web-ui-fw b/tests/samples/text-selection/tizen-web-ui-fw
new file mode 120000
index 00000000..f51bed2e
--- /dev/null
+++ b/tests/samples/text-selection/tizen-web-ui-fw
@@ -0,0 +1 @@
+../../../build/tizen-web-ui-fw
+\ No newline at end of file
diff --git a/tests/unit-tests/autodividers/autodividers-tests.js b/tests/unit-tests/autodividers/autodividers-tests.js
new file mode 100644
index 00000000..4fa15ecb
--- /dev/null
+++ b/tests/unit-tests/autodividers/autodividers-tests.js
@@ -0,0 +1,178 @@
+/*
+ * autodividers unit tests
+ */
+
+(function ($) {
+  $.mobile.defaultTransition = "none";
+
+	module( "Autodividers" );
+
+	asyncTest( "Adds dividers based on first letters of list items.", function() {
+		$.testHelper.pageSequence([
+			function() {
+				$.testHelper.openPage( '#autodividers-test' );
+			},
+
+			function() {
+				var $new_page = $( '#autodividers-test' );
+
+				//ok( $new_page.hasClass( 'ui-page-active' ) );
+				ok( $new_page.find( '.ui-li-divider' ).length === 4 );
+
+				start();
+			}
+		]);
+	});
+
+	asyncTest( "Responds to addition/removal of list elements.", function() {
+		$.testHelper.pageSequence([
+			function() {
+				$.testHelper.openPage( '#autodividers-test' );
+			},
+
+			function() {
+				var $new_page = $( '#autodividers-test' );
+				//ok($new_page.hasClass( 'ui-page-active' ));
+
+				var $listview = $new_page.find( 'ul' );
+
+				// should remove all existing dividers
+				ok( $new_page.find( 'li:contains("SHOULD REMOVE")' ).length === 0 );
+
+				// add li; should add an "X" divider
+				$listview.append( '<li>x is for xanthe</li>' );
+				ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+				ok( $new_page.find( '.ui-li-divider' ).is( ':contains("X")' ) );
+
+				// adding the same element again should create a valid list
+				// item but no new divider
+				ok( $new_page.find( '.ui-li-static' ).length === 5 );
+				$listview.append( '<li>x is for xanthe</li>' );
+				ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+				ok( $new_page.find( '.ui-li-divider:contains("X")' ).length === 1 );
+				ok( $new_page.find( '.ui-li-static' ).length === 6 );
+
+				// should ignore addition of non-li elements to the list
+				$listview.find( 'li:eq(0)' ).append( '<span>ignore me</span>' );
+				ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+				ok( $new_page.find( '.ui-li-static' ).length === 6 );
+
+				// add li with the same initial letter as another li
+				// but after the X li item; should add a second "B" divider to the
+				// end of the list
+				$listview.append( '<li>b is for barry</li>' );
+				ok( $new_page.find( '.ui-li-divider' ).length === 6 );
+				ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 2 );
+
+				// remove the item with a repeated "b"; should remove the second
+				// "B" divider
+				$listview.find( 'li:contains("barry")' ).remove();
+				ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+				ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 1 );
+
+				// remove li; should remove the "A" divider
+				$listview.find( 'li:contains("aquaman")' ).remove();
+				ok( $new_page.find( '.ui-li-divider' ).length === 4 );
+				ok( !$new_page.find( '.ui-li-divider' ).is( ':contains("A")' ) );
+
+				// adding another "B" item after "C" should create two separate
+				// "B" dividers
+				$listview.find( 'li:contains("catwoman")' ).after( '<li>b is for barry</li>' );
+				ok( $new_page.find( '.ui-li-divider' ).length === 5 );
+				ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 2 );
+
+				// if two dividers with the same letter have only non-dividers
+				// between them, they get merged
+
+				// removing catwoman should cause the two "B" dividers to merge
+				$listview.find( 'li:contains("catwoman")' ).remove();
+				ok( $new_page.find( '.ui-li-divider:contains("B")' ).length === 1 );
+
+				// adding another "D" item before the "D" divider should only
+				// result in a single "D" divider after merging
+				$listview.find( 'li:contains("barry")' ).after( '<li>d is for dan</li>' );
+				ok( $new_page.find( '.ui-li-divider:contains("D")' ).length === 1 );
+
+				start();
+			}
+		]);
+	});
+
+	module( "Autodividers Selector" );
+
+	asyncTest( "Adds divider text from links.", function() {
+		$.testHelper.pageSequence([
+			function() {
+				$.testHelper.openPage( '#autodividers-selector-test' );
+			},
+
+			function() {
+				var $new_page = $( '#autodividers-selector-test' );
+				//ok($new_page.hasClass( 'ui-page-active' ));
+
+				// check we have the right dividers based on link text
+				var $list = $( '#autodividers-selector-test-list1' );
+				ok( $list.find( '.ui-li-divider' ).length === 4 );
+				ok( $list.find( '.ui-li-divider:eq(0):contains(A)' ).length === 1 );
+				ok( $list.find( '.ui-li-divider:eq(1):contains(B)' ).length === 1 );
+				ok( $list.find( '.ui-li-divider:eq(2):contains(C)' ).length === 1 );
+				ok( $list.find( '.ui-li-divider:eq(3):contains(D)' ).length === 1 );
+
+				// check that adding a new item with link creates the right divider
+				$list.append( '<li><a href="">e is for ethel</a></li>' );
+				ok( $list.find( '.ui-li-divider:eq(4):contains(E)' ).length === 1 );
+
+				start();
+			}
+		]);
+	});
+
+	asyncTest( "Adds divider text based on custom selector.", function() {
+		$.testHelper.pageSequence([
+			function() {
+				$.testHelper.openPage( '#autodividers-selector-test' );
+			},
+
+			function() {
+				var $new_page = $( '#autodividers-selector-test' );
+				//ok($new_page.hasClass( 'ui-page-active' ));
+
+				// check we have the right dividers based on custom selector
+				var $list = $( '#autodividers-selector-test-list2' );
+				ok( $list.find( '.ui-li-divider' ).length === 4 );
+				ok( $list.find( '.ui-li-divider:eq(0):contains(E)' ).length === 1 );
+				ok( $list.find( '.ui-li-divider:eq(1):contains(F)' ).length === 1 );
+				ok( $list.find( '.ui-li-divider:eq(2):contains(G)' ).length === 1 );
+				ok( $list.find( '.ui-li-divider:eq(3):contains(H)' ).length === 1 );
+
+				// check that adding a new item creates the right divider
+				$list.append( '<li><div><span class="autodividers-selector-test-selectme">' +
+				'i is for impy</span></div></li>' );
+
+				ok( $list.find( '.ui-li-divider:eq(4):contains(I)' ).length === 1 );
+
+				start();
+			}
+		]);
+	});
+
+	asyncTest( "Adds divider text based on full text selected by custom selector.", function() {
+		$.testHelper.pageSequence([
+			function() {
+				$.testHelper.openPage( '#autodividers-selector-test' );
+			},
+
+			function() {
+				var $new_page = $( '#autodividers-selector-test' );
+				//ok($new_page.hasClass( 'ui-page-active' ));
+
+				var $list = $( '#autodividers-selector-test-list3' );
+				ok( $list.find( '.ui-li-divider' ).length === 2 );
+				ok( $list.find( '.ui-li-divider:eq(0):contains(eddie)' ).length === 1 );
+				ok( $list.find( '.ui-li-divider:eq(1):contains(frankie)' ).length === 1 );
+
+				start();
+			}
+		]);
+	});
+})(jQuery);
diff --git a/tests/unit-tests/autodividers/index.html b/tests/unit-tests/autodividers/index.html
new file mode 100644
index 00000000..f0ee1e0d
--- /dev/null
+++ b/tests/unit-tests/autodividers/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Autodividers Tests</title>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+
+  <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+  <script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+  <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+  <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js" data-framework-theme="tizen-white"></script>
+  <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+  <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+  <script src="autodividers-tests.js"></script>
+
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Autodividers Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="autodividers-test">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>Autodivider Test</h1>
+	</div>
+	<div data-nstest-role="content">
+		<ul data-nstest-role="listview" data-nstest-autodividers="alpha">
+			<li data-nstest-role="list-divider">SHOULD REMOVE</li>
+			<li>a is for aquaman</li>
+			<li>b is for batman</li>
+			<li>c is for catwoman</li>
+			<li>d is for darkwing</li>
+		</ul>
+	</div>
+</div>
+
+<div data-nstest-role="page" id="autodividers-selector-test">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>Autodivider Selector Test</h1>
+	</div>
+	<div data-nstest-role="content">
+		<ul id="autodividers-selector-test-list1" data-nstest-role="listview" data-nstest-autodividers="alpha">
+			<li><a href="">a is for aquaman</a></li>
+			<li><a href="">b is for batman</a></li>
+			<li><a href="">c is for catwoman</a></li>
+			<li><a href="">d is for darkwing</a></li>
+		</ul>
+
+		<ul id="autodividers-selector-test-list2" data-nstest-role="listview" data-nstest-autodividers="alpha" data-nstest-autodividers-selector="div > span.autodividers-selector-test-selectme">
+			<li><div><span class="autodividers-selector-test-selectme">eddie</span> is for aquaman</div></li>
+			<li><div><span class="autodividers-selector-test-selectme">frankie</span> is for batman</div></li>
+			<li><div><span class="autodividers-selector-test-selectme">georgie</span> is for catwoman</div></li>
+			<li><div><span class="autodividers-selector-test-selectme">henry</span> is for darkwing</div></li>
+		</ul>
+
+		<ul id="autodividers-selector-test-list3" data-nstest-role="listview" data-nstest-autodividers="full" data-nstest-autodividers-selector="div > span.autodividers-selector-test-selectme">
+			<li><div><span class="autodividers-selector-test-selectme">eddie</span> is smart</div></li>
+			<li><div><span class="autodividers-selector-test-selectme">eddie</span> is tough</div></li>
+			<li><div><span class="autodividers-selector-test-selectme">frankie</span> is scruffy</div></li>
+			<li><div><span class="autodividers-selector-test-selectme">frankie</span> is week</div></li>
+		</ul>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/button/button-tests.js b/tests/unit-tests/button/button-tests.js
new file mode 100644
index 00000000..d2ec5338
--- /dev/null
+++ b/tests/unit-tests/button/button-tests.js
@@ -0,0 +1,101 @@
+/*
+ * Unit Test: Button
+ *
+ * Hyunjung Kim <hjnim.kim@samsung.com>
+ *
+ */
+$( "#checkboxpage" ).live( "pageinit", function ( event ) {
+
+	module( "button" );
+
+	var unit_button = function ( widget, type ) {
+		var buttonClassPrefix = "ui-btn",
+			buttonText = type,
+			icon,
+			position,
+			buttonStyle,
+			hasClass;
+
+		ok( widget.hasClass(buttonClassPrefix), "Create - Button" );
+
+		if ( widget.jqmData( "inline" ) ) {
+			ok( widget.hasClass( buttonClassPrefix + "-inline"), "Style - Inline");
+		} else {
+			ok( !widget.hasClass( buttonClassPrefix + "-inline"), "Style - Non Inline");
+		}
+
+		if ( !widget.children().first().hasClass( buttonClassPrefix + "-hastxt" ) ) {
+			buttonText = "";
+		}
+		// Text Trim, Cause jQueryMobile(JQM) 1.1 forced to add - "\u00a0" in buttonIcon(ButtonMarkup)
+		// JQM 1.1 buttonMarkup code :
+		// - if( buttonIcon ) buttonIcon.appendChild( document.createTextNode( "\u00a0" ) );
+		equal( widget.text().trim() , buttonText , "Button Text" );
+
+		icon = widget.jqmData("icon");
+		if ( icon !== undefined ) {
+			ok( widget.children().children().hasClass("ui-icon-" + icon ) , "Style - Button Icon" );
+		}
+		if ( icon !== undefined && buttonText != "") {
+			position = widget.jqmData("iconpos");
+			if ( position === undefined ) {
+				position = "left";
+			}
+			ok( widget.children().children().first().hasClass( buttonClassPrefix + "-text-padding-" + position ) , "Style - Button Icon, Text Position" );
+		}
+
+		buttonStyle = widget.jqmData( "style" );
+		if ( buttonStyle !== undefined ) {
+			switch ( buttonStyle ) {
+			case "circle" :
+				hasClass = " .ui-btn-corner-circle, .ui-btn-icon_only";
+				break;
+			case "edit" :
+				hasClass = " .ui-btn-edit";
+				break;
+			case "nobg" :
+				hasClass = " .ui-btn-icon-nobg, .ui-btn-icon_only";
+				break;
+			}
+			ok( widget.children().is( hasClass ) );
+		}
+
+		// Check APIs
+		widget.button().button( "disable" );
+		equal( widget.attr("disabled"), "disabled", "button disable test" );
+
+		widget.button().button( "enable" );
+		equal( widget.attr("disable"), undefined, "button enable test" );
+
+
+	};
+
+	test ( "Button" , function () {
+		unit_button( $("#button-0"), "Text Button" );
+	});
+
+	test ( "Button - Inline" , function () {
+		unit_button( $("#button-1"), "Text Button Inline" );
+	});
+
+	test ( "Button - Inline, Icon" , function () {
+		unit_button( $("#button-2"), "Call Icon" );
+	});
+
+	test ( "Button - Inline, Call Icon, Icon Position(Right)" , function () {
+		unit_button( $("#button-3"), "Icon Text" );
+	});
+
+	test ( "Button - Inline, Only Icon(Reveal)" , function () {
+		unit_button( $("#button-4"), "Non Text Button" );
+	});
+
+	test ( "Button - Inline, Only Icon(Send), circle" , function () {
+		unit_button( $("#button-5"), "Non Text Button" );
+	});
+
+	test ( "Button - Inline, Only Icon(Favorite), nobackground" , function () {
+		unit_button( $("#button-6"), "Non Text Button" );
+	});
+
+});
diff --git a/tests/unit-tests/button/index.html b/tests/unit-tests/button/index.html
new file mode 100644
index 00000000..ecfe784f
--- /dev/null
+++ b/tests/unit-tests/button/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="button-tests.js"></script>
+	<title>Button</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Button</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+	<div data-role="page" id="checkboxpage">
+		<div data-role="contents">
+			<div data-role="button" id="button-0">Text Button</div>
+			<div data-role="button" data-inline="true" id="button-1">Text Button Inline</div>
+			<div data-role="button" data-inline="true" data-icon="reveal" id="button-2">Call Icon</div>
+			<div data-role="button" data-inline="true" data-icon="call" data-iconpos="right" id="button-3">Icon Text</div>
+			<div data-role="button" data-inline="true" data-icon="reveal" id="button-4"></div>
+			<div data-role="button" data-inline="true" data-icon="send" data-style="circle" id="button-5"></div>
+			<div data-role="button" data-inline="true" data-icon="favorite" data-style="nobg" id="button-6"></div>
+		</div>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/check/check-tests.js b/tests/unit-tests/check/check-tests.js
new file mode 100644
index 00000000..190fec89
--- /dev/null
+++ b/tests/unit-tests/check/check-tests.js
@@ -0,0 +1,72 @@
+/*
+ * Unit Test: Checkbox
+ *
+ * Hyunjung Kim <hjnim.kim@samsung.com>
+ */
+
+$( "#checkpage" ).live( "pageinit", function( event ){
+
+	module("checkbox");
+
+	var unit_check = function ( widget, type ) {
+		var checkbox,
+			label,
+			checkClass,
+			classPrefix = "ui-checkbox";
+
+		widget.checkboxradio();
+		checkbox = widget.parent();
+		ok( checkbox.hasClass(classPrefix) , "Create - Checkbox" );
+
+		checkClass = classPrefix + "-on";
+		if( !widget.is(":checked") ){
+			checkClass = classPrefix + "-off";
+		}
+		if( widget.hasClass( "favorite" )){
+			ok( checkbox.hasClass( "favorite" ), "Style - Favorite" );
+		}
+
+		// Text Trim, Cause jQueryMobile(JQM) 1.1 forced to add - "\u00a0" in buttonIcon(ButtonMarkup)
+		// JQM 1.1 buttonMarkup code :
+		// - if( buttonIcon ) buttonIcon.appendChild( document.createTextNode( "\u00a0" ) );
+		label = checkbox.children().last();
+		equal ( label.text().trim(), type, "label, type string must be same" );
+
+		label.trigger( "vclick" );
+		if( !widget.is( ":disabled" ) ) {
+			checkClass = classPrefix + "-on";
+			ok( label.hasClass( checkClass ) , "Click - Normal Checkbox On" );
+
+			checkClass = classPrefix + "-off";
+			label.trigger( "vclick" );
+			ok( label.hasClass( checkClass ) , "Click - Normal Checkbox Off" );
+		} else {
+			ok( label.hasClass( checkClass ) , "Click - Disable Checkbox" );
+		}
+	};
+
+	test( "checkbox - Normal" , function () {
+		unit_check( $( "#checkbox-1" ), "Normal" );
+	});
+
+	test( "checkbox - Checked, Disabled" , function () {
+		unit_check( $( "#checkbox-2" ), "Checked, Disabled" );
+	});
+
+	test( "checkbox - Disabled" , function () {
+		unit_check( $( "#checkbox-3" ), "Disabled" );
+	});
+
+	test( "Favorite - Favorite" , function () {
+		unit_check( $( "#checkbox-4" ), "Favorite" );
+	});
+
+	test( "Favorite - Favorite Checked, Disabled" , function () {
+		unit_check( $( "#checkbox-5" ), "Favorite Checked, Disabled" );
+	});
+
+	test( "Favorite - Favorite, Disabled" , function () {
+		unit_check( $( "#checkbox-6" ), "Favorite, Disabled" );
+	});
+
+});
diff --git a/tests/unit-tests/check/index.html b/tests/unit-tests/check/index.html
new file mode 100644
index 00000000..00b34fc7
--- /dev/null
+++ b/tests/unit-tests/check/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="check-tests.js"></script>
+
+	<title>Check</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Check</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+	<div data-role="page" id="checkpage">
+		<div data-role="header" data-position="fixed">
+			<h1>Checkbox</h1>
+		</div>
+		<div data-role="contents">
+			<fieldset data-role="controlgroup">
+			<input type="checkbox" name="checkbox-1" id="checkbox-1"/>
+			<label for="checkbox-1">Normal</label>
+			<input type="checkbox" name="checkbox-2" id="checkbox-2" checked="checked" disabled="true"/>
+			<label for="checkbox-2">Checked, Disabled</label>
+			<input type="checkbox" name="checkbox-3" id="checkbox-3" disabled="true"/>
+			<label for="checkbox-3">Disabled</label>
+
+			<input type="checkbox" name="checkbox-4" id="checkbox-4" class="favorite"/>
+			<label for="checkbox-4">Favorite</label>
+			<input type="checkbox" name="checkbox-5" id="checkbox-5" checked="checked" disabled="true" class="favorite"/>
+			<label for="checkbox-5">Favorite Checked, Disabled</label>
+			<input type="checkbox" name="checkbox-6" id="checkbox-6" disabled="disabled" class="favorite"/>
+			<label for="checkbox-6">Favorite, Disabled</label>
+			</fieldset>
+		</div>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/collapsible/collapsible-tests.js b/tests/unit-tests/collapsible/collapsible-tests.js
new file mode 100755
index 00000000..8b98f1cc
--- /dev/null
+++ b/tests/unit-tests/collapsible/collapsible-tests.js
@@ -0,0 +1,33 @@
+/*
+ * collapse unit tests
+ */
+
+(function ($) {
+	module( "collapse test" );
+
+	var unit_collapse = function ( widget ) {
+		var created_collapse = widget.collapsible(),
+			obj_collapse = created_collapse.data( "collapsible" );
+
+		ok( created_collapse, "Create" );
+
+		/* Check Option */
+		equal( obj_collapse.options.expandCueText, " click to expand contents", "Collapsed test -> expandCueText" );
+		equal( obj_collapse.options.collapseCueText, " click to collapse contents", "Collapsed test -> collapseCueText" );
+		equal( obj_collapse.options.collapsed, true, "Collapsed test -> collapsed" );
+		equal( obj_collapse.options.heading, "h1,h2,h3,h4,h5,h6,legend", "Collapsed test -> heading" );
+		equal( obj_collapse.options.theme, null, "Collapsed test -> theme" );
+		equal( obj_collapse.options.contentTheme, null, "Collapsed test -> contentTheme" );
+
+		/* Check event */
+		created_collapse.trigger("collpase");
+		equal( created_collapse.hasClass("ui-collapsible-collapsed") , true, "API test -> collapse" );
+
+		created_collapse.trigger("expand");
+		equal( created_collapse.hasClass("ui-collapsible-collapsed") , false, "API test -> expand" );
+	};
+
+	test( "collapse test", function () {
+		unit_collapse( $("#collapsedContent") );
+	});
+})(jQuery);
diff --git a/tests/unit-tests/collapsible/index.html b/tests/unit-tests/collapsible/index.html
new file mode 100755
index 00000000..3f010207
--- /dev/null
+++ b/tests/unit-tests/collapsible/index.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+  <script src="collapsible-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Collapsible Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" data-add-back-btn="true">
+	<div data-nstest-role="header" data-nstest-position="fixed">
+		<h1>Collapsible test</h1>
+	</div>
+	<div data-nstest-role="content">
+		<div data-role="collapsible" id="collapsedContent">
+			 <h3>I'm a header</h3>
+			<a>test</a>
+			<p>Some content would be here</p>
+		</div>
+	</div>
+</div>
+</body>
+</html>
diff --git a/tests/unit-tests/color/color-tests.js b/tests/unit-tests/color/color-tests.js
new file mode 100644
index 00000000..3a8fb135
--- /dev/null
+++ b/tests/unit-tests/color/color-tests.js
@@ -0,0 +1,257 @@
+/*
+ * Unit Test: Color Picker
+ *
+ * Hyunjung Kim <hjnim.kim@samsung.com>
+ *
+ */
+$( "#colorpage" ).live( "pageinit", function(event){
+
+	module("Color Picker");
+
+	var cutHex = function( h ){ return ( h.charAt(0)=="#" ) ? h.substring(1,7):h}
+	var hexToRgb = function( h ) {
+		var r = parseInt((cutHex(h)).substring( 0, 2 ),16), g = parseInt((cutHex(h)).substring( 2, 4),16), b = parseInt((cutHex(h)).substring( 4, 6), 16);
+		return "rgb("+r+", "+g+", "+b+")";
+	}
+	var makeRandomColor = function(){
+		var letters = '0123456789ABCDEF'.split('');
+		var color = '#';
+		for (var i = 0; i < 6; i++ ) {
+	    	color += letters[Math.round(Math.random() * 15)];
+		}
+	    return color.toLowerCase();
+	}
+	var colorchange = function( widget, colorcode ){
+		 if( widget.attr("data-color") == colorcode) return true;
+		 else return false;
+	}
+	var testHsvpicker = function( widget ) {
+		var	wgSiblings,
+			hsvpicker,
+			chan,
+			hsvIdx,
+			max,
+			step,
+			colorcode;
+
+		widget = $("#hsvpicker");
+		widget.hsvpicker();
+		wgSiblings = widget.siblings();
+		hsvpicker = wgSiblings.last();
+
+		ok( widget.is(":hidden") &&
+			hsvpicker.hasClass("ui-hsvpicker") &&
+			hsvpicker.children().length == 3
+			, "Create - Hue-Saturation-Value");
+
+		ok( function ( ) {
+			var i,
+				varArray,
+				leftbutton,
+				rightbutton,
+				view,
+				width,
+				nowvar,
+				indicator,
+				result = true,
+				hue,
+				sat,
+				val,
+				dragging_hsv = [0,0,0];
+
+			for( i = 0 ; i < hsvpicker.children().length; i++ ){
+				varArray = hsvpicker.children();
+				nowvar = varArray.eq(i);
+				leftbutton = nowvar.children().eq(0);
+				view = nowvar.children().eq(1);
+				rightbutton = nowvar.children().eq(2);
+				indicator = nowvar.children().eq(1).children().eq(3);
+
+				while(true) {
+					chan = leftbutton.find("a").attr( "data-" + ( $.mobile.ns || "" ) + "target" );
+					leftbutton.find("a").trigger( "vclick" );
+					if( parseInt( indicator.css("left") ) <= 0 ){
+						break;
+					}
+				}
+
+				hsvIdx = ( "hue" === chan ) ? 0 :
+							( "sat" === chan) ? 1 : 2;
+				dragging_hsv = [ 0, 0, 0];
+
+				while(true) {
+					rightbutton.children().first().trigger( "vclick" );
+					width = view.first().width();
+					max = ( 0 == hsvIdx ? 360 : 1 );
+					step = 0.05 * max;
+					dragging_hsv[hsvIdx] = dragging_hsv[hsvIdx] + step;
+					dragging_hsv[hsvIdx] = Math.min( max, Math.max( 0.0, dragging_hsv[hsvIdx] ) );
+					hue = varArray.eq(0).children().eq(1).children();
+					val = varArray.eq(1).children().eq(1).children();
+					sat = varArray.eq(2).children().eq(1).children();
+					switch(hsvIdx){
+						case 0:
+							if( indicator.css("background-color") != val.last().css("background-color") ||
+								indicator.css("background-color") != sat.last().css("background-color"))
+								result = false;
+						break;
+						case 1:
+							if( parseFloat( dragging_hsv[1] ).toFixed(2) != parseFloat(hue.eq(1).css("opacity")).toFixed(2) ||
+								indicator.css("background-color") != sat.last().css("background-color"))
+								result = false;
+						break;
+						case 2:
+							if(parseFloat( 1 - dragging_hsv[2] ).toFixed(2) , parseFloat(hue.eq(2).css("opacity")).toFixed(2) ||
+								parseFloat( 1 - dragging_hsv[2] ).toFixed(2) , parseFloat(val.eq(2).css("opacity")).toFixed(2))
+								result = false;
+						break;
+					}
+					if( parseInt( indicator.css("left") ) >= parseInt( width ) || !result){
+						break;
+					}
+				}
+			}
+			return result;
+		}," Click - Color match, Hue-Saturation-Value " );
+
+		colorcode = makeRandomColor();
+		widget.hsvpicker( { color : colorcode });
+
+		ok( colorchange(widget, colorcode),
+			"Option : Color change")
+	}
+
+	test( "Color Title" , function ( ) {
+		var wgSiblings,
+			colorHex,
+			widget,
+			colorcode;
+
+		widget = $("#colortitle");
+
+		wgSiblings = widget.siblings();
+		ok( widget.is(":hidden") &&
+			wgSiblings.length == 2 &&
+			wgSiblings.last().is(".ui-colortitle, .jquery-mobile-ui-widget"),
+			"Create - Color Title" );
+
+		colorHex = widget.jqmData("color");
+		equal( wgSiblings.last().css("color"), hexToRgb(colorHex), "Compare - Color" );
+		equal( wgSiblings.last().text().trim(), colorHex, "Compare - Text" );
+
+		colorcode = makeRandomColor();
+		widget.colortitle({ color : colorcode });
+
+		ok( colorchange( widget, colorcode ),
+			"Option : Color change");
+	});
+
+	test( "Color palette" , function () {
+		var widget,
+			palette,
+			palettePreview,
+			wgSiblings,
+			colorChoice,
+			i,
+			colorcode,
+			palettePrefix = ".colorpalette";
+
+		widget = $("#colorpalette");
+
+		wgSiblings = widget.siblings();
+		palette = wgSiblings.last();
+		ok( widget.is(":hidden") &&
+			wgSiblings.length == 2 &&
+			palette.is(".ui-colorpalette, .jquery-mobile-ui-widget"),
+			"Create - Color palette" );
+
+		if( palette.find( palettePrefix + "-preview-container").length ){
+			palettePreview = palette.find( palettePrefix +"-preview-container");
+		}
+		colorChoice = palette.find( palettePrefix + "-table").children().find( "div[class^='colorpalette-choice-container-']" );
+		equal( colorChoice.length ,
+				palette.jqmData("n-choices") , "Count - Color choice container" );
+
+		ok( function(){
+				var i = 0,
+					result = true;
+				for(i = 0 ; i < colorChoice.length; i++ ){
+					$(colorChoice[i]).children().trigger("vclick");
+					if( palettePreview.children().css("background-color") == $(colorChoice[i]).children().css("background-color") ){
+						result = false;
+						break;
+					}
+				}
+			return result;
+		}, "Click - Palette Active check" );
+
+		colorcode = makeRandomColor();
+		widget.colorpalette({ color: colorcode });
+
+		ok( colorchange( widget, colorcode ),
+			"Option : Color change");
+	});
+
+	test( "Color picker button-noform" , function () {
+		var widget,
+			wgSiblings,
+			colorpickerbutton,
+			colorcode,
+			popwindow,
+			hsvpicker;
+
+		widget = $("#colorpickerbutton-noform");
+		widget.colorpickerbutton();
+		wgSiblings = widget.siblings();
+		colorpickerbutton = wgSiblings.last();
+
+		ok( widget.is(":hidden") &&
+			wgSiblings.last().jqmData("role") == "button" &&
+			wgSiblings.last().attr("aria-haspopup") == "true",
+			"Create - Color picker" );
+
+		widget.colorpickerbutton("open");
+		popwindow = $("#colorpage").children().last();
+
+		ok( parseInt( popwindow.css("top") ) > 0, "Open - Popupwindow");
+		hsvpicker = popwindow.children().children().first();
+		testHsvpicker(hsvpicker);
+
+		widget.colorpickerbutton("close");
+		equal( hexToRgb( hsvpicker.jqmData("color") ),
+				colorpickerbutton.children().children().children().css("color") );
+
+		colorcode = makeRandomColor();
+		widget.colorpicker({ color: colorcode });
+
+		ok( colorchange( widget, colorcode ),
+			"Option : Color change");
+	});
+
+	test( "Hue-Saturation-Value" , function () {
+		testHsvpicker( "#hsvpicker" );
+	});
+
+	test( "Hue-Saturation-Lightnewss" , function() {
+		var widget,
+		wgSiblings,
+		colorpicker,
+		colorcode;
+
+		widget = $("#colorpicker");
+		widget.colorpicker();
+		wgSiblings = widget.siblings();
+		colorpicker = wgSiblings.last();
+
+		ok( widget.is(":hidden") &&
+			colorpicker.hasClass("ui-colorpicker") &&
+			colorpicker.children().length == 3
+			, "Create - Hue-Saturation-Lightness");
+
+		colorcode = makeRandomColor();
+		widget.colorpicker({ color: colorcode });
+
+		ok( colorchange( widget, colorcode ),
+			"Option : Color change");
+	});
+});
+\ No newline at end of file
diff --git a/tests/unit-tests/color/index.html b/tests/unit-tests/color/index.html
new file mode 100644
index 00000000..5c719f3a
--- /dev/null
+++ b/tests/unit-tests/color/index.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="color-tests.js"></script>
+
+	<title>Color Picker</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Color</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+<div id="qunit-fixture">
+	<div data-role="page" id="colorpage">
+	<div>
+		<div>Color title widget</div>
+		<div data-role="colortitle" id="colortitle"></div>
+	</div>
+	<div>
+		<div>Color palette widget</div>
+		<div data-role="colorpalette" id="colorpalette" data-show-preview="true"></div>
+	</div>
+	<div>
+		<div>Color picker button</div>
+		<div data-role="colorpickerbutton" data-inline="true" id="colorpickerbutton-noform"></div>
+	</div>
+	<div>
+		<div data-role="label">Hue-Saturation-Value picker widget</div>
+		<div data-role="hsvpicker" id="hsvpicker"></div>
+	</div>
+	<div>
+		<div data-role="label">Hue-Saturation-Lightness picker widget</div>
+		<div data-role="colorpicker" id="colorpicker" data-color="#ffffff"></div>
+	</div>
+	</div>
+</div>
+
+</body>
+</html>
+
diff --git a/tests/unit-tests/controlbar/controlbar-tests.js b/tests/unit-tests/controlbar/controlbar-tests.js
new file mode 100755
index 00000000..c1107bd6
--- /dev/null
+++ b/tests/unit-tests/controlbar/controlbar-tests.js
@@ -0,0 +1,68 @@
+/*
+ * controlbar unit tests
+ */
+
+(function ($) {
+	$.mobile.defaultTransition = "none";
+
+	module( "Controlbar" );
+
+	var unit_controlbar = function ( widget, type, drayStyle ) {
+		var controlbar,
+			controlbar_style,
+			item_count,
+			activeIndex,
+			deactiveReturn,
+			activeReturn,
+			created_controlbar = widget.controlbar();
+
+		/* Create */
+		ok( created_controlbar, "Create" );
+
+		/* Check Parameters */
+		equal( type, created_controlbar.jqmData("style"), "Parameter: data-style" );
+
+		if ( drayStyle ) {
+			if ( drayStyle == "icon" ) {
+				equal( created_controlbar.find( "a" ).is(".ui-btn-icon_only" ), true, "Icon only style test");
+			} else if ( drayStyle == "text" ) {
+				equal( created_controlbar.is(".ui-navbar-noicons" ), true, "Text only style test");
+			}
+		}
+
+		/* Check APIs */
+		activeIndex = created_controlbar.find(".ui-btn-active").index();
+		created_controlbar.controlbar( "disable", activeIndex );
+		deactiveReturn = created_controlbar.find("li:eq(" + activeIndex + ")").is(".ui-disabled");
+
+		equal( deactiveReturn, true, "List Deactive test" );
+
+		created_controlbar.controlbar("enable", activeIndex);
+		activeReturn = created_controlbar.find("li:eq(" + activeIndex + ")").is(".ui-disabled");
+		equal( activeReturn, false, "List Active test" );
+	};
+
+	test( "controlbar normal style test -> tabbar", function () {
+		unit_controlbar( $("#controlbar-tabbar-test"), "tabbar" );
+	});
+
+	test( "controlbar icon style test -> tabbar", function () {
+		unit_controlbar( $("#controlbar-tabbar-test-icon-only"), "tabbar", "icon" );
+	});
+
+	test( "controlbar text style test -> tabbar", function () {
+		unit_controlbar( $("#controlbar-tabbar-test-text-only"), "tabbar", "text" );
+	});
+
+	test( "controlbar normal style test -> toolbar", function () {
+		unit_controlbar( $("#controlbar-toolbar-test"), "toolbar" );
+	});
+
+	test( "controlbar icon style test -> toolbar", function () {
+		unit_controlbar( $("#controlbar-toolbar-test-icon-only"), "toolbar", "icon" );
+	});
+
+	test( "controlbar text style test -> tabbar", function () {
+		unit_controlbar( $("#controlbar-toolbar-test-text-only"), "toolbar", "text" );
+	});
+})(jQuery);
diff --git a/tests/unit-tests/controlbar/index.html b/tests/unit-tests/controlbar/index.html
new file mode 100755
index 00000000..8e270801
--- /dev/null
+++ b/tests/unit-tests/controlbar/index.html
@@ -0,0 +1,140 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+  <script src="controlbar-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Controlbar Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>Controlbar Test - markup</h1>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+	<div data-nstest-role="footer">
+		<div id="controlbar-tabbar-test" data-role="controlbar" data-style="tabbar" >
+			<ul>
+				<li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active">Menu</a></li>
+				<li><a href="#" data-icon="ctrlbar-save" >Save</a></li>
+				<li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+				<li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+				<li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>Controlbar Test - markup</h1>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+	<div data-nstest-role="footer">
+		<div id="controlbar-tabbar-test-icon-only" data-role="controlbar" data-style="tabbar" >
+			<ul>
+				<li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
+				<li><a href="#" data-icon="ctrlbar-save" ></a></li>
+				<li><a href="#" data-icon="ctrlbar-share" ></a></li>
+				<li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
+				<li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>Controlbar Test - markup</h1>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+	<div data-nstest-role="footer">
+		<div id="controlbar-tabbar-test-text-only" data-role="controlbar" data-style="tabbar" >
+			<ul>
+				<li><a href="#" >Menu</a></li>
+				<li><a href="#" class="ui-btn-active">Save</a></li>
+				<li><a href="#" >Share</a></li>
+				<li><a href="#" >Timeline</a></li>
+				<li><a href="#" >WorldClock</a></li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>Controlbar Test - markup</h1>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+	<div data-nstest-role="footer">
+		<div id="controlbar-toolbar-test" data-role="controlbar" data-style="toolbar" >
+			<ul>
+				<li><a href="#" data-icon="ctrlbar-menu" >Menu</a></li>
+				<li><a href="#" data-icon="ctrlbar-save" class="ui-btn-active">Save</a></li>
+				<li><a href="#" data-icon="ctrlbar-share" >Share</a></li>
+				<li><a href="#" data-icon="ctrlbar-timeline" >Timeline</a></li>
+				<li><a href="#" data-icon="ctrlbar-world_clock" >WorldClock</a></li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>Controlbar Test - markup</h1>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+	<div data-nstest-role="footer">
+		<div id="controlbar-toolbar-test-icon-only" data-role="controlbar" data-style="toolbar" >
+			<ul>
+				<li><a href="#" data-icon="ctrlbar-menu" class="ui-btn-active"></a></li>
+				<li><a href="#" data-icon="ctrlbar-save" ></a></li>
+				<li><a href="#" data-icon="ctrlbar-share" ></a></li>
+				<li><a href="#" data-icon="ctrlbar-timeline" ></a></li>
+				<li><a href="#" data-icon="ctrlbar-world_clock" ></a></li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" data-nstest-position="inline">
+	<h1>Controlbar Test - markup</h1>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+	<div data-nstest-role="footer">
+		<div id="controlbar-toolbar-test-text-only" data-role="controlbar" data-style="toolbar" >
+			<ul>
+				<li><a href="#" >Menu</a></li>
+				<li><a href="#" class="ui-btn-active">Save</a></li>
+				<li><a href="#" >Share</a></li>
+				<li><a href="#" >Timeline</a></li>
+				<li><a href="#" >WorldClock</a></li>
+			</ul>
+		</div>
+	</div>
+</div>
+</body>
+</html>
diff --git a/tests/unit-tests/datetimepicker/datetimepicker-tests.js b/tests/unit-tests/datetimepicker/datetimepicker-tests.js
new file mode 100644
index 00000000..c35e064e
--- /dev/null
+++ b/tests/unit-tests/datetimepicker/datetimepicker-tests.js
@@ -0,0 +1,147 @@
+$(document).ready( function () {
+
+	module( "Date Time Picker");
+
+	var datetime = $("#datetime")[0];
+	var date = $("#date")[0];
+	var time = $("#time")[0];
+	var custom = $("#custom")[0];
+
+	// trigger pagecreate
+	$( "#page-1" ).page();
+
+	var objDatetime = $(datetime).data( "datetimepicker" );
+	var objDate = $(date).data( "datetimepicker" );
+	var objTime = $(time).data( "datetimepicker" );
+	var objCustom = $(custom).data( "datetimepicker" );
+
+	asyncTest( "Auto-initialization", function () {
+		ok( objDatetime, "should Date/Time instace created" );
+		ok( objDate, "should Date instance created" );
+		ok( objTime, "should Time instance created" );
+		ok( objCustom, "should Custom format instance created" );
+
+		start();
+	});
+
+	asyncTest( "Options", function () {
+		equal( objDatetime.options.type, "datetime", "should 'datetime' type created." );
+		equal( objDate.options.type, "date", "should 'date' type created." );
+		equal( objTime.options.type, "time", "should 'time' type created." );
+		equal( objCustom.options.type, "datetime", "should custom format created as 'datetime' type." );
+		equal( objCustom.options.format, "MMM dd yyyy hh:mm tt", "should accept custom format string." );
+		equal( objCustom.options.date.toString(), new Date("Jun 30 00:00:00 UTC+0000 2012").toString(), "should accept preset date." );
+
+		start();
+	});
+
+	asyncTest( "Private Methods", function () {
+		ok( ( function () {
+			var year = 0,
+				expect = false,
+				actual = false;
+
+			try {
+				for ( year = 1; year < 2100; year++ ) {
+					expect = new Date( year, 1, 29 ).getDate() == 29;
+					actual = objDatetime._isLeapYear( year );
+					if ( expect != actual ) {
+						throw "" + year + " is wrong";
+					}
+				};
+			} catch ( exception ) {
+				console.log( exception );
+				return false;
+			}
+			return true;
+		}()), "should be able to check leap year" );
+
+		var updateFieldTest = function ( format, value, expect ) {
+			var target = $('<div data-pat=' + format + '></div>');
+			objTime._updateField( target, value );
+			return target.text();
+		};
+
+		deepEqual( [
+			updateFieldTest( "h", 0 ),
+			updateFieldTest( "hh", 1 ),
+			updateFieldTest( "H", 13 ),
+			updateFieldTest( "HH", 9 ),
+			updateFieldTest( "m", 9 ),
+			updateFieldTest( "mm", 9 ),
+			updateFieldTest( "MMM", 3 ),
+			updateFieldTest( "MMMM", 3 ),
+			updateFieldTest( "yy", 1995 ),
+			updateFieldTest( "yyyy", 1995 )
+		],
+		[
+			"12", "01", "13", "09", "9", "09", Globalize.culture().calendar.months.namesAbbr[2], Globalize.culture().calendar.months.names[2], "95", "1995"
+		], "should update field to given value with format" );
+
+		ok( ( function () {
+			var beforeNoon = objTime.options.date.getHours() < 12;
+			objTime._switchAmPm();
+			return beforeNoon != objTime.options.date.getHours() < 12;
+		}()), "should change AM/PM by AMPM button" );
+
+		deepEqual( [ "MMMM", " ", "dd", " ", "yyyy", " ", "hh", ":", "mm", " ", "dummy space" ],
+			objTime._parsePattern( "MMMM dd yyyy hh:mm 'dummy space'" ), "should parse DTF string as array" );
+
+		objDatetime.options.date = new Date( "May 2 18:30:00 2012" );
+
+		var months = Globalize.culture().calendar.months.namesAbbr.slice();
+		if ( months.length > 12 ) {
+			months.length = 12;
+		}
+
+		deepEqual( [
+			{ // hour h 6
+				values : [ "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12" ],
+				data : [ 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 12 ],
+				numItems : 12,
+				current : 5
+			},
+			{ // hour H 6
+				values : range( 0, 23 ),
+				data : range( 0, 23 ),
+				numItems : 24,
+				current : 18
+			},
+			{
+				values : months,
+				data : range( 1, 12 ),
+				numItems : 12,
+				current : 4
+			}
+		],
+		[
+			objDatetime._populateDataSelector( "hour", "hh", objDatetime ),
+			objDatetime._populateDataSelector( "hour", "H", objDatetime ),
+			objDatetime._populateDataSelector( "month", "MMM", objDatetime )
+		], "should populate data selector by given field and pattern" );
+
+		start();
+	});
+
+	asyncTest( "Public Methods", function () {
+		objDatetime.value.call( objDatetime, "Jan 1 09:00:00 2012" );
+		equal( "2012-01-01T09:00:00", objDatetime.value(), "should set and get value by API" );
+		var format = "yyyy MM dd hh mm";
+		objDatetime._setFormat( format );
+		equal( objDatetime.option("format"), format, "should set type and format" );
+		start();
+	});
+
+	asyncTest( "Events", function () {
+		var str = "May 2 18:00:00 2012";
+
+		$(datetime).bind("date-changed", function(e, date) {
+			equal( date, "2012-05-02T18:00:00", "Should invoke event when date changed" );
+			start();
+		});
+
+		objDatetime.value( str );
+	});
+
+
+});
diff --git a/tests/unit-tests/datetimepicker/index.html b/tests/unit-tests/datetimepicker/index.html
new file mode 100644
index 00000000..41f75ffc
--- /dev/null
+++ b/tests/unit-tests/datetimepicker/index.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="datetimepicker-tests.js"></script>
+
+	<title>Date Time Picker</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Date Time Picker</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+	<div data-role="page" id="dummy-page">
+		<div data-role="header" data-position="fixed">
+			<h1>Dummy</h1>
+		</div>
+		<div data-role="contents">
+		</div>
+	</div>
+	<div data-role="page" id="page-1">
+		<div data-role="header" data-position="fixed">
+			<h1>Date Time Picker</h1>
+		</div>
+		<div data-role="content">
+			<ul data-role="listview">
+				<li class="ui-li-2line-sub-main">
+					<span class="ui-li-text-main">
+						<input type="datetime" id="datetime" />
+					</span>
+					<span class="ui-li-text-sub">DateTimePicker</span>
+				</li>
+				<li class="ui-li-2line-sub-main">
+					<span class="ui-li-text-main">
+						<input type="date" id="date"/>
+					</span>
+					<span class="ui-li-text-sub">DatePicker</span>
+				</li>
+				<li class="ui-li-2line-sub-main">
+					<span class="ui-li-text-main">
+						<input type="time" id="time"/>
+					</span>
+					<span class="ui-li-text-sub">TimePicker</span>
+				</li>
+				<li class="ui-li-2line-sub-main">
+					<span class="ui-li-text-main">
+						<input type="datetime" id="custom" data-format="MMM dd yyyy hh:mm tt" value="2012-06-30T00:00:00+00:00" />
+					</span>
+					<span class="ui-li-text-sub">DateTimePicker</span>
+				</li>
+			</ul>
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
+
diff --git a/tests/unit-tests/dayselector/dayselector-tests.js b/tests/unit-tests/dayselector/dayselector-tests.js
new file mode 100644
index 00000000..853bf13a
--- /dev/null
+++ b/tests/unit-tests/dayselector/dayselector-tests.js
@@ -0,0 +1,158 @@
+/*
+ * Unit Test: Dayselector
+ * modified by : Koeun Choi <koeun.choi@samsung.com>
+ */
+
+(function ($) {
+
+	module( "Day selector" );
+
+	var unit_dayselector = function (elt, expectedType, expectedTheme) {
+		var days = 7,
+			checkbox,
+			label,
+			expectedId,
+			i;
+
+		elt.dayselector();
+
+		ok( elt.hasClass('ui-dayselector'), "day-selector has 'ui-dayselector' class.");
+		// main element should be a controlgroup
+		ok( elt.hasClass('ui-controlgroup'), "day-selector has 'ui-controlgroup' class." );
+
+		equal( elt.attr('data-' + $.mobile.ns + 'type'), expectedType, "should have '" + expectedType + "' type" );
+
+		for ( i = 0; i < days ; i++ ) {
+			expectedId = elt.attr( 'id' ) + '_' + i;
+			checkbox = elt.find( '.ui-checkbox :checkbox[value=' + i + '][id=' + expectedId + ']' );
+			equal( checkbox.length, 1, "should be one checkbox per day" );
+			equal( checkbox.prop('value'), String(i), "should have correct day value" );
+
+			label = checkbox.siblings().first();
+			equal( label.length, 1, "should be one label per day" );
+			equal( label.attr('for'), expectedId, "should associate correctly with checkbox" );
+			ok( label.hasClass('ui-dayselector-label-' + i), "should have the right label class" );
+			equal( label.jqmData('theme'), expectedTheme, "should have '" + expectedTheme + "' theme" );
+		}
+	};
+
+	/* Test 1. Default Configuration Check */
+	asyncTest( "Default Configuration Check", function () {
+
+		$.testHelper.pageSequence( [
+			function () {
+				$.testHelper.openPage( '#dayselector-test-configuration' );
+			},
+
+			function () {
+				var expectedType = 'horizontal',
+					testPage = $( '#dayselector-test-configuration' ),
+					expectedTheme = 's',
+					daySelector;
+
+				// test default values are applied correctly
+				daySelector = testPage.find( '#dayselector-test-configuration-default' );
+				unit_dayselector( daySelector, expectedType, expectedTheme );
+
+				start();
+			}
+		]);
+	});
+
+	/* Test 2. Theme Configuration Check */
+	asyncTest( "Theme Configuration Check", function () {
+
+		$.testHelper.pageSequence( [
+			function () {
+				$.testHelper.openPage( '#dayselector-test-configuration' );
+			},
+
+			function () {
+				var expectedType = 'horizontal',
+					testPage = $( '#dayselector-test-configuration' ),
+					expectedTheme,
+					daySelector;
+
+				// test user theme is applied to dayselector winset correctly
+				daySelector = testPage.find( '#dayselector-test-configuration-theme' );
+				daySelector.dayselector();
+				expectedTheme = daySelector.jqmData( 'theme' );
+				equal( expectedTheme, 'a', "dayselector fieldset theme is 'a'" );
+				unit_dayselector( daySelector, expectedType, expectedTheme );
+
+				start();
+			}
+
+		]);
+	});
+
+	/* Test 3. Custom Configuration Check */
+	asyncTest( "Custom Configuration Check", function () {
+
+		$.testHelper.pageSequence( [
+			function () {
+				$.testHelper.openPage( '#dayselector-test-configuration' );
+			},
+
+			function () {
+				var expectedType = 'vertical',
+					testPage = $( '#dayselector-test-configuration' ),
+					expectedTheme = 'a',
+					daySelector;
+
+				// test custom config is applied correctly
+				daySelector = testPage.find( '#dayselector-test-configuration-custom' );
+
+				daySelector.dayselector({ type: expectedType, theme: expectedTheme });
+				unit_dayselector(daySelector, expectedType, expectedTheme );
+
+				start();
+			}
+
+		]);
+	});
+
+	/* Test 4. Check Event and APIs */
+	asyncTest( "Check Event and APIs", function () {
+
+		$.testHelper.pageSequence([
+			function () {
+				$.testHelper.openPage( '#dayselector-test-select' );
+			},
+
+			function () {
+				var testPage,
+					daySelectorElem,
+					wednesday,
+					friday;
+				testPage = $( '#dayselector-test-select' );
+				ok( testPage.hasClass('ui-page-active') );
+
+				// test defaults are applied correctly
+				daySelectorElem = testPage.find( '#dayselector-test-select-1' );
+
+				// nothing should be selected yet
+				deepEqual( daySelectorElem.dayselector('value'), [] );
+
+				// click on Wednesday and Friday to switch them on
+				wednesday = daySelectorElem.find( '.ui-checkbox' )[3];
+				$( wednesday ).find( 'label' ).trigger( 'click' );
+
+				friday = daySelectorElem.find( '.ui-checkbox' )[5];
+				$( friday ).find( 'label' ).trigger( 'click' );
+				deepEqual( daySelectorElem.dayselector('value'), ['3', '5'] );
+
+				// turn off Wednesday and Friday
+				$( wednesday ).find( 'label' ).trigger( 'click' );
+				$( friday ).find( 'label' ).trigger( 'click' );
+				deepEqual( daySelectorElem.dayselector('value'), [] );
+
+				// test the selectAll() method
+				daySelectorElem.dayselector( 'selectAll' );
+				deepEqual( daySelectorElem.dayselector('value'), ['0', '1', '2', '3', '4', '5', '6'] );
+
+				start();
+			}
+		]);
+	});
+})(jQuery);
diff --git a/tests/unit-tests/dayselector/index.html b/tests/unit-tests/dayselector/index.html
new file mode 100644
index 00000000..29059ded
--- /dev/null
+++ b/tests/unit-tests/dayselector/index.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<title>jQuery Mobile Day Selector Tests</title>
+
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="dayselector-tests.js"></script>
+	</head>
+	<body>
+
+	<h1 id="qunit-header">jQuery Mobile Day Selector Tests</h1>
+	<h2 id="qunit-banner"></h2>
+	<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="dayselector-test-configuration">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>Day Selector Tests - configuration</h1>
+	</div>
+	<div data-nstest-role="content">
+	  <fieldset id="dayselector-test-configuration-default" data-nstest-role="dayselector"> </fieldset>
+	  <fieldset id="dayselector-test-configuration-theme" data-nstest-theme="a" data-nstest-role="dayselector"></fieldset>
+	  <fieldset id="dayselector-test-configuration-custom"></fieldset>
+	</div>
+</div>
+
+<div data-nstest-role="page" id="dayselector-test-select">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>Day Selector Tests - selection</h1>
+	</div>
+	<div data-nstest-role="content">
+	  <fieldset id="dayselector-test-select-1" data-nstest-role="dayselector"></fieldset>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/expandablelist/expandablelist-tests.js b/tests/unit-tests/expandablelist/expandablelist-tests.js
new file mode 100644
index 00000000..fdb3381a
--- /dev/null
+++ b/tests/unit-tests/expandablelist/expandablelist-tests.js
@@ -0,0 +1,106 @@
+/**
+ * Expandablelist test
+ *
+ * Youmin Ha <youmin.ha@samsung.com>
+ */
+( function ( $ ) {
+	var DEBUG = true;
+
+	$.mobile.defaultTransition = "none";
+
+	module( "ExpandableList", {
+		setup: function ( ) {
+			var page = $( 'div#expandablelist-main:jqmData(role="page")' ),
+				initHtml = '<form>\
+					<div data-role="header">\
+						<h1>expandable list</h1>\
+					</div>\
+					<div data-role="content">\
+						<ul data-role="listview" id="list1">\
+							<li id="exp1" data-expandable="true" data-initial-expansion="true">exp1</li>\
+							<li id="exp1-1" data-expandable="true"  data-expanded-by="exp1" data-initial-expansion="false">exp1-1</li>\
+							<li id="exp1-1-1" data-expanded-by="exp1-1">exp1-1-1</li>\
+							<li id="exp2" data-expandable="true">exp2</li>\
+						</ul>\
+					</div>\
+				</form>',
+				obj;
+
+				if( DEBUG ) {
+					page.show( );
+				}
+				page.append( $( initHtml ) );
+
+				obj = $( ':jqmData(role="listview")' );
+				obj.listview( );
+
+				obj = $( ':jqmData(expandable="true")' );
+				obj.expandablelist( );
+		},
+		teardown: function ( ) {
+			var page = $( 'div#expandablelist-main:jqmData(role="page")' );
+			page.empty( );
+
+			if( DEBUG ) {
+				page.hide( );
+			}
+		}
+	} );
+
+	function expandCollapseTest ( ) {
+		var transitionTimeout = 1000,
+			elist = $( ":jqmData(expandable='true')" ),
+			li1,
+			li1_1,
+			li1_1_1,
+			val;
+
+		elist.expandablelist( );
+		ok( elist, "expandablelist object creation" );
+
+		li1 = $( "li#exp1" );
+		li1_1 = $( "li#exp1-1" );
+		li1_1_1 = $( "li#exp1-1-1" );
+
+		val = li1_1.height( );
+		console.log( "li1_1's height=" + val );
+		notEqual( val, 0, "Expanded listitem with expandable parent having data-initial-expansion=true must be visible (height > 0)" );
+
+		equal( li1_1_1.height(), 0, "Expanded listitem with expandable parent having data-initial-expansion=false must not be visible (height == 0)" );
+
+		li1_1.trigger( 'vclick' );
+		setTimeout( function ( ) {
+			notEqual( li1_1_1.height( ), 0, "After click, expanded listitem must be visible (height > 0)" );
+
+			li1.trigger( 'vclick' );
+			setTimeout( function ( ) {
+				// All children must be collapsed when top-level expandable listitem is clicked.
+				equal( li1_1.height(), 0, "After click, all children must be collapsed. (height == 0)" );
+				equal( li1_1_1.height(), 0, "After click, all children must be collapsed. (height == 0)" );
+
+				start( );
+			}, transitionTimeout );
+
+		}, transitionTimeout );
+	}
+
+	asyncTest( "Basic expand-collapse test", 6, function ( ) {
+		expandCollapseTest( );
+	} );
+
+	asyncTest( "style test - checkbox" , 6, function ( ) {
+		var li = $( "li#exp1-1" ),
+			subitem = $( '<input type="checkbox" id="checkbox1" >' );
+
+		// Prepare
+		li.append( subitem );
+		li.addClass( 'ui-li-1line-check1' )
+			.addClass( 'ui-li-dialogue' );
+		subitem.checkboxradio( );
+		li.trigger( 'refresh' );
+
+		// Run
+		expandCollapseTest( );
+	} );
+
+} ) ( jQuery );
diff --git a/tests/unit-tests/expandablelist/index.html b/tests/unit-tests/expandablelist/index.html
new file mode 100644
index 00000000..b02d616b
--- /dev/null
+++ b/tests/unit-tests/expandablelist/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Expandable list test</title>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+
+</head>
+<body>
+	<!-- QUnit template -->
+	<div>
+		<h1 id="qunit-header">Test : Expandable list</h1>
+		<h2 id="qunit-banner"></h2>
+		<h2 id="qunit-userAgent"></h2>
+		<ol id="qunit-tests"></ol>
+	</div>
+		<div data-role="page" id="expandablelist-main">
+		</div>
+	<script src="expandablelist-tests.js"></script>
+</body>
+</html>
diff --git a/tests/unit-tests/extendablelist/extendablelist-tests.js b/tests/unit-tests/extendablelist/extendablelist-tests.js
new file mode 100755
index 00000000..17b18f63
--- /dev/null
+++ b/tests/unit-tests/extendablelist/extendablelist-tests.js
@@ -0,0 +1,117 @@
+/*
+ * Unit Test: Extendable list
+ *
+ * Wongi Lee <wongi11.lee@samsung.com>
+ */
+
+$( document ).ready( function () {
+
+	module( "Extendable List");
+
+	function startExtendableListTest(){
+		var $elContainer = $( "ul#extendable_list_main" ),
+			$elElements = $( "ul#extendable_list_main li" ),
+			elOptions = $( "ul#extendable_list_main" ).extendablelist( "option" );
+		console.dir( elOptions );
+
+		test( "Extendable list test", function () {
+			/* Initialize and create method */
+			ok( $elContainer );
+			equal( $elElements.length, 51 );	/* 50 <li> items + one button. */
+
+			/* Options */
+			equal( elOptions.id, "#extendable_list_main" );
+			equal( elOptions.childSelector, " li" );
+			equal( elOptions.dbtable, "JSON_DATA" );
+			equal( elOptions.template, "tmp-1line" );
+			equal( elOptions.extenditems, 50 );
+			equal( elOptions.scrollview, true );
+
+			/* Click Load more button */
+			ok ( ( function () {
+				/* Click Button  */
+				$( "#load_more_message" ).click();
+
+				$elElements = $( "ul#extendable_list_main li" );
+				console.log( $elElements.length );
+
+				try {
+					equal ( $elElements.length, 101 );
+				} catch ( exception ) {
+					console.log( "click load more button  : " + exception );
+					return false;
+				}
+				return true;
+			}() ), "Click Load More button()" );
+
+			ok ( ( function () {
+				var i = 0,
+					newJSON = new Array(),
+					newItem,
+					firstLI,
+					result = true;
+
+				/* make short JSON array */
+				for ( i = 0; i < 200; i++ ) {
+					newJSON.push( window.JSON_DATA[ ( i + 100 ) ] );
+				}
+
+				/* Call recreate */
+				$( "ul#extendable_list_main" ).extendablelist( "recreate", newJSON );
+
+				$elContainer = $( "ul#extendable_list_main" );
+				$elElements = $( "ul#extendable_list_main li" );
+
+				/* Check new List */
+				ok( $elContainer );
+				equal( $elElements.length, 51 );	/* 50 <li> items + one button. */
+
+				newItem = window.JSON_DATA[ 100 ];
+
+				firstLI = $( "ul#extendable_list_main li:first" );
+
+				try {
+					equal( newItem.NAME, $( firstLI ).find( "span.ui-li-text-main" ).text() );
+				} catch ( exception ) {
+					console.log( exception );
+					return false;
+				}
+
+				return true;
+			}() ), "recreate()" );
+
+			/* Destroy method */
+			ok ( ( function () {
+				/* Call destroy */
+				$( "ul#extendable_list_main" ).extendablelist( "destroy" );
+
+				var destoyedelElements = $( "ul#extendable_list_main li" );
+				console.log( destoyedelElements.length );
+
+				try {
+					equal ( destoyedelElements.length, 0 );
+				} catch ( exception ) {
+					console.log( "destroy : " + exception );
+					return false;
+				}
+				return true;
+			}() ), "destroy()" );
+		} );
+	}
+
+	/* Load Dummy Data and Init Extendable List widget*/
+	if ( window.JSON_DATA ) {
+		$( "ul" ).filter( function () {
+			return $( this ).data( "role" ) == "extendablelist";
+		} ).addClass( "elLoadSuccess" );
+
+		// trigger pagecreate
+		$( "#extendablelist-unit-test" ).page();
+
+		$( "ul#extendable_list_main" ).extendablelist( "create" );
+
+		startExtendableListTest();
+	} else {
+		console.log ( "Extendable List Init Fail." );
+	}
+} );
diff --git a/tests/unit-tests/extendablelist/index.html b/tests/unit-tests/extendablelist/index.html
new file mode 100755
index 00000000..d5fde3f0
--- /dev/null
+++ b/tests/unit-tests/extendablelist/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+			data-framework-theme="tizen-white"
+			data-framework-viewport-scale=false>
+		</script>
+		<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+		<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+		<script src = "../../../demos/tizen-gray/widgets/list/virtuallist-db-demo.js"></script>
+		<script src="extendablelist-tests.js"></script>
+		<title>Extendable</title>
+	</head>
+
+	<body>
+		<h1 id="qunit-header">Extendablelist</h1>
+		<h2 id="qunit-banner"></h2>
+		<div id="qunit-testrunner-toolbar"></div>
+		<h2 id="qunit-userAgent"></h2>
+		<ol id="qunit-tests"></ol>
+
+		<div id="qunit-fixture">
+			<div data-role="page" id="dummy-page">
+				<div data-role="header" data-position="fixed">
+					<h1>Dummy</h1>
+				</div>
+				<div data-role="contents">
+				</div>
+			</div>
+			<div data-role="page" id="extendablelist-unit-test" data-add-back-btn="true">
+				<script id="tmp-1line" type="text/x-jquery-tmpl">
+					<li class="ui-li-1line"><span class="ui-li-text-main">${NAME}</span></li>
+				</script>
+				<script id="tmp_load_more" type="text/x-jquery-tmpl">
+					<li class="ui-li-1line" style="text-align:center; margin:0 auto">
+						<div data-role="button">Load ${NUM_MORE_ITEMS} more items</div>
+					</li>
+				</script>
+				<div data-role="header" data-position="fixed">
+					<h1>extendable list</h1>
+				</div>
+				<div data-role="content">
+					<ul id = "extendable_list_main" data-role="extendablelist" data-extenditems="50" data-template="tmp-1line" data-dbtable="JSON_DATA">
+					</ul>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/tests/unit-tests/handler/handler-tests.js b/tests/unit-tests/handler/handler-tests.js
new file mode 100755
index 00000000..b4d45c8c
--- /dev/null
+++ b/tests/unit-tests/handler/handler-tests.js
@@ -0,0 +1,29 @@
+/*
+ * Unit Test: Handler
+ *
+ * Wonseop Kim <wonseop.kim@samsung.com>
+ */
+
+(function ($) {
+	module("Handler");
+
+	var unit_handler = function ( widget ) {
+		var elem = ".ui-handler",
+			handler;
+
+		/* Create */
+		widget.scrollview();
+		handler = widget.find( elem );
+		ok( ( handler.length > 0 ), "Create" );
+
+		/* API */
+		widget.scrollview( "enableHandler", false );
+		ok( handler.is( ":hidden" ), "API: enableHandler(false)" );
+		widget.scrollview( "enableHandler", true );
+		ok( handler.is( ":visible" ), "API: enableHandler(true)" );
+	};
+
+	test( "handler", function () {
+		unit_handler( $("#handlerY") );
+	});
+}( jQuery ));
diff --git a/tests/unit-tests/handler/index.html b/tests/unit-tests/handler/index.html
new file mode 100755
index 00000000..e7d9da00
--- /dev/null
+++ b/tests/unit-tests/handler/index.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="handler-tests.js"></script>
+
+	<title>Handler</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Handler</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div data-role="page" id="handler0">
+		<div data-role="header" data-position="fixed">
+			<h1>Handler</h1>
+		</div>
+		<div id="handlerY" data-role="content" data-scroll="y" data-handler="true">
+			<ul data-role="listview">
+				<li data-role="list-divider">A</li>
+				<li><a href="#">Adam Kinkaid</a></li>
+				<li><a href="#">Alex Wickerham</a></li>
+				<li><a href="#">Avery Johnson</a></li>
+				<li data-role="list-divider">B</li>
+				<li><a href="#">Bob Cabot</a></li>
+				<li data-role="list-divider">C</li>
+				<li><a href="#">Caleb Booth</a></li>
+				<li><a href="#">Christopher Adams</a></li>
+				<li><a href="#">Culver James</a></li>
+				<li data-role="list-divider">D</li>
+				<li><a href="#">David Walsh</a></li>
+				<li><a href="#">Drake Alfred</a></li>
+				<li data-role="list-divider">E</li>
+				<li><a href="#">Elizabeth Bacon</a></li>
+				<li><a href="#">Emery Parker</a></li>
+				<li><a href="#">Enid Voldon</a></li>
+				<li data-role="list-divider">F</li>
+				<li><a href="#">Francis Wall</a></li>
+				<li data-role="list-divider">G</li>
+				<li><a href="#">Graham Smith</a></li>
+				<li><a href="#">Greta Peete</a></li>
+				<li data-role="list-divider">H</li>
+				<li><a href="#">Harvey Walls</a></li>
+			</ul>
+		</div>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/imageslider/imageslider-tests.js b/tests/unit-tests/imageslider/imageslider-tests.js
new file mode 100644
index 00000000..ffd5c9f8
--- /dev/null
+++ b/tests/unit-tests/imageslider/imageslider-tests.js
@@ -0,0 +1,41 @@
+/*
+ * Unit Test: Imageslider 
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+	module("Imageslider");
+
+	var unit_imageslider = function ( widget, count ) {
+		var imagesldier,
+			refresh = function ( widget ) {
+				widget.imageslider("refresh");
+				return widget.find(".ui-imageslider-bg");
+			};
+
+		/* Create */
+		widget.imageslider();
+
+		imageslider = widget.find(".ui-imageslider-bg");
+		ok( imageslider, "Create" );
+
+		/* Initialize */
+		equal( imageslider.length, count, "Initialize" );
+
+		/* API: add */
+		widget.imageslider("add", "05.jpg");
+		widget.imageslider("add", "06.jpg");
+		imageslider = refresh( widget );
+		equal( imageslider.length, count + 2, "API: add" );
+
+		/* API: del */
+		widget.imageslider("del");
+		imageslider = refresh( widget );
+		equal( imageslider.length, count + 1, "API: del" );
+	};
+
+	test( "imageslider", function () {
+		unit_imageslider( $("#imageslider"), 4 );
+	});
+}( jQuery ));
diff --git a/tests/unit-tests/imageslider/index.html b/tests/unit-tests/imageslider/index.html
new file mode 100755
index 00000000..f6754014
--- /dev/null
+++ b/tests/unit-tests/imageslider/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="imageslider-tests.js"></script>
+
+	<title>Image Slider</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Image Slider</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div data-role="page">
+		<div data-role="header" data-position="fixed">
+			<h1>Image Slider</h1>
+		</div>
+		<div data-role="content" data-scroll="none">
+			<div data-role="imageslider" id="imageslider" data-index="2" data-vertical-align="middle">
+				<img src="01.jpg">
+				<img src="02.jpg">
+				<img src="03.jpg">
+				<img src="04.jpg">
+			</div>
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/index.html b/tests/unit-tests/index.html
new file mode 100644
index 00000000..f38938cc
--- /dev/null
+++ b/tests/unit-tests/index.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+
+  <link rel="stylesheet" href="../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+  <script src="../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+  <script src="../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+  <script src="tests.js"></script>
+  <script src="runner.js"></script>
+  <style type="text/css">
+    html, body {
+      width:100%;
+      height:100%;
+      margin:0px;
+      padding:0px;
+    }
+
+    #testFrame {
+      float: left;
+      border: 0px;
+      height: 100%;
+      width: 60%;
+    }
+
+    #results {
+      float: left;
+      width: 30%;
+    }
+  </style>
+</head>
+<body>
+  <div id="results">
+    <h1 id="qunit-header"><a href="#">jQuery Mobile Test Suite</a></h1>
+    <h2 id="qunit-banner"></h2>
+    <ol id="qunit-tests">
+    </ol>
+  </div>
+	<iframe data-src="{{testfile}}" name="testFrame" id="testFrame" scrolling="no">
+	</iframe>
+</body>
+</html>
diff --git a/tests/unit-tests/listviewcontrols/index.html b/tests/unit-tests/listviewcontrols/index.html
new file mode 100644
index 00000000..c854bce7
--- /dev/null
+++ b/tests/unit-tests/listviewcontrols/index.html
@@ -0,0 +1,155 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile listviewcontrols tests</title>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+
+  <script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+  <script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+  <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+  <script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js" data-framework-theme="tizen-white"></script>
+  <script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+  <script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+	<script src="listviewcontrols-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile listviewcontrols tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="listviewcontrols-test-validates">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>listviewcontrols test - validates</h1>
+	</div>
+	<div data-nstest-role="content">
+	  <div id="listviewcontrols-test-validates-controls">
+	    <p>I am bogus</p>
+	  </div>
+	  <ul data-role="listview" id="listviewcontrols-test-validates-target">
+	    <li>Summat</li>
+	    <li>Summat else</li>
+	  </ul>
+	</div>
+</div>
+
+<div data-nstest-role="page" id="listviewcontrols-test-defaults">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>listviewcontrols test - defaults</h1>
+	</div>
+	<div data-nstest-role="content">
+	  <div id="listviewcontrols-test-defaults-controls">
+	    <p>I am bogus</p>
+	  </div>
+	  <ul data-nstest-role="listview" id="listviewcontrols-test-defaults-target">
+	    <li>Summat</li>
+	    <li>Summat else</li>
+	  </ul>
+	</div>
+</div>
+
+<div data-nstest-role="page" id="listviewcontrols-test-attrs">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>listviewcontrols test - attributes</h1>
+	</div>
+	<div data-nstest-role="content">
+	  <div id="listviewcontrols-test-attrs-controls-1">
+	    <p>I am bogus</p>
+	  </div>
+	  <ul data-nstest-role="listview"
+        data-nstest-listviewcontrols="#listviewcontrols-test-attrs-controls-1"
+        data-nstest-listviewcontrols-options='{"modesAvailable": ["foo", "bar"], "mode": "bar", "controlPanelShowIn": "foo"}'
+        id="listviewcontrols-test-attrs-target-1">
+	    <li>Summat</li>
+	    <li>Summat else</li>
+	  </ul>
+	</div>
+
+	<div id="listviewcontrols-test-attrs-controls-2"
+	     data-nstest-listviewcontrols-show-in="bat">
+    <p>I am bogus</p>
+  </div>
+  <ul data-nstest-role="listview"
+      data-nstest-listviewcontrols="#listviewcontrols-test-attrs-controls-2"
+      data-nstest-listviewcontrols-options='{"modesAvailable": ["fox", "bat"], "mode": "bat"}'
+      id="listviewcontrols-test-attrs-target-2">
+    <li>Summat</li>
+    <li>Summat else</li>
+  </ul>
+</div>
+
+<div data-nstest-role="page" id="listviewcontrols-test-show">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>listviewcontrols test - show</h1>
+	</div>
+	<div data-nstest-role="content">
+	  <div id="listviewcontrols-test-show-controls">
+	    <p>I am bogus</p>
+	  </div>
+
+	  <ul data-nstest-role="listview"
+	      data-nstest-listviewcontrols="#listviewcontrols-test-show-controls"
+	      id="listviewcontrols-test-show-target">
+	    <li>
+	        <span class="listviewcontrols-test-show-always-visible">A_a1</span>
+	        <span class="listviewcontrols-test-show-visible-in-edit"
+	              data-nstest-listviewcontrols-show-in="edit">A_e1</span>
+	        <span class="listviewcontrols-test-show-visible-in-view"
+	              data-nstest-listviewcontrols-show-in="view">A_v1</span>
+	        <span class="listviewcontrols-test-show-visible-in-edit"
+	              data-nstest-listviewcontrols-show-in="edit">A_e2</span>
+	        <span class="listviewcontrols-test-show-visible-in-view"
+	              data-nstest-listviewcontrols-show-in="view">A_v2</span>
+	        <span class="listviewcontrols-test-show-visible-in-edit"
+	              data-nstest-listviewcontrols-show-in="edit">A_e3</span>
+	        <span class="listviewcontrols-test-show-visible-in-view"
+	              data-nstest-listviewcontrols-show-in="view">A_v3</span>
+	        <span class="listviewcontrols-test-show-always-visible">A_a2</span>
+	    </li>
+	    <li>
+	        <span class="listviewcontrols-test-show-always-visible">B_a1</span>
+	        <span class="listviewcontrols-test-show-visible-in-edit"
+	              data-nstest-listviewcontrols-show-in="edit">B_e1</span>
+	        <span class="listviewcontrols-test-show-visible-in-edit"
+	              data-nstest-listviewcontrols-show-in="edit">B_e2</span>
+	        <span class="listviewcontrols-test-show-visible-in-view"
+	              data-nstest-listviewcontrols-show-in="view">B_v1</span>
+	        <span class="listviewcontrols-test-show-visible-in-view"
+	              data-nstest-listviewcontrols-show-in="view">B_v2</span>
+	    </li>
+	  </ul>
+	</div>
+</div>
+
+<div data-nstest-role="page" id="listviewcontrols-test-methods">
+	<div data-nstest-role="header" data-nstest-position="inline">
+		<h1>listviewcontrols test - methods</h1>
+	</div>
+	<div data-nstest-role="content">
+	  <div id="listviewcontrols-test-methods-controls">
+	    <p>I am bogus</p>
+	  </div>
+	  <ul data-nstest-role="listview"
+	      data-nstest-filter="true"
+	      data-nstest-listviewcontrols="#listviewcontrols-test-methods-controls"
+	      id="listviewcontrols-test-methods-target">
+	    <li data-nstest-role="list-divider">A</li>
+	    <li>Abraham</li>
+	    <li>Andy</li>
+	    <li data-nstest-role="list-divider">B</li>
+	    <li>Barry</li>
+	    <li data-nstest-role="list-divider">C</li>
+	    <li>Carla</li>
+	    <li>Carrie</li>
+	  </ul>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/listviewcontrols/listviewcontrols-tests.js b/tests/unit-tests/listviewcontrols/listviewcontrols-tests.js
new file mode 100644
index 00000000..85a23d95
--- /dev/null
+++ b/tests/unit-tests/listviewcontrols/listviewcontrols-tests.js
@@ -0,0 +1,278 @@
+/*
+ * listviewcontrols unit tests
+ */
+(function ($) {
+    $.mobile.defaultTransition = "none";
+
+    module("listviewcontrols");
+
+    asyncTest("constructor validates options when applied programmatically", function () {
+        $.testHelper.pageSequence([
+            function () {
+                var target = $('#listviewcontrols-test-validates-target');
+                var controlsSelector = '#listviewcontrols-test-validates-controls';
+                var controls = $(controlsSelector);
+
+                var check = function (testNumber, options) {
+                  target.listviewcontrols(options);
+                  var hasClass = target.hasClass('ui-listviewcontrols-listview');
+                  target.listviewcontrols('destroy');
+                  equal(hasClass, false, 'test ' + testNumber);
+                };
+
+                // no options
+                check(1);
+
+                // controlPanelSelector is falsy
+                check(2, {controlPanelSelector: null});
+                check(3, {controlPanelSelector: undefined});
+
+                // modesAvailable is bad
+                check(4, {controlPanelSelector: controlsSelector, modesAvailable: null});
+                check(5, {controlPanelSelector: controlsSelector, modesAvailable: false});
+                check(6, {controlPanelSelector: controlsSelector, modesAvailable: 0});
+                check(7, {controlPanelSelector: controlsSelector, modesAvailable: ''});
+                check(8, {controlPanelSelector: controlsSelector, modesAvailable: {}});
+                check(9, {controlPanelSelector: controlsSelector, modesAvailable: []});
+                check(10, {controlPanelSelector: controlsSelector, modesAvailable: ['']});
+                check(11, {controlPanelSelector: controlsSelector, modesAvailable: ['string']});
+                check(12, {controlPanelSelector: controlsSelector, modesAvailable: [null, null]});
+                check(13, {controlPanelSelector: controlsSelector, modesAvailable: [0, 0]});
+                check(14, {controlPanelSelector: controlsSelector, modesAvailable: ['', '']});
+                check(15, {controlPanelSelector: controlsSelector, modesAvailable: ['string', {}]});
+                check(16, {controlPanelSelector: controlsSelector, modesAvailable: [{}, 'string']});
+                check(17, {controlPanelSelector: controlsSelector, modesAvailable: [0, 'string']});
+                check(18, {controlPanelSelector: controlsSelector, modesAvailable: ['string', 0]});
+
+                // mode is bad
+                check(19, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: null});
+                check(20, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: false});
+                check(21, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: ''});
+                check(22, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: 'zoink'});
+
+                // controlPanelSelector references invalid element
+                check(23, {controlPanelSelector: '', modesAvailable: ['foo', 'bar'], mode: 'foo'});
+                check(24, {controlPanelSelector: 'noelement', modesAvailable: ['foo', 'bar'], mode: 'foo'});
+
+                // controlPanelShowIn is bad
+                check(25, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: 'foo', controlPanelShowIn: true});
+                check(26, {controlPanelSelector: controlsSelector, modesAvailable: ['foo', 'bar'], mode: 'foo', controlPanelShowIn: 'zoink'});
+
+                // all options valid
+                target.listviewcontrols({
+                    controlPanelSelector: controlsSelector,
+                    modesAvailable: ['foo', 'bar'],
+                    mode: 'foo',
+                    controlPanelShowIn: 'foo'
+                });
+                equal(target.hasClass('ui-listviewcontrols-listview'), true);
+                equal(controls.hasClass('ui-listviewcontrols-panel'), true);
+                target.listviewcontrols('destroy');
+
+                start();
+            }
+        ]);
+    });
+
+    asyncTest("constructor supplies defaults correctly", function () {
+        $.testHelper.pageSequence([
+            function () {
+                var target = $('#listviewcontrols-test-defaults-target');
+                var controlsSelector = '#listviewcontrols-test-defaults-controls';
+                var controls = $(controlsSelector);
+
+                target.listviewcontrols({controlPanelSelector: controlsSelector});
+
+                deepEqual(target.listviewcontrols('option', 'modesAvailable'),
+                      ['edit', 'view'],
+                      "Should default to 'edit' and 'view' as modesAvailable");
+
+                equal(target.listviewcontrols('option', 'mode'),
+                      'view',
+                      "Should default to 'view' as mode");
+
+                equal(target.listviewcontrols('option', 'controlPanelShowIn'),
+                      'edit',
+                      "Should default to showing control panel in 'edit' mode");
+
+                equal(target.hasClass('ui-listviewcontrols-listview'), true);
+                equal(controls.hasClass('ui-listviewcontrols-panel'), true);
+
+                target.listviewcontrols('destroy');
+
+                start();
+            }
+        ]);
+    });
+
+    asyncTest("constructor uses jqm attributes correctly", function () {
+
+        $.testHelper.pageSequence([
+            function () {
+                $.testHelper.openPage('#listviewcontrols-test-attrs');
+            },
+
+            function () {
+                var $new_page = $('#listviewcontrols-test-attrs');
+                ok($new_page.hasClass('ui-page-active'));
+
+                // everything set through data-listviewcontrols-options
+                var target = $('#listviewcontrols-test-attrs-target-1');
+                var controlsSelector = '#listviewcontrols-test-attrs-controls-1';
+                var controls = $(controlsSelector);
+
+                deepEqual(target.listviewcontrols('option', 'modesAvailable'),
+                      ['foo', 'bar'],
+                      "Should set modesAvailable from data-listviewcontrols-options");
+
+                equal(target.listviewcontrols('option', 'mode'),
+                      'bar',
+                      "Should set mode from data-listviewcontrols-options");
+
+                equal(target.listviewcontrols('option', 'controlPanelShowIn'),
+                      'foo',
+                      "Should set controlPanelShowIn from data-listviewcontrols-options");
+
+                equal(target.hasClass('ui-listviewcontrols-listview'), true);
+                equal(controls.hasClass('ui-listviewcontrols-panel'), true);
+
+                // controlPanelShowIn set on the control panel
+                target = $('#listviewcontrols-test-attrs-target-2');
+                controlsSelector = '#listviewcontrols-test-attrs-controls-2';
+                controls = $(controlsSelector);
+
+                deepEqual(target.listviewcontrols('option', 'modesAvailable'),
+                      ['fox', 'bat'],
+                      "Should set modesAvailable from data-listviewcontrols-options");
+
+                equal(target.listviewcontrols('option', 'mode'),
+                      'bat',
+                      "Should set mode from data-listviewcontrols-options");
+
+                equal(target.listviewcontrols('option', 'controlPanelShowIn'),
+                      'bat',
+                      "Should set controlPanelShowIn from data-listviewcontrols-show-in on controls");
+
+                equal(target.hasClass('ui-listviewcontrols-listview'), true);
+                equal(controls.hasClass('ui-listviewcontrols-panel'), true);
+
+                start();
+            }
+        ]);
+    });
+
+    asyncTest("control panel and list item elements are shown in appropriate mode", function () {
+        $.testHelper.pageSequence([
+            function () {
+                $.testHelper.openPage('#listviewcontrols-test-show');
+            },
+
+            function () {
+                var $new_page = $('#listviewcontrols-test-show');
+                ok($new_page.hasClass('ui-page-active'));
+
+                var target = $('#listviewcontrols-test-show-target');
+                var controlsSelector = '#listviewcontrols-test-show-controls';
+                var controls = $(controlsSelector);
+
+                var alwaysVisibleA = 'li:first span.listviewcontrols-test-show-always-visible';
+                var alwaysVisibleB = 'li:nth-child(2) span.listviewcontrols-test-show-always-visible';
+                var shownInEditA = 'li:first span.listviewcontrols-test-show-visible-in-edit';
+                var shownInEditB = 'li:nth-child(2) span.listviewcontrols-test-show-visible-in-edit';
+                var shownInViewA = 'li:first span.listviewcontrols-test-show-visible-in-view';
+                var shownInViewB = 'li:nth-child(2) span.listviewcontrols-test-show-visible-in-view';
+
+                var allVisible = function (selector) {
+                    var all = target.find(selector);
+                    var visible = all.filter(':visible');
+                    equal(visible.length, all.length);
+                    ok(visible.length > 0);
+                    ok(all.length > 0);
+                };
+
+                var allHidden = function (selector) {
+                    var all = target.find(selector);
+                    var visible = target.find(selector).filter(':visible');
+                    equal(visible.length, 0);
+                    ok(all.length > 0);
+                };
+
+                // --- initial mode should be view
+                equal(target.listviewcontrols('option', 'mode'),
+                      'view',
+                      "Initial mode should be view");
+
+                // controls should be hidden
+                ok(!controls.is(':visible'));
+
+                // target should be always visible
+                ok(target.is(':visible'));
+
+                // show-in="edit" elements should be hidden
+                allHidden(shownInEditA);
+                allHidden(shownInEditB);
+
+                // show-in="view" elements should be visible
+                allVisible(shownInViewA);
+                allVisible(shownInViewB);
+
+                // other elements should always be visible
+                allVisible(alwaysVisibleA);
+                allVisible(alwaysVisibleB);
+
+                // --- switch mode to edit
+                target.listviewcontrols('option', 'mode', 'edit');
+
+                // controls should be visible
+                ok(controls.is(':visible'));
+
+                // target should be always visible
+                ok(target.is(':visible'));
+
+                // show-in="edit" elements should be visible
+                allVisible(shownInEditA);
+                allVisible(shownInEditB);
+
+                // show-in="view" elements should be hidden
+                allHidden(shownInViewA);
+                allHidden(shownInViewB);
+
+                // other elements should always be visible
+                allVisible(alwaysVisibleA);
+                allVisible(alwaysVisibleB);
+
+                start();
+            }
+        ]);
+    });
+
+    asyncTest("visibleListItems() returns correct counts", function () {
+        $.testHelper.pageSequence([
+            function () {
+                $.testHelper.openPage('#listviewcontrols-test-methods');
+            },
+
+            function () {
+                var $new_page = $('#listviewcontrols-test-methods');
+                ok($new_page.hasClass('ui-page-active'));
+
+                var target = $('#listviewcontrols-test-methods-target');
+
+                equal(target.listviewcontrols('visibleListItems').length,
+                      5,
+                      "Should be 5 visible list items (excluding dividers)");
+
+                // filter the list and count again
+                $new_page.find('input').val('ca');
+                $new_page.find('input').trigger('change');
+
+                equal(target.listviewcontrols('visibleListItems').length,
+                      2,
+                      "Should be 2 visible list items (excluding dividers) after filtering");
+
+                start();
+            }
+        ]);
+    });
+
+})(jQuery);
diff --git a/tests/unit-tests/loader/index.html b/tests/unit-tests/loader/index.html
new file mode 100644
index 00000000..b3d5825d
--- /dev/null
+++ b/tests/unit-tests/loader/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>loader test</title>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+
+	<script src="loader-tests.js"></script>
+</head>
+<body>
+	<!-- QUnit template -->
+	<h1 id="qunit-header">Test : loader</h1>
+	<h2 id="qunit-banner"></h2>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+
+	<div id="qunit-fixture">
+
+	</div>
+</body>
+</html>
diff --git a/tests/unit-tests/loader/loader-tests.js b/tests/unit-tests/loader/loader-tests.js
new file mode 100644
index 00000000..a2ebd802
--- /dev/null
+++ b/tests/unit-tests/loader/loader-tests.js
@@ -0,0 +1,54 @@
+/**
+ * Loader test
+ *
+ * Youmin Ha <youmin.ha@samsung.com>
+ *
+ */
+( function ( $ ) {
+	$.mobile.defaultTransition = "none";
+
+	module( "Loader" );
+
+	var tizen = $.tizen.__tizen__;
+
+	test( "util.getScaleFactor()", function ( ) {
+		var util = tizen.util,
+			expected = 1,
+			defaultWidth = 720;
+
+		if( window.scale ) {
+			expected = window.scale;
+		} else {
+			expected = screen.width / defaultWidth;
+			if( expected > 1 ) {	// Don't allow expansion
+				expected = 1;
+			}
+		}
+
+		// Test value
+		equal( util.getScaleFactor( ), expected, "Scale factor value should calculated properly." );
+	} );
+
+	test( "util.isMobileBrowser()", function ( ) {
+		var appVersion = window.navigator.appVersion,
+			mobile = appVersion.match( "Mobile" ),
+			isMobile = mobile ? true : false;
+
+		equal( tizen.util.isMobileBrowser(), isMobile, "Mobile browser must be detected." );
+
+		/* NOTE:
+		 * Is this test OK? How are both cases(mobile/non-mobile) tested?
+		 */
+	} );
+
+	test( "css.addElementToHead()", function ( ) {
+		var css = tizen.css,
+			scarecrow = $( '<meta name="scarecrow" />' ),
+			selected;
+
+		css.addElementToHead( scarecrow );
+		selected = $('head').children('meta[name=scarecrow]');
+		ok( selected.length > 0, 'Object must be added to header.' );
+	} );
+} ) ( jQuery );
+
diff --git a/tests/unit-tests/multibuttonentry/index.html b/tests/unit-tests/multibuttonentry/index.html
new file mode 100755
index 00000000..33ae7f48
--- /dev/null
+++ b/tests/unit-tests/multibuttonentry/index.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="multibuttonentry-tests.js"></script>
+
+	<title>Multibuttonentry</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Multibuttonentry</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div data-role="page" id="notifiaction0">
+		<div data-role="notification" id="smallpopup" data-type="popup" data-text1="text1" data-param="param"></div>
+		<div data-role="header" data-position="fixed">
+			<h1>Multibuttonentry</h1>
+		</div>
+		<div data-role="content">
+		</div>
+	</div>
+
+	<div data-role="page" id="notification1">
+		<div data-role="multibuttonentry" id="multibuttonetnry-test" ></div>
+		<div data-role="header" data-position="fixed">
+			<h1>Multibuttonentry</h1>
+		</div>
+		<div data-role="content">
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/multibuttonentry/multibuttonentry-tests.js b/tests/unit-tests/multibuttonentry/multibuttonentry-tests.js
new file mode 100755
index 00000000..e33f222e
--- /dev/null
+++ b/tests/unit-tests/multibuttonentry/multibuttonentry-tests.js
@@ -0,0 +1,65 @@
+/*
+ * Unit Test: multibuttonentry
+ *
+ * Kangsik Kim <kangsik81.kim@samsung.com>
+ */
+
+(function ($) {
+	module("Multibuttonentry");
+
+	var unit_multibuttonentry = function ( widget, type ) {
+		var multibuttonentry,
+			inputText,
+			outputText,
+			status;
+
+		/* Create */
+		multibuttonentry = widget.multibuttonentry();
+		ok(multibuttonentry.length > 0, "Create");
+
+		/* length */
+		equal( multibuttonentry.multibuttonentry("length"), 0, "API : length ");
+
+		/* Add */
+		multibuttonentry.multibuttonentry("add", "string1");
+		equal(multibuttonentry.multibuttonentry("length"), 1, "API: add('string1') ");
+		multibuttonentry.multibuttonentry("add", "string2");
+		equal(multibuttonentry.multibuttonentry("length"), 2, "API: add('string2') ");
+		multibuttonentry.multibuttonentry("add", "string3");
+		equal(multibuttonentry.multibuttonentry("length"), 3, "API: add('string3') ");
+
+		/* Select */
+		multibuttonentry.multibuttonentry("select", 1);
+		outputText = multibuttonentry.multibuttonentry("select");
+		equal( outputText, "string2", "API : select ( 1 )");
+
+		/* Focus Out */
+		multibuttonentry.multibuttonentry("focusOut");
+		status = multibuttonentry.hasClass("ui-multibuttonentry-focusout");
+		equal( status, true, "API : focusOut ");
+
+		/* Focus In */
+		multibuttonentry.multibuttonentry("focusIn");
+		status = multibuttonentry.hasClass("ui-multibuttonentry-focusin");
+		equal(status, true,  "API : focusIn ");
+
+		/* Remove */
+		multibuttonentry.multibuttonentry("remove", 0);
+		equal(multibuttonentry.multibuttonentry("length"), 2 , "API : remove(0)");
+
+		/* Reamove all */
+		multibuttonentry.multibuttonentry("remove");
+		equal( multibuttonentry.multibuttonentry("length"), 0, "API : remove");
+
+		/* input */
+		inputText = "multibuttonentry";
+		multibuttonentry.multibuttonentry( "inputText", inputText );
+		outputText = multibuttonentry.multibuttonentry( "inputText" );
+		equal(outputText, inputText, "API : input('" + outputText + "')");
+	};
+
+	test( "Multibuttonentry", function () {
+		unit_multibuttonentry( $("#multibuttonetnry-test"), "multibuttonetnry" );
+	});
+
+}( jQuery ));
diff --git a/tests/unit-tests/multimediaview/index.html b/tests/unit-tests/multimediaview/index.html
new file mode 100755
index 00000000..1656029b
--- /dev/null
+++ b/tests/unit-tests/multimediaview/index.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="multimediaview-tests.js"></script>
+
+	<title>MultiMediaView</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">MultiMediaView</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div data-role="page" id="multimediaview0">
+		<div data-role="header" data-position="fixed">
+			<h1>MultiMediaView (video)</h1>
+		</div>
+		<div data-role="content">
+			<video data-controls="true" style="width:100%;" id="video">
+				<source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="video/mp4" />
+				<source src="http://www.w3schools.com/html5/mov_bbb.ogg" type="video/ogg" />
+				<source src="http://www.w3schools.com/html5/mov_bbb.webm" type="video/webm" />
+				<p>Your browser does not support the video tag.</p>
+			</video>
+		</div>
+	</div>
+
+	<div data-role="page" id="multimediaview1">
+		<div data-role="header" data-position="fixed">
+			<h1>MultiMediaView (audio)</h1>
+		</div>
+		<div data-role="content">
+			<audio data-controls="true" style="width:100%;" id="audio">
+				<source src="http://www.w3schools.com/html5/mov_bbb.mp4" type="audio/mp4" />
+				<source src="http://www.w3schools.com/html5/mov_bbb.ogg" type="audio/ogg" />
+				<p>Your browser does not support the audio tag.</p>
+			</audio>
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/multimediaview/multimediaview-tests.js b/tests/unit-tests/multimediaview/multimediaview-tests.js
new file mode 100755
index 00000000..40e24499
--- /dev/null
+++ b/tests/unit-tests/multimediaview/multimediaview-tests.js
@@ -0,0 +1,61 @@
+/*
+ * Unit Test: MultiMediaView
+ *
+ * Wonseop Kim <wonseop.kim@samsung.com>
+ */
+
+(function ($) {
+	module("MultiMediaView");
+
+	var unit_multimediaview = function ( widget, type ) {
+		var control,
+			fullscreenButton,
+			width,
+			height,
+			played,
+			timeupdated,
+			ended,
+			param;
+
+		/* Create */
+		widget.multimediaview();
+		ok( widget.hasClass( "ui-multimediaview" ) , "Create" );
+
+		if ( type === "video" ) {
+			/* width */
+			width = 100;
+			widget.multimediaview( "width", width );
+			equal( width, widget.width(), "API: width" );
+
+			/* height */
+			height = 200;
+			widget.multimediaview( "height", height );
+			equal( height, widget.height(), "API: height" );
+
+			/* size */
+			width = 256;
+			height = 512;
+			widget.multimediaview( "size", width, height );
+			equal( "width : " + widget.width() + ", height : " + widget.height(),
+				"width : " + width + ", height : " + height, "API: size" );
+
+			/* fullscreen */
+			fullscreenButton = widget.parent().find( ".ui-fullscreenbutton" );
+
+			widget.multimediaview( "fullscreen", true );
+			ok( fullscreenButton.hasClass( "ui-fullscreen-off" ), "API: fullscreen (on)" );
+
+			widget.multimediaview("fullscreen", false );
+			ok( fullscreenButton.hasClass( "ui-fullscreen-on" ), "API: fullscreen (off)" );
+		}
+	};
+
+	test( "video", function () {
+		unit_multimediaview( $("#video"), "video" );
+	});
+
+	test( "audio", function () {
+		unit_multimediaview( $("#audio"), "audio" );
+	});
+
+}( jQuery ));
diff --git a/tests/unit-tests/navigationbar/index.html b/tests/unit-tests/navigationbar/index.html
new file mode 100755
index 00000000..25413e4d
--- /dev/null
+++ b/tests/unit-tests/navigationbar/index.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+	<script src="navigationbar-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Navigationbar Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" id="normalnavigation1">
+		<h1>Navigationbar Test - markup</h1>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+	<div data-nstest-role="footer">
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" id="normalnavigation2">
+		<h1>Navigationbar Test - markup</h1>
+		<a>Button</a>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+	<div data-nstest-role="footer">
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" id="normalnavigation3">
+		<a>Button</a>
+		<h1>Navigationbar Test - markup</h1>
+		<a>Button</a>
+	</div>
+<div data-nstest-role="content">
+	</div>
+	<div data-nstest-role="footer">
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" id="normalnavigation4">
+		<a>Button</a>
+		<h1>Navigationbar Test - markup</h1>
+		<a>Button2</a>
+		<a>Button3</a>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+	<div data-nstest-role="footer">
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" data-position="fixed" id="extendedstyle2btn">
+		<h1>Extended Title 2 Button </h1>
+		<div data-role="fieldcontain">
+			<fieldset data-role="controlgroup" data-type="horizontal">
+				<input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+				<label for="segment1">All</label>
+				<input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+				<label for="segment2">Call</label>
+			</fieldset>
+		</div>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" data-position="fixed" id="extendedstyle3btn">
+		<h1>Extended Title 3 Button </h1>
+		<div data-role="fieldcontain">
+			<fieldset data-role="controlgroup" data-type="horizontal">
+				<input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+				<label for="segment1">All</label>
+				<input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+				<label for="segment2">Call</label>
+				<input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
+				<label for="segment3">Save</label>
+			</fieldset>
+		</div>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+</div>
+
+<div data-nstest-role="page">
+	<div data-nstest-role="header" data-position="fixed" id="extendedstyle4btn">
+		<h1>Extended Title 4 Button </h1>
+		<div data-role="fieldcontain">
+			<fieldset data-role="controlgroup" data-type="horizontal">
+				<input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+				<label for="segment1">All</label>
+				<input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+				<label for="segment2">Call</label>
+				<input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment3" value="off" />
+				<label for="segment3">Save</label>
+				<input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment4" value="off" />
+				<label for="segment4">Back</label>
+			</fieldset>
+		</div>
+	</div>
+	<div data-nstest-role="content">
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/navigationbar/navigationbar-tests.js b/tests/unit-tests/navigationbar/navigationbar-tests.js
new file mode 100755
index 00000000..2ad2b094
--- /dev/null
+++ b/tests/unit-tests/navigationbar/navigationbar-tests.js
@@ -0,0 +1,54 @@
+/*
+ * navigationbar unit tests
+*/
+
+(function ($) {
+	module( "Navigationbar" );
+
+	var unit_navigationbar = function ( widget, anchorCount, extendedValue ) {
+		/* Create */
+		var created_navigationbar = $( widget );
+
+		ok( created_navigationbar, "Create" );
+
+		/* Check Parameters */
+		equal( created_navigationbar.jqmData( "nstest-role" ), "header", "Basic test" );
+
+
+		if ( extendedValue ) {
+			equal( created_navigationbar.find( "input" ).length, anchorCount, "Groupcontrol button test" );
+		} else {
+			equal( created_navigationbar.children( "a" ).length, anchorCount, "button test" );
+		}
+
+		/* Check APIs */
+	};
+
+	test( "navigationbar no button test", function () {
+		unit_navigationbar( $("#normalnavigation1"), 0 );
+	});
+
+	test( "navigationbar one button test", function () {
+		unit_navigationbar( $("#normalnavigation2"), 1 );
+	});
+
+	test( "navigationbar two button test", function () {
+		unit_navigationbar( $("#normalnavigation3"), 2 );
+	});
+
+	test( "navigationbar three button test", function () {
+		unit_navigationbar( $("#normalnavigation4"), 3 );
+	});
+
+	test( "navigationbar extended two button test", function () {
+		unit_navigationbar( $("#extendedstyle2btn"), 2, true );
+	});
+
+	test( "navigationbar extended three button test", function () {
+		unit_navigationbar( $("#extendedstyle3btn"), 3, true );
+	});
+
+	test( "navigationbar extended four button test", function () {
+		unit_navigationbar( $("#extendedstyle4btn"), 4, true );
+	});
+})(jQuery);
diff --git a/tests/unit-tests/nocontents/index.html b/tests/unit-tests/nocontents/index.html
new file mode 100755
index 00000000..25aa56e4
--- /dev/null
+++ b/tests/unit-tests/nocontents/index.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-gray"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="nocontents-tests.js"></script>
+
+	<title>No Contents</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">No Contents</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div data-role="page" id="nocontents0">
+		<div data-role="header" data-position="fixed">
+			<h1>No Contents</h1>
+		</div>
+		<div data-role="content">
+			<div data-role="nocontents" id="nocontents_text" data-type="text">
+				<p>text1</p>
+				<p>text2</p>
+			</div>
+		</div>
+	</div>
+
+	<div data-role="page" id="nocontents1">
+		<div data-role="header" data-position="fixed">
+			<h1>No Contents</h1>
+		</div>
+		<div data-role="content">
+			<div data-role="nocontents" id="nocontents_pic" data-type="picture">
+				<p>text1</p>
+				<p>text2</p>
+			</div>
+		</div>
+	</div>
+
+	<div data-role="page" id="nocontents2">
+		<div data-role="header" data-position="fixed">
+			<h1>No Contents</h1>
+		</div>
+		<div data-role="content">
+			<div data-role="nocontents" id="nocontents_mul" data-type="multimedia">
+				<p>text1</p>
+				<p>text2</p>
+			</div>
+		</div>
+	</div>
+
+	<div data-role="page" id="nocontents2">
+		<div data-role="header" data-position="fixed">
+			<h1>No Contents</h1>
+		</div>
+		<div data-role="content">
+			<div data-role="nocontents" id="nocontents_un" data-type="unnamed">
+				<p>text1</p>
+				<p>text2</p>
+			</div>
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/nocontents/nocontents-tests.js b/tests/unit-tests/nocontents/nocontents-tests.js
new file mode 100644
index 00000000..8e504cf3
--- /dev/null
+++ b/tests/unit-tests/nocontents/nocontents-tests.js
@@ -0,0 +1,47 @@
+/*
+ * Unit Test: Nocontents
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+	module("Nocontents");
+
+	var unit_nocontents = function ( widget, type ) {
+		var background,
+			text,
+			i;
+
+		/* Create */
+		widget.nocontents();
+
+		ok( widget.hasClass("ui-nocontents"), "Create" );
+
+		/* Check Background */
+		background = widget.children( ".ui-nocontents-icon-" + type );
+		ok( background, "Background" );
+
+		/* Check Texts */
+		text = widget.children("p");
+
+		for ( i = 0; i < text.length; i++ ) {
+			ok( $( text[i] ).hasClass("ui-nocontents-text"), "Text" + i );
+		}
+	};
+
+	test( "text type", function () {
+		unit_nocontents( $("#nocontents_text"), "text" );
+	});
+
+	test( "picture type", function () {
+		unit_nocontents( $("#nocontents_pic"), "picture" );
+	});
+
+	test( "multimedia type", function () {
+		unit_nocontents( $("#nocontents_mul"), "multimedia" );
+	});
+
+	test( "unnamed type", function () {
+		unit_nocontents( $("#nocontents_un"), "unnamed" );
+	});
+}( jQuery ));
diff --git a/tests/unit-tests/notification/index.html b/tests/unit-tests/notification/index.html
new file mode 100755
index 00000000..519c1b9d
--- /dev/null
+++ b/tests/unit-tests/notification/index.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="notification-tests.js"></script>
+
+	<title>Notification</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Notification</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div data-role="page" id="notifiaction0">
+		<div data-role="notification" id="smallpopup" data-type="popup">
+			<p>text1</p>
+		</div>
+		<div data-role="header" data-position="fixed">
+			<h1>Notification</h1>
+		</div>
+		<div data-role="content">
+		</div>
+	</div>
+
+	<div data-role="page" id="notification1">
+		<div data-role="notification" id="tickernoti" data-type="ticker">
+			<p>text1</p>
+			<p>text2</p>
+		</div>
+		<div data-role="header" data-position="fixed">
+			<h1>Notification</h1>
+		</div>
+		<div data-role="content">
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/notification/notification-tests.js b/tests/unit-tests/notification/notification-tests.js
new file mode 100644
index 00000000..ae973b01
--- /dev/null
+++ b/tests/unit-tests/notification/notification-tests.js
@@ -0,0 +1,59 @@
+/*
+ * Unit Test: Notification
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+	module("Notification");
+
+	var unit_notification = function ( widget, type ) {
+		var notification,
+			elem = ".ui-" + type,
+			text;
+
+		/* Create */
+		widget.notification();
+
+		notification = widget.children( elem );
+		ok( notification, "Create" );
+
+		/* Show */
+		widget.notification("show");
+
+		notification = widget.children( elem );
+		ok( notification.hasClass("show"), "API: show" );
+
+		/* Hide */
+		widget.notification("hide");
+
+		notification = widget.children( elem );
+		ok( notification.hasClass("hide"), "API: hide" );
+
+		/* hide when click */
+		widget.notification("show");
+		notification = widget.children( elem );
+		notification.trigger("vmouseup");
+
+		notification = widget.children( elem );
+		ok( notification.hasClass("hide"), "Hide when click the notification" );
+
+		text = notification.children("p");
+		console.log(text);
+
+		if ( type === "smallpopup" ) {
+			ok( $( text[0] ).hasClass( "ui-smallpopup-text-bg" ), "Text" );
+		} else {
+			ok( $( text[0] ).hasClass( "ui-ticker-text1-bg" ), "Top Text" );
+			ok( $( text[1] ).hasClass( "ui-ticker-text2-bg" ), "Bottom Text" );
+		}
+	};
+
+	test( "smallpopup", function () {
+		unit_notification( $("#smallpopup"), "smallpopup" );
+	});
+
+	test( "tickernoti", function () {
+		unit_notification( $("#tickernoti"), "ticker" );
+	});
+}( jQuery ));
diff --git a/tests/unit-tests/optionheader/index.html b/tests/unit-tests/optionheader/index.html
new file mode 100755
index 00000000..58cd840e
--- /dev/null
+++ b/tests/unit-tests/optionheader/index.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+  <script src="optionheader-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Option Header Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div data-nstest-role="page" id="optionheader1line2btn" data-add-back-btn="true">
+	<div data-nstest-role="header" data-nstest-position="fixed">
+		<a id="123">TestBtn</a>
+		<h1>Option header - 2 buttons</h1>
+		<a id="opt_text" data-icon="optiontray"></a>
+		<a id="1234">TestBtn</a>
+
+		<div id="myoptionheader1" data-nstest-role="optionheader" data-for="opt_text">
+			<div class="ui-grid-a ">
+				<div class="ui-block-a"><a data-role="button">Save</a></div>
+				<div class="ui-block-b"><a data-role="button">Next</a></div>
+			</div>
+		</div>
+	</div>
+	<div data-nstest-role="content">
+		<p>Some content would be here</p>
+	</div>
+</div>
+
+<div data-nstest-role="page" id="optionheader1line3btn" data-add-back-btn="true">
+	<div data-nstest-role="header" data-nstest-position="fixed">
+		<a id="123">TestBtn</a>
+		<h1>Option header - 2 buttons</h1>
+		<a id="1234">TestBtn</a>
+
+		<div id="myoptionheader2" data-nstest-role="optionheader" data-for="opt_text">
+			<div class="ui-grid-b">
+				<div class="ui-block-a"><a data-role="button">Previous</a></div>
+				<div class="ui-block-b"><a data-role="button">Save</a></div>
+				<div class="ui-block-c"><a data-role="button">Next</a></div>
+			</div>
+		</div>
+	</div>
+	<div data-nstest-role="content">
+		<p>Some content would be here</p>
+	</div>
+</div>
+
+<div data-nstest-role="page" id="optionheader1line4btn" data-add-back-btn="true">
+	<div data-nstest-role="header" data-nstest-position="fixed">
+		<a id="123">TestBtn</a>
+		<h1>Option header - 2 buttons</h1>
+		<a id="opt_text" data-icon="optiontray"></a>
+		<a id="1234">TestBtn</a>
+
+		<div id="myoptionheader3" data-nstest-role="optionheader" data-for="opt_text">
+			<div class="ui-grid-c">
+				<div class="ui-block-a"><a data-role="button">Previous</a></div>
+				<div class="ui-block-b"><a data-role="button">Save</a></div>
+				<div class="ui-block-c"><a data-role="button">Undo</a></div>
+				<div class="ui-block-d"><a data-role="button">Next</a></div>
+			</div>
+		</div>
+	</div>
+	<div data-nstest-role="content">
+		<p>Some content would be here</p>
+	</div>
+</div>
+</body>
+</html>
diff --git a/tests/unit-tests/optionheader/optionheader-tests.js b/tests/unit-tests/optionheader/optionheader-tests.js
new file mode 100755
index 00000000..81f2e1da
--- /dev/null
+++ b/tests/unit-tests/optionheader/optionheader-tests.js
@@ -0,0 +1,73 @@
+/*
+ * optionheader unit tests
+ */
+
+(function ($) {
+	module( "Option header" );
+
+	var unit_optionheader = function ( widget, buttonCount) {
+		var created_optionheader = widget.optionheader(),
+			obj_optionheader = created_optionheader.data( "optionheader" );
+
+		ok( created_optionheader, "Create" );
+
+		/* Check Option */
+		equal( obj_optionheader.options.showIndicator, true, "Option test -> Indicator" );
+		equal( obj_optionheader.options.theme, "s", "Option test -> theme" );
+		equal( obj_optionheader.options.startCollapsed, false, "Option test -> startCollapsed" );
+		equal( obj_optionheader.options.expandable, true, "Option test -> expandable" );
+		equal( obj_optionheader.options.duration, 0.25, "Option test -> duration" );
+		equal( obj_optionheader.options.collapseOnInit, true, "Option test -> collapseOnInit" );
+
+		/* parameter check*/
+		equal( created_optionheader.find(":jqmData(role='button')").length, buttonCount, "Parameter test -> button length" );
+
+		if ( created_optionheader.is(":jqmData(for)") ) {
+			created_optionheader.siblings().each(function ( index ) {
+				if ( $(this).attr("id") ==	created_optionheader.jqmData("for") ) {
+					equal( $(this).jqmData("icon"), "optiontray", "Parameter test -> icon test" );
+				}
+			});
+		}
+		/* Check APIs */
+		asyncTest( "option header expand test", function () {
+			created_optionheader.optionheader( "expand" );
+			setTimeout( function () {
+				equal( created_optionheader.height() > 10 , true, "API test -> expand()" );
+				start();
+				created_optionheader.optionheader( "collapse" );
+				asyncTest( "option header collapse test", function () {
+					setTimeout( function () {
+						equal( created_optionheader.height() > 10 , false, "API test -> collapse()" );
+						start();
+					}, 1000 );
+				});
+			}, 1000 );
+		});
+
+		obj_optionheader.options = false;
+		created_optionheader.optionheader( "toggle", true );
+		if ( obj_optionheader.options == false ) {
+			equal( obj_optionheader.isCollapsed , false, "API test -> toggle() collapse" );
+		}
+
+		obj_optionheader.options = true;
+		created_optionheader.optionheader( "toggle", true );
+		if ( obj_optionheader.options == true ) {
+			equal( obj_optionheader.isCollapsed , true, "API test -> toggle() expand" );
+		}
+	/* Check Markup */
+	};
+
+	test( "option header 2btn test", function () {
+		unit_optionheader( $("#myoptionheader1"), 2 );
+	});
+
+	test( "option header 3btn test", function () {
+		unit_optionheader( $("#myoptionheader2"), 3 );
+	});
+
+	test( "option header 4btn test", function () {
+		unit_optionheader( $("#myoptionheader3"), 4 );
+	});
+})(jQuery);
diff --git a/tests/unit-tests/pagecontrol/index.html b/tests/unit-tests/pagecontrol/index.html
new file mode 100644
index 00000000..f9192213
--- /dev/null
+++ b/tests/unit-tests/pagecontrol/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>Pagecontrol test</title>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/unit/jquery.setNameSpace.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css"/>
+
+	<script src="pagecontrol-tests.js"></script>
+</head>
+<body>
+	<!-- QUnit template -->
+	<h1 id="qunit-header">Test : Pagecontrol</h1>
+	<h2 id="qunit-banner"></h2>
+	<h2 id="qunit-userAgent"></h2>
+	<ol id="qunit-tests"></ol>
+
+	<div id="qunit-fixture">
+
+	</div>
+</body>
+</html>
diff --git a/tests/unit-tests/pagecontrol/pagecontrol-tests.js b/tests/unit-tests/pagecontrol/pagecontrol-tests.js
new file mode 100644
index 00000000..6343a920
--- /dev/null
+++ b/tests/unit-tests/pagecontrol/pagecontrol-tests.js
@@ -0,0 +1,40 @@
+/**
+ * pagecontrol test
+ */
+( function ( $ ) {
+	$.mobile.defaultTransition = "none";
+
+	module( "PageControl" );
+
+	test( "Basic pagecontrol test", function ( ) {
+		var pc = $( '<div data-role="pagecontrol"></div>' )
+				.attr( {
+				'data-max': 10,
+				'data-value': 2
+				} ),
+			nb;
+
+		pc.pagecontrol( );
+
+		ok( pc, "pagecontrol object creation" );
+		nb = pc.children( 'div.page_n' )[1];	// 2nd button
+		console.dir( nb );
+		ok( $(nb).hasClass( 'page_n_2' ), "first button should be activated" );
+		equal( $( pc ).pagecontrol( "value" ), 2, "value() method must return 2" );
+
+		nb = pc.children( 'div.page_n' )[9];
+		ok( nb, "last number button should exist" );
+		pc.one( "change", function( ev, val ) {
+			equal( val, 10, "pagecontrol element's value must be set when click event comes." );
+			ok( $( nb ).hasClass( 'page_n_10' ), "after click, clicked button should be changed to number type" );
+			equal( $( pc ).pagecontrol( "value" ), 10, "value() method must return 10" );
+
+			$( pc ).pagecontrol( "value", 5 );
+			equal( $( pc ).pagecontrol( "value" ), 5, "value() method must return 5 after running .value(5)" );
+
+			} );
+		$(nb).trigger( "click" );
+	} );
+
+} ) ( jQuery );
+
diff --git a/tests/unit-tests/popupwindow/index.html b/tests/unit-tests/popupwindow/index.html
new file mode 100755
index 00000000..3b337c99
--- /dev/null
+++ b/tests/unit-tests/popupwindow/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="popup-tests.js"></script>
+
+	<title>Popup Window</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Popup Window</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div data-role="page" id="popupwindow">
+		<div data-role="header" data-position="fixed">
+			<h1>Popup Window</h1>
+		</div>
+		<div data-role="content">
+			<div id="center_info" data-role="popupwindow" data-style="center_info">
+				<p data-role="text">text</p>
+			</div>
+
+			<div id="center_title" data-role="popupwindow" data-style="center_title">
+				<p data-role="title">title</p>
+				<p data-role="text">text</p>
+			</div>
+
+			<div id="center_basic_1btn" data-role="popupwindow" data-style="center_basic_1btn">
+				<p data-role="text">text</p>
+				<div data-role="button-bg">
+					<input type="button" value="button" />
+				</div>
+			</div>
+
+			<div id="center_title_1btn" data-role="popupwindow" data-style="center_title_1btn">
+				<p data-role="title">title</p>
+				<p data-role="text">text</p>
+				<div data-role="button-bg">
+					<input type="button" value="button" />
+				</div>
+			</div>
+
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/popupwindow/popup-tests.js b/tests/unit-tests/popupwindow/popup-tests.js
new file mode 100644
index 00000000..2880c778
--- /dev/null
+++ b/tests/unit-tests/popupwindow/popup-tests.js
@@ -0,0 +1,64 @@
+/*
+ * Unit Test: Popup window
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+	module("Popup Window");
+
+	var unit_popup = function ( widget, type ) {
+		var popupwindow = function ( widget ) {
+				return widget.parent(".ui-popupwindow");
+			},
+			check_text = function ( widget, selector, type ) {
+				if ( !widget.find( selector ).length ) {
+					return;
+				}
+				equal( widget.find( selector ).text(), type, type );
+			};
+
+		/* Create */
+		widget.popupwindow();
+		ok( popupwindow( widget ), "Create" );
+
+		/* Open */
+		widget.popupwindow("open");
+		ok( parseInt( popupwindow( widget ).css("top") ) > 0, "API: open" );
+
+		/* Close */
+		widget.popupwindow("close");
+		ok( popupwindow( widget ).hasClass("ui-selectmenu-hidden") ||
+			popupwindow( widget ).hasClass("reverse out"),
+			"API: close" );
+
+		/* Close the popup by click the screen */
+		widget.popupwindow("open");
+		$(".ui-selectmenu-screen").trigger("vclick");
+		ok( popupwindow( widget ).hasClass("ui-selectmenu-hidden") ||
+			popupwindow( widget ).hasClass("reverse out"),
+				"Close the popup by click the screen" );
+
+		/* Check Texts */
+		check_text( widget, ":jqmData(role='text')", "text" );
+		check_text( widget, ":jqmData(role='title')", "title" );
+		check_text( widget, ".ui-btn", "button" );
+	};
+
+	test( "Center Info", function () {
+		unit_popup( $("#center_info"), "center_info" );
+	});
+
+	test( "Center Title", function () {
+		unit_popup( $("#center_title"), "center_title" );
+	});
+
+	test( "Center Basic 1 Button", function () {
+		unit_popup( $("#center_basic_1btn"), "center_basic_1btn" );
+	});
+
+	test( "Center Title 1 Button", function () {
+		unit_popup( $("#center_title_1btn"), "center_title_1btn" );
+	});
+
+}( jQuery ));
diff --git a/tests/unit-tests/popupwindow_ctxpopup/ctxpopup-tests.js b/tests/unit-tests/popupwindow_ctxpopup/ctxpopup-tests.js
new file mode 100644
index 00000000..8fce1734
--- /dev/null
+++ b/tests/unit-tests/popupwindow_ctxpopup/ctxpopup-tests.js
@@ -0,0 +1,105 @@
+$(document).ready( function () {
+
+	module( "CtxPopup" );
+	asyncTest( "Auto-initialization", function () {
+		$.testHelper.pageSequence( [
+			function () {
+				var plain = $("#pop_plain"),
+					plainBtn = $("#btn_plain"),
+					horizontal = $("#pop_horizontal"),
+					horizontalBtn = $("#btn_horizontal"),
+					buttons = $("#pop_buttons"),
+					buttonsBtn = $("#btn_buttons"),
+					notCtxpopup  = $("#pop_not"),
+					notCtxpopupBtn = $("#btn_not");
+
+				ok( plain.data( "ctxpopup" ), "should Normal type ctxpopup created" );
+				ok( horizontal.data( "ctxpopup" ), "should Horizontal type ctxpopup created" );
+				ok( buttons.data( "ctxpopup" ), "should Button type ctxpopup created" );
+				ok( !notCtxpopup.data( "ctxpopup" ), "should wihthout arrow ctxpopup not created" );
+			},
+
+			function () {
+				expect( 4 );
+				start();
+			}
+		]);
+	});
+
+	// ctxpopup shares code with popupwindow so only tests ctxpopup specific codes
+	asyncTest( "Open and Placements", function () {
+		$.testHelper.pageSequence( [
+			function () {
+				var plain = $("#pop_plain").ctxpopup(),
+					horizontal = $("#pop_horizontal").ctxpopup(),
+					buttons = $("#pop_buttons").ctxpopup();
+
+				function placementsTest( popup ) {
+					var width = $(window).width(),
+						height = $(window).height(),
+						x = 0,
+						y = 0,
+						parents = popup.parents(".ui-popupwindow"),
+						popDim,
+						popPosX = 0,
+						popPosY = 0,
+						segment = 5,
+						closed = 0,
+						open = 0;
+
+					popup.bind( "popupafterclose", function () {
+						// tests event trigger
+						closed++;
+						if ( closed == open ) {
+							equal( closed, open, "should 'popupafterclose' triggered." );
+							start();
+						}
+					});
+
+					while ( y <= height ) {
+						while ( x <= width ) {
+							popup.popupwindow( "open", x, y );
+							open++;
+							popPosX = parseInt( parents.css("left") );
+							popPosY = parseInt( parents.css("top") );
+							popDim = {
+								width: parents.width(),
+								height: parents.height()
+							};
+
+							if ( popPosX < 0 || popPosY < 0 || popPosX > (width - popDim.width) || popPosY > (height - popDim.height) ) {
+								throw "Pop up occured at wrong position: (" + popPosX + "," + popPosY + "," + popDim.width + "," + popDim.height + ")";
+							}
+
+							popup.popupwindow( "close" );
+							x += width / segment;
+						}
+						y += height / segment;
+						x = 0;
+					}
+					setTimeout( function() {
+						if ( closed != open )
+							throw "  Error, popupafterclose event was not triggering ";
+					}, 1000 * 10 );
+					stop();
+					return true;
+				}
+
+				var testee = [
+					{ name: "Plain", popup: plain },
+					{ name: "Horizontal", popup: horizontal },
+					{ name: "Buttons", popup: buttons }
+				];
+
+				for ( var i = 0; i < testee.length; i++ ) {
+					ok( placementsTest( testee[i].popup ), "should " + testee[i].name + " pop up within window area" );
+				}
+			},
+
+			function () {
+				expect( 6 );
+				start();
+			}
+		]);
+	});
+});
diff --git a/tests/unit-tests/popupwindow_ctxpopup/index.html b/tests/unit-tests/popupwindow_ctxpopup/index.html
new file mode 100644
index 00000000..e6558443
--- /dev/null
+++ b/tests/unit-tests/popupwindow_ctxpopup/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/tests/jquery.testHelper.js"></script>
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="ctxpopup-tests.js"></script>
+
+	<title>Contextual Popup</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Contextual Popup</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+	<div data-role="page" id="page-1">
+		<div data-role="header" data-position="fixed">
+			<h1>Contextual Popup</h1>
+		</div>
+		<div data-role="content">
+			<a href="#pop_plain" id="btn_plain" data-role="button" data-inline="true" data-rel="popupwindow">Pop_1</a>
+			<div id="pop_plain" data-role="popupwindow" data-show-arrow="true">
+				<ul data-role="listview">
+					<li class="ui-li-1line-bigicon">
+						<span class="ui-li-text-main">Dummy 1</span>
+					</li>
+					<li class="ui-li-1line-bigicon">
+						<span class="ui-li-text-main">Dummy 2</span>
+					</li>
+				</ul>
+			</div>
+			<a href="#pop_horizontal" id="btn_horizontal" data-role="button" data-inline="true" data-rel="popupwindow">Pop 2</a>
+			<div id="pop_horizontal" class="horizontal" data-role="popupwindow" data-show-arrow="true">
+				<ul>
+					<li class="icon">
+						<a href="#" data-role="button" data-icon="call"></a>
+					</li>
+					<li class="icon">
+						<a href="#" data-role="button" data-icon="favorite"></a>
+					</li>
+					<li class="text">
+						<a href="#">Function</a>
+					</li>
+				</ul>
+			</div>
+			<a href="#pop_buttons" id="btn_buttons" data-role="button" data-inline="true" data-rel="popupwindow">Pop 3</a>
+			<div id="pop_buttons" class="button" data-role="popupwindow" data-show-arrow="true">
+				<table>
+					<tr>
+						<td>
+							<a href="#" data-role="button">A</a>
+						</td>
+						<td>
+							<a href="#" data-role="button">B</a>
+						</td>
+						<td>
+							<a href="#" data-role="button">C</a>
+						</td>
+					</tr>
+					<tr>
+						<td>
+							<a href="#" data-role="button">D</a>
+						</td>
+						<td>
+							<a href="#" data-role="button">E</a>
+						</td>
+						<td>
+							<a href="#" data-role="button">F</a>
+						</td>
+					</tr>
+				</table>
+			</div>
+			<a href="#pop_not" id="btn_not" data-role="button" data-inline="true" data-rel="popupwindow">Pop 4</a>
+			<div id="pop_not" data-role="popupwindow">
+				<div>
+					<span>Dummy</span>
+				</div>
+			</div>
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
+
diff --git a/tests/unit-tests/progressbar/index.html b/tests/unit-tests/progressbar/index.html
new file mode 100755
index 00000000..1a6a32de
--- /dev/null
+++ b/tests/unit-tests/progressbar/index.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="progressbar-tests.js"></script>
+
+	<title>Progressbar</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Progressbar</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div data-role="page" id="progressbar_demo">
+		<div data-role="header" data-position="fixed">
+			<h1>Progressbar</h1>
+		</div>
+		<div data-role="content">
+			<ul data-role="listview">
+				<li><div data-role="progressbar" id="progressbar"></div></li>
+				<li><div data-role="progressing" data-style="pending" id="pending"></div></li>
+				<li><div data-role="progressing" data-style="circle" id="progressing"></div></li>
+			</ul>
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/progressbar/progressbar-tests.js b/tests/unit-tests/progressbar/progressbar-tests.js
new file mode 100644
index 00000000..c9f6832e
--- /dev/null
+++ b/tests/unit-tests/progressbar/progressbar-tests.js
@@ -0,0 +1,67 @@
+/*
+ * Unit Test: Progressbar
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+	module("Progressbar");
+
+	var unit_progressbar = function ( widget ) {
+		var progress,
+			i,
+			value,
+			get_width = function ( widget ) {
+				return widget.progressbar( "option", "value" );
+			};
+
+		widget.progressbar();
+
+		/* Create */
+		equal( widget.hasClass("ui-progressbar"), true, "Create" );
+
+		/* Value */
+		for (i = 0; i < 5; i++) {
+			value = Math.floor( Math.random() * 100 );
+			widget.progressbar( "value", value );
+			equal( get_width( widget ), value, "API: value" );
+		}
+	};
+
+	var unit_progress = function ( widget, type ) {
+		var progress,
+			elem = ".ui-progress-" + type,
+			_class = "ui-progress-" + type + "-running";
+
+		widget.progress();
+
+		/* Create */
+		progress = widget.find( elem );
+		ok( progress, "Create" );
+
+		/* Option */
+		equal( widget.progress( "option", "style" ), type, "Option: style" );
+
+		/* Running */
+		widget.progress( "running", true );
+		progress = widget.find( elem );
+		equal( progress.hasClass( _class ), true, "API: running" );
+
+		/* Stop */
+		widget.progress( "running", false );
+		progress = widget.find( elem );
+		equal( progress.hasClass( _class ), false, "API: stop" );
+	};
+
+	test( "progressbar", function () {
+		unit_progressbar( $("#progressbar") );
+	});
+
+	test( "pending bar", function () {
+		unit_progress( $("#pending"), "pending" );
+	});
+
+	test( "processing circle", function () {
+		unit_progress( $("#progressing"), "circle" );
+	});
+}( jQuery ));
diff --git a/tests/unit-tests/radio/index.html b/tests/unit-tests/radio/index.html
new file mode 100644
index 00000000..57452d3b
--- /dev/null
+++ b/tests/unit-tests/radio/index.html
@@ -0,0 +1,68 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+	<script src="radio-tests.js"></script>
+	<title>Radio</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Radio</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+	<div data-role="page" id="radiopage">
+		<div>
+			<input type="radio" name="radio-single" id="radio-single-1" value="Normal" />
+			<label for="radio-single-1">Normal</label>
+			<input type="radio" name="radio-2" id="radio-single-2" checked="checked" disabled="disabled" value="Checked, Disabled" />
+			<label for="radio-single-2">Checked, Disabled</label>
+			<input type="radio" name="radio-3" id="radio-single-3" disabled="disabled" value="Disabled" />
+			<label for="radio-single-3">Disabled</label>
+
+			<fieldset id="controlgroup" data-role="controlgroup">
+				<input type="radio" name="radio-choice" id="radio-choice-1" value="Cat"  />
+				<label for="radio-choice-1">Cat</label>
+
+				<input type="radio" name="radio-choice" id="radio-choice-2" value="Dog" />
+				<label for="radio-choice-2">Dog</label>
+
+				<input type="radio" name="radio-choice" id="radio-choice-3" value="Hamster" />
+				<label for="radio-choice-3">Hamster</label>
+
+				<input type="radio" name="radio-choice" id="radio-choice-4" value="Lizard" />
+				<label for="radio-choice-4">Lizard</label>
+			</fieldset>
+
+			<fieldset id="controlgroup2" data-type="horizontal" data-role="controlgroup">
+				<input type="radio" name="radio-choice2" id="radio-choiceh-1" value="Cat"  />
+				<label for="radio-choiceh-1">Cat</label>
+
+				<input type="radio" name="radio-choice2" id="radio-choiceh-2" value="Dog" />
+				<label for="radio-choiceh-2">Dog</label>
+
+				<input type="radio" name="radio-choice2" id="radio-choiceh-3" value="Hamster" />
+				<label for="radio-choiceh-3">Hamster</label>
+
+				<input type="radio" name="radio-choice2" id="radio-choiceh-4" value="Lizard" />
+				<label for="radio-choiceh-4">Lizard</label>
+			</fieldset>
+		</div>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/radio/radio-tests.js b/tests/unit-tests/radio/radio-tests.js
new file mode 100644
index 00000000..17cc0545
--- /dev/null
+++ b/tests/unit-tests/radio/radio-tests.js
@@ -0,0 +1,109 @@
+/*
+ * Unit Test: Radio
+ *
+ * Hyunjung Kim <hjnim.kim@samsung.com>
+ *
+ */
+$( "#radiopage" ).live( "pageinit", function(event) {
+
+	module("Radio");
+
+	/* Single Radio */
+	var unit_radio = function ( input , type ) {
+		var radio,
+			label,
+			checkClass,
+			labelSpan,
+			radioClassPrefix = "ui-radio";
+
+		radio = input.parent();
+		ok( radio.hasClass( radioClassPrefix ) , "Create - Single Radio Button" );
+
+		label = radio.find( "label" );
+		label.trigger( "vclick" );
+		checkClass = radioClassPrefix + "-on";
+		if( !input.is( ":checked" ) ) {
+			checkClass = radioClassPrefix + "-off";
+		}
+		ok( label.hasClass( checkClass ), "Click - Radio button" );
+
+		labelSpan = label.children().children();
+		ok( labelSpan.first().is( ".ui-btn-text, .ui-btn-text-padding-left" ), "Okay - Label Padding" );
+
+		if ( !input.is( ":disabled" ) ) {
+			label.trigger( "vclick" );
+		}
+
+		// Text Trim, Cause jQueryMobile(JQM) 1.1 forced to add - "\u00a0" in buttonIcon(ButtonMarkup)
+		// JQM 1.1 buttonMarkup code :
+		// - if( buttonIcon ) buttonIcon.appendChild( document.createTextNode( "\u00a0" ) );
+		equal( labelSpan.text().trim(), input.val(), "Label Text" );
+	};
+
+	/* Group Radio */
+	var unit_radio_group = function ( fieldset , type ) {
+		var type,
+			radios,
+			label,
+			labels;
+
+		type = fieldset.jqmData( "type" );
+		if( type === undefined ) {
+			type = "vertical";
+		}
+		ok( fieldset.is( ".ui-corner-all, .ui-controlgroup, .ui-controlgroup-" + type ) , "Create - ControlGroup" );
+
+		if( type == "horizontal" ) {
+			labels = fieldset.find( "span.ui-btn-text" ).each( function () {
+				ok( ( $( this ).siblings().length == 0 && $( this ).hasClass( "ui-btn-text" ) ) ? true : false, "Alignment - ControlGroup(Horizontal, Single Radio)" );
+			});
+		}
+
+		radios = fieldset.find( "input[type='radio']" );
+		radios.each( function() {
+			unit_radio( $( this ) , "Normal" );
+		});
+
+		ok( function() {
+				try{
+					for ( i = 0 ; i < raidos.lenght ; i++ ) {
+						label = radios[i].find( "label" );
+						label.trigger( "vclick" );
+						if( !label.hasClass( "ui-radio-on" ) ){
+							throw "error - other button activate";
+						}
+						for ( j = 0 ; j < radios.lenght ; j++) {
+							if( i == j) continue;
+							label = radios[j].find( "label" );
+							if( label.hasClass( "ui-radio-on" ) ) {
+								throw "error - other button activate";
+							}
+						}
+					}
+				} catch ( Exception ) {
+					return false;
+				}
+				return true;
+		}, "Click - Radio Button( Group )" );
+	};
+
+	test( "radiobutton - Single" , function () {
+		unit_radio( $("#radio-single-1") , "Normal" );
+	});
+
+	test( "radiobutton - Single, Checked, Disabled" , function () {
+		unit_radio( $("#radio-single-2") , "Checked, Disabled" );
+	});
+
+	test( "radiobutton - Single, Disabled" , function () {
+		unit_radio( $("#radio-single-3") , "Disabled" );
+	});
+
+	test( "radiobutton - Group" , function() {
+		unit_radio_group( $("#controlgroup") , "Group" );
+	});
+
+	test( "radiobutton - Group, Horizontal" , function() {
+		unit_radio_group( $("#controlgroup2") , "Group - horizontal" );
+	});
+});
diff --git a/tests/unit-tests/runner.js b/tests/unit-tests/runner.js
new file mode 100644
index 00000000..7ea8d94e
--- /dev/null
+++ b/tests/unit-tests/runner.js
@@ -0,0 +1,90 @@
+$(document).ready(function() {
+	var Runner = function( ) {
+		var self = this;
+
+		$.extend( self, {
+			frame: window.frames[ "testFrame" ],
+
+			testTimeout: 3 * 60 * 1000,
+
+			$frameElem: $( "#testFrame" ),
+
+			assertionResultPrefix: "assertion result for test:",
+
+			onTimeout: QUnit.start,
+
+			onFrameLoad: function() {
+				// establish a timeout for a given suite in case of async tests hanging
+				self.testTimer = setTimeout( self.onTimeout, self.testTimeout );
+
+				// it might be a redirect with query params for push state
+				// tests skip this call and expect another
+				if( !self.frame.QUnit ) {
+					self.$frameElem.one( "load", self.onFrameLoad );
+					return;
+				}
+
+				// when the QUnit object reports done in the iframe
+				// run the onFrameDone method
+				self.frame.QUnit.done = self.onFrameDone;
+				self.frame.QUnit.testDone = self.onTestDone;
+			},
+
+			onTestDone: function( result ) {
+				QUnit.ok( !(result.failed > 0), result.name );
+				self.recordAssertions( result.total - result.failed, result.name );
+			},
+
+			onFrameDone: function( failed, passed, total, runtime ){
+				// make sure we don't time out the tests
+				clearTimeout( self.testTimer );
+
+				// TODO decipher actual cause of multiple test results firing twice
+				// clear the done call to prevent early completion of other test cases
+				self.frame.QUnit.done = $.noop;
+				self.frame.QUnit.testDone = $.noop;
+
+				// hide the extra assertions made to propogate the count
+				// to the suite level test
+				self.hideAssertionResults();
+
+				// continue on to the next suite
+				QUnit.start();
+			},
+
+			recordAssertions: function( count, parentTest ) {
+				for( var i = 0; i < count; i++ ) {
+					ok( true, self.assertionResultPrefix + parentTest );
+				}
+			},
+
+			hideAssertionResults: function() {
+				$( "li:not([id]):contains('" + self.assertionResultPrefix + "')" ).hide();
+			},
+
+			exec: function( data ) {
+				var template = self.$frameElem.attr( "data-src" );
+
+				$.each( data.testPages, function(i, dir) {
+					QUnit.asyncTest( dir, function() {
+						console.log('Test start: ' + dir);
+						self.dir = dir;
+						self.$frameElem.one( "load", self.onFrameLoad );
+						self.$frameElem.attr( "src", template.replace("{{testfile}}", dir + '/index.html') );
+					});
+				});
+
+				// having defined all suite level tests let QUnit run
+				QUnit.start();
+			}
+		});
+	};
+
+	// prevent qunit from starting the test suite until all tests are defined
+	QUnit.begin = function(  ) {
+		this.config.autostart = false;
+	};
+
+	// get the test directories
+	new Runner().exec(TESTS);
+});
diff --git a/tests/unit-tests/searchbar/index.html b/tests/unit-tests/searchbar/index.html
new file mode 100755
index 00000000..59cecb23
--- /dev/null
+++ b/tests/unit-tests/searchbar/index.html
@@ -0,0 +1,87 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+			data-framework-theme="tizen-white"
+			data-framework-viewport-scale=false>
+		</script>
+		<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+		<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+		<script src="searchbar-tests.js"></script>
+		<title>Searchbar</title>
+	</head>
+
+	<body>
+		<h1 id="qunit-header">Searchbar</h1>
+		<h2 id="qunit-banner"></h2>
+		<div id="qunit-testrunner-toolbar"></div>
+		<h2 id="qunit-userAgent"></h2>
+		<ol id="qunit-tests"></ol>
+
+		<div id="qunit-fixture">
+			<div data-role="page" id="dummy-page">
+				<div data-role="header" data-position="fixed">
+					<h1>Dummy</h1>
+				</div>
+				<div data-role="contents">
+				</div>
+			</div>
+			<div data-role="page" id="searchbar-unit-test" data-add-back-btn="true">
+				<div data-role="header" data-position="fixed">
+					<h1>Searchbar</h1>
+					<input type="search" name="search" id="searchInput" value=""/>
+				</div>
+				<div data-role="content" id="searchbar-content">
+					<p>Hairston</p>
+					<p>Hansbrough</p>
+					<p>Allred</p>
+					<p>Hanrahan</p>
+					<p>Egan</p>
+					<p>Dare</p>
+					<p>Edmonson</p>
+					<p>Calip</p>
+					<p>Baker</p>
+					<p>Fazekas</p>
+					<p>Garrity</p>
+					<p>Hansen</p>
+					<p>Feigenbaum</p>
+					<p>Fillmore</p>
+					<p>Darden</p>
+					<p>Davis</p>
+					<p>Fitzgerald</p>
+					<p>Carr</p>
+					<p>Danilovic</p>
+					<p>Dark</p>
+					<p>Alexander</p>
+					<p>Allen</p>
+					<p>Edwards</p>
+					<p>Garrett</p>
+					<p>Gardner</p>
+					<p>Carroll</p>
+					<p>Garner</p>
+					<p>Finn</p>
+					<p>Edelin</p>
+					<p>Gay</p>
+				</div>
+			</div>
+		</div>
+		<script>
+			$( "#searchInput" ).live( "input change", function(){
+				var regEx = "";
+
+				regEx = ".*" + $( "#searchInput" ).val();
+
+				$( "#searchbar-content p" ).each( function(){
+					if ( $( this ).text().search( new RegExp( regEx ) ) != -1) {
+						$( this ).show();
+					}
+					else {
+						$( this ).hide();
+					}
+				});
+			} );
+		</script>
+	</body>
+</html>
diff --git a/tests/unit-tests/searchbar/searchbar-tests.js b/tests/unit-tests/searchbar/searchbar-tests.js
new file mode 100755
index 00000000..27f5752d
--- /dev/null
+++ b/tests/unit-tests/searchbar/searchbar-tests.js
@@ -0,0 +1,78 @@
+/*
+ * Unit Test: Searchbar list
+ *
+ * Wongi Lee <wongi11.lee@samsung.com>
+ */
+
+$( document ).ready( function () {
+
+	module( "Searchbar" );
+
+	// trigger pagecreate
+	$( "#searchbar-unit-test" ).page();
+
+	asyncTest( "Searchbar", function () {
+		/* Initialize */
+		var $divSearchbar = $( "div.input-search-bar" ),
+			$input = $( "input" );
+
+		equal( $divSearchbar.length, 1, "initialized" );
+		equal( $divSearchbar.find( "div.ui-input-search" ).length, 1 );
+		equal( $divSearchbar.find( "div.ui-input-search input.ui-input-text" ).length, 1 );
+		equal( $divSearchbar.find( "div.ui-input-search a.ui-input-clear" ).hasClass( "ui-input-clear-hidden" ), true );
+		equal( $divSearchbar.find( "div.ui-input-search div.ui-image-search" ).length, 1 );
+		equal( $divSearchbar.find( "a.ui-input-cancel" ).hasClass( "ui-btn" ), true );
+		equal( $divSearchbar.find( "a.ui-input-cancel" ).hasClass( "ui-btn-icon-cancel" ), true );
+		equal( $("#searchbar-content p").filter( function ( index ) {
+			return $( this ).css( "display" ) != "none";
+		} ).length, 30 );
+
+		/* Public Method */
+		/* disable */
+		$( "#searchInput" ).searchbar( "disable" );
+		equal( $( "div.ui-input-search" ).hasClass( "ui-disabled" ), true, "disable" );
+		equal( $( "#searchInput" ).attr( "disabled" ), "disabled" );
+
+		/* enable */
+		$( "#searchInput" ).searchbar( "enable" );
+		equal( $( "div.ui-input-search" ).hasClass( "ui-disabled" ), false, "enable" );
+		equal( $( "#searchInput" ).attr( "disabled" ), undefined );
+
+		/* Event */
+		/* Search : Input and trigger change */
+		$input.focus();
+		equal( $( "div.ui-image-search" ).css( "display" ), "none", "Input and trigger change" );
+
+		$input.val( "a" ).trigger( "change" );
+
+		equal( $("#searchbar-content p").filter( function ( index ) {
+			return $( this ).css( "display" ) != "none";
+		} ).length, 24 );
+
+		$input.val( "ar" ).trigger( "change" );
+		equal( $("#searchbar-content p").filter( function ( index ) {
+			return $( this ).css( "display" ) != "none";
+		} ).length, 10 );
+
+		$input.val( "are" ).trigger( "change" );
+		equal( $("#searchbar-content p").filter( function ( index ) {
+			return $( this ).css( "display" ) != "none";
+		} ).length, 1 );
+
+		/* Clear button preesed. */
+		$( "a.ui-input-clear" ).trigger( "click" );
+		equal( $("#searchbar-content p").filter( function ( index ) {
+			return $( this ).css( "display" ) != "none";
+		} ).length, 30 );
+
+		equal( $divSearchbar.find( "div.ui-input-search a.ui-input-clear" ).hasClass( "ui-input-clear-hidden" ), true, "Clear button pressed" );
+		equal( $divSearchbar.find( "a.ui-input-cancel" ).hasClass( "ui-btn" ), true );
+		equal( $divSearchbar.find( "a.ui-input-cancel" ).hasClass( "ui-btn-icon-cancel" ), true );
+
+		/* Cancel button pressed. */
+		$( "a.ui-btn-icon-cancel" ).trigger( "click" );
+		notEqual( $( "div.ui-image-search" ).css( "display" ), "none" );
+
+		start();
+	} );
+} );
diff --git a/tests/unit-tests/segmentcontrol/index.html b/tests/unit-tests/segmentcontrol/index.html
new file mode 100755
index 00000000..3f177be9
--- /dev/null
+++ b/tests/unit-tests/segmentcontrol/index.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+
+  <script src="segmentcontrol-tests.js"></script>
+</head>
+<body>
+
+<h1 id="qunit-header">jQuery Mobile Controlbar Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+
+<div data-nstest-role="page">
+  <div data-nstest-role="header" data-position="inline">
+    <h1>SegmentControl Test - markup</h1>
+  </div>
+  <div data-nstest-role="content">
+		<div data-role="fieldcontain" id="segmentcontrol-2btn">
+			<fieldset data-role="controlgroup" data-type="horizontal">
+				<input type="radio" name="radio-view-1" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
+				<label for="segment1">List</label>
+				<input type="radio" name="radio-view-1" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
+				<label for="segment2">Grid</label>
+			</fieldset>
+		</div>
+
+		<div data-role="fieldcontain" id="segmentcontrol-3btn">
+			<fieldset data-role="controlgroup" data-type="horizontal">
+				<input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment3" value="on" checked="checked" />
+				<label for="segment3">List</label>
+				<input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment4" value="off" />
+				<label for="segment4">Grid</label>
+				<input type="radio" name="radio-view-2" data-icon="segment-titlestyle-segonly" id="segment5" value="off" />
+				<label for="segment5">Grid</label>
+			</fieldset>
+		</div>
+
+		<div data-role="fieldcontain" id="segmentcontrol-4btn">
+			<fieldset data-role="controlgroup" data-type="horizontal">
+				<input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment6" value="on" checked="checked" />
+				<label for="segment6">List</label>
+				<input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment7" value="off" />
+				<label for="segment7">Grid</label>
+				<input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment8" value="off" />
+				<label for="segment8">Grid</label>
+				<input type="radio" name="radio-view-9" data-icon="segment-titlestyle-segonly" id="segment9" value="off" />
+				<label for="segment9">Grid</label>
+			</fieldset>
+		</div>
+	</div>
+	<div data-nstest-role="footer">
+	</div>
+</div>
+
+
+</body>
+</html>
diff --git a/tests/unit-tests/segmentcontrol/segmentcontrol-tests.js b/tests/unit-tests/segmentcontrol/segmentcontrol-tests.js
new file mode 100755
index 00000000..dfc70ee3
--- /dev/null
+++ b/tests/unit-tests/segmentcontrol/segmentcontrol-tests.js
@@ -0,0 +1,33 @@
+/*
+ * controlbar unit tests
+ */
+
+(function ($) {
+	module( "SegmentControl" );
+
+	var unit_segmentcontrol = function ( widget, inputCount ) {
+		var segmentGroup = widget;
+
+		/* Create */
+		ok( segmentGroup, "Create" );
+
+		equal( "fieldcontain", segmentGroup.jqmData("role"), "segment control generate" );
+
+		equal( segmentGroup.find( "input" ).length, inputCount, "segment control listitem count test" );
+
+		equal( segmentGroup.find( "input" ).is( ":jqmData(icon='segment-titlestyle-segonly')" ), true, "segment control style test" );
+	};
+
+	test( "segmentcontrol 2btn test", function () {
+		unit_segmentcontrol( $("#segmentcontrol-2btn"), 2 );
+	});
+
+	test( "segmentcontrol 3btn test", function () {
+		unit_segmentcontrol( $("#segmentcontrol-3btn"), 3 );
+	});
+
+	test( "segmentcontrol 4btn test", function () {
+		unit_segmentcontrol( $("#segmentcontrol-4btn"), 4 );
+	});
+
+})(jQuery);
diff --git a/tests/unit-tests/shortcutscroll/index.html b/tests/unit-tests/shortcutscroll/index.html
new file mode 100755
index 00000000..babeb608
--- /dev/null
+++ b/tests/unit-tests/shortcutscroll/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="shortcutscroll-tests.js"></script>
+
+	<title>Shortcut Scroll</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Shortcut Scroll</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div data-role="page" id="shortcutscroll">
+		<div data-role="header" data-position="fixed">
+			<h1>Shortcut Scroll</h1>
+		</div>
+		<div data-role="content">
+			<ul id="shortcut" data-role="listview" data-shortcutscroll="true">
+				<li data-role="list-divider">A</li>
+				<li>Anton</li>
+				<li>Arabella</li>
+				<li>Art</li>
+				<li data-role="list-divider">B</li>
+				<li>Barry</li>
+				<li>Bibi</li>
+				<li>Billy</li>
+				<li>Bob</li>
+				<li data-role="list-divider">D</li>
+				<li>Daisy</li>
+				<li>Derek</li>
+				<li>Desmond</li>
+				<li data-role="list-divider">E</li>
+				<li>Eric</li>
+				<li>Ernie</li>
+				<li>Esme</li>
+				<li data-role="list-divider">F</li>
+				<li>Fay</li>
+				<li>Felicity</li>
+				<li>Francis</li>
+				<li>Frank</li>
+				<li data-role="list-divider">H</li>
+				<li>Harry</li>
+				<li>Herman</li>
+				<li>Horace</li>
+				<li data-role="list-divider">J</li>
+				<li>Jack</li>
+				<li>Jane</li>
+				<li>Jill</li>
+				<li data-role="list-divider">K</li>
+				<li>Katherine</li>
+				<li>Katy</li>
+				<li>Keith</li>
+				<li data-role="list-divider">L</li>
+				<li>Larry</li>
+				<li>Lee</li>
+				<li>Lola</li>
+				<li data-role="list-divider">M</li>
+				<li>Mark</li>
+				<li>Milly</li>
+				<li>Mort</li>
+				<li data-role="list-divider">N</li>
+				<li>Nigel</li>
+				<li>Norman</li>
+				<li data-role="list-divider">O</li>
+				<li>Organza</li>
+				<li>Orlando</li>
+			</ul>
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/shortcutscroll/shortcutscroll-tests.js b/tests/unit-tests/shortcutscroll/shortcutscroll-tests.js
new file mode 100644
index 00000000..be36178a
--- /dev/null
+++ b/tests/unit-tests/shortcutscroll/shortcutscroll-tests.js
@@ -0,0 +1,33 @@
+/*
+ * Unit Test: Shortcut Scroll
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+	module("Shortcut Scroll");
+
+	var unit_shortcutscroll = function ( list ) {
+		var widget,
+			shortcut,
+			divider;
+
+		widget = list.parentsUntil(".ui-content").parent().find(".ui-shortcutscroll");
+
+		/* Create */
+		ok( widget.hasClass("ui-shortcutscroll"), "Create" );
+
+		shortcut = widget.find("li");
+		divider = list.find(".ui-li-divider");
+
+		/* Shortcuts */
+		for ( i = 0; i < divider.length; i++ ) {
+			equal( $( divider[i] ).text(), $( shortcut[i] ).text(), "Shortcut");
+		}
+	};
+
+	test( "shortcut", function () {
+		unit_shortcutscroll( $("#shortcut") );
+	});
+
+}( jQuery ));
diff --git a/tests/unit-tests/slider/index.html b/tests/unit-tests/slider/index.html
new file mode 100755
index 00000000..720cabaa
--- /dev/null
+++ b/tests/unit-tests/slider/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="slider-tests.js"></script>
+
+	<title>Slider</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Slider</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div data-role="page" id="slider">
+		<div data-role="header" data-position="fixed">
+			<h1>Slider</h1>
+		</div>
+		<div data-role="content">
+			<input id="slider0" data-popupenabled="false" type="range" name="slider" value="50" min="0" max="100">
+			<input id="slider1" data-popupenabled="false" type="range" name="slider" value="5" min="0" max="10" data-icon="volume">
+		</div>
+	</div>
+
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/slider/slider-tests.js b/tests/unit-tests/slider/slider-tests.js
new file mode 100644
index 00000000..11c59c85
--- /dev/null
+++ b/tests/unit-tests/slider/slider-tests.js
@@ -0,0 +1,58 @@
+/*
+ * Unit Test: Slider 
+ *
+ * Minkyu Kang <mk7.kang@samsung.com>
+ */
+
+(function ($) {
+	module("Slider");
+
+	var unit_slider = function ( widget ) {
+		var slider,
+			slider_bg = function ( widget ) {
+				if ( widget.jqmData("icon") !== undefined ) {
+					return "ui-slider-icon-bg";
+				}
+				return "ui-slider-bg";
+			},
+			handle,
+			handle_left = function ( widget ) {
+				var left = widget.val() * 100 /
+					( widget.attr("max") - widget.attr("min") );
+				return left + "%";
+			},
+			random_move = function ( min, max) {
+				return Math.floor( (Math.random() * (max - min + 1)) + min );
+			};
+
+		/* Create */
+		widget.tizenslider();
+		slider = widget.next().children(".ui-slider");
+		ok( slider, "Create" );
+
+		/* Check Background */
+		equal( slider.parent().attr("class"), slider_bg( widget ), "Background" );
+
+		/* Check Parameters */
+		handle = slider.find(".ui-slider-handle");
+
+		equal( handle.attr("aria-valuenow"), widget.val(), "Paramter: value" );
+		equal( handle.attr("aria-valuemin"), widget.attr("min"), "Paramter: min" );
+		equal( handle.attr("aria-valuemax"), widget.attr("max"), "Paramter: max" );
+
+		equal( handle.css("left"), handle_left(widget), "Handle Location: Default" );
+
+		/* Check APIs */
+		widget.val( random_move(widget.attr("min"), widget.attr("max")) );
+		widget.trigger("change");
+		equal( handle.css("left"), handle_left(widget), "Handle Location: Moved" );
+	};
+
+	test( "normal slider", function () {
+		unit_slider( $("#slider0") );
+	});
+
+	test( "icon slider", function () {
+		unit_slider( $("#slider1") );
+	});
+}( jQuery ));
diff --git a/tests/unit-tests/swipelist/index.html b/tests/unit-tests/swipelist/index.html
new file mode 100644
index 00000000..ea75f56a
--- /dev/null
+++ b/tests/unit-tests/swipelist/index.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="swipelist-tests.js"></script>
+
+	<title>Swipelist</title>
+</head>
+<body>
+
+<h1 id="qunit-header">Swipelist Tests</h1>
+<h2 id="qunit-banner"></h2>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests">
+</ol>
+
+<div id="qunit-fixture" style="top:0px;left:0px;">
+	<div data-role="page" id="swipelistpage">
+		<ul data-role="listview">
+			<ul data-role="swipelist" id="swipewidget">
+				<li class="ui-li-1line-leftsub1 ui-li-dialogue">
+					<div data-role="button" data-inline="true">Twitter</div>
+					<div data-role="button" data-inline="true">Twitter</div>
+					<div data-role="button" data-inline="true">Facebook</div>
+					<div data-role="button" data-inline="true">Facebook</div>
+					<div data-role="swipelist-item-cover">
+						<div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+						<div style="display: inline-block;" class="ui-li-text-main-right">2line-leftsub2</div>
+					</div>
+				</li>
+				<li class="ui-li-1line-leftsub1 ui-li-dialogue">
+					<div data-role="button" data-inline="true">Twitter</div>
+					<div data-role="button" data-inline="true">Twitter</div>
+					<div data-role="button" data-inline="true">Facebook</div>
+					<div data-role="button" data-inline="true">Facebook</div>
+					<div data-role="swipelist-item-cover">
+						<div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+						<div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+					</div>
+				</li>
+			</ul>
+		</ul>
+	</div>
+	<div data-role="page" id="swipedestorypage">
+		<ul data-role="listview">
+			<ul data-role="swipelist" id="swipedestroy">
+				<li class="ui-li-1line-leftsub1 ui-li-dialogue">
+					<div data-role="button" data-inline="true">Twitter</div>
+					<div data-role="button" data-inline="true">Twitter</div>
+					<div data-role="button" data-inline="true">Facebook</div>
+					<div data-role="button" data-inline="true">Facebook</div>
+					<div data-role="swipelist-item-cover">
+						<div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+						<div style="display: inline-block;" class="ui-li-text-main-right">2line-leftsub2</div>
+					</div>
+				</li>
+				<li class="ui-li-1line-leftsub1 ui-li-dialogue">
+					<div data-role="button" data-inline="true">Twitter</div>
+					<div data-role="button" data-inline="true">Twitter</div>
+					<div data-role="button" data-inline="true">Facebook</div>
+					<div data-role="button" data-inline="true">Facebook</div>
+					<div data-role="swipelist-item-cover">
+						<div style="display: inline-block;" class="ui-li-text-sub-left">subtext</div>
+						<div style="display: inline-block;" class="ui-li-text-main-right">1line-leftsub1</div>
+					</div>
+				</li>
+			</ul>
+		</ul>
+	</div>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit-tests/swipelist/swipelist-tests.js b/tests/unit-tests/swipelist/swipelist-tests.js
new file mode 100644
index 00000000..23ff373c
--- /dev/null
+++ b/tests/unit-tests/swipelist/swipelist-tests.js
@@ -0,0 +1,85 @@
+/*
+ * swipelist unit tests
+ *
+ * Hyunjung Kim <hjnim.kim@samsung.com>
+ *
+ */
+
+( function ( $ ) {
+
+	module("swipelist");
+
+	var unit_swipe = function( swipelist, type ) {
+		var	covers,
+			cover,
+			coverStart,
+			item,
+			slideLeftDone = function () {
+				ok(true, "Animation Complete - sliding left");
+				cover.unbind("animationComplete");
+				equal(cover.position().left, coverStart, "Position - Cover");
+				start();
+			},
+			slideRightDone = function () {
+				ok(true, "Animation Complete - sliding right");
+				setTimeout(function () {
+					cover.unbind("animationComplete");
+					cover.bind("animationComplete", slideLeftDone);
+					item.trigger("swipeleft");
+				}, 0);
+			};
+
+		$("#swipelistpage").page();
+		swipelist.swipelist();
+
+		ok(swipelist.hasClass("ui-swipelist"),"Create - Swipelist");
+		covers = swipelist.find("li *.ui-swipelist-item-cover");
+		cover = covers.first();
+		coverStart = cover.position().left;
+		item = swipelist.find("li").first();
+
+		cover.bind("animationComplete", slideRightDone);
+		cover.trigger("swiperight");
+		stop();
+
+		equal( swipelist.find("li.ui-swipelist-item").length , 2, "Count - Swipeable li");
+		equal( covers.length , 2, "Count - cover");
+
+		equal(covers.find("span.ui-swipelist-item-cover-inner:contains('1line-leftsub1')").length,
+				1,
+				"Check - Cover string value");
+	};
+
+	var unit_swipe_destroy = function(swipelist, type) {
+		var covers,
+			new_page = $("#swipedestorypage");
+
+		new_page.page();
+		swipelist.swipelist();
+		ok(swipelist.hasClass("ui-swipelist"),"Create - Swipelist");
+		covers = swipelist.find("li *.ui-swipelist-item-cover");
+
+		equal( swipelist.find("li.ui-swipelist-item").length , 2, "Count - Swipeable li");
+		equal( covers.length , 2, "Count - cover");
+
+		swipelist.swipelist("destroy");
+
+		equal(new_page.has('.ui-swipelist').length, 0, "Destroy - list");
+		equal(new_page.has('.ui-swipelist-item').length, 0 , "Destroy - item" );
+		equal(new_page.has('.ui-swipelist-item-cover').length, 0, "Destroy - cover");
+
+	};
+
+	asyncTest( " swipelist ", function() {
+		expect(7);
+		unit_swipe( $("#swipewidget"), "swipelist" );
+		start();
+	});
+
+	asyncTest( " swipelist - destory", function() {
+		expect(6),
+		unit_swipe_destroy( $("#swipedestroy"), "swipelistdestroy"),
+		start()
+	});
+
+} ) ( jQuery );
diff --git a/tests/unit-tests/tests.js b/tests/unit-tests/tests.js
new file mode 100644
index 00000000..ec0562b8
--- /dev/null
+++ b/tests/unit-tests/tests.js
@@ -0,0 +1,37 @@
+var TESTS = {
+	"testPages":[
+		// Put your test here
+		"autodividers",
+		"button",
+		"check",
+		"color",
+		"controlbar",
+		"datetimepicker",
+		"dayselector",
+		"expandablelist",
+		"extendablelist",
+		"handler",
+		"imageslider",
+		"listviewcontrols",
+		"multibuttonentry",
+		"multimediaview",
+		"navigationbar",
+		"nocontents",
+		"notification",
+		"optionheader",
+		"pagecontrol",
+		"popupwindow",
+		"popupwindow_ctxpopup",
+		"progressbar",
+		"radio",
+		"searchbar",
+		"segmentcontrol",
+		"shortcutscroll",
+		"slider",
+		"swipelist",
+		"toggleswitch",
+		"virtuallist",
+		"virtualgrid",
+		"collapsible"
+	]
+};
diff --git a/tests/unit-tests/toggleswitch/index.html b/tests/unit-tests/toggleswitch/index.html
new file mode 100644
index 00000000..a2c99f4b
--- /dev/null
+++ b/tests/unit-tests/toggleswitch/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+	<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+		data-framework-theme="tizen-white"
+		data-framework-viewport-scale=false>
+	</script>
+
+	<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+
+	<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+	<script src="toggleswitch-tests.js"></script>
+
+	<title>Toggle Switch</title>
+</head>
+
+<body>
+
+<h1 id="qunit-header">Toggle Switch</h1>
+<h2 id="qunit-banner"></h2>
+<div id="qunit-testrunner-toolbar"></div>
+<h2 id="qunit-userAgent"></h2>
+<ol id="qunit-tests"></ol>
+
+<div id="qunit-fixture">
+
+	<div id="ts-auto" data-role="toggleswitch"></div>
+	<div id="ts-self"></div>
+
+</div>
+</body>
+</html>
diff --git a/tests/unit-tests/toggleswitch/toggleswitch-tests.js b/tests/unit-tests/toggleswitch/toggleswitch-tests.js
new file mode 100644
index 00000000..569862ca
--- /dev/null
+++ b/tests/unit-tests/toggleswitch/toggleswitch-tests.js
@@ -0,0 +1,51 @@
+$(document).ready( function () {
+	module( "Toggle Switch" );
+	test( "Create", function () {
+		ok( $("#ts-auto").data("checked"), "should created by auto-intialization" );
+		$("#ts-self").toggleswitch();
+		ok( $("#ts-self").data("checked"), "should created by call '.toggleswitch()'" );
+	});
+
+	test( "Options", function () {
+		var ts = $("#ts-self"),
+			text = [],
+			on = "Enable",
+			off = "Disable";
+
+		$("#ts-self").toggleswitch( {
+			texton: on,
+			textoff: off,
+			checked: false
+		});
+		deepEqual( [ on, off, false ],
+			[ ts.toggleswitch("option", "texton"),
+				ts.toggleswitch("option", "textoff"),
+				ts.toggleswitch("option", "checked") ],
+			"should set on/off text by option val" );
+
+		text.push( ts.next().find(".ui-toggleswitch-on .ui-toggleswitch-text").text() );
+		text.push( ts.next().find(".ui-toggleswitch-off .ui-toggleswitch-text").text() );
+
+		deepEqual( text, [ on, off ], "should display on/off text correctly" );
+	});
+
+	test( "Events", function () {
+		var ts = $("#ts-self").toggleswitch(),
+			before = ts.toggleswitch( "option", "checked" );
+
+		ts.bind("changed", function() {
+			ok( true, "should trigger changed event");
+			notEqual( before, ts.toggleswitch( "option", "checked" ), "should change value" );
+		});
+
+		// "click" event or ".click()" is not working due to 'remove 2nd vclick' patch.
+		ts.next().find(".ui-toggleswitch-mover").trigger( "vclick" );
+		expect(2);
+
+		before = ts.toggleswitch( "option", "checked" );
+		ts.toggleswitch( "option", "checked", !before );
+
+		expect(4);
+	});
+
+});
diff --git a/tests/unit-tests/virtualgrid/index.html b/tests/unit-tests/virtualgrid/index.html
new file mode 100755
index 00000000..0ae6fd98
--- /dev/null
+++ b/tests/unit-tests/virtualgrid/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.js"></script>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+			data-framework-theme="tizen-white"
+			data-framework-viewport-scale=false>
+		</script>
+		<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+		<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+		<script src="virtualgrid-tests.js"></script>
+		<title>Virtualgrid</title>
+	</head>
+
+	<body>
+		<h1 id="qunit-header">Virtualgrid</h1>
+		<h2 id="qunit-banner"></h2>
+		<div id="qunit-testrunner-toolbar"></div>
+		<h2 id="qunit-userAgent"></h2>
+		<ol id="qunit-tests"></ol>
+
+		<div id="qunit-fixture">
+			<div data-role="page" id="virtualgrid_demo_page" class="virtualgrid_demo_page">
+				<div data-role="header" data-position="fixed">
+					<h1>Virtualgrid</h1>
+				</div>
+				<div data-role="content">
+					<script id="tizen-demo-namecard" type="text/x-jquery-tmpl">
+						<div class="ui-demo-namecard">
+							<div class="ui-demo-namecard-pic">
+							</div>
+							<div class="ui-demo-namecard-contents">
+								<span class="name ui-li-text-main">${NAME}</span>
+							</div>
+						</div>
+					</script>
+					<div id="virtualgrid-test" data-direction="y" data-role="virtualgrid"  data-itemcount="auto" data-rotation="true" data-template="tizen-demo-namecard" data-dbtable="JSON_DATA" style="width: 500px;height:600px;"></div>
+					<script>
+						$( ".virtualgrid_demo_page" ).live( "pagecreate", function() {
+							console.log("pagecreate...");
+							$.getScript( "../../../demos/tizen-winsets/widgets/grid/js/virtualgrid-db-demo.js", function( data, textStatus ) {
+								$(document).trigger("dataloaded");
+							});
+						});
+					</script>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/tests/unit-tests/virtualgrid/virtualgrid-tests.js b/tests/unit-tests/virtualgrid/virtualgrid-tests.js
new file mode 100755
index 00000000..10214255
--- /dev/null
+++ b/tests/unit-tests/virtualgrid/virtualgrid-tests.js
@@ -0,0 +1,64 @@
+/*
+ * Unit Test: virtual grid
+ *
+ * Kangsik Kim <kangsik81.kim@samsung.com>
+ */
+
+(function ($) {
+	module("Virtualgrid");
+
+	var unit_virtualgrid = function ( widget, type ) {
+		var virtualGrid,
+			idx,
+			index = 0,
+			$items,
+			$item;
+
+		/* Create */
+		virtualGrid = widget.virtualgrid("create" , {
+			itemData: function ( idx ) {
+				return JSON_DATA[ idx ];
+			},
+			numItemData: JSON_DATA.length,
+			cacheItemData: function ( minIdx, maxIdx ) { }
+		});
+		ok(virtualGrid, "Create");
+
+		$(".virtualgrid_demo_page").bind("select", function ( event ) {
+			ok(true, "Event : select");
+		});
+
+		$(".virtualgrid_demo_page").bind("test.resize", function ( event ) {
+			var prevColCnt = 0;
+
+			$item = $(".ui-virtualgrid-wrapblock-y:first");
+			prevColCnt = $item.children().length;
+			$("#virtualgrid-test").css("width", "1500px");
+			widget.virtualgrid("resize");
+			$item = $(".ui-virtualgrid-wrapblock-y:first");
+			notEqual( $item.children().length, prevColCnt, "Event : resize");
+		});
+
+		$($(".virtualgrid_demo_page").find(".ui-scrollview-view")).find(".ui-virtualgrid-wrapblock-y:first").addClass("center");
+		widget.virtualgrid("centerTo", "center");
+		$items = $($(".virtualgrid_demo_page").find(".ui-scrollview-view")).find(".ui-virtualgrid-wrapblock-y");
+		for ( idx = 0 ; idx < $items.length ; idx += 1 ) {
+			if ( $($items[idx]).hasClass("center") ) {
+				index = idx;
+				break;
+			}
+		}
+
+		notEqual( index, 0, "API : centerTo");
+
+		$item = $($(".ui-virtualgrid-wrapblock-y:first").children()[0]);
+		$item.trigger("click");
+		$item.trigger("test.resize");
+	};
+
+	$(document).bind("dataloaded" , function () {
+		test( "Virtualgrid", function () {
+			unit_virtualgrid( $("#virtualgrid-test"), "virtualgrid" );
+		});
+	});
+}( jQuery ));
diff --git a/tests/unit-tests/virtuallist/index.html b/tests/unit-tests/virtuallist/index.html
new file mode 100755
index 00000000..b02d2266
--- /dev/null
+++ b/tests/unit-tests/virtuallist/index.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/jquery.js"></script>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw-libs.min.js"></script>
+		<script src="../../../build/tizen-web-ui-fw/latest/js/tizen-web-ui-fw.js"
+			data-framework-theme="tizen-white"
+			data-framework-viewport-scale=false>
+		</script>
+		<link rel="stylesheet" href="../../../libs/js/jquery-mobile-1.1.0/external/qunit.css" />
+		<script src="../../../libs/js/jquery-mobile-1.1.0/external/qunit.js"></script>
+		<script src = "../../../demos/tizen-winsets/widgets/list/virtuallist-db-demo.js"></script>
+		<script src="virtuallist-tests.js"></script>
+		<title>Virtuallist</title>
+	</head>
+
+	<body>
+		<h1 id="qunit-header">Virtuallist</h1>
+		<h2 id="qunit-banner"></h2>
+		<div id="qunit-testrunner-toolbar"></div>
+		<h2 id="qunit-userAgent"></h2>
+		<ol id="qunit-tests"></ol>
+
+		<div id="qunit-fixture">
+			<div data-role="page" id="dummy-page">
+				<div data-role="header" data-position="fixed">
+					<h1>Dummy</h1>
+				</div>
+				<div data-role="contents">
+				</div>
+			</div>
+			<div data-role="page" id="virtuallist-unit-test" data-add-back-btn="true">
+				<div data-role="header" data-position="fixed">
+					<h1>Virtual List - Normal Style 1line</h1>
+				</div>
+				<div data-role="content">
+					<script id="tmp-1line" type="text/x-jquery-tmpl">
+						<li class="ui-li-1line"><span class="ui-li-text-main">${NAME}</span></li>
+					</script>
+					<ul id="virtuallist-normal_1line_ul" data-role="virtuallistview" data-template="tmp-1line" data-dbtable="JSON_DATA" data-row="100">
+					</ul>
+				</div>
+			</div>
+		</div>
+	</body>
+</html>
diff --git a/tests/unit-tests/virtuallist/virtuallist-tests.js b/tests/unit-tests/virtuallist/virtuallist-tests.js
new file mode 100755
index 00000000..98d23ae4
--- /dev/null
+++ b/tests/unit-tests/virtuallist/virtuallist-tests.js
@@ -0,0 +1,67 @@
+/*
+ * Unit Test: Virtual list
+ *
+ * Wongi Lee <wongi11.lee@samsung.com>
+ */
+
+$( document ).ready( function () {
+
+	module( "Virtual List");
+
+	function startVirtualListTest(){
+		var $vlContainer = $( "ul.ui-virtual-list-container" ),
+			$vlElements = $( "ul.ui-virtual-list-container li" ),
+			vlHeight = $vlContainer.css( "height" ),
+			vlOptions = $( "#virtuallist-normal_1line_ul" ).virtuallistview( "option" );
+
+		test( "Virtual list test", function () {
+			/* Initialize and create method */
+			ok( $vlContainer );
+			equal( $vlElements.length, 100 );
+			ok( parseInt( vlHeight, 10 ) > 3000 );
+
+			/* Options */
+			equal( vlOptions.id, "#virtuallist-normal_1line_ul" );
+			equal( vlOptions.childSelector, " li" );
+			equal( vlOptions.dbtable, "JSON_DATA" );
+			equal( vlOptions.template, "tmp-1line" );
+			equal( vlOptions.row, 100 );
+			equal( vlOptions.dbkey, false );
+			equal( vlOptions.scrollview, true );
+
+
+			/* Destroy method */
+			ok ( ( function () {
+				/* Call destroy */
+				$( "#virtuallist-normal_1line_ul" ).virtuallistview( "destroy" );
+
+				destoyedVlElements = $( "ul.ui-virtual-list-container li" );
+				console.log( destoyedVlElements.length );
+
+				try {
+					equal ( destoyedVlElements.length, 0 );
+				} catch ( exception ) {
+					console.log( "destroy : " + exception );
+					return false;
+				}
+				return true;
+			}() ), "destroy()" );
+		} );
+	}
+
+	/* Load Dummy Data and Init Virtual List widget*/
+	if ( window.JSON_DATA ) {
+		$( "ul" ).filter( function () {
+			return $( this ).data( "role" ) == "virtuallistview";
+		} ).addClass( "vlLoadSuccess" );
+
+		// trigger pagecreate
+		$( "#virtuallist-unit-test" ).page();
+
+		$( "ul.ui-virtual-list-container" ).virtuallistview( "create" );
+
+		startVirtualListTest();
+	} else {
+		console.log ( "Virtual List Init Fail." );
+	}
+} );
author	Minkyu Kang <mk7.kang@samsung.com>	2012-09-10 17:04:29 +0900
committer	Minkyu Kang <mk7.kang@samsung.com>	2012-09-10 17:04:29 +0900
commit	f3bc06001f660ef156e0895f4be1e81a0ac99502 (patch)
tree	4319859b727600c6d8382b95e68a0c0d52cf38f0 /tests
parent	b087adb7b7df900f9656425e5cea9dc7abdf935b (diff)
download	web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.tar.gz web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.tar.bz2 web-ui-fw-f3bc06001f660ef156e0895f4be1e81a0ac99502.zip