e2e test for panning on image.

* feat: Pinch events add: tests * feat: Pinch events add: tests * feat: Pinch events add: tests * feat: Pinch events add: tests * cleanup * tests: Use animationTime from OpenSeadragon Options to wait after each action * tests: Added e2e feature * refactor: Moving code for creating viewer to its own service test: Added test for pinch. Not working at the moment test: Fixed 'should create viewer on init' test. Test was testing the viewer not being null, but it was in fact never defined. * added: Added zoom functions to ViewerService * feat: Prevent user from zooming out more than home zoom tests: Added unit tests * Merge: Merging with master and refactoring * test: Use OpenSeadragons own raiseEvent in our tests to test pinch test: Cleaning up e2e test. Setting @ignore on tests where we need to find out how to use Actions * test: Using isPresent instead of isDisplayed. Safari doesn't seem to like it. * test(pan): e2e test for panning on image e2e test for panning on image. Mouse actions do not work on Chrome (http://www.protractortest.org/#/api?view=webdriver.WebDriver.prototype.actions) * refactor: typing on point att * test(pan): remove ignore * refactor: Moved inline css code into .scss file * refactor: Use await instead of .then() * Add: Added Clickservice. Copy from https://github.com/ooystein/ngx-mime/blob/NGXMIM-5-View-Switch/src/lib/src/core/click/click.service.ts feat: Double click to zoom in. When zoomed in, double click goes back to home zoom * cleanup * Replaced osd toolbar * test: Changed tests to use new buttons for navigation * fix: Lint error. Line too long * test: renamed annotations to match protractor config * test: waitForElementToBeClickable function under Utils * test: Scaling browser to 100% before clicking on zoom buttons. IE11 seem to get wrong position of elements when scaling is not 100%. * test: Trying to use sendKeys() instead of click() for resolving issues with IE not clicking on buttons * style: intl - I18N - Aria labels on nav buttons * test: Using sendKeys() instead of click() for IE11 * fix: Missing provider in previous patch * fix: Setting clickToZoom and dblClickToZoom to false. This prevent events to be triggered twice when overriding OSD events removed: Don't need to override pinch event since we can restrict zoom level with minZoomImageRatio added: E2e test for clicking zoom out when already zoomed in. test: E2e: Shortening number of decimals in zoomLevel when checking zoom level is home test: Unit: Setting home zoom before pinching * cleanup * remove: Removed rxjs import from service as its imported in another module test: Added rxjs import to test * test: removing And step from background and moving the expect to the Given step * fix: Changed ControlAnchor to Enum per openSeadragon docs and added values * refactor: Removing viewer.feature as this test is done elsewhere * refactor: Removing NavImages since we dont't use it * fix: Empty line between external and internal imports * test: Removing unneeded comments * fix: Removing unused import * refactor: fix after merge * feat: headless testing in chrome Karma and local e2e running Headless Chrome * fix: async test * test: timeout * test: * test: max instances * test: selenium version * test: upgraded chromedriver * test * Update viewer-page.steps.ts * test * Update viewer.po.ts * Update protractor.conf.js * Update viewer.po.ts * Update protractor.conf.js * Update protractor.conf.js * Update protractor.conf.js * test: added karma test for panning * refactor: linting * test: setting browser width and height
NationalLibraryOfNorway · Sep 4, 2017 · 099d8b0 · 099d8b0
1 parent cb847b9
commit 099d8b0
Show file tree

Hide file tree

Showing 6 changed files with 83 additions and 17 deletions.
diff --git a/integration/e2e/features/pan-on-image.feature b/integration/e2e/features/pan-on-image.feature
@@ -0,0 +1,14 @@
+Feature: Pan on image 
+  In order to view high quality images of digitised items in great detail 
+  As a user 
+  I want to be able to pan in the image 
+
+  Background: 
+    Given the viewer is opened with a publication 
+
+  @mobile @desktop 
+  Scenario: Panning on image 
+    Given the viewer is in page view 
+      And the view is zoomed in 
+    When the user is dragging 
+    Then the image is moved inside the view
diff --git a/integration/e2e/pages/viewer.po.ts b/integration/e2e/pages/viewer.po.ts
@@ -57,6 +57,10 @@ export class ViewerPage {
     return browser.executeScript('return window.openSeadragonViewer.viewport.getMaxZoom();');
   }
 
+  getCenter(): promise.Promise<Point> {
+    return browser.executeScript('return window.openSeadragonViewer.viewport.getCenter(false);');
+  }
+
   getBounds(): promise.Promise<any> {
     return browser.executeScript('return window.openSeadragonViewer.viewport.getBounds(true);');
   }
@@ -77,6 +81,10 @@ export class ViewerPage {
       .perform();
   }
 
+  pan(point: Point): promise.Promise<any> {
+    return browser.executeScript(`window.openSeadragonViewer.viewport.panTo({x: ${point.x}, y: ${point.y}});`);
+  }
+
   async zoomIn(): Promise<void> {
     const newZoomLevel = (await this.getZoomLevel()) * 2;
     await browser.executeScript('window.openSeadragonViewer.viewport.zoomTo(' + newZoomLevel + ');');
@@ -122,3 +130,8 @@ export class ViewerPage {
     await browser.sleep((await this.getAnimationTime()) * 100);
   }
 }
+
+export interface Point {
+  x: number;
+  y: number;
+}
diff --git a/integration/e2e/step-definitions/pan.steps.ts b/integration/e2e/step-definitions/pan.steps.ts
@@ -0,0 +1,19 @@
+import { ViewerPage, Point } from '../pages/viewer.po';
+import { defineSupportCode } from 'cucumber';
+import { expect } from '../helpers/chai-imports';
+
+defineSupportCode(function ({ Given, When, Then }) {
+  const page = new ViewerPage();
+  let previousCenter: Point;
+
+  When(/^the user is dragging$/, async () => {
+    previousCenter = await page.getCenter();
+    await page.pan({x: 150, y: 150});
+    await page.waitForAnimation();
+  });
+
+  Then(/^the image is moved inside the view$/, async () => {
+    expect((await page.getCenter()).x).to.be.greaterThan(previousCenter.x);
+  });
+
+});
diff --git a/integration/e2e/step-definitions/viewer-page.steps.ts b/integration/e2e/step-definitions/viewer-page.steps.ts
@@ -17,4 +17,9 @@ defineSupportCode(function ({ Given, Then }) {
   Given(/^the viewer is opened with a publication with licenses associated with it$/, async () => {
     await page.open();
   });
+
+  Given(/^the viewer is in page view$/, async () => {
+    expect(true).to.be.true;
+  });
+
 });
diff --git a/integration/protractor.conf.js b/integration/protractor.conf.js
@@ -36,7 +36,9 @@ const config = {
     tags: ['~@Ignore']
   },
   onPrepare: function() {
-    browser.manage().window().maximize();
+    const width = 1600;
+    const height = 1200;
+    browser.driver.manage().window().setSize(width, height);
   },
   afterLaunch: function () {
     multiCucumberHTLMReporter.generate({

diff --git a/src/lib/src/viewer/viewer.component.spec.ts b/src/lib/src/viewer/viewer.component.spec.ts
@@ -18,6 +18,7 @@ import { ViewerService } from '../core/viewer-service/viewer.service';
 import { MimeViewerIntl } from '../core/viewer-intl';
 import { ClickService } from '../core/click/click.service';
 import 'openseadragon';
+import '../rxjs-extension';
 
 describe('ViewerComponent', function () {
   let de: DebugElement;
@@ -29,7 +30,7 @@ describe('ViewerComponent', function () {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA],
       imports: [
         HttpClientTestingModule,
         NoopAnimationsModule,
@@ -43,7 +44,7 @@ describe('ViewerComponent', function () {
       ],
       providers: [
         ViewerService,
-        {provide: IiifManifestService, useClass: IiifManifestServiceStub},
+        { provide: IiifManifestService, useClass: IiifManifestServiceStub },
         MimeResizeService,
         MimeViewerIntl,
         ClickService
@@ -109,28 +110,40 @@ describe('ViewerComponent', function () {
     pending('Set to pending until we find a way to perform pinch event');
   }));
 
+  it('should move image inside the view when user is panning', inject([ViewerService], (viewerService: ViewerService) => {
+    // comp.ngOnInit();
+    // viewerService.zoomTo(2);
+    // const viewer = viewerService.getViewer();
+    // const previousCenter = viewer.viewport.getCenter(false);
+    //
+    // viewer.raiseEvent('pan', {x: 150, y: 150});
+    //
+    // expect(viewerService.getCenter().x).toBeGreaterThan(previousCenter.x);
+    pending('Set to pending until we find a way to perform pan event');
+  }));
+
   function pinchOut(viewerService: ViewerService) {
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 40, lastDistance: 40});
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 50, lastDistance: 40});
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 60, lastDistance: 50});
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 70, lastDistance: 60});
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 80, lastDistance: 70});
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 90, lastDistance: 80});
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 40, lastDistance: 40 });
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 50, lastDistance: 40 });
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 60, lastDistance: 50 });
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 70, lastDistance: 60 });
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 80, lastDistance: 70 });
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 90, lastDistance: 80 });
   }
 
   function pinchIn(viewerService: ViewerService) {
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 90, lastDistance: 90});
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 80, lastDistance: 90});
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 70, lastDistance: 80});
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 60, lastDistance: 70});
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 50, lastDistance: 60});
-    viewerService.getViewer().raiseEvent('canvas-pinch', {distance: 40, lastDistance: 50});
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 90, lastDistance: 90 });
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 80, lastDistance: 90 });
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 70, lastDistance: 80 });
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 60, lastDistance: 70 });
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 50, lastDistance: 60 });
+    viewerService.getViewer().raiseEvent('canvas-pinch', { distance: 40, lastDistance: 50 });
   }
 });
 
 @Component({
-  selector : `test-component`,
-  template : `<mime-viewer [manifestUri]="manifestUri"></mime-viewer>`
+  selector: `test-component`,
+  template: `<mime-viewer [manifestUri]="manifestUri"></mime-viewer>`
 })
 export class TestHostComponent {
   @ViewChild(ViewerComponent)