From 5d83c55f5e09305466b3c4720b916bd3ac8844cf Mon Sep 17 00:00:00 2001
From: bwang <bwang@wikimedia.org>
Date: Wed, 2 Oct 2024 14:04:07 -0500
Subject: [PATCH] Update tables code to only target unwrapped tables

Bug: T367248
Change-Id: If4267e083cd6721bdb80d32a84c1fd9306096b50
---
 resources/skins.vector.js/tables.js           |  2 +-
 .../__snapshots__/tables.test.js.snap         | 58 ++++++++++++-------
 tests/jest/skins.vector.js/tables.test.js     | 57 ++++++++++++------
 3 files changed, 78 insertions(+), 39 deletions(-)

diff --git a/resources/skins.vector.js/tables.js b/resources/skins.vector.js/tables.js
index 65d6644f0..ab9a5bb65 100644
--- a/resources/skins.vector.js/tables.js
+++ b/resources/skins.vector.js/tables.js
@@ -3,7 +3,7 @@ const init = () => {
 	if ( !config.VectorWrapTablesTemporary ) {
 		return;
 	}
-	const tables = document.querySelectorAll( '.mw-parser-output table.wikitable' );
+	const tables = document.querySelectorAll( '.mw-parser-output > table.wikitable' );
 	let numberBigTables = 0;
 	Array.from( tables ).forEach( ( table ) => {
 		const styles = window.getComputedStyle( table );
diff --git a/tests/jest/skins.vector.js/__snapshots__/tables.test.js.snap b/tests/jest/skins.vector.js/__snapshots__/tables.test.js.snap
index eff04697b..f1b82a9f3 100644
--- a/tests/jest/skins.vector.js/__snapshots__/tables.test.js.snap
+++ b/tests/jest/skins.vector.js/__snapshots__/tables.test.js.snap
@@ -2,28 +2,30 @@
 
 exports[`tables doesnt wrap floated tables 1`] = `
 "
-			<table class=\\"wikitable\\" style=\\"float:right\\">
-				<tbody>
-					<tr><th>table table table</th></tr>
-				</tbody>
-			</table>
-		"
+			<div class=\\"mw-parser-output\\">
+				<table class=\\"wikitable\\" style=\\"float:right\\">
+					<tbody>
+						<tr><th>table table table</th></tr>
+					</tbody>
+				</table>
+			<div>
+		</div></div>"
 `;
 
 exports[`tables doesnt wrap nested tables 1`] = `
 "
-			<section class=\\"mw-parser-output\\">
+			<div class=\\"mw-parser-output\\">
 				<div class=\\"noresize\\"><table class=\\"wikitable\\">
 					<tbody>
 						<tr><th>table table table</th></tr>
 						<tr><td><table class=\\"wikitable\\"><tbody><tr><th>table table table</th></tr></tbody></table></td><td></td></tr>
 					</tbody>
 				</table></div>
-			</section>
+			</div>
 		"
 `;
 
-exports[`tables doesnt wrap tables that are already wrapped 1`] = `
+exports[`tables doesnt wrap tables that already have noresize 1`] = `
 "
 			<div class=\\"mw-parser-output\\">
 				<div class=\\"noresize\\">
@@ -37,20 +39,36 @@ exports[`tables doesnt wrap tables that are already wrapped 1`] = `
 		"
 `;
 
+exports[`tables doesnt wrap tables that are already wrapped 1`] = `
+"
+			<div class=\\"mw-parser-output\\">
+				<div>
+					<table class=\\"wikitable\\">
+						<tbody>
+							<tr><th>table table table</th></tr>
+						</tbody>
+					</table>
+				</div>
+			</div>
+		"
+`;
+
 exports[`tables doesnt wrap tables that are not wikitables 1`] = `
 "
-			<table>
-				<tbody>
-					<tr><th>table table table</th></tr>
-					<tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table></td><td></td></tr>
-				</tbody>
-			</table>
-		"
+			<div class=\\"mw-parser-output\\">
+				<table>
+					<tbody>
+						<tr><th>table table table</th></tr>
+						<tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table></td><td></td></tr>
+					</tbody>
+				</table>
+			<div>
+		</div></div>"
 `;
 
 exports[`tables wraps multiple table with div 1`] = `
 "
-			<section class=\\"mw-parser-output\\">
+			<div class=\\"mw-parser-output\\">
 				<div class=\\"noresize\\"><table class=\\"wikitable\\">
 					<tbody><tr><th>table table table</th></tr></tbody>
 				</table></div>
@@ -61,16 +79,16 @@ exports[`tables wraps multiple table with div 1`] = `
 				<div class=\\"noresize\\"><table class=\\"wikitable\\">
 					<tbody><tr><th>table table table</th></tr></tbody>
 				</table></div>
-			</section>
+			</div>
 		"
 `;
 
 exports[`tables wraps table with div 1`] = `
 "
-			<section class=\\"mw-parser-output\\">
+			<div class=\\"mw-parser-output\\">
 				<div class=\\"noresize\\"><table class=\\"wikitable\\">
 					<tbody><tr><th>table table table</th></tr></tbody>
 				</table></div>
-			</section>
+			</div>
 		"
 `;
diff --git a/tests/jest/skins.vector.js/tables.test.js b/tests/jest/skins.vector.js/tables.test.js
index a2db563be..38575367b 100644
--- a/tests/jest/skins.vector.js/tables.test.js
+++ b/tests/jest/skins.vector.js/tables.test.js
@@ -3,11 +3,11 @@ const tables = require( '../../../resources/skins.vector.js/tables.js' ).init;
 describe( 'tables', () => {
 	test( 'wraps table with div', () => {
 		document.body.innerHTML = `
-			<section class="mw-parser-output">
+			<div class="mw-parser-output">
 				<table class="wikitable">
 					<tbody><tr><th>table table table</th></tr></tbody>
 				</table>
-			</section>
+			</div>
 		`;
 		tables();
 
@@ -16,7 +16,7 @@ describe( 'tables', () => {
 
 	test( 'wraps multiple table with div', () => {
 		document.body.innerHTML = `
-			<section class="mw-parser-output">
+			<div class="mw-parser-output">
 				<table class="wikitable">
 					<tbody><tr><th>table table table</th></tr></tbody>
 				</table>
@@ -27,7 +27,7 @@ describe( 'tables', () => {
 				<table class="wikitable">
 					<tbody><tr><th>table table table</th></tr></tbody>
 				</table>
-			</section>
+			</div>
 		`;
 		tables();
 
@@ -36,14 +36,14 @@ describe( 'tables', () => {
 
 	test( 'doesnt wrap nested tables', () => {
 		document.body.innerHTML = `
-			<section class="mw-parser-output">
+			<div class="mw-parser-output">
 				<table class="wikitable">
 					<tbody>
 						<tr><th>table table table</th></tr>
 						<tr><td><table class="wikitable"><tbody><tr><th>table table table</th></tr></tbody></table><td></tr>
 					</tbody>
 				</table>
-			</section>
+			</div>
 		`;
 		tables();
 
@@ -52,19 +52,21 @@ describe( 'tables', () => {
 
 	test( 'doesnt wrap tables that are not wikitables', () => {
 		document.body.innerHTML = `
-			<table>
-				<tbody>
-					<tr><th>table table table</th></tr>
-					<tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table><td></tr>
-				</tbody>
-			</table>
+			<div class="mw-parser-output">
+				<table>
+					<tbody>
+						<tr><th>table table table</th></tr>
+						<tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table><td></tr>
+					</tbody>
+				</table>
+			<div>
 		`;
 		tables();
 
 		expect( document.body.innerHTML ).toMatchSnapshot();
 	} );
 
-	test( 'doesnt wrap tables that are already wrapped', () => {
+	test( 'doesnt wrap tables that already have noresize', () => {
 		document.body.innerHTML = `
 			<div class="mw-parser-output">
 				<div class="noresize">
@@ -81,13 +83,32 @@ describe( 'tables', () => {
 		expect( document.body.innerHTML ).toMatchSnapshot();
 	} );
 
+	test( 'doesnt wrap tables that are already wrapped', () => {
+		document.body.innerHTML = `
+			<div class="mw-parser-output">
+				<div>
+					<table class="wikitable">
+						<tbody>
+							<tr><th>table table table</th></tr>
+						</tbody>
+					</table>
+				</div>
+			</div>
+		`;
+		tables();
+
+		expect( document.body.innerHTML ).toMatchSnapshot();
+	} );
+
 	test( 'doesnt wrap floated tables', () => {
 		document.body.innerHTML = `
-			<table class="wikitable" style="float:right">
-				<tbody>
-					<tr><th>table table table</th></tr>
-				</tbody>
-			</table>
+			<div class="mw-parser-output">
+				<table class="wikitable" style="float:right">
+					<tbody>
+						<tr><th>table table table</th></tr>
+					</tbody>
+				</table>
+			<div>
 		`;
 		tables();