Try to make heading-nav-collapsed test more reliable

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.

tests/gui/heading-nav-collapsed.goml

@@ -9,38 +9,39 @@ 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']"
-assert-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item expanded"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item expanded"})
-assert-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
-assert-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "block"})
+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']"
-assert-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
-assert-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
-assert-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "none"})
+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"
-assert-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item expanded"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item expanded"})
-assert-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
-assert-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "block"})
+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
-assert-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
-assert-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
-assert-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "none"})
+wait-for-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "none"})
-assert-css: ("//a[@href='#heading-21']/../following-sibling::ol", {"display": "none"})
+wait-for-css: ("//a[@href='#heading-21']/../following-sibling::ol", {"display": "none"})
-assert-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-211'])", {"class": "header-item"})
-assert-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-2111'])", {"class": "header-item"})
-assert-attribute: ("li:has(> span > a[href='#heading-211'])", {"class": "header-item"})
-assert-attribute: ("li:has(> span > a[href='#heading-2111'])", {"class": "header-item"})
 
 // Scroll to bottom of page
 press-key: 'PageDown'
@@ -48,11 +49,11 @@ 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
-assert-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-12'])", {"class": "header-item"})
-assert-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item expanded"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-21'])", {"class": "header-item expanded"})
-assert-attribute: ("li:has(> span > a[href='#heading-211'])", {"class": "header-item expanded"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-211'])", {"class": "header-item expanded"})
-assert-attribute: ("li:has(> span > a[href='#heading-2111'])", {"class": "header-item expanded"})
+wait-for-attribute: ("li:has(> span > a[href='#heading-2111'])", {"class": "header-item expanded"})
-assert-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "none"})
+wait-for-css: ("//a[@href='#heading-12']/../following-sibling::ol", {"display": "none"})
-assert-css: ("//a[@href='#heading-21']/../following-sibling::ol", {"display": "block"})
+wait-for-css: ("//a[@href='#heading-21']/../following-sibling::ol", {"display": "block"})
-assert-css: ("//a[@href='#heading-211']/../following-sibling::ol", {"display": "block"})
+wait-for-css: ("//a[@href='#heading-211']/../following-sibling::ol", {"display": "block"})
-assert-css: ("//a[@href='#heading-2111']/../following-sibling::ol", {"display": "block"})
+wait-for-css: ("//a[@href='#heading-2111']/../following-sibling::ol", {"display": "block"})