Release 2.8.0 (#355)

* Enhancement to support Unix path! (#344) I'm not sure you already got a try or a feedback about it but actually pickles run relatively well under Linux with mono which is interesting when like me you can't get a windows machine. However without this little change we can't get the folder structure display correctly. Could you integrate this modification? Thanks * Release 2.6.3 (#348) * Version Bump * Update change log * Add --enableComments Flag to Command Line - Default to True (#346) * Command-Line Flag --comments - Default to True - Incl Unit Test * Changed Command Line Argument --comments to --enableComments * Added Enable Comments Option to MSBuild - Powershell - WPF Runners * Fixed Bug with enableComments Property Not Being Used in MainViewModel * Release 2.7.0 (#352) * Release 2.6.3 (#347) * Enhancement to support Unix path! (#344) I'm not sure you already got a try or a feedback about it but actually pickles run relatively well under Linux with mono which is interesting when like me you can't get a windows machine. However without this little change we can't get the folder structure display correctly. Could you integrate this modification? Thanks * Version Bump * Update change log * Add EnableComments to the targets file * Adapt change log * Version bump to 2.7.0 * #320 - Scenario Deep Linking - DHTML and HTML Output (#350) * #320 - Scenario Deep Linking - DHTML and HTML Output * #320 - Fix Failing Unit Tests * #320 - Resolved Issue with Image Resource Not Copying * #320 - Add Backward-Compatibility for Hashed Feature Path * #320 - Added Modal Dialog for Link Copy * Edit release notes * Version Bump (2.8.0)
picklesdoc · Jun 29, 2016 · b3852c0 · b3852c0
1 parent 4d2ff43
commit b3852c0
Show file tree

Hide file tree

Showing 33 changed files with 509 additions and 146 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -14,6 +14,12 @@ Features in Experimental are subject to change and removal without being conside
 
 This document is formatted according to the principles of [Keep A CHANGELOG](http://keepachangelog.com).
 
+## [2.8.0] - 2016-06-29
+
+### Added
+
+* Hyperlink Feature #1: Automatic Hyperlink Generation for Scenario Titles ([320](https://github.com/picklesdoc/pickles/issues/320)) (by [@ocsurfnut](https://github.com/ocsurfnut)).
+
 ## [2.7.0] - 2016-06-14
 
 ### Added

diff --git a/build.bat b/build.bat
@@ -1,5 +1,5 @@
 @echo off
-set "picklesVersion=2.7.0"
+set "picklesVersion=2.8.0"
 
 cls
 

diff --git a/src/Pickles/Pickles.BaseDhtmlFiles/Index.html b/src/Pickles/Pickles.BaseDhtmlFiles/Index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -14,7 +14,7 @@
     <!--[if lt IE 9]>
       <script src="js/html5.js"></script>
     <![endif]-->
-    #### EMBED EXPERIMENTALS ####
+    <!-- #### EMBED EXPERIMENTALS #### -->
 </head>
 
 <body data-bind="style: { overflow: overviewVisible() ? 'hidden' : 'auto' }">
@@ -173,7 +173,7 @@ <h4>Background:</h4>
                                 </em>
                             </div>
 
-                            <div class="scenario">
+                            <div class="scenario" data-bind="attr: { id: Slug }">
                                 <div data-bind="template: { name: 'testResults-template', data: Result }"></div>
 
                                 <div>
@@ -195,6 +195,9 @@ <h4 data-bind="text: Name, click: $root.toggleDetail" class="canHighlight, click
 
                                 </div>
 
+                                <a class="scenario-link clickable" data-bind="ifnot: $root.disableScenarioLinks, click: $root.getLink" title="Get Link for Scenario">
+                                    <img alt="Get Link for Scenario" src="img/link.png">
+                                </a>
                             </div>
                         </div>
                     </div>
@@ -254,6 +257,25 @@ <h3 class="header">@NotTested Scenario Summary by Root Namespace</h3>
                 </div>
             </div>
         </div>
+        <div id="scenarioLinkModal" class="modal fade" tabindex="-1" role="dialog">
+            <div class="modal-dialog modal-lg" data-bind="with: selectedScenario">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                        <h4 class="modal-title">Scenario Link</h4>
+                        <div class="scenario-name" data-bind="text: Name"></div>
+                    </div>
+                    <div class="modal-body">
+                        <textarea id="clipboardText" data-bind="text: link, click: $root.followLink" rows="5" readonly></textarea>
+                    </div>
+                    <div class="modal-footer">
+                        <i class="icon-ok" data-bind="visible: $root.linkCopied"></i>
+                        <button type="button" class="btn btn-primary" data-bind="click: $root.copyLinkToClipboard">Copy to Clipboard</button>
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
     </div>
 
     <!-- Le javascript
@@ -290,11 +312,22 @@ <h3 class="header">@NotTested Scenario Summary by Root Namespace</h3>
 
             self.ShowAllLinks = ko.observable(false);
             self.overviewVisible = ko.observable(false);
+            self.selectedScenario = ko.observable(null);
+            self.disableScenarioLinks = ko.observable(window.location.protocol.match(/file/));
+            self.linkCopied = ko.observable(false);
 
             self.setCurrentFeature = function () {
-                if (window.location.hash != '') {
-                    var featureFromHashLocation = findFeatureByRelativeFolder(removeBeginningHash(window.location.hash), features);
-                    self.updateCurrentFeature(featureFromHashLocation);
+                var currentFeatureRelativeFolder = FeatureNavigation.getCurrent();
+                if (currentFeatureRelativeFolder != '') {
+                    var currentFeature = findFeatureByRelativeFolder(currentFeatureRelativeFolder, features) || self.originalFeaturesList()[0];
+                    // preserve hash value (incoming request)
+                    var hash = window.location.hash;
+                    self.updateCurrentFeature(currentFeature);
+                    window.location.hash = hash;
+                    // smooth-scroll to hashed slug
+                    setTimeout(function() {
+                        smoothScrollToScenarioAnchor(window.location.hash);
+                    }, 250);
                 } else {
                     self.updateCurrentFeature(self.originalFeaturesList()[0]);
                 }
@@ -317,9 +350,9 @@ <h3 class="header">@NotTested Scenario Summary by Root Namespace</h3>
                         self.overview.createByRootFolderChart($('#byRootFolderCanvas').get(0).getContext('2d'));
                         self.overview.createNotTestedByRootFolderChart($('#notTestedbyRootFolderCanvas').get(0).getContext('2d'));
                         self.totals(self.overview.getTotalsData());
-                    } else {
-                        $('.modal-overlay').scrollTop(0);
                     }
+                } else {
+                    smoothScrollToScenarioAnchor(window.location.hash);
                 }
             };
 
@@ -357,9 +390,8 @@ <h3 class="header">@NotTested Scenario Summary by Root Namespace</h3>
 
             self.updateCurrentFeature = function (feature) {
                 self.currentFeature(feature);
-                document.location.hash = feature.RelativeFolder;
                 document.title = feature.Feature.Name;
-                window.scroll(0, 0);
+                FeatureNavigation.setCurrent(feature.RelativeFolder);
                 highlightSearchString(self.whatToSearchFor());
             };
 
@@ -383,12 +415,56 @@ <h3 class="header">@NotTested Scenario Summary by Root Namespace</h3>
                 expandContractDirectoryLinks(self.featuresByFolder().SubDirectories);
             };
 
+            self.getLink = function(scenario) {
+                self.linkCopied(false);
+                scenario.link = FeatureNavigation.getCurrentLink(scenario.Slug);
+                self.selectedScenario(scenario);
+                $('#scenarioLinkModal').modal('show');
+            };
+
+            self.followLink = function(scenario) {
+                window.open(scenario.link);
+            };
+
+            self.copyLinkToClipboard = function() {
+                self.linkCopied(false);
+
+                $('#clipboardText').select();
+
+                try {
+                    var result = document.execCommand('copy');
+                    if (!result) {
+                        console.error('Copy to clipboard not supported in this browser');
+                    }
+                }
+                catch(ex) {
+                    console.error(ex);
+                }
+
+                document.getSelection().removeAllRanges();
+                self.linkCopied(true);
+            };
+
             function expandContractDirectoryLinks(subDirs) {
                 $.each(subDirs, function (key, value) {
                     value.IsExpanded(self.ShowAllLinks());
                     expandContractDirectoryLinks(value.SubDirectories);
                 });
-            };
+            }
+
+            function smoothScrollToScenarioAnchor(anchorId) {
+                var anchor = $(anchorId);
+                var anchorOffset = anchor.offset();
+                if (anchorOffset != null) {
+                    $('html, body').animate({
+                        scrollTop: anchorOffset.top - 75
+                    }, { complete: function() { anchor.addClass('scenario-active') } });
+
+                    return true;
+                }
+
+                return false;
+            }
 
             // Hide / show detailed areas
             self.toggleDetail = function (element) {

diff --git a/src/Pickles/Pickles.BaseDhtmlFiles/css/styles.css b/src/Pickles/Pickles.BaseDhtmlFiles/css/styles.css
@@ -1,4 +1,4 @@
-body {
+body {
     padding-top: 60px;
     padding-bottom: 40px;
 }
@@ -60,12 +60,40 @@
 }
 
 .scenario {
+    transition: border-color 1s ease;
     background-color: #F5F5F5;
     border: 1px solid #D0D0D0;
     margin: 6px 0px 28px 0px;
     padding: 6px;
 }
 
+.scenario-name {
+    font-weight: bolder;
+    font-size: 1.1em;
+}
+
+.scenario-active {
+    border-color: #B21515;
+}
+
+#clipboardText {
+    width: 100%;
+    padding: 0;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    background: transparent;
+    cursor: pointer;
+    text-decoration: underline;
+    color: blue;
+}
+
+.scenario a.scenario-link {
+    float: right;
+    margin-top: -25px;
+    width: 32px;
+}
+
 li.step {
     list-style-type: none;
     margin: 6px 0px 6px 0px;
@@ -227,6 +255,10 @@ li.step {
     width: 95%;
 }
 
+.modal-dialog .btn {
+    background-image: none !important;
+}
+
 #overallCompleteCanvas-container, #overallCompleteSummary {
     width: 50%;
 }

diff --git a/src/Pickles/Pickles.BaseDhtmlFiles/img/link.png b/src/Pickles/Pickles.BaseDhtmlFiles/img/link.png
diff --git a/src/Pickles/Pickles.BaseDhtmlFiles/js/featureSearch.js b/src/Pickles/Pickles.BaseDhtmlFiles/js/featureSearch.js
@@ -1,4 +1,73 @@
-function getFeaturesMatching(searchString, features) {
+
+// feature navigation namespace
+(function(window) {
+
+    window.FeatureNavigation = {
+        getCurrent : getCurrentFeature,
+        setCurrent: setCurrentFeature, 
+        getCurrentLink: getCurrentFeatureLink
+    };
+
+    function getCurrentFeature() {
+        var query = window.location.search;
+
+        if (query == null || query == '') {
+            // support previous style relative path in hash ...
+            var hash = window.location.hash;
+            if (hash != null && hash != '') {
+                // clear hash from url
+                window.location.hash = '';
+                // trim leading hash before returning
+                return removeBeginningHash(hash);
+            }
+
+            return '';
+        }
+
+        // trim leading question mark
+        query = query.substring(1);
+
+        var queryVars = query.split('&');
+
+        for (var i=0;i<queryVars.length;i++) {
+            var pair = queryVars[i].split('=');
+            if (pair[0] == 'feature') {
+                return pair[1];
+            }
+        }
+
+        return '';
+    }
+
+    function setCurrentFeature(path) {
+        if (window.history == null || typeof(window.history.pushState) !== 'function') {
+            console.error('Current browser does not support HTML5 pushState');
+            return null;
+        }
+
+        // catching instances where pushState will not work (for instance file:// protocol)
+        try {
+            var url = 'Index.html?feature=' + path;
+            window.history.pushState({ path: url }, '', url);
+        }
+        catch (ex) {
+            console.warn(ex);
+        }
+    }
+
+    function getCurrentFeatureLink(scenarioSlug) {
+        var featureUrl = window.location.origin + window.location.pathname + window.location.search;
+
+        if (scenarioSlug != null && scenarioSlug != '') {
+            featureUrl = featureUrl + '#' + scenarioSlug;
+        }
+
+        return featureUrl;
+    }
+
+})(window);
+
+function getFeaturesMatching(searchString, features) {
     searchString = searchString.toLowerCase();
     var filteredFeatures = ko.utils.arrayFilter(features, function (feature) {
         if (matchesFeatureName(searchString, feature) ||

diff --git a/src/Pickles/Pickles.BaseDhtmlFiles/js/featuresModel.js b/src/Pickles/Pickles.BaseDhtmlFiles/js/featuresModel.js
@@ -1,4 +1,4 @@
-function FeatureParent(data) {
+function FeatureParent(data) {
     this.RelativeFolder = data.RelativeFolder;
     this.Feature = new Feature(data.Feature);
 }
@@ -14,6 +14,7 @@ function Feature(data) {
 
 function Scenario(data) {
     this.Name = data.Name || '';
+    this.Slug = data.Slug || '';
     this.Description = data.Description || '';
     this.Steps = $.map(data.Steps, function(step) { return new Step(step); }) || new Array();
     this.Result = data.Result == null ? null : new Result(data.Result);
@@ -75,6 +76,7 @@ function Result(data) {
                         "Keyword": "Given",
                         "NativeKeyword": "Given ",
                         "Name": "I have the following person",
+                        "Slug": "i-have-the-following-person",
                         "TableArgument": {
                             "HeaderRow": [
                               "Field",

diff --git a/src/Pickles/Pickles.ObjectModel/ObjectModel/IFeatureElement.cs b/src/Pickles/Pickles.ObjectModel/ObjectModel/IFeatureElement.cs
@@ -30,6 +30,8 @@ public interface IFeatureElement
 
         string Name { get; set; }
 
+        string Slug { get; }
+
         List<Step> Steps { get; set; }
 
         List<string> Tags { get; set; }

diff --git a/src/Pickles/Pickles.ObjectModel/ObjectModel/Scenario.cs b/src/Pickles/Pickles.ObjectModel/ObjectModel/Scenario.cs
@@ -22,26 +22,5 @@
 
 namespace PicklesDoc.Pickles.ObjectModel
 {
-    public class Scenario : IFeatureElement
-    {
-        public Scenario()
-        {
-            this.Steps = new List<Step>();
-            this.Tags = new List<string>();
-        }
-
-        public string Name { get; set; }
-
-        public string Description { get; set; }
-
-        public List<Step> Steps { get; set; }
-
-        public List<string> Tags { get; set; }
-
-        public TestResult Result { get; set; }
-
-        public Feature Feature { get; set; }
-
-        public Location Location { get; set; }
-    }
+    public class Scenario : ScenarioBase { }
 }