From 59555983cfaa3764bf0f07759d619214955eea77 Mon Sep 17 00:00:00 2001 From: Kevin Altman and Ryland Herrick Date: Thu, 2 Nov 2017 13:01:13 -0500 Subject: [PATCH 01/10] Rename import to avoid naming conflict --- addons/knobs/src/components/__tests__/Array.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/addons/knobs/src/components/__tests__/Array.js b/addons/knobs/src/components/__tests__/Array.js index e947754e9aa..f93ceef1f17 100644 --- a/addons/knobs/src/components/__tests__/Array.js +++ b/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( - From 8cb61e1b6b2acd737d2df8a94cc1d1c05d61329e Mon Sep 17 00:00:00 2001 From: Kevin Altman and Ryland Herrick Date: Thu, 2 Nov 2017 13:09:19 -0500 Subject: [PATCH 02/10] Allow Array to be deserialized from an Object When an Array knob's value is serialized from the URL into the store, it is an Object. This ensures that when a user refreshes the page, the Array knob will properly deserialize the Object into an Array. --- addons/knobs/src/components/__tests__/Array.js | 17 +++++++++++++++++ addons/knobs/src/components/types/Array.js | 6 +++++- 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/addons/knobs/src/components/__tests__/Array.js b/addons/knobs/src/components/__tests__/Array.js index f93ceef1f17..0db1249cb5b 100644 --- a/addons/knobs/src/components/__tests__/Array.js +++ b/addons/knobs/src/components/__tests__/Array.js @@ -15,4 +15,21 @@ 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(Array.isArray(deserialized)).toEqual(true); + 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(Array.isArray(deserialized)).toEqual(true); + expect(deserialized).toEqual(['zero', 'one', 'two']); + }); }); diff --git a/addons/knobs/src/components/types/Array.js b/addons/knobs/src/components/types/Array.js index 05126db7fb2..1343c76db65 100644 --- a/addons/knobs/src/components/types/Array.js +++ b/addons/knobs/src/components/types/Array.js @@ -47,6 +47,10 @@ ArrayType.propTypes = { }; ArrayType.serialize = value => value; -ArrayType.deserialize = value => value; +ArrayType.deserialize = value => { + if (Array.isArray(value)) return value; + + return Object.keys(value).reduce((array, key) => [...array, value[key]], []); +}; export default ArrayType; From 696563f2a03a8e36afa9b869a36262dfe543ae16 Mon Sep 17 00:00:00 2001 From: Travis Bloom Date: Thu, 2 Nov 2017 15:22:34 -0400 Subject: [PATCH 03/10] return the test in storyshots so if async work needs to occur before snapshotting, jest waits before failing --- addons/storyshots/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/storyshots/src/index.js b/addons/storyshots/src/index.js index 3d22cf213f3..dd8d44d5e4b 100644 --- a/addons/storyshots/src/index.js +++ b/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 }); }); } }); From 5b86a369c7e0f890239e40ff669a024639edf692 Mon Sep 17 00:00:00 2001 From: hypnos Date: Fri, 3 Nov 2017 04:18:17 +0300 Subject: [PATCH 04/10] Remove stale `git-url-parse` dependency --- addons/comments/package.json | 1 - addons/info/package.json | 1 - addons/knobs/package.json | 1 - addons/notes/package.json | 1 - yarn.lock | 2 +- 5 files changed, 1 insertion(+), 5 deletions(-) diff --git a/addons/comments/package.json b/addons/comments/package.json index 64314ba74fe..d6389111029 100644 --- a/addons/comments/package.json +++ b/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", diff --git a/addons/info/package.json b/addons/info/package.json index d15a0ddeaec..55ae87bdc87 100644 --- a/addons/info/package.json +++ b/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" diff --git a/addons/knobs/package.json b/addons/knobs/package.json index e8db22c4071..cb2c7862e68 100644 --- a/addons/knobs/package.json +++ b/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", diff --git a/addons/notes/package.json b/addons/notes/package.json index 5e5515c2cb4..9d7aacc95f9 100644 --- a/addons/notes/package.json +++ b/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" diff --git a/yarn.lock b/yarn.lock index 6fc6d465f89..df368680c59 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4946,7 +4946,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: From 541bdbcb4390b6f8aede84ab7514a650f3c3d4bf Mon Sep 17 00:00:00 2001 From: hypnos Date: Fri, 3 Nov 2017 04:20:30 +0300 Subject: [PATCH 05/10] Revert "Remove stale `git-url-parse` dependency" This reverts commit 5b86a36 --- addons/comments/package.json | 1 + addons/info/package.json | 1 + addons/knobs/package.json | 1 + addons/notes/package.json | 1 + yarn.lock | 2 +- 5 files changed, 5 insertions(+), 1 deletion(-) diff --git a/addons/comments/package.json b/addons/comments/package.json index d6389111029..64314ba74fe 100644 --- a/addons/comments/package.json +++ b/addons/comments/package.json @@ -40,6 +40,7 @@ "@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", diff --git a/addons/info/package.json b/addons/info/package.json index 55ae87bdc87..d15a0ddeaec 100644 --- a/addons/info/package.json +++ b/addons/info/package.json @@ -24,6 +24,7 @@ "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" diff --git a/addons/knobs/package.json b/addons/knobs/package.json index cb2c7862e68..e8db22c4071 100644 --- a/addons/knobs/package.json +++ b/addons/knobs/package.json @@ -30,6 +30,7 @@ "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", diff --git a/addons/notes/package.json b/addons/notes/package.json index 9d7aacc95f9..5e5515c2cb4 100644 --- a/addons/notes/package.json +++ b/addons/notes/package.json @@ -25,6 +25,7 @@ "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" diff --git a/yarn.lock b/yarn.lock index df368680c59..6fc6d465f89 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4946,7 +4946,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.0.2, git-url-parse@^6.2.2: version "6.2.2" resolved "https://registry.yarnpkg.com/git-url-parse/-/git-url-parse-6.2.2.tgz#be49024e14b8487553436b4572b8b439532fa871" dependencies: From 5454dbb3ccfd45a0ecbe02e1a180185a80fa93dc Mon Sep 17 00:00:00 2001 From: hypnos Date: Fri, 3 Nov 2017 04:18:17 +0300 Subject: [PATCH 06/10] Remove stale `git-url-parse` dependency (cherry picked from commit 5b86a36) --- addons/comments/package.json | 1 - addons/info/package.json | 1 - addons/knobs/package.json | 1 - addons/notes/package.json | 1 - yarn.lock | 2 +- 5 files changed, 1 insertion(+), 5 deletions(-) diff --git a/addons/comments/package.json b/addons/comments/package.json index 64314ba74fe..d6389111029 100644 --- a/addons/comments/package.json +++ b/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", diff --git a/addons/info/package.json b/addons/info/package.json index d15a0ddeaec..55ae87bdc87 100644 --- a/addons/info/package.json +++ b/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" diff --git a/addons/knobs/package.json b/addons/knobs/package.json index e8db22c4071..cb2c7862e68 100644 --- a/addons/knobs/package.json +++ b/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", diff --git a/addons/notes/package.json b/addons/notes/package.json index 5e5515c2cb4..9d7aacc95f9 100644 --- a/addons/notes/package.json +++ b/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" diff --git a/yarn.lock b/yarn.lock index 6fc6d465f89..df368680c59 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4946,7 +4946,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: From ae1d3d374a7c057893fea84c5305e4848c54c6a8 Mon Sep 17 00:00:00 2001 From: syneva-runyan Date: Fri, 3 Nov 2017 08:39:58 -0400 Subject: [PATCH 07/10] updated local test documentation --- CONTRIBUTING.md | 54 ++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 53 insertions(+), 1 deletion(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index ea449d301c7..4f02baaca50 100644 --- a/CONTRIBUTING.md +++ b/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 `/app/react`, `/app/vue`, and `/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 `/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 `/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` + +Pupeteer 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: @@ -110,7 +162,7 @@ We use the following label scheme to categorize issues: - **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. `greenkeeper` is for keeping package dependencies up to date. `maintenance` is ta 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. From b0e27e275268e0c7ac7380d3caceea5e62f57555 Mon Sep 17 00:00:00 2001 From: Daniel Duan <1474548+danielduan@users.noreply.github.com> Date: Fri, 3 Nov 2017 11:58:25 -0400 Subject: [PATCH 08/10] Update CONTRIBUTING.md --- CONTRIBUTING.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 4f02baaca50..811f6ad1f72 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -102,7 +102,7 @@ Before these tests are ran, the project must be bootstrapped with the React Nati This option executes tests from `/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` -Pupeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images. +Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images. ### Updating Tests @@ -158,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 ta 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. From 2f22c2c7cb6117f5125eb4c8dbce5d7b76351e0d Mon Sep 17 00:00:00 2001 From: Ryland Herrick Date: Fri, 3 Nov 2017 16:50:52 -0500 Subject: [PATCH 09/10] Ensure deserialized Array is ordered by index Object.keys does not guarantee any particular order, which could result in an out-of-order array if we did not sort said keys. --- addons/knobs/src/components/types/Array.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/addons/knobs/src/components/types/Array.js b/addons/knobs/src/components/types/Array.js index 1343c76db65..7984bcc3c55 100644 --- a/addons/knobs/src/components/types/Array.js +++ b/addons/knobs/src/components/types/Array.js @@ -50,7 +50,9 @@ ArrayType.serialize = value => value; ArrayType.deserialize = value => { if (Array.isArray(value)) return value; - return Object.keys(value).reduce((array, key) => [...array, value[key]], []); + return Object.keys(value) + .sort() + .reduce((array, key) => [...array, value[key]], []); }; export default ArrayType; From 95cfc674508fe9934998b46bce412c12ec7cb381 Mon Sep 17 00:00:00 2001 From: Ryland Herrick Date: Fri, 3 Nov 2017 16:53:34 -0500 Subject: [PATCH 10/10] Remove redundant expectations The remaining expectations implicitly check whether the objects are arrays. --- addons/knobs/src/components/__tests__/Array.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/addons/knobs/src/components/__tests__/Array.js b/addons/knobs/src/components/__tests__/Array.js index 0db1249cb5b..f803c21679e 100644 --- a/addons/knobs/src/components/__tests__/Array.js +++ b/addons/knobs/src/components/__tests__/Array.js @@ -20,7 +20,6 @@ describe('Array', () => { const array = ['a', 'b', 'c']; const deserialized = ArrayType.deserialize(array); - expect(Array.isArray(deserialized)).toEqual(true); expect(deserialized).toEqual(['a', 'b', 'c']); }); @@ -29,7 +28,6 @@ describe('Array', () => { const deserialized = ArrayType.deserialize(object); - expect(Array.isArray(deserialized)).toEqual(true); expect(deserialized).toEqual(['zero', 'one', 'two']); }); });