Table: Add columntoggle refresh test

Gabriel Schulhof · Gabriel Schulhof · commit bfbdebb7ae59 · 2014-02-21T01:27:00.000+02:00
This adds tests for f61d376. Closes gh-7086
diff --git a/js/widgets/table.columntoggle.js b/js/widgets/table.columntoggle.js
@@ -178,7 +178,8 @@ $.widget( "mobile.table", $.mobile.table, {
 
 		if ( !create && this.options.mode === "columntoggle" ) {
 			// columns not being replaced must be cleared from input toggle-locks
-			this._unlockCells( this.element.find( ".ui-table-cell-hidden, .ui-table-cell-visible" ) );
+			this._unlockCells( this.element.find( ".ui-table-cell-hidden, " +
+				".ui-table-cell-visible" ) );
 
 			// update columntoggles and cells
 			this._addToggles( this._menu, create );
diff --git a/tests/unit/table/columntoggle-refresh-tests.html b/tests/unit/table/columntoggle-refresh-tests.html
@@ -0,0 +1,66 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<title>jQuery Mobile Table Integration Test</title>
+
+	<script src="../../../external/requirejs/require.js"></script>
+	<script src="../../../js/requirejs.config.js"></script>
+	<script src="../../../js/jquery.tag.inserter.js"></script>
+	<script src="../../jquery.setNameSpace.js"></script>
+	<script src="../../jquery.testHelper.js"></script>
+	<script src="../../../external/qunit/qunit.js"></script>
+	<script>
+		$.testHelper.asyncLoad([
+			[ "widgets/page" ],
+			[
+				"widgets/table.columntoggle"
+			],
+			[ "jquery.mobile.init" ],
+			[
+				"columntoggle_refresh_core.js"
+			]
+		]);
+	</script>
+	<link rel="stylesheet"  href="../../../css/themes/default/jquery.mobile.css" />
+	<link rel="stylesheet" href="../../../external/qunit/qunit.css"/>
+	<link rel="stylesheet" href="../../jqm-tests.css"/>
+
+	<script src="../../swarminject.js"></script>
+</head>
+<body>
+	<div id="qunit"></div>
+	<div data-nstest-role="page">
+		<div class="ui-content" role="main">
+			<table id="refresh-column-count-test" data-nstest-role="table" id="table-column-toggle" data-nstest-mode="columntoggle" class="ui-responsive table-stroke">
+				<thead>
+					<tr>
+						<th data-nstest-priority="2">Rank</th>
+						<th>Movie Title</th>
+						<th data-nstest-priority="3">Year</th>
+						<th data-nstest-priority="1"><abbr title="Rotten Tomato Rating">Rating</abbr></th>
+						<th data-nstest-priority="5">Reviews</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<th>1</th>
+						<td><a href="http://en.wikipedia.org/wiki/Citizen_Kane" data-nstest-rel="external">Citizen Kane</a></td>
+						<td>1941</td>
+						<td>100%</td>
+						<td>74</td>
+					</tr>
+					<tr>
+						<th>2</th>
+						<td><a href="http://en.wikipedia.org/wiki/Casablanca_(film)" data-nstest-rel="external">Casablanca</a></td>
+						<td>1942</td>
+						<td>97%</td>
+						<td>64</td>
+					</tr>
+				</tbody>
+			</table>
+		</div>
+	</div>
+</body>
+</html>
diff --git a/tests/unit/table/columntoggle_refresh_core.js b/tests/unit/table/columntoggle_refresh_core.js
@@ -0,0 +1,17 @@
+module( "Table integration tests" );
+
+test( "Table refresh does not drop columns", function() {
+	var eventNs = ".tableRefreshDoesNotDropColumns",
+		table = $( "#refresh-column-count-test" ),
+		checkbox = $( "#refresh-column-count-test-popup" )
+			.find( "input" ).eq( 2 );
+
+	expect( 1 );
+
+	checkbox.prop( "checked", false ).trigger( "change" );
+	table.table( "refresh" );
+	deepEqual( $( "thead tr > *:visible", table[ 0 ] ).length,
+		$( "tbody tr:first > *:visible", table[ 0 ] ).length,
+		"Number of visible headers columns equals number of visible " +
+			"data columns" );
+});
