Merge pull request #167 from Evilweed/keyboardnav

Prepare version 1.3.0 Added unit tests

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

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: {

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,
+    }
+};
+

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 () {
 

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'));
 

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) {

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;

lib/assets/main.css

@@ -6,10 +6,6 @@ h2 {
   margin-top: 0;
 }
 
-.modal-lg {
-    width: 95%;
-}
-
 .highlight {
     background-color: #ffd600;
 }

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>

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">

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">

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": {