diff options
Diffstat (limited to 'tests/unit-tests')
69 files changed, 5182 insertions, 0 deletions
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..4601fc1a --- /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, "..." , "API : select ( 1 )"); + + /* Focus Out */ + multibuttonentry.multibuttonentry("focusOut"); + status = multibuttonentry.find(".ui-multibuttonentry-desclabel").length === 1 ? true : false; + equal( status, true , "API : focusOut "); + + /* Focus In */ + multibuttonentry.multibuttonentry("focusIn"); + status = multibuttonentry.find(".ui-multibuttonentry-desclabel").length === 1 ? true : false; + equal(status, false, "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..c7810c33 --- /dev/null +++ b/tests/unit-tests/popupwindow_ctxpopup/ctxpopup-tests.js @@ -0,0 +1,103 @@ +$(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"), + popPos, + popDim, + 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++; + popPos = parents.position(); + popDim = { + width: parents.width(), + height: parents.height() + }; + + if ( popPos.left < 0 || popPos.top < 0 || popPos.left > (width - popDim.width) || popPos.top > (height - popDim.height) ) { + throw "Pop up occured at wrong position: (" + parseInt(popPos.left, 10) + "," + parseInt(popPos.top, 10) + "," + 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..533b5cbb --- /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-gray/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..90568796 --- /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-gray/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." ); + } +} ); |