test(VideoLoader): adding e2e tests

e2e/app.po.ts

@@ -12,6 +12,10 @@ export class AppPage {
         .then((posY) => posY === y));
   }
 
+  scrollToBottom() {
+    browser.executeScript(`return window.scrollTo(0, document.documentElement.offsetHeight);`);
+  }
+
   setWindowSize(x: number, y: number) {
     browser.driver.manage().window().setSize(x, y);
     return browser.wait(() =>
@@ -23,6 +27,10 @@ export class AppPage {
     return browser.executeScript(`return { height: window.outerHeight, width: window.outerWidth };`);
   }
 
+  getDocumentHeight() {
+    return browser.executeScript(`return document.documentElement.offsetHeight;`);
+  }
+
   getScrollYPosition() {
     return browser.executeScript('return window.pageYOffset;');
   }
@@ -62,4 +70,25 @@ export class AppPage {
   getBottomFullResCountElement() {
     return element(by.css('.full-res-count'));
   }
+
+  getVideoElement() {
+    return element(by.css('sn-video-loader'));
+  }
+
+  getVideoSrc() {
+    return element(by.css('sn-video-loader video')).getAttribute('src');
+  }
+
+  getVideoElementClass() {
+    return this.getVideoElement().getAttribute('class');
+  }
+
+  isVideoLoaded() {
+    return this.getVideoElementClass()
+      .then((result: string) => result.includes('sn-video-loaded'));
+  }
+
+  waitForVideoLoaded() {
+    return browser.wait(() => this.isVideoLoaded());
+  }
 }

e2e/video-loader.e2e-spec.ts

@@ -0,0 +1,81 @@
+import { AppPage } from './app.po';
+import { browser } from 'protractor';
+import { video } from '../src/app/app-data';
+
+describe('VideoLoader Lib E2E Tests', function () {
+  let page: AppPage;
+
+  const browserWaitTimeout = 10000;
+
+  beforeEach(() => {
+    page = new AppPage();
+    page.navigateTo();
+    page.scrollTo();
+  });
+
+  afterEach(() => {
+    // ensure no errors appear in console
+    browser.manage()
+      .logs()
+      .get('browser')
+      .then((browserLog) => {
+        expect(browserLog).toEqual([]);
+      });
+  });
+
+  describe('video not in viewport', () => {
+    beforeEach(() => page.setWindowSize(400, 580));
+
+    it('should not load video', () => {
+      expect(page.isVideoLoaded()).toBeFalsy();
+    });
+
+  });
+
+  describe('video in viewport', () => {
+    beforeEach(() => page.setWindowSize(400, 580));
+
+    it('should load video when in viewport', () => {
+      expect(page.isVideoLoaded()).toBeFalsy();
+
+      page.scrollToBottom();
+      page.waitForVideoLoaded();
+
+      expect(page.isVideoLoaded()).toBeTruthy();
+      expect(page.getVideoSrc()).toEqual(video.videos[0].url);
+    });
+
+  });
+
+  describe('responsive video', () => {
+
+    it('should load correct video for "xs" device size', () => {
+      page.setWindowSize(400, 580);
+      page.scrollToBottom();
+      page.waitForVideoLoaded();
+
+      expect(page.isVideoLoaded()).toBeTruthy();
+      expect(page.getVideoSrc()).toEqual(video.videos[0].url);
+    });
+
+    it('should load correct video for "md" device size', () => {
+      page.setWindowSize(768, 580);
+      page.scrollToBottom();
+      page.waitForVideoLoaded();
+
+      expect(page.isVideoLoaded()).toBeTruthy();
+      expect(page.getVideoSrc()).toEqual(video.videos[1].url);
+    });
+
+    it('should load correct video for "lg" device size', () => {
+      page.setWindowSize(1024, 580);
+      page.scrollToBottom();
+      page.waitForVideoLoaded();
+
+      expect(page.isVideoLoaded()).toBeTruthy();
+      expect(page.getVideoSrc()).toEqual(video.videos[2].url);
+    });
+
+  });
+
+});