Merge branch 'next' into tech/core-builder

# Conflicts:
#	lib/cli/src/versions.json

.circleci/config.yml

@@ -81,9 +81,6 @@ jobs:
     steps:
       - git-shallow-clone/checkout_advanced:
           clone_options: '--depth 1 --verbose'
-      - run:
-          name: Remove examples
-          command: rm -rf examples/
       - restore_cache:
           name: Restore Yarn cache
           keys:
@@ -102,60 +99,12 @@ jobs:
       - persist_to_workspace:
           root: .
           paths:
+            - examples
+            - node_modules
             - addons
             - dev-kits
             - app
             - lib
-  install-examples-deps:
-    executor:
-      class: medium
-      name: sb_node_10_classic
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - restore_cache:
-          name: Restore Yarn cache
-          keys:
-            - install-examples-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
-      - run:
-          name: Install dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn cache
-          key: install-examples-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
-      - persist_to_workspace:
-          root: .
-          paths:
-            - examples
-            - node_modules
-  install-e2e-deps:
-    executor:
-      class: small
-      name: sb_node_10_classic
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - run:
-          name: Keep only root package
-          command: rm -rf examples/ && rm -rf addons/ && rm -rf app/ && rm -rf lib/
-      - restore_cache:
-          name: Restore cached node_modules
-          keys:
-            - install-e2e-deps-node_modules-cache-v1--{{ checksum "yarn.lock" }}
-      - run:
-          name: Install dependencies if cache wasn't hit
-          command: "[ ! -d \"node_modules/\" ] && yarn install --frozen-lockfile || echo \"Skipping yarn install\""
-      - save_cache:
-          name: Save node_modules
-          key: install-e2e-deps-node_modules-cache-v1--{{ checksum "yarn.lock" }}
-          paths:
-            - node_modules
-      - persist_to_workspace:
-          root: .
-          paths:
-            - node_modules
   chromatic:
     executor: sb_node_10_browsers
     parallelism: 4
@@ -490,7 +439,7 @@ jobs:
           at: .
       - run:
           name: Test
-          command: yarn test --coverage --w2 --core
+          command: yarn test --coverage --runInBand --ci
       - persist_to_workspace:
           root: .
           paths:
@@ -512,30 +461,23 @@ workflows:
   test:
     jobs:
       - build
-      - install-e2e-deps
-      - install-examples-deps
       - lint:
           requires:
-            - install-examples-deps
             - build
       - examples:
           requires:
-            - install-examples-deps
             - build
       - e2e-tests-examples:
           requires:
             - examples
       - smoke-tests:
           requires:
-            - install-examples-deps
             - build
       - packtracker:
           requires:
-            - install-examples-deps
             - build
       - unit-tests:
           requires:
-            - install-examples-deps
             - build
       - coverage:
           requires:
@@ -545,7 +487,6 @@ workflows:
             - examples
       - publish:
           requires:
-            - install-e2e-deps
             - build
       - e2e-tests-node-10:
           requires:

.github/workflows/tests-unit.yml

@@ -21,4 +21,4 @@ jobs:
         yarn bootstrap --core
     - name: test
       run: |
-        yarn test --core
+        yarn test --runInBand --ci

CONTRIBUTING.md

@@ -60,27 +60,11 @@ You can also pick suites from CLI. Suites available are listed below.
 
 ##### Core & Examples Tests
 
-`yarn test --core`
+`yarn test`
 
 This option executes tests from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`.
 Before the tests are run, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core`
 
-##### CRA-kitchen-sink - Image snapshots using Storyshots
-
-`yarn test --image`
-
-This option executes tests from `<rootdir>/examples/official-storybook`
-In order for the image snapshots to be correctly generated, you must have a static build of the storybook up-to-date :
-
-```sh
-cd examples/official-storybook
-yarn build-storybook
-cd ../..
-yarn test --image
-```
-
-Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images. (just like integration tests)
-
 #### 2b. Run Linter
 
 We use eslint as a linter for all code (including typescript code).
@@ -264,7 +248,7 @@ If you run into trouble here, make sure your node, npm, and **_yarn_** are on th
 2.  `git clone https://github.com/storybookjs/storybook.git` _bonus_: use your own fork for this step
 3.  `cd storybook`
 4.  `yarn bootstrap --core`
-5.  `yarn test --core`
+5.  `yarn test`
 6.  `yarn dev` _You must have this running for your changes to show up_
 
 > NOTE: on windows you may need to run `yarn` before `yarn bootstrap` (between steps 3 and 4).

lib/ui/src/components/layout/container.tsx

@@ -120,7 +120,7 @@ export const Main: FunctionComponent<{ isFullscreen: boolean; position: CSSPrope
   position = undefined,
   ...props
 }) => (
-  <Pane style={position} top {...props}>
+  <Pane style={position} top {...props} role="main">
     <Paper isFullscreen={isFullscreen}>{children}</Paper>
   </Pane>
 );

package.json

@@ -74,7 +74,8 @@
     "run-chromatics": "node -r esm ./scripts/run-chromatics.js",
     "serve-storybooks": "http-server ./built-storybooks -p 8001",
     "start": "yarn --cwd examples/official-storybook storybook",
-    "test": "node ./scripts/test.js",
+    "test": "NODE_OPTIONS=--max_old_space_size=4096 jest",
+    "test-puppeteer": "jest --projects examples/official-storybook/storyshots-puppeteer",
     "test:cli": "npm --prefix lib/cli run test",
     "test:e2e-examples": "cypress run",
     "test:e2e-examples-gui": "concurrently --success first --kill-others \"cypress open\" \"yarn serve-storybooks\"",

scripts/run-registry.ts

@@ -50,9 +50,9 @@ const startVerdaccio = (port: number) => {
       setTimeout(() => {
         if (!resolved) {
           resolved = true;
-          rej(new Error(`TIMEOUT - verdaccio didn't start within 60s`));
+          rej(new Error(`TIMEOUT - verdaccio didn't start within 10s`));
         }
-      }, 60000);
+      }, 10000);
     }),
   ]);
 };

scripts/test.js

@@ -1,190 +0,0 @@
-#!/usr/bin/env node
-const prompts = require('prompts');
-const program = require('commander');
-const childProcess = require('child_process');
-const chalk = require('chalk');
-const log = require('npmlog');
-const path = require('path');
-
-log.heading = 'storybook';
-const prefix = 'test';
-log.addLevel('aborted', 3001, { fg: 'red', bold: true });
-
-const spawn = (command) => {
-  const out = childProcess.spawnSync(`${command}`, {
-    shell: true,
-    stdio: 'inherit',
-  });
-
-  if (out.status !== 0) {
-    process.exit(out.status);
-  }
-
-  return out;
-};
-
-const main = program.version('3.0.0').option('--all', `Test everything ${chalk.gray('(all)')}`);
-
-const createProject = ({ defaultValue, option, name, projectLocation, isJest, script }) => ({
-  value: false,
-  defaultValue: defaultValue || false,
-  option: option || undefined,
-  name: name || 'unnamed task',
-  script,
-  projectLocation,
-  isJest,
-});
-const createOption = ({ defaultValue, option, name, extraParam }) => ({
-  value: false,
-  defaultValue: defaultValue || false,
-  option: option || undefined,
-  name: name || 'unnamed task',
-  extraParam,
-});
-
-const tasks = {
-  core: createProject({
-    name: `Core & Examples 🎨 ${chalk.gray('(core)')}`,
-    defaultValue: true,
-    option: '--core',
-    projectLocation: '<all>',
-    isJest: true,
-  }),
-  puppeteer: createProject({
-    name: `Puppeteer and A11y tests for Official storybook ${chalk.gray('(puppeteer)')}`,
-    defaultValue: false,
-    option: '--puppeteer',
-    projectLocation: path.join(__dirname, '..', 'examples/official-storybook/storyshots-puppeteer'),
-    isJest: true,
-  }),
-  watchmode: createOption({
-    name: `Run in watch-mode ${chalk.gray('(watchmode)')}`,
-    defaultValue: false,
-    option: '--watch',
-    extraParam: '--watch',
-  }),
-  coverage: createOption({
-    name: `Output coverage reports ${chalk.gray('(coverage)')}`,
-    defaultValue: false,
-    option: '--coverage',
-    extraParam: '--coverage',
-  }),
-  runInBand: createOption({
-    name: `Run all tests serially in the current process ${chalk.gray('(runInBand)')}`,
-    defaultValue: false,
-    option: '--runInBand',
-    extraParam: '--runInBand',
-  }),
-  w2: createOption({
-    name: `Run all tests in max 2 processes process ${chalk.gray('(w2)')}`,
-    defaultValue: false,
-    option: '--w2',
-    extraParam: '-w 2',
-  }),
-  reportLeaks: createOption({
-    name: `report memory leaks ${chalk.gray('(reportLeaks)')}`,
-    defaultValue: false,
-    option: '--reportLeaks',
-    extraParam: '--detectLeaks',
-  }),
-  update: createOption({
-    name: `Update all snapshots ${chalk.gray('(update)')}`,
-    defaultValue: false,
-    option: '--update',
-    extraParam: '-u --updateSnapshot',
-  }),
-};
-
-const getProjects = (list) => list.filter((key) => key.projectLocation);
-
-const getScripts = (list) => list.filter((key) => key.script);
-
-const getExtraParams = (list) => list.filter((key) => key.extraParam).map((key) => key.extraParam);
-
-Object.keys(tasks)
-  .reduce((acc, key) => acc.option(tasks[key].option, tasks[key].name), main)
-  .parse(process.argv);
-
-Object.keys(tasks).forEach((key) => {
-  tasks[key].value =
-    program[tasks[key].option.replace('--', '')] || (program.all && tasks[key].projectLocation);
-});
-
-let selection;
-if (
-  !Object.keys(tasks)
-    .map((key) => tasks[key].value)
-    .filter(Boolean).length
-) {
-  selection = prompts([
-    {
-      type: 'multiselect',
-      message: 'Select which tests to run',
-      name: 'todo',
-      optionsPerPage: 18,
-      choices: Object.values(tasks)
-        .filter((key) => !key.extraParam)
-        .map((key) => ({
-          value: key,
-          title: key.name,
-          selected: key.defaultValue,
-        })),
-    },
-    {
-      type: 'multiselect',
-      message: 'Select extra parameters to add',
-      name: 'params',
-      optionsPerPage: 18,
-      choices: Object.values(tasks)
-        .filter((key) => key.extraParam)
-        .map((key) => ({
-          value: key,
-          title: key.name,
-          selected: key.defaultValue,
-        })),
-    },
-  ]).then(({ todo, params }) => todo.concat(params));
-} else {
-  selection = Promise.resolve(
-    Object.keys(tasks)
-      .map((key) => tasks[key])
-      .filter((item) => item.value === true)
-  );
-}
-
-selection
-  .then((list) => {
-    if (list.length === 0) {
-      log.warn(prefix, 'Nothing to test');
-    } else {
-      const projects = getProjects(list);
-      const jestProjects = projects.filter((key) => key.isJest).map((key) => key.projectLocation);
-      const nonJestProjects = projects.filter((key) => !key.isJest);
-      const extraParams = getExtraParams(list).join(' ');
-      const jest = path.join(__dirname, '..', 'node_modules', '.bin', 'jest');
-
-      if (jestProjects.length > 0) {
-        const projectsParam = jestProjects.some((project) => project === '<all>')
-          ? ''
-          : `--projects ${jestProjects.join(' ')}`;
-
-        const cmd = `cross-env NODE_OPTIONS=--max_old_space_size=4096 ${jest} ${projectsParam} ${extraParams}`;
-
-        spawn(cmd);
-      }
-
-      nonJestProjects.forEach((key) =>
-        spawn(`npm --prefix ${key.projectLocation} test -- ${extraParams}`)
-      );
-
-      const scripts = getScripts(list);
-      scripts.forEach((key) => spawn(`${key.script} -- ${extraParams}`));
-
-      process.stdout.write('\x07');
-    }
-  })
-  .catch((e) => {
-    log.aborted(prefix, chalk.red(e.message));
-    log.silly(prefix, e);
-    process.exit(1);
-  });