Merge branch 'master' into goto

.circleci/config.yml

@@ -57,6 +57,9 @@ jobs:
           name: "Restore core dist cache"
           keys:
             - core-dist-{{ .Revision }}
+      - run:
+          name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
+          command: sh ./scripts/workaround-puppeteer-issue-290.sh
       - run:
           name: "Build react kitchen-sink"
           command: |

addons/storyshots/README.md

@@ -210,6 +210,22 @@ initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'h
 
 `beforeScreenshot` receives the [Puppeteer page instance](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#class-page) and an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot. `beforeScreenshot` is part of the promise chain and is called after the browser navigation is completed but before the screenshot is taken. It allows for triggering events on the page elements and delaying the screenshot and can be used avoid regressions due to mounting animations.
 
+### Specifying options to _screenshot()_
+
+You might use `getScreenshotOptions` to specify options for screenshot. Will be passed to [Puppeteer .screenshot() fn](https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#pagescreenshotoptions)
+
+```js
+import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
+const getScreenshotOptions = ({context, url}) {
+  return {
+    fullPage: false // Do not take the full page screenshot. Default is 'true' in Storyshots.
+  }
+}
+initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', getScreenshotOptions})});
+```
+
+`getScreenshotOptions` receives an object `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot.
+
 ### Integrate image storyshots with regular app
 
 You may want to use another Jest project to run your image snapshots as they require more resources: Chrome and Storybook built/served.

addons/storyshots/src/index.js

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import glob from 'glob';
-import global, { describe, it, beforeEach, afterEach } from 'global';
+import global, { describe, it } from 'global';
 import addons from '@storybook/addons';
 import loadFramework from './frameworkLoader';
 import createChannel from './storybook-channel-mock';
@@ -27,6 +27,8 @@ export {
   imageSnapshot,
 };
 
+const methods = ['beforeAll', 'beforeEach', 'afterEach', 'afterAll'];
+
 export default function testStorySnapshots(options = {}) {
   if (typeof describe !== 'function') {
     throw new Error('testStorySnapshots is intended only to be used inside jest');
@@ -53,6 +55,12 @@ export default function testStorySnapshots(options = {}) {
 
   const testMethod = options.test || snapshotWithOptions({ options: snapshotOptions });
 
+  methods.forEach(method => {
+    if (typeof testMethod[method] === 'function') {
+      global[method](testMethod[method]);
+    }
+  });
+
   // eslint-disable-next-line
   for (const group of stories) {
     const { fileName, kind } = group;
@@ -63,20 +71,6 @@ export default function testStorySnapshots(options = {}) {
     }
 
     describe(suite, () => {
-      beforeEach(() => {
-        if (typeof testMethod.beforeEach === 'function') {
-          return testMethod.beforeEach();
-        }
-        return Promise.resolve();
-      });
-
-      afterEach(() => {
-        if (typeof testMethod.afterEach === 'function') {
-          return testMethod.afterEach();
-        }
-        return Promise.resolve();
-      });
-
       describe(kind, () => {
         // eslint-disable-next-line
         for (const story of group.stories) {

addons/storyshots/src/test-body-image-snapshot.js

@@ -4,10 +4,16 @@ import { logger } from '@storybook/node-logger';
 
 expect.extend({ toMatchImageSnapshot });
 
+// We consider taking the full page is a reasonnable default.
+const defaultScreenshotOptions = () => ({ fullPage: true });
+
+const noop = () => {};
+
 export const imageSnapshot = ({
   storybookUrl = 'http://localhost:6006',
-  getMatchOptions = () => {},
-  beforeScreenshot = () => {},
+  getMatchOptions = noop,
+  getScreenshotOptions = defaultScreenshotOptions,
+  beforeScreenshot = noop,
 }) => {
   let browser; // holds ref to browser. (ie. Chrome)
   let page; // Hold ref to the page to screenshot.
@@ -45,14 +51,13 @@ export const imageSnapshot = ({
         throw e;
       })
       .then(() => beforeScreenshot(page, { context, url }))
-      .then(() =>
-        page.screenshot().then(image => {
-          expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
-        })
-      );
+      .then(() => page.screenshot(getScreenshotOptions({ context, url })))
+      .then(image => {
+        expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
+      });
   };
 
-  testFn.beforeEach = () =>
+  testFn.beforeAll = () =>
     puppeteer
       // add some options "no-sandbox" to make it work properly on some Linux systems as proposed here: https://github.com/Googlechrome/puppeteer/issues/290#issuecomment-322851507
       .launch({ args: ['--no-sandbox ', '--disable-setuid-sandbox'] })
@@ -64,7 +69,7 @@ export const imageSnapshot = ({
         page = p;
       });
 
-  testFn.afterEach = () => browser.close();
+  testFn.afterAll = () => browser.close();
 
   return testFn;
 };

dangerfile.js

@@ -1,17 +1,37 @@
 import { fail, danger } from 'danger';
-import { flatten, intersection, isEmpty, includes } from 'lodash';
+import { flatten, intersection, isEmpty } from 'lodash';
 
 const pkg = require('./package.json'); // eslint-disable-line import/newline-after-import
 const prLogConfig = pkg['pr-log'];
 
+const Versions = {
+  PATCH: 'PATCH',
+  MINOR: 'MINOR',
+  MAJOR: 'MAJOR',
+};
+
+const branchVersion = Versions.PATCH;
+
 const checkRequiredLabels = labels => {
+  const forbiddenLabels = flatten([
+    'do not merge',
+    'in progress',
+    branchVersion !== Versions.MAJOR ? 'BREAKING CHANGE' : [],
+    branchVersion === Versions.PATCH ? 'feature request' : [],
+  ]);
+
   const requiredLabels = flatten([
     prLogConfig.skipLabels || [],
     Object.keys(prLogConfig.validLabels || {}),
   ]);
 
-  if (includes(labels, 'do not merge')) {
-    fail('PR is marked with "do not merge" label.');
+  const blockingLabels = intersection(forbiddenLabels, labels);
+  if (!isEmpty(blockingLabels)) {
+    fail(
+      `PR is marked with ${blockingLabels.map(label => `"${label}"`).join(', ')} label${
+        blockingLabels.length > 1 ? 's' : ''
+      }.`
+    );
   }
 
   const foundLabels = intersection(requiredLabels, labels);

docs/src/pages/testing/react-ui-testing/index.md

@@ -19,7 +19,7 @@ Specifically, testing is important when working with teams since it allows diffe
 
 ## Different Aspects of UI Testing
 
-We refer UI for many things. To put this in focus, let's narrow it down to React based user interfaces.
+We refer to UI for many things. To put this in focus, let's narrow it down to React based user interfaces.
 
 ### 1. Structural Testing
 
@@ -30,7 +30,7 @@ For an example, let's say we have a "login component" as shown below:
 
 For structural testing, we are testing whether or not it has following content:
 
--   A title with "Login in to Facebook"
+-   A title with "Log in to Facebook"
 -   Two inputs for the username and password.
 -   A submit button.
 -   An error screen to show errors.