bring back original e2e tests

e2e/app.e2e-spec.ts

@@ -0,0 +1,51 @@
+import {GalleryPage} from './app.po'
+import {browser, protractor} from "protractor"
+
+describe('Gallery', function () {
+  let page: GalleryPage
+
+  beforeEach(() => {
+    page = new GalleryPage()
+  })
+
+  it('should display the first gallery row', () => {
+    page.navigateTo()
+    expect(page.getFirstGalleryRow().isPresent()).toBeTruthy()
+  })
+
+  it('should open the image viewer on click of the first image', () => {
+    page.getFirstImageFromFirstRow().click()
+    expect(page.getImageInsideViewerIfActive(1).isPresent()).toBeTruthy()
+  })
+
+  it('should navigate through the images when using keystrokes', () => {
+    browser.actions().sendKeys(protractor.Key.RIGHT).perform()
+    expect(page.getImageInsideViewerIfActive(2).isPresent()).toBeTruthy()
+  })
+
+  it('should display the interaction elements inside the viewer correctly', () => {
+    expect(page.getExitButton().isPresent()).toBeTruthy()
+
+    // buttons only show on hover
+    browser.actions().mouseMove(page.getImageInsideViewerIfActive(2)).perform()
+    expect(page.getLeftArrowButton().isPresent()).toBeTruthy()
+    expect(page.getRightArrowButton().isPresent()).toBeTruthy()
+  })
+
+  it('should support swiping images', () => {
+    browser.actions()
+      .mouseDown(page.getImageInsideViewerIfActive(2))
+      .mouseMove({x: -150, y: 0})
+      .mouseUp()
+      .perform()
+
+    expect(page.getImageInsideViewerIfActive(3).isPresent()).toBeTruthy()
+  })
+
+  it('should close the viewer on exit', () => {
+    page.getExitButton().click()
+
+    browser.wait(protractor.ExpectedConditions.stalenessOf(page.getImageInsideViewerIfActive(3)), 1000)
+    browser.wait(protractor.ExpectedConditions.stalenessOf(page.getExitButton()), 1000)
+  })
+})

e2e/app.po.ts

@@ -0,0 +1,31 @@
+import { browser, element, by } from 'protractor';
+
+export class GalleryPage {
+  navigateTo() {
+    return browser.get('');
+  }
+
+  getFirstGalleryRow() {
+    return element(by.css('gallery > .galleryContainer > .innerGalleryContainer > .imagerow:nth-child(1)'));
+  }
+
+  getFirstImageFromFirstRow() {
+    return element(by.css('gallery > .galleryContainer > .innerGalleryContainer > .imagerow:nth-child(1) > img:nth-child(1)'));
+  }
+
+  getImageInsideViewerIfActive(id : number) {
+    return element(by.css('viewer > .outerContainer > .imageContainer > div.image.active:nth-child('+id+')'))
+  }
+
+  getExitButton() {
+    return element(by.css('viewer > .outerContainer > .buttonContainer > img.action.close'))
+  }
+
+  getLeftArrowButton() {
+    return element(by.css('viewer > .outerContainer > img.arrow.left'))
+  }
+
+  getRightArrowButton() {
+    return element(by.css('viewer > .outerContainer > img.arrow.right'))
+  }
+}

e2e/tsconfig.e2e.json

@@ -1,13 +1,15 @@
 {
   "extends": "../tsconfig.json",
   "compilerOptions": {
-    "outDir": "../out-tsc/app",
+    "outDir": "../out-tsc/e2e",
     "module": "commonjs",
     "target": "es5",
     "types": [
       "jasmine",
-      "jasminewd2",
       "node"
+    ],
+    "typeRoots": [
+      "../node_modules/@types"
     ]
   }
-}
+}