Bug 1774524: Add behat step for scrolling element top to center of viewport

This allows to get an element out of been hidden by a topbar menu

Change-Id: Ib6b8f704919ac141e7170e10ad25e247e645b16d
Signed-off-by: Robert Lyon <robertl@catalyst.net.nz>
(cherry picked from commit b22a6c43)

htdocs/testing/frameworks/behat/classes/BehatGeneral.php

@@ -424,6 +424,36 @@ class BehatGeneral extends BehatBase {
         $node->click();
     }
 
+    /**
+     * Check if the page contains the specified text within viewport
+     *
+     * @Then I should see :text in :element on the screen
+     */
+    public function i_see_in_viewport($text, $element) {
+        $textliteral = $this->escaper->escapeLiteral($text);
+        $exception = new ElementNotFoundException($this->getSession(), 'text', null, 'the element "' . $element . '"');
+        $xpath = "//" . $element . "[contains(normalize-space(.), " . $textliteral . ")]";
+        $node = $this->find('xpath', $xpath, $exception);
+        $this->ensure_node_is_visible($node);
+        // now that we know it exists on the page and is not a 'hidden' element
+        // we check if it is within the viewport
+        $textliteraljs = $this->escapeDoubleQuotes($textliteral);
+        $jscode = <<<EOF
+(function isScrolledIntoView() {
+    var elem = jQuery("$element:contains($textliteraljs)")[0];
+    var docViewTop = jQuery(window).scrollTop();
+    var docViewBottom = docViewTop + jQuery(window).height();
+    var elemTop = jQuery(elem).offset().top;
+    var elemBottom = elemTop + jQuery(elem).height();
+    return (docViewBottom >= elemTop && docViewTop <= elemBottom);
+})();
+EOF;
+        $result = $this->getSession()->evaluateScript("return $jscode");
+        if (!$result) {
+            throw new Exception("Element $element containing $text not within the viewport.");
+        }
+    }
+
     /**
      * Checks the list/table row containing the specified text.
      *
@@ -1517,6 +1547,32 @@ JS;
         }
     }
 
+/**
+ * Scroll element into view and align top of element with the center of the visible area.
+ *
+ * @When I scroll to the center of id :id
+ *
+ */
+    public function i_scroll_into_view_center($id) {
+        $function = <<<JS
+          (function(){
+              var elem = document.getElementById("$id");
+              var elementRect = elem.getBoundingClientRect();
+              var absoluteElementTop = elementRect.top + window.pageYOffset;
+              var middle = absoluteElementTop - (window.innerHeight / 2);
+              window.scrollTo(0, middle);
+              return 1;
+          })()
+JS;
+        try {
+            $this->getSession()->wait(5000, $function);
+        }
+        catch(Exception $e) {
+            throw new \Exception("scrollIntoView failed");
+        }
+    }
+
+
 /**
  * Check if images exist in the block given its title
  *

test/behat/features/site_content/help_icon.feature

@@ -92,24 +92,27 @@ Scenario: Showing correct external manual help file for mahara page
   And I choose "Pages and collections" in "Portfolio" from main menu
   And I follow "Help" in the ".footer-nav" "css_element"
   And I switch to the new window
-  And I should see "5.1.1. Overview page"
+  And I scroll to the center of id "overview-page"
+  And I should see "5.1.1. Overview page" in "h2" on the screen
   And I switch to the main window
   When I am on homepage
   And I choose "Pages and collections" in "Institutions" from administration menu
   And I follow "Help" in the ".footer-nav" "css_element"
   And I switch to the new window
-  And I should see "10.6.12. Institution pages and collections"
+  And I scroll to the center of id "institution-pages"
+  And I should see "10.6.12. Institution pages and collections" in "h2" on the screen
   And I switch to the main window
   When I am on homepage
   And I choose "Pages and collections" in "Configure site" from administration menu
   And I follow "Help" in the ".footer-nav" "css_element"
   And I switch to the new window
-  And I should see "10.3.7. Site pages and collections"
+  And I scroll to the center of id "site-pages-and-collections"
+  And I should see "10.3.7. Site pages and collections" in "h2" on the screen
   And I switch to the main window
   When I am on homepage
   And I follow "GroupA"
   And I follow "Pages and collections (tab)"
   And I follow "Help" in the ".footer-nav" "css_element"
   And I switch to the new window
-  And I should see "6.4.4. Pages and collections"
+  And I should see "6.4.4. Pages and collections" in "h2" on the screen
   And I switch to the main window