This test seems to be a little flaky. This tries to make it more reliable by using `wait-for-` commands instead of `assert-`. My guess is that clicking on an element doesn't necessarily wait for all the javascript code to finish and the DOM to be done updating.
59 lines
5.4 KiB
Text
59 lines
5.4 KiB
Text
// Tests for collapsed heading sidebar navigation.
|
|
|
|
set-window-size: (1400, 800)
|
|
go-to: |DOC_PATH| + "heading-nav/collapsed.html"
|
|
|
|
assert-count: (".header-item", 11)
|
|
assert-count: (".current-header", 1)
|
|
assert-text: (".current-header", "Heading 1")
|
|
// Collapsed elements do not have "expanded" class.
|
|
assert-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
|
|
assert-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
|
|
assert-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "none"})
|
|
assert-css: ("//a[@href='#heading-21']/../following-sibling::ol", {"display": "none"})
|
|
|
|
assert-property: ("div.on-this-page", {"innerHTML": '<ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-1" class="header-in-summary current-header">Heading 1</a></span><ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-11" class="header-in-summary">Heading 1.1</a></span></li><li class="header-item"><span class="chapter-link-wrapper"><a href="#heading-12" class="header-in-summary">Heading 1.2</a><a class="chapter-fold-toggle header-toggle"><div>❱</div></a></span><ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-121" class="header-in-summary">Heading 1.2.1</a></span></li><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-122" class="header-in-summary">Heading 1.2.2</a></span></li></ol></li><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-13" class="header-in-summary">Heading 1.3</a></span></li></ol></li><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-2" class="header-in-summary">Heading 2</a></span><ol class="section"><li class="header-item"><span class="chapter-link-wrapper"><a href="#heading-21" class="header-in-summary">Heading 2.1</a><a class="chapter-fold-toggle header-toggle"><div>❱</div></a></span><ol class="section"><li class="header-item"><span class="chapter-link-wrapper"><a href="#heading-211" class="header-in-summary">Heading 2.1.1</a><a class="chapter-fold-toggle header-toggle"><div>❱</div></a></span><ol class="section"><li class="header-item"><span class="chapter-link-wrapper"><a href="#heading-2111" class="header-in-summary">Heading 2.1.1.1</a><a class="chapter-fold-toggle header-toggle"><div>❱</div></a></span><ol class="section"><li class="header-item expanded"><span class="chapter-link-wrapper"><a href="#heading-21111" class="header-in-summary">Heading 2.1.1.1.1</a></span></li></ol></li></ol></li></ol></li></ol></li></ol>'})
|
|
|
|
// Click 1.2, expands it.
|
|
click: "a.header-in-summary[href='#heading-12']"
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item expanded"})
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
|
|
wait-for-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "block"})
|
|
|
|
// Click 1.1, should collapse it.
|
|
click: "a.header-in-summary[href='#heading-11']"
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
|
|
wait-for-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "none"})
|
|
|
|
// Click the chevron, should expand it.
|
|
click: "a.header-in-summary[href='#heading-12'] ~ a.header-toggle"
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item expanded"})
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
|
|
wait-for-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "block"})
|
|
|
|
assert-css: ("//a[@href='#heading-21']/../following-sibling::ol", {"display": "none"})
|
|
// Click 1.3
|
|
click: "a.header-in-summary[href='#heading-13']"
|
|
// Everything should be collapsed
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
|
|
wait-for-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "none"})
|
|
wait-for-css: ("//a[@href='#heading-21']/../following-sibling::ol", {"display": "none"})
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-211'])", {"class": "header-item"})
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-2111'])", {"class": "header-item"})
|
|
|
|
// Scroll to bottom of page
|
|
press-key: 'PageDown'
|
|
press-key: 'PageDown'
|
|
press-key: 'PageDown'
|
|
press-key: 'PageDown'
|
|
// 2.1.1.1.1 should be visible, and all the chevrons should be open, and expanded should be on each one
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item expanded"})
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-211'])", {"class": "header-item expanded"})
|
|
wait-for-attribute: ("li:has(> span > a[href='#heading-2111'])", {"class": "header-item expanded"})
|
|
wait-for-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "none"})
|
|
wait-for-css: ("//a[@href='#heading-21']/../following-sibling::ol", {"display": "block"})
|
|
wait-for-css: ("//a[@href='#heading-211']/../following-sibling::ol", {"display": "block"})
|
|
wait-for-css: ("//a[@href='#heading-2111']/../following-sibling::ol", {"display": "block"})
|