Merge pull request #36 from LarsHassler/feat/action-delay

added option to add a delay into actions

docs/Actions.md

@@ -45,6 +45,11 @@ rendered as child nodes of the body.
 An array of browsers to skip this action for.
 See [Configuration](Configuration.md#skipBrowsers) for details on how to use this.
 
+#### delay
+
+A number of milliseconds to wait before the screenshot is taken. Useful for
+css transitions and animations.
+
 ## hover
 
 A particular element within a pattern will be tested while the mouse is hovering

src/main.js

@@ -444,6 +444,10 @@ PatternlabToNode.prototype.parseAction = function(pattern) {
           'use ("' + validActions.join('", "') + '")'
         );
       }
+
+      if (action.delay) {
+        action.steps += '.wait(' + action.delay + ')';
+      }
     })
   }
 };

test/expectedTestFiles/generateTestsPatternActionsWithDelays.js

@@ -0,0 +1,36 @@
+
+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 1 --- hovered', function(suite) {
+    suite
+        .before(function(actions, find) {
+          this.element = find('#pattern-1 .sg-pattern-example button')
+        })
+        .setCaptureElements(['#pattern-1 .sg-pattern-example'])
+        .capture('desktop', function(actions, find) {
+          actions.setWindowSize(1440, 900)
+            .moveMouse(this.element).wait(250);
+        });
+  });
+
+
+  gemini.suite('Pattern Name 2', function(suite) {
+    suite
+        .setCaptureElements(['#pattern-2 .sg-pattern-example'])
+        .capture('desktop', function(actions, find) {
+          actions.setWindowSize(1440, 900);
+        });
+  });
+
+
+});

test/main.js

@@ -278,6 +278,10 @@ describe('main - ', () => {
         shouldAddCorrectStepsForFocus
       );
 
+      it("should add correct steps for delay",
+        shouldAddCorrectStepsForDelay
+      );
+
       describe('skipBrowsers - ', function() {
 
         it('should reject if its not an array',
@@ -382,6 +386,10 @@ describe('main - ', () => {
       shouldWorkWithActionWithSelectors
     );
 
+    it('should work with delays in actions',
+      shouldWorkWithDelaysInActions
+    );
+
     it('should work with skipping multiple browsers',
       shouldWorkWithSkippingMultipleBrowsers
     );
@@ -720,6 +728,56 @@ describe('main - ', () => {
   }
 
 
+
+  function shouldWorkWithDelaysInActions(done) {
+    setUpFsMock({
+      "config.json": path.resolve(__dirname, 'patternlab-to-geminiConfigs/definedPatternActionsWithDelays.json'),
+      "expectedTest.js": path.resolve(__dirname, 'expectedTestFiles/generateTestsPatternActionsWithDelays.js'),
+      "templates/main.ejs": path.resolve(__dirname, '../templates/main.ejs')
+    });
+    var instanceToTest = new patternlabToNode('config.json');
+    instanceToTest.getPatternsConfiguration = function() {
+      return new Promise((resolve) => {
+        resolve({
+          "_patternOrder": [
+            "pattern-1",
+            "pattern-2"
+          ],
+          "patterns": {
+            "pattern-1": {
+              "id": "pattern-1",
+              "name": "Pattern Name 1",
+              "screenSizes": ["desktop"],
+              "actions": [
+                {
+                  "action": "hover",
+                  "name": "hovered",
+                  "selector": "#pattern-1 .sg-pattern-example button",
+                  "steps": ".moveMouse(this.element).wait(250)"
+                }
+              ]
+            },
+            "pattern-2": {
+              "id": "pattern-2",
+              "name": "Pattern Name 2",
+              "screenSizes": ["desktop"]
+            }
+          }
+        });
+      })
+    };
+    instanceToTest.generateTests()
+      .then(() => {
+        asserts.assertEquals(
+          "wrong testFile generated",
+          fs.readFileSync('expectedTest.js').toString(),
+          fs.readFileSync('patternlabTests.js').toString()
+        )
+      })
+      .then(done, done);
+  }
+
+
   function shouldWorkWithSkippingMultipleBrowsers(done) {
     setUpFsMock({
       "config.json": path.resolve(__dirname, 'patternlab-to-geminiConfigs/skipBrowsers.json'),
@@ -1718,6 +1776,30 @@ describe('main - ', () => {
   }
 
 
+  function shouldAddCorrectStepsForDelay(done) {
+    setUpFsMock({
+      "config.json": path.resolve(__dirname, 'patternlab-to-geminiConfigs/actionFocusWithDelay.json'),
+      'dummyhtml/patterns.html': __dirname + '/dummyhtml/patterns.html'
+    });
+    var instanceToTest = new patternlabToNode(
+        'config.json'
+    );
+    setUpPatternlabResponse(
+        'http://localhost:3000',
+        'dummyhtml/patterns.html'
+    );
+    instanceToTest.getPatternsConfiguration()
+      .then((patternConfig) => {
+        asserts.assertEquals(
+          'wrong steps for action',
+          '.focus(this.element).wait(500)',
+          patternConfig.patterns['pattern-1'].actions[0].steps
+        );
+      })
+      .then(done, done);
+  }
+
+
   function shouldRejectIfACustomScreenSizeWasFoundButNotDefined(done) {
     setUpFsMock({
       "config.json": path.resolve(__dirname, 'patternlab-to-geminiConfigs/missingPatternScreenSizes.json'),

test/patternlab-to-geminiConfigs/actionFocusWithDelay.json

@@ -0,0 +1,19 @@
+{
+  "screenSizes": {
+    "desktop": {
+      "width": 1440,
+      "height": 900
+    }
+  },
+  "patterns": {
+    "pattern-1": {
+      "actions": [
+        {
+          "action": "focus",
+          "name": "action 1",
+          "delay": 500
+        }
+      ]
+    }
+  }
+}

test/patternlab-to-geminiConfigs/definedPatternActionsWithDelays.json

@@ -0,0 +1,21 @@
+{
+  "patternlabUrl": "http://localhost:3000",
+  "screenSizes": {
+    "desktop": {
+      "width": 1440,
+      "height": 900
+    }
+  },
+  "patterns": {
+    "pattern-1": {
+      "actions": [
+        {
+          "action": "hover",
+          "name": "hovered",
+          "selector": "button",
+          "delay": 250
+        }
+      ]
+    }
+  }
+}