Fix UI test failures for operation category popover
- Click the option checkbox's label instead of the input, as Bootstrap
Material Design restyles checkboxes making the input itself not
interactable in headless Chrome
- Wait for any in-progress accordion transition before opening the target
category in categoryLinkClick. When the search box collapses an open
category and a category link is clicked during that transition,
Bootstrap silently ignores the collapse('show') call
This commit is contained in:
parent
bcf48f51d4
commit
aea2b5fa25
@ -385,13 +385,23 @@ class OperationsWaiter {
|
||||
// any other open category automatically. Calling "show" on an already
|
||||
// open category would toggle-close it mid-transition, so skip it.
|
||||
const categoryElement = document.getElementById(categoryId);
|
||||
if (categoryElement && !categoryElement.classList.contains("show")) {
|
||||
$(categoryElement).collapse("show");
|
||||
}
|
||||
if (!categoryElement) return;
|
||||
|
||||
// Scroll the category into view
|
||||
if (categoryElement) {
|
||||
const showCategory = function() {
|
||||
if (!categoryElement.classList.contains("show")) {
|
||||
$(categoryElement).collapse("show");
|
||||
}
|
||||
categoryElement.scrollIntoView({behavior: "smooth", block: "nearest"});
|
||||
};
|
||||
|
||||
// Bootstrap ignores "show" while another panel in the accordion is still
|
||||
// mid-transition (e.g. a category collapsed by the search box a moment
|
||||
// earlier), so wait for any in-progress transition to finish first.
|
||||
const transitioning = document.querySelector("#categories .collapsing");
|
||||
if (transitioning) {
|
||||
$(transitioning).one("hidden.bs.collapse shown.bs.collapse", showCategory);
|
||||
} else {
|
||||
showCategory();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -286,13 +286,14 @@ module.exports = {
|
||||
browser
|
||||
.expect.element("#catHashing").to.be.visible;
|
||||
|
||||
// Toggle the option off
|
||||
// Toggle the option off. The checkbox input is restyled by Bootstrap
|
||||
// Material Design and is not directly interactable, so click its label.
|
||||
browser
|
||||
.click("#options");
|
||||
|
||||
browser
|
||||
.waitForElementVisible("#options-modal", 1000)
|
||||
.click("#showOpCategories")
|
||||
.click("label[for='showOpCategories']")
|
||||
.pause(500)
|
||||
.click("#options-modal .modal-footer .btn-secondary[data-dismiss='modal']")
|
||||
.waitForElementNotVisible("#options-modal", 1000);
|
||||
@ -315,7 +316,7 @@ module.exports = {
|
||||
browser
|
||||
.click("#options")
|
||||
.waitForElementVisible("#options-modal", 1000)
|
||||
.click("#showOpCategories")
|
||||
.click("label[for='showOpCategories']")
|
||||
.pause(500)
|
||||
.click("#options-modal .modal-footer .btn-secondary[data-dismiss='modal']")
|
||||
.waitForElementNotVisible("#options-modal", 1000);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user