wikimedia/mediawiki-skins-Vector
1
0
Fork 0
mirror of https://gerrit.wikimedia.org/r/mediawiki/skins/Vector.git synced 2024-11-23 23:33:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update tables code to only target unwrapped tables

Browse source 
Bug: T367248
Change-Id: If4267e083cd6721bdb80d32a84c1fd9306096b50
This commit is contained in:
bwang 2024-10-02 14:04:07 -05:00
parent 02e22cdfd0
commit 5d83c55f5e
3 changed files with 78 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/skins.vector.js/tables.js
View file

@ -3,7 +3,7 @@ const init = () => {
if ( !config.VectorWrapTablesTemporary ) { if ( !config.VectorWrapTablesTemporary ) {
return; return;
} }
const tables = document.querySelectorAll( '.mw-parser-output table.wikitable' ); const tables = document.querySelectorAll( '.mw-parser-output > table.wikitable' );
let numberBigTables = 0; let numberBigTables = 0;
Array.from( tables ).forEach( ( table ) => { Array.from( tables ).forEach( ( table ) => {
const styles = window.getComputedStyle( table ); const styles = window.getComputedStyle( table );

58
tests/jest/skins.vector.js/__snapshots__/tables.test.js.snap
View file

@ -2,28 +2,30 @@
exports[`tables doesnt wrap floated tables 1`] = ` exports[`tables doesnt wrap floated tables 1`] = `
" "
<table class=\\"wikitable\\" style=\\"float:right\\"> <div class=\\"mw-parser-output\\">
<tbody> <table class=\\"wikitable\\" style=\\"float:right\\">
<tr><th>table table table</th></tr> <tbody>
</tbody> <tr><th>table table table</th></tr>
</table> </tbody>
" </table>
<div>
</div></div>"
`; `;
exports[`tables doesnt wrap nested tables 1`] = ` exports[`tables doesnt wrap nested tables 1`] = `
" "
<section class=\\"mw-parser-output\\"> <div class=\\"mw-parser-output\\">
<div class=\\"noresize\\"><table class=\\"wikitable\\"> <div class=\\"noresize\\"><table class=\\"wikitable\\">
<tbody> <tbody>
<tr><th>table table table</th></tr> <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> <tr><td><table class=\\"wikitable\\"><tbody><tr><th>table table table</th></tr></tbody></table></td><td></td></tr>
</tbody> </tbody>
</table></div> </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=\\"mw-parser-output\\">
<div class=\\"noresize\\"> <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`] = ` exports[`tables doesnt wrap tables that are not wikitables 1`] = `
" "
<table> <div class=\\"mw-parser-output\\">
<tbody> <table>
<tr><th>table table table</th></tr> <tbody>
<tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table></td><td></td></tr> <tr><th>table table table</th></tr>
</tbody> <tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table></td><td></td></tr>
</table> </tbody>
" </table>
<div>
</div></div>"
`; `;
exports[`tables wraps multiple table with div 1`] = ` exports[`tables wraps multiple table with div 1`] = `
" "
<section class=\\"mw-parser-output\\"> <div class=\\"mw-parser-output\\">
<div class=\\"noresize\\"><table class=\\"wikitable\\"> <div class=\\"noresize\\"><table class=\\"wikitable\\">
<tbody><tr><th>table table table</th></tr></tbody> <tbody><tr><th>table table table</th></tr></tbody>
</table></div> </table></div>
@ -61,16 +79,16 @@ exports[`tables wraps multiple table with div 1`] = `
<div class=\\"noresize\\"><table class=\\"wikitable\\"> <div class=\\"noresize\\"><table class=\\"wikitable\\">
<tbody><tr><th>table table table</th></tr></tbody> <tbody><tr><th>table table table</th></tr></tbody>
</table></div> </table></div>
</section> </div>
" "
`; `;
exports[`tables wraps table with div 1`] = ` exports[`tables wraps table with div 1`] = `
" "
<section class=\\"mw-parser-output\\"> <div class=\\"mw-parser-output\\">
<div class=\\"noresize\\"><table class=\\"wikitable\\"> <div class=\\"noresize\\"><table class=\\"wikitable\\">
<tbody><tr><th>table table table</th></tr></tbody> <tbody><tr><th>table table table</th></tr></tbody>
</table></div> </table></div>
</section> </div>
" "
`; `;

57
tests/jest/skins.vector.js/tables.test.js
View file

@ -3,11 +3,11 @@ const tables = require( '../../../resources/skins.vector.js/tables.js' ).init;
describe( 'tables', () => { describe( 'tables', () => {
test( 'wraps table with div', () => { test( 'wraps table with div', () => {
document.body.innerHTML = ` document.body.innerHTML = `
<section class="mw-parser-output"> <div class="mw-parser-output">
<table class="wikitable"> <table class="wikitable">
<tbody><tr><th>table table table</th></tr></tbody> <tbody><tr><th>table table table</th></tr></tbody>
</table> </table>
</section> </div>
`; `;
tables(); tables();
@ -16,7 +16,7 @@ describe( 'tables', () => {
test( 'wraps multiple table with div', () => { test( 'wraps multiple table with div', () => {
document.body.innerHTML = ` document.body.innerHTML = `
<section class="mw-parser-output"> <div class="mw-parser-output">
<table class="wikitable"> <table class="wikitable">
<tbody><tr><th>table table table</th></tr></tbody> <tbody><tr><th>table table table</th></tr></tbody>
</table> </table>
@ -27,7 +27,7 @@ describe( 'tables', () => {
<table class="wikitable"> <table class="wikitable">
<tbody><tr><th>table table table</th></tr></tbody> <tbody><tr><th>table table table</th></tr></tbody>
</table> </table>
</section> </div>
`; `;
tables(); tables();
@ -36,14 +36,14 @@ describe( 'tables', () => {
test( 'doesnt wrap nested tables', () => { test( 'doesnt wrap nested tables', () => {
document.body.innerHTML = ` document.body.innerHTML = `
<section class="mw-parser-output"> <div class="mw-parser-output">
<table class="wikitable"> <table class="wikitable">
<tbody> <tbody>
<tr><th>table table table</th></tr> <tr><th>table table table</th></tr>
<tr><td><table class="wikitable"><tbody><tr><th>table table table</th></tr></tbody></table><td></tr> <tr><td><table class="wikitable"><tbody><tr><th>table table table</th></tr></tbody></table><td></tr>
</tbody> </tbody>
</table> </table>
</section> </div>
`; `;
tables(); tables();
@ -52,19 +52,21 @@ describe( 'tables', () => {
test( 'doesnt wrap tables that are not wikitables', () => { test( 'doesnt wrap tables that are not wikitables', () => {
document.body.innerHTML = ` document.body.innerHTML = `
<table> <div class="mw-parser-output">
<tbody> <table>
<tr><th>table table table</th></tr> <tbody>
<tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table><td></tr> <tr><th>table table table</th></tr>
</tbody> <tr><td><table><tbody><tr><th>table table table</th></tr></tbody></table><td></tr>
</table> </tbody>
</table>
<div>
`; `;
tables(); tables();
expect( document.body.innerHTML ).toMatchSnapshot(); expect( document.body.innerHTML ).toMatchSnapshot();
} ); } );
test( 'doesnt wrap tables that are already wrapped', () => { test( 'doesnt wrap tables that already have noresize', () => {
document.body.innerHTML = ` document.body.innerHTML = `
<div class="mw-parser-output"> <div class="mw-parser-output">
<div class="noresize"> <div class="noresize">
@ -81,13 +83,32 @@ describe( 'tables', () => {
expect( document.body.innerHTML ).toMatchSnapshot(); 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', () => { test( 'doesnt wrap floated tables', () => {
document.body.innerHTML = ` document.body.innerHTML = `
<table class="wikitable" style="float:right"> <div class="mw-parser-output">
<tbody> <table class="wikitable" style="float:right">
<tr><th>table table table</th></tr> <tbody>
</tbody> <tr><th>table table table</th></tr>
</table> </tbody>
</table>
<div>
`; `;
tables(); tables();