test: e2e demo tests fail on small screen (ng-bootstrap#3639)

gpolychronis · Mar 11, 2020 · fdba58a · fdba58a
1 parent b429418
commit fdba58a
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/demo/src/app/components/components.e2e-spec.ts b/demo/src/app/components/components.e2e-spec.ts
@@ -1,44 +1,49 @@
-import { browser } from 'protractor';
-import { getLinkElement, getComponentTabsLinks, getCodeToggleElement, getCodeElements } from '../tools.po';
+import {browser} from 'protractor';
+import {
+  getLinkElement,
+  getComponentTabsLinks,
+  getCodeToggleElement,
+  getCodeElements,
+  scrollIntoView
+} from '../tools.po';
 
 
 
 describe(`Components`, () => {
 
-  beforeAll(async() => {
-    await getLinkElement(`components`).click();
-  });
+  beforeAll(async() => { await getLinkElement(`components`).click(); });
 
   const components = [
-    'accordion', 'alert', 'buttons', 'carousel', 'collapse', 'datepicker', 'dropdown',
-    'modal', 'pagination', 'popover', 'progressbar', 'rating', 'table',
-    'tabset', 'timepicker', 'toast', 'tooltip', 'typeahead'
+    'accordion', 'alert', 'buttons', 'carousel', 'collapse', 'datepicker', 'dropdown', 'modal', 'pagination', 'popover',
+    'progressbar', 'rating', 'table', 'tabset', 'timepicker', 'toast', 'tooltip', 'typeahead'
   ];
   components.forEach((component) => {
     describe(`${component} page`, () => {
 
 
       beforeAll(async() => {
-        await getLinkElement(`components/${component}`).click();
+        const selector = `components/${component}`;
+        await scrollIntoView(`a[href="#/${selector}"]`);
+        await getLinkElement(selector).click();
       });
 
-      afterAll(async () => {
+      afterAll(async() => {
         const browserLog = await browser.manage().logs().get('browser');
         if (browserLog.length > 0) {
           console.error(browserLog);
           fail(`Unexpected console messages found`);
         }
       });
 
-      it(`should display the tabs`, async () => {
+      it(`should display the tabs`, async() => {
         const links = getComponentTabsLinks(component);
         const nbTabs = await links.count();
         for (let i = 0; i < nbTabs; i++) {
           await links.get(i).click();
         }
       });
 
-      it(`should display code samples`, async () => {
+      it(`should display code samples`, async() => {
         await getLinkElement(`components/${component}/examples`).click();
 
         const initialCodeElements = await getCodeElements().count();

diff --git a/demo/src/app/tools.po.ts b/demo/src/app/tools.po.ts
@@ -1,4 +1,4 @@
-import { $, $$ } from 'protractor';
+import {$, $$, browser} from 'protractor';
 
 export const getLinkElement = (link) => {
   return $(`a[href="#/${link}"]`);
@@ -16,6 +16,8 @@ export const getCodeElements = () => {
   return $$(`code.language-html`);
 };
 
+export const scrollIntoView = (selector) => {
+  return browser.executeScript(function(_selector) { document.querySelector(_selector).scrollIntoView(); }, selector);
 
-
-
+  return $$(`code.language-html`);
+};