Merge branch 'master' into docs/small-fixes

.nvmrc

@@ -1 +1 @@
-6.7
+6

docs/Actions.md

@@ -36,6 +36,9 @@ This field is required.
 
 An optional selector for the element, inside the pattern, the action is
 performed on. Defaults to '*', which will be the first children inside the pattern.
+But for patterns which are [loadOnSinglePage](#loadOnSinglePage-default-false)
+it's necessary, because there the pattern is not wrapped and instead it is just
+rendered as child nodes of the body.
 
 #### skipBrowsers
 

docs/Configuration.md

@@ -45,6 +45,18 @@ and [excludeScreenSizes](#excludeScreenSizes) for details.
 "defaultSizes": ["yourScreenSize-1", "yourScreenSize-2"]
 ```
 
+#### loadOnSinglePage (default: false)
+
+A boolean to determine if the screenshots should be taken on the rendered pages
+of the single patterns or if the screenshots should be taken on the styleguide
+page.
+
+This can also be set only on [specific patterns](#loadOnSinglePage-default-false--if-global-loadOnSinglePage-is-also-false)
+
+```json
+"loadOnSinglePage": false
+```
+
 #### excludePatterns
 
 An array containing regular expressions to exclude patterns for the tests.
@@ -110,6 +122,18 @@ The path to the file where the templates for the tests.
 
 > These settings previously were part of the [patternconfigfile](#patternconfigfile).
 
+#### loadOnSinglePage (default: false - if global loadOnSinglePage is also false)
+
+If the screenshot of this pattern should be taken on a single page instead of
+the default styleguide page.
+This is necessary for patterns that have elements that are fixed or absolutely
+positioned.
+> :warning: If this is active the [selectors](#selectors) config has to be set also
+
+> :warning: If the [global loadOnSinglePage](#loadonsinglepage-default-false) is activated this is 
+always true, and can't be overwritten
+
+
 #### screenSizes
 
 An array of the globally defined [screenSizes](#exclamation-screensizes). This will
@@ -147,6 +171,13 @@ screen shots will be taken in addition to the [defaultSizes](#defaultSizes).
 > :warning: Can not be used with [screenSizes](#screenSizes) on the same pattern.
 Pattern screen shot sizes can either be overwritten or modified, but not both.
 
+#### captureElements
+
+An array of custom selectors which are use for the screenshot. 
+By default we use the `.sg-pattern-example` inside the `#pattern-id`,
+or the `body` if [loadOnSinglePage](#loadOnSinglePage-default-false--if-global-loadOnSinglePage-is-also-false)
+is active.
+
 #### excludeScreenSizes
 
 An array of the globally defined [screenSizes](#exclamation-screensizes). The

example.config.json

@@ -26,6 +26,7 @@
     }
   },
   "defaultSizes": null,
+  "loadOnSinglePage": false,
   "excludePatterns": [
     "^templates"
   ],

package.json

@@ -28,7 +28,7 @@
   "dependencies": {
     "cheerio": "^0.22.0",
     "commander": "^2.9.0",
-    "debug": "^2.2.0",
+    "debug": "^2.4.1",
     "ejs": "^2.5.1",
     "extend": "^3.0.0",
     "request": "^2.74.0"
@@ -48,6 +48,7 @@
     "test-console": "^1.0.0"
   },
   "scripts": {
+    "watch": "npm run test -- -w",
     "lint": "./node_modules/.bin/eslint src/** test/*",
     "pre-commit": "npm run lint",
     "pretest": "npm run lint -- --rule 'mocha/no-exclusive-tests: 0'  --rule 'mocha/no-skipped-tests: 0'",

src/main.js

@@ -71,6 +71,7 @@ var PatternlabToNode = function(options) {
     excludePatterns: [],
     excludeStates: [],
     defaultSizes: null,
+    loadOnSinglePage: false,
     patterns: null
   }, settings);
 
@@ -226,7 +227,8 @@ PatternlabToNode.prototype.scrapePatternlab_ = function(html) {
           if (!shouldBeExcluded) {
             patterns.push({
               id: patternId,
-              name: header
+              name: header,
+              url: headerElement.attr('href')
             });
           }
         }
@@ -400,10 +402,23 @@ PatternlabToNode.prototype.parseAction = function(pattern) {
 
       action.selector = action.selector || '> *';
 
+      if (this.config_.loadOnSinglePage || pattern.loadOnSinglePage) {
+        if (action.selector !== "> *") {
+          action.selector = `body ${action.selector}`
+        } else {
+          throw new Error(
+            'PatternlabToNode - config error - ' +
+              pattern.id + ' action "' + action.action + '" need selector in "loadOnSinglePage" mode'
+          );
+        }
+      } else {
+        action.selector = `#${pattern.id} .sg-pattern-example ${action.selector}`
+      }
+
       if (action.action === 'hover') {
         if (action.pseudoClass) {
           action.steps = `.executeJS(function() {
-  window.document.querySelector('#${pattern.id} .sg-pattern-example ${action.selector}').classList.add('${action.pseudoClass}')
+  window.document.querySelector('${action.selector}').classList.add('${action.pseudoClass}')
 })`;
         } else {
           action.steps = '.mouseMove(this.element)';
@@ -603,18 +618,37 @@ PatternlabToNode.prototype.generateTests = function() {
         debug(config);
         return new Promise((resolve, reject) => {
           var data = {
+            'config': {
+              loadOnSinglePage: this.config_.loadOnSinglePage
+            },
             'patterns': [],
             'sizes': []
           };
           config._patternOrder.forEach((patternId) => {
+            var loadOnSinglePage = this.config_.loadOnSinglePage ||
+              config.patterns[patternId].loadOnSinglePage;
             var actions = config.patterns[patternId].actions || [];
             actions.forEach(action => {
               action.skipBrowsers = action.skipBrowsers || [];
             });
+
+            var captureElements;
+            if (loadOnSinglePage) {
+              captureElements = '\'body\''
+            } else {
+              captureElements = '[\'#' + patternId + ' .sg-pattern-example\']';
+            }
+            if (config.patterns[patternId].captureElements) {
+              captureElements = '[\'' +
+                config.patterns[patternId].captureElements.join('\', \'') + '\']'
+            }
             var patternSettings = {
               'id': patternId,
+              'loadOnSinglePage': loadOnSinglePage,
               'name': config.patterns[patternId].name,
+              'url': '/styleguide/html/' + config.patterns[patternId].url,
               'actions': actions,
+              'captureElements': captureElements,
               'skipBrowsers': config.patterns[patternId].skipBrowsers || [],
               'sizes': []
             };

templates/main.ejs

@@ -1,11 +1,12 @@
 
 gemini.suite('Patternlab - ', function(patternlabSuite) {
-  patternlabSuite.setUrl('/styleguide/html/styleguide.html');
+<% if (!config.loadOnSinglePage) { %>  patternlabSuite.setUrl('/styleguide/html/styleguide.html');<% } %>
 <% patterns.forEach(function(pattern) { %>
   gemini.suite('<%= pattern.name %>', function(suite) {
     suite<% pattern.skipBrowsers.forEach(function(browser) { %>
-        .skip(/<%= browser.regexp %>/, '<%- browser.comment.replace("'", "\'") %>')<% }); %>
-        .setCaptureElements(['#<%= pattern.id %> .sg-pattern-example'])<% pattern.sizes.forEach(function(size) { %>
+        .skip(/<%= browser.regexp %>/, '<%- browser.comment.replace("'", "\'") %>')<% }); %><% if (pattern.loadOnSinglePage) { %>
+        .setUrl('<%= pattern.url %>')<% } %>
+        .setCaptureElements(<%- pattern.captureElements %>)<% pattern.sizes.forEach(function(size) { %>
         .capture('<%= size.name %>', function(actions, find) {
           actions.setWindowSize(<%= size.width %>, <%= size.height %>);
         })<% }); %>;
@@ -14,11 +15,12 @@ gemini.suite('Patternlab - ', function(patternlabSuite) {
 
   gemini.suite('<%= pattern.name %> --- <%= action.name %>', function(suite) {
     suite<% action.skipBrowsers.forEach(function(browser) { %>
-        .skip(/<%= browser.regexp %>/, '<%- browser.comment.replace("'", "\'") %>')<% }); %>
+        .skip(/<%= browser.regexp %>/, '<%- browser.comment.replace("'", "\'") %>')<% }); %><% if (pattern.loadOnSinglePage) { %>
+        .setUrl('<%= pattern.url %>')<% } %>
         .before(function(actions, find) {
-          this.element = find('#<%= pattern.id %> .sg-pattern-example <%- action.selector; %>')
+          this.element = find('<%- action.selector; %>')
         })
-        .setCaptureElements(['#<%= pattern.id %> .sg-pattern-example'])<% pattern.sizes.forEach(function(size) { %>
+        .setCaptureElements(<%- pattern.captureElements %>)<% pattern.sizes.forEach(function(size) { %>
         .capture('<%= size.name %>', function(actions, find) {
           actions.setWindowSize(<%= size.width %>, <%= size.height %>)
             <%- action.steps %>;

test/dummyhtml/patterns.html

@@ -8,12 +8,12 @@
 
 <div class="sg-pattern" id="pattern-1">
   <div class="sg-pattern-title">
-    <a>Pattern Name 1</a>
+    <a href="link-to-pattern1.html">Pattern Name 1</a>
   </div>
 </div>
 <div class="sg-pattern" id="pattern-2">
   <div class="sg-pattern-title">
-    <a>
+    <a href="link-to-pattern2.html">
       Pattern Name 2
       <span class="sg-pattern-state complete">complete</span>
     </a>

test/dummyhtml/patternsToExclude.html

@@ -8,24 +8,24 @@
 
 <div class="sg-pattern" id="pattern-1">
   <div class="sg-pattern-title">
-    <a>Pattern Name 1</a>
+    <a href="link-to-pattern1.html">Pattern Name 1</a>
   </div>
 </div>
 <div class="sg-pattern" id="pattern-2">
   <div class="sg-pattern-title">
-    <a>Pattern Name 2</a>
+    <a href="link-to-pattern2.html">Pattern Name 2</a>
   </div>
 </div>
 <div class="sg-pattern" id="exclude-pattern-1">
   <div class="sg-pattern-title">
-    <a>Pattern Name 3</a>
+    <a href="link-to-pattern3.html">Pattern Name 3</a>
   </div>
 </div>
 <div class="sg-pattern" id="pattern-4-should-be-excluded">
   <div class="sg-pattern-title">
-    <a>Pattern Name 4</a>
+    <a href="link-to-pattern4.html">Pattern Name 4</a>
   </div>
 </div>
 
 </body>
-</html>
+</html>

test/dummyhtml/statesToExclude.html

@@ -8,28 +8,28 @@
 
 <div class="sg-pattern" id="pattern-1">
   <div class="sg-pattern-title">
-    <a>
+    <a href="link-to-pattern1.html">
       Pattern Name 1
       <span class="sg-pattern-state inprogress">inprogress</span>
     </a>
   </div>
 </div>
 <div class="sg-pattern" id="pattern-2">
   <div class="sg-pattern-title">
-    <a>
+    <a href="link-to-pattern2.html">
       Pattern Name 2
       <span class="sg-pattern-state idea">idea</span>
     </a>
   </div>
 </div>
 <div class="sg-pattern" id="pattern-3">
   <div class="sg-pattern-title">
-    <a>Pattern Name 3</a>
+    <a href="link-to-pattern3.html">Pattern Name 3</a>
   </div>
 </div>
 <div class="sg-pattern" id="pattern-4">
   <div class="sg-pattern-title">
-    <a>
+    <a href="link-to-pattern4.html">
       Pattern Name 4
       <span class="sg-pattern-state complete">complete</span>
     </a>

test/expectedTestFiles/generateTestsGlobalLoadOnSinglePage.js

@@ -0,0 +1,25 @@
+
+gemini.suite('Patternlab - ', function(patternlabSuite) {
+
+
+  gemini.suite('Pattern Name 1', function(suite) {
+    suite
+        .setUrl('/styleguide/html/link-to-pattern1.html')
+        .setCaptureElements('body')
+        .capture('desktop', function(actions, find) {
+          actions.setWindowSize(1440, 900);
+        });
+  });
+
+
+  gemini.suite('Pattern Name 2', function(suite) {
+    suite
+        .setUrl('/styleguide/html/link-to-pattern2.html')
+        .setCaptureElements('body')
+        .capture('desktop', function(actions, find) {
+          actions.setWindowSize(1440, 900);
+        });
+  });
+
+
+});

test/expectedTestFiles/generateTestsMultipleCaptureElements.js

@@ -0,0 +1,29 @@
+
+gemini.suite('Patternlab - ', function(patternlabSuite) {
+  patternlabSuite.setUrl('/styleguide/html/styleguide.html');
+
+  gemini.suite('Pattern Name 1', function(suite) {
+    suite
+        .setCaptureElements(['.element1', '#element2'])
+        .capture('desktop', function(actions, find) {
+          actions.setWindowSize(1440, 900);
+        })
+        .capture('tablet', function(actions, find) {
+          actions.setWindowSize(1024, 768);
+        });
+  });
+
+
+  gemini.suite('Pattern Name 2', function(suite) {
+    suite
+        .setCaptureElements(['#elements3 > *', '.element4'])
+        .capture('desktop', function(actions, find) {
+          actions.setWindowSize(1440, 900);
+        })
+        .capture('tablet', function(actions, find) {
+          actions.setWindowSize(1024, 768);
+        });
+  });
+
+
+});

test/expectedTestFiles/generateTestsSinglePatternLoadOnSinglePage.js

@@ -0,0 +1,24 @@
+
+gemini.suite('Patternlab - ', function(patternlabSuite) {
+  patternlabSuite.setUrl('/styleguide/html/styleguide.html');
+
+  gemini.suite('Pattern Name 1', function(suite) {
+    suite
+        .setCaptureElements(['#pattern-1 .sg-pattern-example'])
+        .capture('desktop', function(actions, find) {
+          actions.setWindowSize(1440, 900);
+        });
+  });
+
+
+  gemini.suite('Pattern Name 2', function(suite) {
+    suite
+        .setUrl('/styleguide/html/link-to-pattern2.html')
+        .setCaptureElements('body')
+        .capture('desktop', function(actions, find) {
+          actions.setWindowSize(1440, 900);
+        });
+  });
+
+
+});