Merge branch 'ndelangen/import-addon-background' of github.com:storybooks/storybook into ndelangen/import-addon-background

CONTRIBUTING.md

@@ -75,6 +75,58 @@ If you follow that process, you can then link to the github repository in the is
 
 **NOTE**: If your issue involves a webpack config, create-react-app will prevent you from modifying the _app's_ webpack config, however you can still modify storybook's to mirror your app's version of storybook. Alternatively, use `yarn eject` in the CRA app to get a modifiable webpack config.
 
+### Executing Tests Locally
+
+Tests can be executed locally with the `yarn test` command, which gives you CLI options to execute various test suites in different modes. Some of the test suites have special set-up needs, which are listed below.
+
+The execution modes available can be selected from the cli or passed to `yarn test` with specific parameters.  Available modes include `--watch`, `--coverage`, and `--runInBand`, which will respectively run tests in watch mode, output code coverage, and run selected test suites serially in the current process.
+
+#### Core & React & Vue Tests
+
+`yarn test --core`
+
+This option executes test from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`
+Before the tests are ran, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core` 
+
+#### React-Native example Tests
+
+`yarn test --reactnative`
+
+This option executes tests from `<rootdir>/app/react-native`
+Before these tests are ran, the project must be bootstrapped with the React Native example enabled.  You can accomplish this by running `yarn bootstrap --reactnative`
+
+#### Integration Tests (Screenshots of running apps)
+
+`yarn test --integration`
+
+This option executes tests from `<rootdir>/integration`
+In order for the snapshot-integration tests to be executed properly, examples being tested must be running on their defaults ports, as declared in `integration/examples.test.js`
+
+Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images.
+
+### Updating Tests
+
+Before any contributes are submitted in a PR, make sure to add or update meaningful tests. A PR that has failing tests will be regarded as a “Work in Progress” and will not be merged until all tests pass.
+When creating new unit test files, the tests should adhere to a particular folder structure and naming convention, as defined below.
+
+```sh
+#Proper naming convention and structure for js tests files
++-- parentFolder
+|   +-- [filename].js
+|   +-- [filename].test.js
+```
+
+#### Updating Integration Screenshots
+
+Integration screenshots can be updated using pupeteer's screenshot command. For example:
+
+```
+# Take an updated screenshot of http://localhost:9010 and save over existing
+
+await page.goto('http://localhost:9010'); 
+page.screenshot({path: '__image_snapshots__/cra-kitchen-sink-snap.png'});
+```
+
 ## Pull Requests (PRs)
 
 We welcome your contributions. There are many ways you can help us. This is few of those ways:
@@ -106,11 +158,11 @@ Once you've helped out on a few issues, if you'd like triage access you can help
 
 We use the following label scheme to categorize issues:
 
--   **type** - `bug`, `feature`, `question / support`, `discussion`, `greenkeeper`, `maintenance`.
+-   **type** - `bug`, `feature`, `question / support`, `discussion`, `dependencies`, `maintenance`.
 -   **area** - `addon: x`, `addons-api`, `stories-api`, `ui`, etc.
 -   **status** - `needs reproduction`, `needs PR`, `in progress`, etc.
 
-All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `greenkeeper` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring.
+All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `dependencies` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring.
 
 They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can easily see all of the issues for a particular area, and keep the total number of open issues under control.
 

addons/comments/package.json

@@ -40,7 +40,6 @@
     "@kadira/storybook-deployer": "*",
     "@storybook/addon-actions": "^3.2.14",
     "@storybook/react": "^3.2.14",
-    "git-url-parse": "^6.2.2",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0",

addons/info/package.json

@@ -24,7 +24,6 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "git-url-parse": "^6.2.2",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",
     "react-test-renderer": "^16.0.0"

addons/knobs/package.json

@@ -30,7 +30,6 @@
   "devDependencies": {
     "@types/node": "^7.0.46",
     "@types/react": "^16.0.19",
-    "git-url-parse": "^6.2.2",
     "raw-loader": "^0.5.1",
     "react": "^16.0.0",
     "react-dom": "^16.0.0",

addons/knobs/src/components/__tests__/Array.js

@@ -1,12 +1,12 @@
 import React from 'react';
 import { shallow } from 'enzyme'; // eslint-disable-line
-import Array from '../types/Array';
+import ArrayType from '../types/Array';
 
 describe('Array', () => {
   it('should subscribe to setKnobs event of channel', () => {
     const onChange = jest.fn();
     const wrapper = shallow(
-      <Array
+      <ArrayType
         onChange={onChange}
         knob={{ name: 'passions', value: ['Fishing', 'Skiing'], separator: ',' }}
       />
@@ -15,4 +15,19 @@ describe('Array', () => {
     wrapper.simulate('change', { target: { value: 'Fhishing,Skiing,Dancing' } });
     expect(onChange).toHaveBeenCalledWith(['Fhishing', 'Skiing', 'Dancing']);
   });
+
+  it('deserializes an Array to an Array', () => {
+    const array = ['a', 'b', 'c'];
+    const deserialized = ArrayType.deserialize(array);
+
+    expect(deserialized).toEqual(['a', 'b', 'c']);
+  });
+
+  it('deserializes an Object to an Array', () => {
+    const object = { 1: 'one', 0: 'zero', 2: 'two' };
+
+    const deserialized = ArrayType.deserialize(object);
+
+    expect(deserialized).toEqual(['zero', 'one', 'two']);
+  });
 });

addons/knobs/src/components/types/Array.js

@@ -47,6 +47,12 @@ ArrayType.propTypes = {
 };
 
 ArrayType.serialize = value => value;
-ArrayType.deserialize = value => value;
+ArrayType.deserialize = value => {
+  if (Array.isArray(value)) return value;
+
+  return Object.keys(value)
+    .sort()
+    .reduce((array, key) => [...array, value[key]], []);
+};
 
 export default ArrayType;

addons/notes/package.json

@@ -25,7 +25,6 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "git-url-parse": "^6.2.2",
     "react": "^16.0.0",
     "react-addons-test-utils": "^15.5.1",
     "react-dom": "^16.0.0"

addons/storyshots/src/index.js

@@ -88,7 +88,7 @@ export default function testStorySnapshots(options = {}) {
 
           it(story.name, () => {
             const context = { kind: group.kind, story: story.name };
-            options.test({ story, context });
+            return options.test({ story, context });
           });
         }
       });

yarn.lock

@@ -4963,7 +4963,7 @@ git-up@^2.0.0:
     is-ssh "^1.3.0"
     parse-url "^1.3.0"
 
-git-url-parse@^6.0.2, git-url-parse@^6.2.2:
+git-url-parse@^6.0.2:
   version "6.2.2"
   resolved "https://registry.yarnpkg.com/git-url-parse/-/git-url-parse-6.2.2.tgz#be49024e14b8487553436b4572b8b439532fa871"
   dependencies: