From 7f15ee6137f8eef6fdd9f87d386a3c6fbc02463a Mon Sep 17 00:00:00 2001
From: miller45 <rklein@rosen-group.com>
Date: Thu, 22 Aug 2019 15:21:10 +0200
Subject: [PATCH 1/4] explicit css classes for modals medial querys for larger
 (screenshot) modal dialogs

---
 lib/assets/bootstrap.css      | 11 +++++++++++
 lib/assets/main.css           |  4 ----
 lib/pbr-screenshot-modal.html |  2 +-
 lib/pbr-stack-modal.html      |  2 +-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/lib/assets/bootstrap.css b/lib/assets/bootstrap.css
index 8787780..b8d5d1c 100644
--- a/lib/assets/bootstrap.css
+++ b/lib/assets/bootstrap.css
@@ -5990,6 +5990,17 @@ button.close {
         width: 900px;
     }
 }
+@media (min-width: 1200px) {
+    .modal-lg {
+        width: 1100px;
+    }
+}
+@media (min-width: 1600px) {
+    .modal-lg {
+        width: 1250px;
+    }
+}
+
 .tooltip {
     position: absolute;
     z-index: 1070;
diff --git a/lib/assets/main.css b/lib/assets/main.css
index 8f5f36c..3eed79f 100644
--- a/lib/assets/main.css
+++ b/lib/assets/main.css
@@ -6,10 +6,6 @@ h2 {
   margin-top: 0;
 }
 
-.modal-lg {
-    width: 95%;
-}
-
 .highlight {
     background-color: #ffd600;
 }
diff --git a/lib/pbr-screenshot-modal.html b/lib/pbr-screenshot-modal.html
index be93e3e..750c489 100644
--- a/lib/pbr-screenshot-modal.html
+++ b/lib/pbr-screenshot-modal.html
@@ -1,6 +1,6 @@
 <div class="modal" id="imageModal{{$ctrl.index}}" tabindex="-1" role="dialog"
      aria-labelledby="imageModalLabel{{$ctrl.index}}" ng-keydown="$ctrl.updateSelectedModal($event,$ctrl.index)">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-lg m-screenhot-modal" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
diff --git a/lib/pbr-stack-modal.html b/lib/pbr-stack-modal.html
index 05054fb..c13ef6b 100644
--- a/lib/pbr-stack-modal.html
+++ b/lib/pbr-stack-modal.html
@@ -1,6 +1,6 @@
 <div class="modal" id="modal{{$ctrl.index}}" tabindex="-1" role="dialog"
      aria-labelledby="stackModalLabel{{$ctrl.index}}">
-    <div class="modal-dialog modal-lg" role="document">
+    <div class="modal-dialog modal-lg m-stack-modal" role="document">
         <div class="modal-content">
             <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">

From 5ec0d48f90d6d9b6766b060c4249b48d748fe41e Mon Sep 17 00:00:00 2001
From: miller45 <rklein@rosen-group.com>
Date: Thu, 22 Aug 2019 16:04:25 +0200
Subject: [PATCH 2/4] e2e configuration with useAjax e2e spec with third
 screenshot and one nested log

---
 examples/Gruntfile.js                        |   2 +-
 examples/protractor.jasmine2-useajax.conf.js | 135 +++++++++++++++++++
 examples/specs/example_spec.js               |   6 +-
 3 files changed, 141 insertions(+), 2 deletions(-)
 create mode 100644 examples/protractor.jasmine2-useajax.conf.js

diff --git a/examples/Gruntfile.js b/examples/Gruntfile.js
index af0fc3a..3eb5c42 100644
--- a/examples/Gruntfile.js
+++ b/examples/Gruntfile.js
@@ -33,7 +33,7 @@ module.exports = function (grunt) {
         protractor: {
             options: {
                 keepAlive: true,
-                configFile: "protractor.jasmine2.conf.js"
+                configFile: "protractor.jasmine2-useajax.conf.js"
             },
             singlerun: {},
             auto: {
diff --git a/examples/protractor.jasmine2-useajax.conf.js b/examples/protractor.jasmine2-useajax.conf.js
new file mode 100644
index 0000000..80c853a
--- /dev/null
+++ b/examples/protractor.jasmine2-useajax.conf.js
@@ -0,0 +1,135 @@
+var HtmlReporter = require('protractor-beautiful-reporter');
+var path = require('path');
+
+// ----- Config example for Jasmine 2 -----
+
+exports.config = {
+    // ----- How to setup Selenium -----
+    //
+    // There are three ways to specify how to use Selenium. Specify one of the
+    // following:
+    //
+    // 1. seleniumServerJar - to start Selenium Standalone locally.
+    // 2. seleniumAddress - to connect to a Selenium server which is already
+    //    running.
+    // 3. sauceUser/sauceKey - to use remote Selenium servers via SauceLabs.
+
+    // The location of the selenium standalone server .jar file.
+    //seleniumServerJar: 'node_modules/protractor/selenium/selenium-server-standalone-2.37.0.jar',
+
+    // Address of selenium server (before running protractor, run "webdriver-manager start" to start the Selenium server)
+    seleniumAddress: process.env.SELENIUMSERVER ? process.env.SELENIUMSERVER : 'http://localhost:4444/wd/hub',
+
+    // The port to start the selenium server on, or null if the server should
+    // find its own unused port.
+    seleniumPort: null,
+
+    /* direct connect on my local system*/
+    directConnect:!!process.env.CHROMIUM_BIN,
+
+    // Chromedriver location is used to help the selenium standalone server
+    // find chromedriver. This will be passed to the selenium jar as
+    // the system property webdriver.chrome.driver. If null, selenium will
+    // attempt to find chromedriver using PATH.
+    //chromeDriver: 'node_modules/protractor/selenium/chromedriver',
+
+    // Additional command line options to pass to selenium. For example,
+    // if you need to change the browser timeout, use
+    // seleniumArgs: ['-browserTimeout=60'],
+    seleniumArgs: [],
+
+    // If sauceUser and sauceKey are specified, seleniumServerJar will be ignored.
+    // The tests will be run remotely using SauceLabs.
+    sauceUser: null,
+    sauceKey: null,
+
+    // ----- What tests to run -----
+    //
+    // Spec patterns are relative to the location of this config.
+    specs: [
+        './specs/*.js'
+    ],
+
+    // ----- Capabilities to be passed to the webdriver instance ----
+    //
+    // For a full list of available capabilities, see
+    // https://code.google.com/p/selenium/wiki/DesiredCapabilities
+    // and
+    // https://code.google.com/p/selenium/source/browse/javascript/webdriver/capabilities.js
+    capabilities:!!process.env.CHROMIUM_BIN?{
+        'browserName': 'chrome',
+        'applicationName': 'chromium',
+        'chromeOptions': {
+            'binary': process.env.CHROMIUM_BIN,
+            'args': ['--lang=en',
+                '--window-size=1680,1050']
+        }
+    }:{
+        browserName: 'chrome',
+        logName: 'Chrome - English',
+        version: '',
+        platform: 'ANY',
+        shardTestFiles: false,
+        maxInstances: 2,
+
+        chromeOptions: {
+            args: ["--window-size=1680,1000"]
+            // commented out but needed to keep it for local testing
+            //,  binary: process.env.CHROMIUM_BIN
+            //
+            //     args:["--headless","--disable-gpu","--window-size=1680,1680"]
+            //     args:["--headless","--disable-gpu","--force-device-scale-factor=1.75","--high-dpi-support=1.75","--window-size=1400,1680"]
+        }
+    },
+
+    // A base URL for your application under test. Calls to protractor.get()
+    // with relative paths will be prepended with this.
+    baseUrl: 'http://localhost:9999',
+
+    // Set the framework
+    framework: 'jasmine',
+
+    // Selector for the element housing the angular app - this defaults to
+    // body, but is necessary if ng-app is on a descendant of <body>
+    rootElement: 'body',
+
+    onPrepare: function () {
+        // Add a screenshot reporter:
+        jasmine.getEnv().addReporter(new HtmlReporter({
+            preserveDirectory: false,
+            takeScreenShotsOnlyForFailedSpecs: true,
+            screenshotsSubfolder: 'images',
+            jsonsSubfolder: 'jsons',
+            baseDirectory: 'reports-tmp',
+            clientDefaults:{
+              useAjax:true
+            },
+
+            pathBuilder: function pathBuilder(spec, descriptions, results, capabilities) {
+                // Return '<30-12-2016>/<browser>/<specname>' as path for screenshots:
+                // Example: '30-12-2016/firefox/list-should work'.
+                var currentDate = new Date(),
+                    day = currentDate.getDate(),
+                    month = currentDate.getMonth() + 1,
+                    year = currentDate.getFullYear();
+
+                var validDescriptions = descriptions.map(function (description) {
+                    return description.replace('/', '@');
+                });
+
+                return path.join(
+                    day + "-" + month + "-" + year,
+                    // capabilities.get('browserName'),
+                    validDescriptions.join('-'));
+            }
+        }).getJasmine2Reporter());
+    },
+
+    jasmineNodeOpts: {
+        // If true, print colors to the terminal.
+        showColors: true,
+        // Default time to wait in ms before a test fails.
+        defaultTimeoutInterval: 30000,
+    }
+};
+
diff --git a/examples/specs/example_spec.js b/examples/specs/example_spec.js
index 7b99ca2..84862f4 100644
--- a/examples/specs/example_spec.js
+++ b/examples/specs/example_spec.js
@@ -40,6 +40,10 @@ describe('angularjs homepage', function () {
             expect(page.todoList.get(1).getText()).toEqual('build an AngularJS app');
         });
 
+        it('should fail because we check for wrong text for demonstration', function () {
+            expect(page.todoList.get(1).getText()).toEqual('Does not match');
+        });
+
         it('should add a todo', function () {
             page.addTodo.sendKeys('write a protractor test');
             page.addButton.click();
@@ -91,7 +95,7 @@ describe('angularjs homepage', function () {
                 });
                 describe('nested deeply spec level 4', function () {
                     it('level 4 it nr 1', function () {
-
+                        browser.executeScript("console.warn('Warn nexted deepply spec level4 test!');");
                     });
                     it('level 4 it nr 2', function () {
 

From bc1a70af0bd41afd0aaaef2d78c9b0f4ffbf72c2 Mon Sep 17 00:00:00 2001
From: miller45 <rklein@rosen-group.com>
Date: Thu, 22 Aug 2019 16:06:42 +0200
Subject: [PATCH 3/4] renamed getPrevScreenshotIdx to getPreviousScreenshotIdx
 added unit tests for screenshot navigation

---
 lib/app.js            |   4 +-
 lib/index.html        |   2 +-
 tests/app/app_test.js | 131 ++++++++++++++++++++++++++++++++----------
 3 files changed, 103 insertions(+), 34 deletions(-)

diff --git a/lib/app.js b/lib/app.js
index e977161..1d036d6 100644
--- a/lib/app.js
+++ b/lib/app.js
@@ -172,7 +172,7 @@ app.controller('ScreenshotReportController', ['$scope', '$http', 'TitleService',
 
     this.hasPreviousScreenshot = function (index) {
         var old = index;
-        return old !== this.getPrevScreenshotIdx(index);
+        return old !== this.getPreviousScreenshotIdx(index);
     };
     this.getNextScreenshotIdx = function (index) {
         var next = index;
@@ -187,7 +187,7 @@ app.controller('ScreenshotReportController', ['$scope', '$http', 'TitleService',
         return hit ? next : index;
     };
 
-    this.getPrevScreenshotIdx = function (index) {
+    this.getPreviousScreenshotIdx = function (index) {
         var prev = index;
         var hit = false;
         while (prev > 0) {
diff --git a/lib/index.html b/lib/index.html
index 5bd21d1..2ca4a06 100644
--- a/lib/index.html
+++ b/lib/index.html
@@ -146,7 +146,7 @@ <h2><span class="report-title">
                 <a href="" ng-if="ctrl.inlineScreenshots && result.screenShotFile" data-toggle="modal" data-target="#imageModal{{$index}}">
                     <img ng-src="{{result.screenShotFile}}" class="screenshotLink"/></a>
                 <!-- Screenshot Modal -->
-                <pbr-screenshot-modal index="$index" data="result" has-previous="ctrl.hasPreviousScreenshot($index)" previous="ctrl.getPrevScreenshotIdx($index)" has-next="ctrl.hasNextScreenshot($index)" next="ctrl.getNextScreenshotIdx($index)" ></pbr-screenshot-modal>
+                <pbr-screenshot-modal index="$index" data="result" has-previous="ctrl.hasPreviousScreenshot($index)" previous="ctrl.getPreviousScreenshotIdx($index)" has-next="ctrl.hasNextScreenshot($index)" next="ctrl.getNextScreenshotIdx($index)" ></pbr-screenshot-modal>
             </div>
         </td>
     </tr>
diff --git a/tests/app/app_test.js b/tests/app/app_test.js
index bcce4e5..f5ffb50 100644
--- a/tests/app/app_test.js
+++ b/tests/app/app_test.js
@@ -234,7 +234,7 @@ describe('unit tests', function () {
                     expect(Math.trunc(controller.failPerc())).toEqual(25);
                 });
 
-                it('sortingFunctions', function () {
+                it('sortingFunctions do not throw', function () {
                     var $scope = $rootScope.$new();
                     expect($scope).toBeDefined();
                     var controller = $controller('ScreenshotReportController', {$scope: $scope});
@@ -242,6 +242,48 @@ describe('unit tests', function () {
                 });
 
             });
+
+            describe("screenshot navigation", function () {
+
+                it('getNextScreenshot gives index of next available item with screenshot (start)', function () {
+                    var $scope = $rootScope.$new();
+                    var controller = $controller('ScreenshotReportController', {$scope: $scope});
+                    var nextIdx = controller.getNextScreenshotIdx(0);
+                    expect(nextIdx).toEqual(2);
+                });
+                it('getNextScreenshot gives index of next available item with screenshot (mid)', function () {
+                    var $scope = $rootScope.$new();
+                    var controller = $controller('ScreenshotReportController', {$scope: $scope});
+                    var nextIdx = controller.getNextScreenshotIdx(2);
+                    expect(nextIdx).toEqual(9);
+                });
+                it('getNextScreenshot gives current index if no next screenshot available (end)', function () {
+                    var $scope = $rootScope.$new();
+                    var controller = $controller('ScreenshotReportController', {$scope: $scope});
+                    var nextIdx = controller.getNextScreenshotIdx(9);
+                    expect(nextIdx).toEqual(9);
+                });
+
+                it('getPreviousScreenshotIdx gives index of previous available item with screenshot (end)', function () {
+                    var $scope = $rootScope.$new();
+                    var controller = $controller('ScreenshotReportController', {$scope: $scope});
+                    var nextIdx = controller.getPreviousScreenshotIdx(9);
+                    expect(nextIdx).toEqual(2);
+                });
+                it('getPreviousScreenshotIdx gives index of previous available item with screenshot (mid)', function () {
+                    var $scope = $rootScope.$new();
+                    var controller = $controller('ScreenshotReportController', {$scope: $scope});
+                    var nextIdx = controller.getPreviousScreenshotIdx(2);
+                    expect(nextIdx).toEqual(0);
+                });
+                it('getPreviousScreenshotIdx gives current index if no previous screenshot available (start)', function () {
+                    var $scope = $rootScope.$new();
+                    var controller = $controller('ScreenshotReportController', {$scope: $scope});
+                    var nextIdx = controller.getPreviousScreenshotIdx(0);
+                    expect(nextIdx).toEqual(0);
+                });
+
+            });
         });
 
 
@@ -328,36 +370,63 @@ describe('unit tests', function () {
                     expect(controller).toBeDefined();
                 });
 
-                //
-                // it('applySmartHighlight with node_modules line', function () {
-                //     var bindings = {index: 0, data: {}};
-                //     var controller = $controller('pbrStackModal', null, bindings);
-                //     var lineWithNodePath = referenceTestResults[2].trace[0];
-                //     expect(lineWithNodePath.indexOf("node_modules") > -1);
-                //     //applySmartHighlight is applied to stack trace lines
-                //     expect(controller.applySmartHighlight(lineWithNodePath)).toEqual("greyout");
-                // });
-                //
-                // it('applySmartHighlight with misc lines', function () {
-                //     var bindings = {index: 0, data: {}};
-                //     var controller = $controller('pbrStackModal', null, bindings);
-                //     var sampleTrace = referenceTestResults[0].trace[0].split("\n");
-                //     //applySmartHighlight is applied to stack trace lines
-                //     expect(controller.applySmartHighlight(sampleTrace[0])).toEqual("");
-                //     expect(controller.applySmartHighlight(sampleTrace[1])).toEqual("highlight"); //contains '  at '
-                //     expect(controller.applySmartHighlight(sampleTrace[2])).toEqual("greyout"); //contains node_modules
-                // });
-                //
-                // it('applySmartHighlight switched off with misc lines', function () {
-                //     var bindings = {index: 0, data: {}};
-                //     var controller = $controller('pbrStackModal', null, bindings);
-                //     $rootScope.showSmartStackTraceHighlight = false;
-                //     var sampleTrace = referenceTestResults[0].trace[0].split("\n");
-                //     //applySmartHighlight is applied to stack trace lines
-                //     expect(controller.applySmartHighlight(sampleTrace[0])).toEqual('');
-                //     expect(controller.applySmartHighlight(sampleTrace[1])).toEqual(''); //contains '  at '
-                //     expect(controller.applySmartHighlight(sampleTrace[2])).toEqual(''); //contains node_modules
-                // });
+                it('updateselectedModal shows next when arrow right pressed', function () {
+                    var bindings = {index: 0, data: {}, next:2, previous:0, hasNext:true, hasPrevious:false };
+                    var controller = $controller('pbrScreenshotModal', null, bindings);
+                    spyOn(controller,"showHideModal");
+                    controller.updateSelectedModal({key:"ArrowRight"},0);
+                    expect(controller.showHideModal).toHaveBeenCalledWith(0,2);
+                });
+
+                it('updateselectedModal shows next when arrow right pressed (has only keyCode)', function () {
+                    var bindings = {index: 0, data: {}, next:2, previous:0, hasNext:true, hasPrevious:false };
+                    var controller = $controller('pbrScreenshotModal', null, bindings);
+                    spyOn(controller,"showHideModal");
+                    controller.updateSelectedModal({keyCode:39},0);
+                    expect(controller.showHideModal).toHaveBeenCalledWith(0,2);
+                });
+
+                it('updateselectedModal ignores arrow right when no next screenshot available', function () {
+                    var bindings = {index: 0, data: {}, next:2, previous:0, hasNext:false, hasPrevious:false };
+                    var controller = $controller('pbrScreenshotModal', null, bindings);
+                    spyOn(controller,"showHideModal");
+                    controller.updateSelectedModal({key:"ArrowRight"},0);
+                    expect(controller.showHideModal).not.toHaveBeenCalled();
+                });
+
+                it('updateselectedModal shows previous when arrow left pressed', function () {
+                    var bindings = {index: 2, data: {}, next:2, previous:0, hasNext:false, hasPrevious:true };
+                    var controller = $controller('pbrScreenshotModal', null, bindings);
+                    spyOn(controller,"showHideModal");
+                    controller.updateSelectedModal({key:"ArrowLeft"},2);
+                    expect(controller.showHideModal).toHaveBeenCalledWith(2,0);
+                });
+
+                it('updateselectedModal shows previous when arrow left pressed (has only keyCode)', function () {
+                    var bindings = {index: 2, data: {}, next:2, previous:0, hasNext:false, hasPrevious:true };
+                    var controller = $controller('pbrScreenshotModal', null, bindings);
+                    spyOn(controller,"showHideModal");
+                    controller.updateSelectedModal({keyCode:37},2);
+                    expect(controller.showHideModal).toHaveBeenCalledWith(2,0);
+                });
+
+                it('updateselectedModal ignores arrow left when no previous screenshot available', function () {
+                    var bindings = {index: 0, data: {}, next:2, previous:0, hasNext:true, hasPrevious:false };
+                    var controller = $controller('pbrScreenshotModal', null, bindings);
+                    spyOn(controller,"showHideModal");
+                    controller.updateSelectedModal({key:"ArrowLeft"},0);
+                    expect(controller.showHideModal).not.toHaveBeenCalled();
+                });
+
+                it('showHideModal calls $.modal hide and show', function () {
+                    var bindings = {index: 2, data: {}, next:9, previous:0, hasNext:true, hasPrevious:true };
+                    var controller = $controller('pbrScreenshotModal', null, bindings);
+                    spyOn($.fn,"modal");
+                    controller.showHideModal(2,9);
+                    expect($.fn.modal).toHaveBeenCalledWith("hide");
+                    expect($.fn.modal).toHaveBeenCalledWith("show");
+                });
+
             });
 
 

From 41a40d7ec6901b1abba23c6b72a1d9aa50792e8e Mon Sep 17 00:00:00 2001
From: miller45 <rklein@rosen-group.com>
Date: Thu, 22 Aug 2019 16:08:59 +0200
Subject: [PATCH 4/4] prepare version 1.3.0

---
 CHANGES.md   | 5 +++++
 index.js     | 2 +-
 package.json | 2 +-
 3 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/CHANGES.md b/CHANGES.md
index 22e5aba..aea044c 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,5 +1,10 @@
 # Changelog
 
+## Version 1.3.0
+* Fixed: Navigation in screenshot dialog jumped to non-existing images 
+* Added: Keyboard navigation in screenshot dialog with left/right arrow keys 
+* Added: Specific css class for report columns
+* Changed: Screenshot dialogs bigger for bigger screens (added css media queries)
 ## Version 1.2.10
 * Added option for disabling all screenshots
 ## Version 1.2.9
diff --git a/index.js b/index.js
index 7da45e2..96f8ea7 100644
--- a/index.js
+++ b/index.js
@@ -5395,7 +5395,7 @@ function addHTMLReport(jsonData, baseName, options) {
             //copy bootstrap fonts
             fse.copySync(path.join(__dirname, 'lib', 'fonts'), path.join(basePath, 'fonts'));
 
-            // //copy templates
+            //copy templates
             fs.copyFileSync(path.join(__dirname, 'lib', 'pbr-screenshot-modal.html'), path.join(basePath,'pbr-screenshot-modal.html'));
             fs.copyFileSync(path.join(__dirname, 'lib', 'pbr-stack-modal.html'), path.join(basePath,'pbr-stack-modal.html'));
 
diff --git a/package.json b/package.json
index 0c1b11e..9d97df9 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "protractor-beautiful-reporter",
-  "version": "1.2.10",
+  "version": "1.3.0",
   "description": "An npm module and which generates your Protractor test reports in HTML (angular) with screenshots",
   "main": "index.js",
   "repository": {