mediawiki-skins-Vector/tests/jest/__snapshots__/tableOfContents.test.js.snap
bwang cb64e8f7ba Use PinnableHeader in the TOC all the time
[Visual Changes in this patch]
This patch introduces changes to whitespace inside the Mustache template
which corresponds to an HTML change, resulting
33 minor changes in pixel, the spacing of the ToC label shifts by
1 pixel

- Remove page tools feature flag from TOC
- Remove usage of .vector-toc-collapsed and .vector-toc-not-collapsed
- Remove now unused `moveToc()`
- Update jest tests to use PinnableHeader

Bug: T318013
Change-Id: I82f23e69b0249c844af9e45fec342217a0755893
2022-11-30 01:09:43 +00:00

199 lines
8.7 KiB
Plaintext

// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Table of contents re-rendering re-renders toc when wikipage.tableOfContents hook is fired with empty sections 1`] = `
"<nav id=\\"mw-panel-toc\\" class=\\"sidebar-toc\\" role=\\"navigation\\" aria-label=\\"\\" data-event-name=\\"ui.sidebar-toc\\"></nav>
"
`;
exports[`Table of contents re-rendering re-renders toc when wikipage.tableOfContents hook is fired with sections 1`] = `
"<nav id=\\"mw-panel-toc\\" class=\\"sidebar-toc\\" role=\\"navigation\\" aria-label=\\"\\" data-event-name=\\"ui.sidebar-toc\\"><nav id=\\"mw-panel-toc\\" class=\\"sidebar-toc\\" role=\\"navigation\\" aria-label=\\"Contents\\" data-event-name=\\"ui.sidebar-toc\\">
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-name=\\"vector-toc\\">
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\">move to sidebar</button>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\">hide</button>
</div>
<ul class=\\"sidebar-toc-contents\\" id=\\"mw-panel-toc-list\\">
<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a href=\\"#\\" class=\\"sidebar-toc-link\\">
<div class=\\"sidebar-toc-text\\">Beginning</div>
</a>
</li>
<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\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">1</span>foo</div>
</a>
<ul id=\\"toc-foo-sublist\\" class=\\"sidebar-toc-list\\">
</ul>
</li>
<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\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2</span>bar</div>
</a>
<button aria-controls=\\"toc-bar-sublist\\" class=\\"mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small sidebar-toc-toggle\\" aria-expanded=\\"true\\">
Toggle bar subsection
</button>
<ul id=\\"toc-bar-sublist\\" class=\\"sidebar-toc-list\\">
<li id=\\"toc-baz\\" class=\\"sidebar-toc-list-item sidebar-toc-level-2\\">
<a class=\\"sidebar-toc-link\\" href=\\"#baz\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2.1</span>baz</div>
</a>
<ul id=\\"toc-baz-sublist\\" class=\\"sidebar-toc-list\\">
<li id=\\"toc-qux\\" class=\\"sidebar-toc-list-item sidebar-toc-level-3\\">
<a class=\\"sidebar-toc-link\\" href=\\"#qux\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2.1.1</span>qux</div>
</a>
<ul id=\\"toc-qux-sublist\\" class=\\"sidebar-toc-list\\">
</ul>
</li>
</ul>
</li>
</ul>
</li>
<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\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">3</span>quux</div>
</a>
<ul id=\\"toc-quux-sublist\\" class=\\"sidebar-toc-list\\">
</ul>
</li>
<li id=\\"toc-bat\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1 sidebar-toc-list-item-expanded\\">
<a class=\\"sidebar-toc-link\\" href=\\"#bat\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">4</span>bat</div>
</a>
<ul id=\\"toc-bat-sublist\\" class=\\"sidebar-toc-list\\">
</ul>
</li>
</ul>
</nav>
</nav>
"
`;
exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\` is false 1`] = `
"<nav id=\\"mw-panel-toc\\" class=\\"sidebar-toc\\" role=\\"navigation\\" aria-label=\\"\\" data-event-name=\\"ui.sidebar-toc\\">
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-name=\\"vector-toc\\">
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\">move to sidebar</button>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\">hide</button>
</div>
<ul class=\\"sidebar-toc-contents\\" id=\\"mw-panel-toc-list\\">
<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a href=\\"#\\" class=\\"sidebar-toc-link\\">
<div class=\\"sidebar-toc-text\\">Beginning</div>
</a>
</li>
<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\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">1</span>foo</div>
</a>
<ul id=\\"toc-foo-sublist\\" class=\\"sidebar-toc-list\\">
</ul>
</li>
<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\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2</span>bar</div>
</a>
<button aria-controls=\\"toc-bar-sublist\\" class=\\"mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small sidebar-toc-toggle\\" aria-expanded=\\"true\\">
Toggle bar subsection
</button>
<ul id=\\"toc-bar-sublist\\" class=\\"sidebar-toc-list\\">
<li id=\\"toc-baz\\" class=\\"sidebar-toc-list-item sidebar-toc-level-2\\">
<a class=\\"sidebar-toc-link\\" href=\\"#baz\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2.1</span>baz</div>
</a>
<ul id=\\"toc-baz-sublist\\" class=\\"sidebar-toc-list\\">
<li id=\\"toc-qux\\" class=\\"sidebar-toc-list-item sidebar-toc-level-3\\">
<a class=\\"sidebar-toc-link\\" href=\\"#qux\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2.1.1</span>qux</div>
</a>
<ul id=\\"toc-qux-sublist\\" class=\\"sidebar-toc-list\\">
</ul>
</li>
</ul>
</li>
</ul>
</li>
<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\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">3</span>quux</div>
</a>
<ul id=\\"toc-quux-sublist\\" class=\\"sidebar-toc-list\\">
</ul>
</li>
</ul>
</nav>
"
`;
exports[`Table of contents renders when \`vector-is-collapse-sections-enabled\` is true 1`] = `
"<nav id=\\"mw-panel-toc\\" class=\\"sidebar-toc\\" role=\\"navigation\\" aria-label=\\"\\" data-event-name=\\"ui.sidebar-toc\\">
<div class=\\"vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned\\" data-name=\\"vector-toc\\">
<h2 class=\\"vector-pinnable-header-label\\">Contents</h2>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-pin-button\\">move to sidebar</button>
<button class=\\"vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button\\">hide</button>
</div>
<ul class=\\"sidebar-toc-contents\\" id=\\"mw-panel-toc-list\\">
<li id=\\"toc-mw-content-text\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a href=\\"#\\" class=\\"sidebar-toc-link\\">
<div class=\\"sidebar-toc-text\\">Beginning</div>
</a>
</li>
<li id=\\"toc-foo\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a class=\\"sidebar-toc-link\\" href=\\"#foo\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">1</span>foo</div>
</a>
<ul id=\\"toc-foo-sublist\\" class=\\"sidebar-toc-list\\">
</ul>
</li>
<li id=\\"toc-bar\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a class=\\"sidebar-toc-link\\" href=\\"#bar\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2</span>bar</div>
</a>
<button aria-controls=\\"toc-bar-sublist\\" class=\\"mw-ui-icon mw-ui-icon-wikimedia-expand mw-ui-icon-small sidebar-toc-toggle\\" aria-expanded=\\"false\\">
Toggle bar subsection
</button>
<ul id=\\"toc-bar-sublist\\" class=\\"sidebar-toc-list\\">
<li id=\\"toc-baz\\" class=\\"sidebar-toc-list-item sidebar-toc-level-2\\">
<a class=\\"sidebar-toc-link\\" href=\\"#baz\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2.1</span>baz</div>
</a>
<ul id=\\"toc-baz-sublist\\" class=\\"sidebar-toc-list\\">
<li id=\\"toc-qux\\" class=\\"sidebar-toc-list-item sidebar-toc-level-3\\">
<a class=\\"sidebar-toc-link\\" href=\\"#qux\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">2.1.1</span>qux</div>
</a>
<ul id=\\"toc-qux-sublist\\" class=\\"sidebar-toc-list\\">
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id=\\"toc-quux\\" class=\\"sidebar-toc-list-item sidebar-toc-level-1\\">
<a class=\\"sidebar-toc-link\\" href=\\"#quux\\">
<div class=\\"sidebar-toc-text\\">
<span class=\\"sidebar-toc-numb\\">3</span>quux</div>
</a>
<ul id=\\"toc-quux-sublist\\" class=\\"sidebar-toc-list\\">
</ul>
</li>
</ul>
</nav>
"
`;