jonny/Vector-Local
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Revert unnecessary TOC section id change

Browse source 
Change-Id: I62736b47557b79929b8ad984d6709e762b3db549
This commit is contained in:
bwang 2022-04-05 15:38:00 -05:00
parent e3684ba8a0
commit aa8ec1a878
3 changed files with 30 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
includes/templates/TableOfContents__line.mustache
View file

@ -1,4 +1,4 @@
<li id="toc-{{number}}" <li id="toc-{{anchor}}"
class="sidebar-toc-list-item sidebar-toc-level-{{toclevel}}{{#is-top-level-section}}{{^vector-is-collapse-sections-enabled}} sidebar-toc-list-item-expanded{{/vector-is-collapse-sections-enabled}}{{/is-top-level-section}}"> class="sidebar-toc-list-item sidebar-toc-level-{{toclevel}}{{#is-top-level-section}}{{^vector-is-collapse-sections-enabled}} sidebar-toc-list-item-expanded{{/vector-is-collapse-sections-enabled}}{{/is-top-level-section}}">
<a class="sidebar-toc-link" href="#{{anchor}}"> <a class="sidebar-toc-link" href="#{{anchor}}">
<div class="sidebar-toc-text"> <div class="sidebar-toc-text">

20
tests/jest/__snapshots__/tableOfContents.test.js.snap
View file

@ -11,7 +11,7 @@ exports[`Table of contents when \`vector-is-collapse-sections-enabled\` is false
<div class=\\"sidebar-toc-text\\">Beginning</div> <div class=\\"sidebar-toc-text\\">Beginning</div>
</a> </a>
</li> </li>
<li id=\\"toc-1\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\"> <li id=\\"toc-foo\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
<a class=\\"sidebar-toc-link\\" href=\\"#foo\\"> <a class=\\"sidebar-toc-link\\" href=\\"#foo\\">
<div class=\\"sidebar-toc-text\\"> <div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">1</span>foo</div> <span class=\\"sidebar-toc-numb\\">1</span>foo</div>
@ -19,20 +19,20 @@ exports[`Table of contents when \`vector-is-collapse-sections-enabled\` is false
<ul class=\\"sidebar-toc-list\\"> <ul class=\\"sidebar-toc-list\\">
</ul> </ul>
</li> </li>
<li id=\\"toc-2\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\"> <li id=\\"toc-bar\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
<a class=\\"sidebar-toc-link\\" href=\\"#bar\\"> <a class=\\"sidebar-toc-link\\" href=\\"#bar\\">
<div class=\\"sidebar-toc-text\\"> <div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2</span>bar</div> <span class=\\"sidebar-toc-numb\\">2</span>bar</div>
</a> </a>
<button class=\\"mw-ui-icon mw-ui-icon-wikimedia-downTriangle mw-ui-icon-small sidebar-toc-toggle\\"></button> <button class=\\"mw-ui-icon mw-ui-icon-wikimedia-downTriangle mw-ui-icon-small sidebar-toc-toggle\\"></button>
<ul class=\\"sidebar-toc-list\\"> <ul class=\\"sidebar-toc-list\\">
<li id=\\"toc-2.1\\" class=\\"sidebar-toc-list-item sidebar-toc-level-2\\"> <li id=\\"toc-baz\\" class=\\"sidebar-toc-list-item sidebar-toc-level-2\\">
<a class=\\"sidebar-toc-link\\" href=\\"#baz\\"> <a class=\\"sidebar-toc-link\\" href=\\"#baz\\">
<div class=\\"sidebar-toc-text\\"> <div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2.1</span>baz</div> <span class=\\"sidebar-toc-numb\\">2.1</span>baz</div>
</a> </a>
<ul class=\\"sidebar-toc-list\\"> <ul class=\\"sidebar-toc-list\\">
<li id=\\"toc-2.1.1\\" class=\\"sidebar-toc-list-item sidebar-toc-level-3\\"> <li id=\\"toc-qux\\" class=\\"sidebar-toc-list-item sidebar-toc-level-3\\">
<a class=\\"sidebar-toc-link\\" href=\\"#qux\\"> <a class=\\"sidebar-toc-link\\" href=\\"#qux\\">
<div class=\\"sidebar-toc-text\\"> <div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2.1.1</span>qux</div> <span class=\\"sidebar-toc-numb\\">2.1.1</span>qux</div>
@ -44,7 +44,7 @@ exports[`Table of contents when \`vector-is-collapse-sections-enabled\` is false
</li> </li>
</ul> </ul>
</li> </li>
<li id=\\"toc-3\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\"> <li id=\\"toc-quux\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
<a class=\\"sidebar-toc-link\\" href=\\"#quux\\"> <a class=\\"sidebar-toc-link\\" href=\\"#quux\\">
<div class=\\"sidebar-toc-text\\"> <div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">3</span>quux</div> <span class=\\"sidebar-toc-numb\\">3</span>quux</div>
@ -68,7 +68,7 @@ exports[`Table of contents when \`vector-is-collapse-sections-enabled\` is true
<div class=\\"sidebar-toc-text\\">Beginning</div> <div class=\\"sidebar-toc-text\\">Beginning</div>
</a> </a>
</li> </li>
<li id=\\"toc-1\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\"> <li id=\\"toc-foo\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a class=\\"sidebar-toc-link\\" href=\\"#foo\\"> <a class=\\"sidebar-toc-link\\" href=\\"#foo\\">
<div class=\\"sidebar-toc-text\\"> <div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">1</span>foo</div> <span class=\\"sidebar-toc-numb\\">1</span>foo</div>
@ -76,20 +76,20 @@ exports[`Table of contents when \`vector-is-collapse-sections-enabled\` is true
<ul class=\\"sidebar-toc-list\\"> <ul class=\\"sidebar-toc-list\\">
</ul> </ul>
</li> </li>
<li id=\\"toc-2\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\"> <li id=\\"toc-bar\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a class=\\"sidebar-toc-link\\" href=\\"#bar\\"> <a class=\\"sidebar-toc-link\\" href=\\"#bar\\">
<div class=\\"sidebar-toc-text\\"> <div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2</span>bar</div> <span class=\\"sidebar-toc-numb\\">2</span>bar</div>
</a> </a>
<button class=\\"mw-ui-icon mw-ui-icon-wikimedia-downTriangle mw-ui-icon-small sidebar-toc-toggle\\"></button> <button class=\\"mw-ui-icon mw-ui-icon-wikimedia-downTriangle mw-ui-icon-small sidebar-toc-toggle\\"></button>
<ul class=\\"sidebar-toc-list\\"> <ul class=\\"sidebar-toc-list\\">
<li id=\\"toc-2.1\\" class=\\"sidebar-toc-list-item sidebar-toc-level-2\\"> <li id=\\"toc-baz\\" class=\\"sidebar-toc-list-item sidebar-toc-level-2\\">
<a class=\\"sidebar-toc-link\\" href=\\"#baz\\"> <a class=\\"sidebar-toc-link\\" href=\\"#baz\\">
<div class=\\"sidebar-toc-text\\"> <div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2.1</span>baz</div> <span class=\\"sidebar-toc-numb\\">2.1</span>baz</div>
</a> </a>
<ul class=\\"sidebar-toc-list\\"> <ul class=\\"sidebar-toc-list\\">
<li id=\\"toc-2.1.1\\" class=\\"sidebar-toc-list-item sidebar-toc-level-3\\"> <li id=\\"toc-qux\\" class=\\"sidebar-toc-list-item sidebar-toc-level-3\\">
<a class=\\"sidebar-toc-link\\" href=\\"#qux\\"> <a class=\\"sidebar-toc-link\\" href=\\"#qux\\">
<div class=\\"sidebar-toc-text\\"> <div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2.1.1</span>qux</div> <span class=\\"sidebar-toc-numb\\">2.1.1</span>qux</div>
@ -101,7 +101,7 @@ exports[`Table of contents when \`vector-is-collapse-sections-enabled\` is true
</li> </li>
</ul> </ul>
</li> </li>
<li id=\\"toc-3\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\"> <li id=\\"toc-quux\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a class=\\"sidebar-toc-link\\" href=\\"#quux\\"> <a class=\\"sidebar-toc-link\\" href=\\"#quux\\">
<div class=\\"sidebar-toc-text\\"> <div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">3</span>quux</div> <span class=\\"sidebar-toc-numb\\">3</span>quux</div>

38
tests/jest/tableOfContents.test.js
View file

@ -82,11 +82,11 @@ function mount( templateProps = {} ) {
onToggleClick onToggleClick
} ); } );
fooSection = /** @type {HTMLElement} */ ( document.getElementById( 'toc-1' ) ); fooSection = /** @type {HTMLElement} */ ( document.getElementById( 'toc-foo' ) );
barSection = /** @type {HTMLElement} */ ( document.getElementById( 'toc-2' ) ); barSection = /** @type {HTMLElement} */ ( document.getElementById( 'toc-bar' ) );
bazSection = /** @type {HTMLElement} */ ( document.getElementById( 'toc-2.1' ) ); bazSection = /** @type {HTMLElement} */ ( document.getElementById( 'toc-baz' ) );
quxSection = /** @type {HTMLElement} */ ( document.getElementById( 'toc-2.1.1' ) ); quxSection = /** @type {HTMLElement} */ ( document.getElementById( 'toc-qux' ) );
quuxSection = /** @type {HTMLElement} */ ( document.getElementById( 'toc-3' ) ); quuxSection = /** @type {HTMLElement} */ ( document.getElementById( 'toc-quux' ) );
return toc; return toc;
} }
@ -94,7 +94,7 @@ describe( 'Table of contents', () => {
describe( 'binds event listeners', () => { describe( 'binds event listeners', () => {
test( 'for onHeadingClick', () => { test( 'for onHeadingClick', () => {
const toc = mount(); const toc = mount();
const heading = /** @type {HTMLElement} */ ( document.querySelector( `#toc-1 .${toc.LINK_CLASS}` ) ); const heading = /** @type {HTMLElement} */ ( document.querySelector( `#toc-foo .${toc.LINK_CLASS}` ) );
heading.click(); heading.click();
expect( onToggleClick ).not.toBeCalled(); expect( onToggleClick ).not.toBeCalled();
@ -102,7 +102,7 @@ describe( 'Table of contents', () => {
} ); } );
test( 'for onToggleClick', () => { test( 'for onToggleClick', () => {
const toc = mount(); const toc = mount();
const toggle = /** @type {HTMLElement} */ ( document.querySelector( `#toc-2 .${toc.TOGGLE_CLASS}` ) ); const toggle = /** @type {HTMLElement} */ ( document.querySelector( `#toc-bar .${toc.TOGGLE_CLASS}` ) );
toggle.click(); toggle.click();
expect( onHeadingClick ).not.toBeCalled(); expect( onHeadingClick ).not.toBeCalled();
@ -122,28 +122,28 @@ describe( 'Table of contents', () => {
describe( 'when changing sections', () => { describe( 'when changing sections', () => {
test( 'applies correct class', () => { test( 'applies correct class', () => {
const toc = mount( { 'vector-is-collapse-sections-enabled': true } ); const toc = mount( { 'vector-is-collapse-sections-enabled': true } );
toc.changeActiveSection( 'toc-1' ); toc.changeActiveSection( 'toc-foo' );
expect( fooSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( true ); expect( fooSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( true );
expect( barSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( barSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
expect( bazSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( bazSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
expect( quxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( quxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
expect( quuxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( quuxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
toc.changeActiveSection( 'toc-2' ); toc.changeActiveSection( 'toc-bar' );
expect( fooSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( fooSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
expect( barSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( true ); expect( barSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( true );
expect( bazSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( bazSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
expect( quxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( quxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
expect( quuxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( quuxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
toc.changeActiveSection( 'toc-2.1' ); toc.changeActiveSection( 'toc-baz' );
expect( fooSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( fooSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
expect( barSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( true ); expect( barSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( true );
expect( bazSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( true ); expect( bazSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( true );
expect( quxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( quxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
expect( quuxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( quuxSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
toc.changeActiveSection( 'toc-2.1.1' ); toc.changeActiveSection( 'toc-qux' );
expect( fooSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( fooSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
expect( barSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( true ); expect( barSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( true );
expect( bazSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false ); expect( bazSection.classList.contains( toc.ACTIVE_SECTION_CLASS ) ).toEqual( false );
@ -160,14 +160,14 @@ describe( 'Table of contents', () => {
test( 'expands sections', () => { test( 'expands sections', () => {
const toc = mount(); const toc = mount();
toc.expandSection( 'toc-1' ); toc.expandSection( 'toc-foo' );
expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true ); expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true );
expect( barSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true ); expect( barSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true );
expect( bazSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false ); expect( bazSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false );
expect( quxSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false ); expect( quxSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false );
expect( quuxSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true ); expect( quuxSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true );
toc.expandSection( 'toc-2' ); toc.expandSection( 'toc-bar' );
expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true ); expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true );
expect( barSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true ); expect( barSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true );
expect( bazSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false ); expect( bazSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false );
@ -177,10 +177,10 @@ describe( 'Table of contents', () => {
test( 'toggles expanded sections', () => { test( 'toggles expanded sections', () => {
const toc = mount(); const toc = mount();
toc.toggleExpandSection( 'toc-1' ); toc.toggleExpandSection( 'toc-foo' );
expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false ); expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false );
toc.toggleExpandSection( 'toc-1' ); toc.toggleExpandSection( 'toc-foo' );
expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true ); expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true );
} ); } );
} ); } );
@ -193,14 +193,14 @@ describe( 'Table of contents', () => {
test( 'expands sections', () => { test( 'expands sections', () => {
const toc = mount( { 'vector-is-collapse-sections-enabled': true } ); const toc = mount( { 'vector-is-collapse-sections-enabled': true } );
toc.expandSection( 'toc-1' ); toc.expandSection( 'toc-foo' );
expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true ); expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true );
expect( barSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false ); expect( barSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false );
expect( bazSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false ); expect( bazSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false );
expect( quxSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false ); expect( quxSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false );
expect( quuxSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false ); expect( quuxSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false );
toc.expandSection( 'toc-2' ); toc.expandSection( 'toc-bar' );
expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true ); expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true );
expect( barSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true ); expect( barSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true );
expect( bazSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false ); expect( bazSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false );
@ -210,10 +210,10 @@ describe( 'Table of contents', () => {
test( 'toggles expanded sections', () => { test( 'toggles expanded sections', () => {
const toc = mount( { 'vector-is-collapse-sections-enabled': true } ); const toc = mount( { 'vector-is-collapse-sections-enabled': true } );
toc.toggleExpandSection( 'toc-1' ); toc.toggleExpandSection( 'toc-foo' );
expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true ); expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( true );
toc.toggleExpandSection( 'toc-1' ); toc.toggleExpandSection( 'toc-foo' );
expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false ); expect( fooSection.classList.contains( toc.EXPANDED_SECTION_CLASS ) ).toEqual( false );
} ); } );