mirror of
https://github.com/storybookjs/storybook.git
synced 2025-04-04 16:41:08 +08:00
Merge pull request #14594 from storybookjs/feat/cli-repro-template
CLI: Add repro/link commands for creating/running reproductions
This commit is contained in:
Michael Shilman
GitHub
commit
3d3d88026e
@ -193,12 +193,9 @@ jobs:
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set npmRegistryServer http://localhost:6000/
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
command: yarn test:e2e-framework --clean --skip angular@latest --skip vue3@next --skip web_components_typescript@latest --skip cra@latest
|
||||
command: yarn test:e2e-framework --clean --skip angular --skip vue3 --skip web_components_typescript --skip cra
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
@ -219,17 +216,14 @@ jobs:
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set npmRegistryServer http://localhost:6000/
|
||||
- run:
|
||||
name: Run E2E tests
|
||||
# Do not test CRA nor Web Components here because it's done in PnP part
|
||||
command: yarn test:e2e-framework angular@latest vue3@next
|
||||
command: yarn test:e2e-framework vue3 angular
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
e2e-tests-cra-bench:
|
||||
cra-bench:
|
||||
executor:
|
||||
class: medium
|
||||
name: sb_cypress_6_node_12
|
||||
@ -246,15 +240,13 @@ jobs:
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set npmRegistryServer http://localhost:6000/
|
||||
- run:
|
||||
name: Run @storybook/bench on a CRA project
|
||||
command: yarn test:e2e-framework cra_bench
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
command: |
|
||||
cd ..
|
||||
npx create-react-app cra-bench
|
||||
cd cra-bench
|
||||
npx @storybook/bench 'npx sb init' --label cra
|
||||
e2e-tests-pnp:
|
||||
executor:
|
||||
class: medium
|
||||
@ -272,12 +264,9 @@ jobs:
|
||||
- run:
|
||||
name: Wait for registry
|
||||
command: yarn wait-on http://localhost:6000
|
||||
- run:
|
||||
name: Set registry
|
||||
command: yarn config set npmRegistryServer http://localhost:6000/
|
||||
- run:
|
||||
name: run e2e tests
|
||||
command: yarn test:e2e-framework --use-yarn-2-pnp sfcVue@latest cra@latest web_components_typescript@latest
|
||||
command: yarn test:e2e-framework --pnp sfcVue cra web_components_typescript
|
||||
- store_artifacts:
|
||||
path: /tmp/storybook/cypress
|
||||
destination: cypress
|
||||
@ -451,7 +440,7 @@ workflows:
|
||||
- e2e-tests-pnp:
|
||||
requires:
|
||||
- publish
|
||||
- e2e-tests-cra-bench:
|
||||
- cra-bench:
|
||||
requires:
|
||||
- publish
|
||||
deploy:
|
||||
|
||||
@ -9,6 +9,8 @@ import { add } from './add';
|
||||
import { migrate } from './migrate';
|
||||
import { extract } from './extract';
|
||||
import { upgrade } from './upgrade';
|
||||
import { repro } from './repro';
|
||||
import { link } from './link';
|
||||
|
||||
const pkg = sync({ cwd: __dirname }).packageJson;
|
||||
|
||||
@ -25,6 +27,7 @@ program
|
||||
.option('--story-format <csf | csf-ts | mdx >', 'Generate stories in a specified format')
|
||||
.option('-y --yes', 'Answer yes to all prompts')
|
||||
.option('-b --builder <builder>', 'Builder library')
|
||||
.option('-l --linkable', 'Prepare installation for link (contributor helper)')
|
||||
.action((options) => initiate(options, pkg));
|
||||
|
||||
program
|
||||
@ -90,6 +93,32 @@ program
|
||||
})
|
||||
);
|
||||
|
||||
program
|
||||
.command('repro [outputDirectory]')
|
||||
.description('Create a reproduction from a set of possible templates')
|
||||
.option('-f --framework <framework>', 'Filter on given framework')
|
||||
.option('-t --template <template>', 'Use the given template')
|
||||
.option('-l --list', 'List available templates')
|
||||
.option('-g --generator <generator>', 'Use custom generator command')
|
||||
.option('--pnp', "Use Yarn Plug'n'Play mode instead of node_modules one")
|
||||
.option('--e2e', 'Used in e2e context')
|
||||
.action((outputDirectory, { framework, template, list, e2e, generator, pnp }) =>
|
||||
repro({ outputDirectory, framework, template, list, e2e, generator, pnp }).catch((e) => {
|
||||
logger.error(e);
|
||||
process.exit(1);
|
||||
})
|
||||
);
|
||||
|
||||
program
|
||||
.command('link <repro-url>')
|
||||
.description('Pull down a repro from a URL, link it, and run storybook')
|
||||
.action((reproUrl) =>
|
||||
link({ reproUrl }).catch((e) => {
|
||||
logger.error(e);
|
||||
process.exit(1);
|
||||
})
|
||||
);
|
||||
|
||||
program.on('command:*', ([invalidCmd]) => {
|
||||
logger.error(' Invalid command: %s.\n See --help for a list of available commands.', invalidCmd);
|
||||
// eslint-disable-next-line
|
||||
|
||||
@ -4,6 +4,22 @@ import fs from 'fs';
|
||||
import { baseGenerator, Generator } from '../baseGenerator';
|
||||
|
||||
const generator: Generator = async (packageManager, npmOptions, options) => {
|
||||
const extraMain = options.linkable
|
||||
? {
|
||||
webpackFinal: `%%(config) => {
|
||||
const path = require('path');
|
||||
// add monorepo root as a valid directory to import modules from
|
||||
config.resolve.plugins.forEach((p) => {
|
||||
if (Array.isArray(p.appSrcs)) {
|
||||
p.appSrcs.push(path.join(__dirname, '..', '..', '..', 'storybook'));
|
||||
}
|
||||
});
|
||||
return config;
|
||||
}
|
||||
%%`,
|
||||
}
|
||||
: {};
|
||||
|
||||
await baseGenerator(packageManager, npmOptions, options, 'react', {
|
||||
extraAddons: ['@storybook/preset-create-react-app'],
|
||||
// `@storybook/preset-create-react-app` has `@storybook/node-logger` as peerDep
|
||||
@ -11,6 +27,7 @@ const generator: Generator = async (packageManager, npmOptions, options) => {
|
||||
staticDir: fs.existsSync(path.resolve('./public')) ? 'public' : undefined,
|
||||
addBabel: false,
|
||||
addESLint: true,
|
||||
extraMain,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
@ -14,6 +14,7 @@ export type GeneratorOptions = {
|
||||
language: SupportedLanguage;
|
||||
storyFormat: StoryFormat;
|
||||
builder: Builder;
|
||||
linkable: boolean;
|
||||
};
|
||||
|
||||
export interface FrameworkOptions {
|
||||
|
||||
@ -35,7 +35,8 @@ function configureMain({
|
||||
const stringified = `module.exports = ${JSON.stringify(config, null, 2)
|
||||
.replace(/\\"/g, '"')
|
||||
.replace(/['"]%%/g, '')
|
||||
.replace(/%%['"]/, '')}`;
|
||||
.replace(/%%['"]/, '')
|
||||
.replace(/\\n/g, '\r\n')}`;
|
||||
fse.ensureDirSync('./.storybook');
|
||||
fse.writeFileSync(`./.storybook/main.${commonJs ? 'cjs' : 'js'}`, stringified, {
|
||||
encoding: 'utf8',
|
||||
|
||||
@ -48,6 +48,7 @@ type CommandOptions = {
|
||||
parser?: string;
|
||||
yes?: boolean;
|
||||
builder?: Builder;
|
||||
linkable?: boolean;
|
||||
};
|
||||
|
||||
const installStorybook = (projectType: ProjectType, options: CommandOptions): Promise<void> => {
|
||||
@ -69,6 +70,7 @@ const installStorybook = (projectType: ProjectType, options: CommandOptions): Pr
|
||||
storyFormat: options.storyFormat || defaultStoryFormat,
|
||||
language,
|
||||
builder: options.builder || CoreBuilder.Webpack4,
|
||||
linkable: !!options.linkable,
|
||||
};
|
||||
|
||||
const end = () => {
|
||||
|
||||
43
lib/cli/src/link.ts
Normal file
43
lib/cli/src/link.ts
Normal file
@ -0,0 +1,43 @@
|
||||
import fse from 'fs-extra';
|
||||
import path from 'path';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import { exec } from './repro-generators/scripts';
|
||||
|
||||
interface LinkOptions {
|
||||
reproUrl: string;
|
||||
}
|
||||
|
||||
export const link = async ({ reproUrl }: LinkOptions) => {
|
||||
const storybookDirectory = process.cwd();
|
||||
try {
|
||||
const packageJson = JSON.parse(fse.readFileSync('package.json', 'utf8'));
|
||||
if (packageJson.name !== '@storybook/root') throw new Error();
|
||||
} catch {
|
||||
throw new Error('Expected to run link from the root of the storybook monorepo');
|
||||
}
|
||||
|
||||
const reprosDirectory = path.join(storybookDirectory, '../storybook-repros');
|
||||
logger.info(`Ensuring directory ${reprosDirectory}`);
|
||||
fse.ensureDirSync(reprosDirectory);
|
||||
|
||||
logger.info(`Cloning ${reproUrl}`);
|
||||
await exec(`git clone ${reproUrl}`, { cwd: reprosDirectory });
|
||||
// Extract a repro name from url given as input (take the last part of the path and remove the extension)
|
||||
const reproName = path.basename(reproUrl, path.extname(reproUrl));
|
||||
const repro = path.join(reprosDirectory, reproName);
|
||||
|
||||
logger.info(`Linking ${repro}`);
|
||||
await exec(`yarn link --all ${storybookDirectory}`, { cwd: repro });
|
||||
|
||||
logger.info(`Installing ${reproName}`);
|
||||
await exec(`yarn install`, { cwd: repro });
|
||||
|
||||
// ⚠️ TODO: Fix peer deps in `@storybook/preset-create-react-app`
|
||||
logger.info(
|
||||
`Magic stuff related to @storybook/preset-create-react-app, we need to fix peerDependencies`
|
||||
);
|
||||
await exec(`yarn add -D webpack-hot-middleware`, { cwd: repro });
|
||||
|
||||
logger.info(`Running ${reproName} storybook`);
|
||||
await exec(`yarn run storybook`, { cwd: repro });
|
||||
};
|
||||
@ -1,8 +1,25 @@
|
||||
import { Parameters } from './run-e2e';
|
||||
import { SupportedFrameworks } from '../project_types';
|
||||
|
||||
export interface Parameters {
|
||||
framework: SupportedFrameworks;
|
||||
/** E2E configuration name */
|
||||
name: string;
|
||||
/** framework version */
|
||||
version: string;
|
||||
/** CLI to bootstrap the project */
|
||||
generator: string;
|
||||
/** Use storybook framework detection */
|
||||
autoDetect?: boolean;
|
||||
/** Dependencies to add before building Storybook */
|
||||
additionalDeps?: string[];
|
||||
/** Add typescript dependency and creates a tsconfig.json file */
|
||||
typescript?: boolean;
|
||||
}
|
||||
|
||||
const fromDeps = (...args: string[]): string =>
|
||||
[
|
||||
'cd {{name}}-{{version}}',
|
||||
'mkdir {{appName}}',
|
||||
'cd {{appName}}',
|
||||
// Create `yarn.lock` to force Yarn to consider adding deps in this directory
|
||||
// and not look for a yarn workspace in parent directory
|
||||
'touch yarn.lock',
|
||||
@ -12,126 +29,86 @@ const fromDeps = (...args: string[]): string =>
|
||||
.filter(Boolean)
|
||||
.join(' && ');
|
||||
|
||||
const baseAngular: Parameters = {
|
||||
name: 'angular',
|
||||
// #region React
|
||||
export const cra: Parameters = {
|
||||
framework: 'react',
|
||||
name: 'cra',
|
||||
version: 'latest',
|
||||
generator: [
|
||||
`yarn dlx --package @angular/cli@{{version}} ng new {{name}}-{{version}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`,
|
||||
`cd {{name}}-{{version}}`,
|
||||
// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
|
||||
'npx create-react-app@{{version}} {{appName}} --use-npm',
|
||||
'cd {{appName}}',
|
||||
'echo "FAST_REFRESH=true" > .env',
|
||||
].join(' && '),
|
||||
};
|
||||
|
||||
export const angularv10: Parameters = {
|
||||
...baseAngular,
|
||||
// There is no `v10-lts` tag for now, to update as soon as one is published
|
||||
version: 'v10',
|
||||
};
|
||||
|
||||
export const angular: Parameters = baseAngular;
|
||||
|
||||
// TODO: not working yet, help needed
|
||||
// export const ember: Parameters = {
|
||||
// name: 'ember',
|
||||
// version: 'latest',
|
||||
// generator:
|
||||
// 'npx ember-cli@{{version}} new {{name}}-{{version}} --skip-git --skip-npm --yarn --skip-bower',
|
||||
// preBuildCommand: 'ember build',
|
||||
// };
|
||||
|
||||
export const html: Parameters = {
|
||||
name: 'html',
|
||||
export const cra_typescript: Parameters = {
|
||||
framework: 'react',
|
||||
name: 'cra_typescript',
|
||||
version: 'latest',
|
||||
generator: fromDeps(),
|
||||
autoDetect: false,
|
||||
};
|
||||
|
||||
// TODO: need to install meteor first
|
||||
// export const meteor: Parameters = {
|
||||
// name: 'meteor',
|
||||
// version: 'latest',
|
||||
// generator: 'meteor create {{name}}-{{version}} --minimal --react',
|
||||
// };
|
||||
|
||||
export const preact: Parameters = {
|
||||
name: 'preact',
|
||||
version: 'latest',
|
||||
generator:
|
||||
'npx preact-cli@{{version}} create preactjs-templates/default {{name}}-{{version}} --yarn --install=false --git=false',
|
||||
ensureDir: false,
|
||||
generator: [
|
||||
// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
|
||||
'npx create-react-app@{{version}} {{appName}} --template typescript --use-npm',
|
||||
].join(' && '),
|
||||
};
|
||||
|
||||
export const react: Parameters = {
|
||||
framework: 'react',
|
||||
name: 'react',
|
||||
version: 'latest',
|
||||
generator: fromDeps('react', 'react-dom'),
|
||||
};
|
||||
|
||||
export const react_typescript: Parameters = {
|
||||
framework: 'react',
|
||||
name: 'react_typescript',
|
||||
version: 'latest',
|
||||
generator: fromDeps('react', 'react-dom'),
|
||||
typescript: true,
|
||||
};
|
||||
|
||||
// export const reactNative: Parameters = {
|
||||
// name: 'reactNative',
|
||||
// version: 'latest',
|
||||
// generator: 'npx expo-cli init {{name}}-{{version}} --template=bare-minimum --yarn',
|
||||
// };
|
||||
export const webpack_react: Parameters = {
|
||||
framework: 'react',
|
||||
name: 'webpack_react',
|
||||
version: 'latest',
|
||||
generator: fromDeps('react', 'react-dom', 'webpack@webpack-4'),
|
||||
};
|
||||
|
||||
// TODO: issue in @storybook/cli init
|
||||
export const cra: Parameters = {
|
||||
name: 'cra',
|
||||
export const react_in_yarn_workspace: Parameters = {
|
||||
framework: 'react',
|
||||
name: 'react_in_yarn_workspace',
|
||||
version: 'latest',
|
||||
generator: [
|
||||
'yarn dlx create-react-app@{{version}} {{name}}-{{version}}',
|
||||
'cd {{name}}-{{version}}',
|
||||
'echo "FAST_REFRESH=true" > .env',
|
||||
'mkdir {{appName}}',
|
||||
'cd {{appName}}',
|
||||
'echo "{ \\"name\\": \\"workspace-root\\", \\"private\\": true, \\"workspaces\\": [] }" > package.json',
|
||||
'touch yarn.lock',
|
||||
`yarn add react react-dom`,
|
||||
].join(' && '),
|
||||
};
|
||||
|
||||
export const cra_typescript: Parameters = {
|
||||
name: 'cra_typescript',
|
||||
// #endregion
|
||||
|
||||
// #region Angular
|
||||
const baseAngular: Parameters = {
|
||||
framework: 'angular',
|
||||
name: 'angular',
|
||||
version: 'latest',
|
||||
generator: 'yarn dlx create-react-app@{{version}} {{name}}-{{version}} --template typescript',
|
||||
generator: `npx --package @angular/cli@{{version}} ng new {{appName}} --routing=true --minimal=true --style=scss --skipInstall=true --strict`,
|
||||
};
|
||||
|
||||
export const sfcVue: Parameters = {
|
||||
name: 'sfcVue',
|
||||
version: 'latest',
|
||||
generator: fromDeps('vue', 'vue-loader', 'vue-template-compiler', 'webpack@webpack-4'),
|
||||
export const angular10: Parameters = {
|
||||
...baseAngular,
|
||||
name: 'angular10',
|
||||
version: 'v10-lts',
|
||||
};
|
||||
|
||||
export const svelte: Parameters = {
|
||||
name: 'svelte',
|
||||
version: 'latest',
|
||||
generator: 'yarn dlx degit sveltejs/template {{name}}-{{version}}',
|
||||
};
|
||||
|
||||
export const vue: Parameters = {
|
||||
name: 'vue',
|
||||
version: 'latest',
|
||||
generator: [
|
||||
`echo '{"useTaobaoRegistry": false}' > ~/.vuerc`,
|
||||
// Need to remove this file otherwise there is an issue when vue-cli is trying to install the dependency in the bootstrapped folder
|
||||
`rm package.json`,
|
||||
`yarn dlx -p @vue/cli@{{version}} vue create {{name}}-{{version}} --default --packageManager=yarn --no-git --force`,
|
||||
].join(' && '),
|
||||
};
|
||||
|
||||
export const vue3: Parameters = {
|
||||
name: 'vue3',
|
||||
version: 'next',
|
||||
// Vue CLI v4 utilizes webpack 4, and the 5-alpha uses webpack 5 so we force ^4 here
|
||||
generator: [
|
||||
`echo '{"useTaobaoRegistry": false}' > ~/.vuerc`,
|
||||
// Need to remove this file otherwise there is an issue when vue-cli is trying to install the dependency in the bootstrapped folder
|
||||
`rm package.json`,
|
||||
`yarn dlx -p @vue/cli@^4 vue create {{name}}-{{version}} --preset=__default_vue_3__ --packageManager=yarn --no-git --force`,
|
||||
].join(' && '),
|
||||
};
|
||||
export const angular: Parameters = baseAngular;
|
||||
// #endregion
|
||||
|
||||
// #region web components
|
||||
export const web_components: Parameters = {
|
||||
framework: 'web-components',
|
||||
name: 'web_components',
|
||||
version: 'latest',
|
||||
generator: fromDeps('lit-element'),
|
||||
@ -143,32 +120,61 @@ export const web_components_typescript: Parameters = {
|
||||
typescript: true,
|
||||
};
|
||||
|
||||
export const webpack_react: Parameters = {
|
||||
name: 'webpack_react',
|
||||
version: 'latest',
|
||||
generator: fromDeps('react', 'react-dom', 'webpack@webpack-4'),
|
||||
};
|
||||
// #endregion
|
||||
|
||||
export const react_in_yarn_workspace: Parameters = {
|
||||
name: 'react_in_yarn_workspace',
|
||||
// #region vue
|
||||
|
||||
export const vue: Parameters = {
|
||||
framework: 'vue',
|
||||
name: 'vue',
|
||||
version: 'latest',
|
||||
generator: [
|
||||
'cd {{name}}-{{version}}',
|
||||
'echo "{ \\"name\\": \\"workspace-root\\", \\"private\\": true, \\"workspaces\\": [] }" > package.json',
|
||||
'touch yarn.lock',
|
||||
`yarn add react react-dom`,
|
||||
`echo '{"useTaobaoRegistry": false}' > ~/.vuerc`,
|
||||
// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
|
||||
`npx -p @vue/cli@{{version}} vue create {{appName}} --default --packageManager=npm --no-git --force`,
|
||||
].join(' && '),
|
||||
};
|
||||
|
||||
// View results at: https://datastudio.google.com/reporting/c34f64ee-400f-4d06-ad4f-5c2133e226da
|
||||
export const cra_bench: Parameters = {
|
||||
name: 'cra_bench',
|
||||
version: 'latest',
|
||||
export const vue3: Parameters = {
|
||||
framework: 'vue3',
|
||||
name: 'vue3',
|
||||
version: 'next',
|
||||
// Vue CLI v4 utilizes webpack 4, and the 5-alpha uses webpack 5 so we force ^4 here
|
||||
generator: [
|
||||
'yarn dlx create-react-app@{{version}} {{name}}-{{version}}',
|
||||
'cd {{name}}-{{version}}',
|
||||
// TODO: Move from `npx` to `yarn dlx`, it is not working out of the box
|
||||
// because of the fancy things done in `@storybook/bench` to investigate 🔎
|
||||
"npx @storybook/bench 'npx sb init' --label cra",
|
||||
`echo '{"useTaobaoRegistry": false}' > ~/.vuerc`,
|
||||
// Force npm otherwise we have a mess between Yarn 1 and Yarn 2
|
||||
`npx -p @vue/cli@^4 vue create {{appName}} --preset=__default_vue_3__ --packageManager=npm --no-git --force`,
|
||||
].join(' && '),
|
||||
};
|
||||
|
||||
// #endregion
|
||||
|
||||
export const html: Parameters = {
|
||||
framework: 'html',
|
||||
name: 'html',
|
||||
version: 'latest',
|
||||
generator: fromDeps(),
|
||||
autoDetect: false,
|
||||
};
|
||||
|
||||
export const preact: Parameters = {
|
||||
framework: 'preact',
|
||||
name: 'preact',
|
||||
version: 'latest',
|
||||
generator:
|
||||
'npx preact-cli@{{version}} create preactjs-templates/default {{appName}} --install=false --git=false',
|
||||
};
|
||||
|
||||
export const sfcVue: Parameters = {
|
||||
framework: 'vue',
|
||||
name: 'sfcVue',
|
||||
version: 'latest',
|
||||
generator: fromDeps('vue', 'vue-loader', 'vue-template-compiler', 'webpack@webpack-4'),
|
||||
};
|
||||
|
||||
export const svelte: Parameters = {
|
||||
framework: 'svelte',
|
||||
name: 'svelte',
|
||||
version: 'latest',
|
||||
generator: 'npx degit sveltejs/template {{appName}}',
|
||||
};
|
||||
217
lib/cli/src/repro-generators/scripts.ts
Normal file
217
lib/cli/src/repro-generators/scripts.ts
Normal file
@ -0,0 +1,217 @@
|
||||
/* eslint-disable no-irregular-whitespace */
|
||||
import path from 'path';
|
||||
import { writeJSON } from 'fs-extra';
|
||||
import shell, { ExecOptions } from 'shelljs';
|
||||
|
||||
const logger = console;
|
||||
|
||||
export interface Parameters {
|
||||
/** E2E configuration name */
|
||||
name: string;
|
||||
/** framework version */
|
||||
version: string;
|
||||
/** CLI to bootstrap the project */
|
||||
generator: string;
|
||||
/** Use storybook framework detection */
|
||||
autoDetect?: boolean;
|
||||
/** Pre-build hook */
|
||||
preBuildCommand?: string;
|
||||
/** When cli complains when folder already exists */
|
||||
ensureDir?: boolean;
|
||||
/** Dependencies to add before building Storybook */
|
||||
additionalDeps?: string[];
|
||||
/** Add typescript dependency and creates a tsconfig.json file */
|
||||
typescript?: boolean;
|
||||
}
|
||||
|
||||
interface Configuration {
|
||||
e2e: boolean;
|
||||
pnp: boolean;
|
||||
}
|
||||
|
||||
const useLocalSbCli = true;
|
||||
|
||||
export interface Options extends Parameters {
|
||||
appName: string;
|
||||
creationPath: string;
|
||||
cwd?: string;
|
||||
e2e: boolean;
|
||||
pnp: boolean;
|
||||
}
|
||||
|
||||
export const exec = async (command: string, options: ExecOptions = {}) =>
|
||||
new Promise((resolve, reject) => {
|
||||
shell.exec(command, options, (code) => {
|
||||
if (code === 0) {
|
||||
resolve(undefined);
|
||||
} else {
|
||||
reject(new Error(`command exited with code: ${code}`));
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const installYarn2 = async ({ cwd, pnp }: Options) => {
|
||||
const commands = [
|
||||
`yarn set version berry`,
|
||||
`yarn config set enableGlobalCache true`,
|
||||
`yarn config set nodeLinker ${pnp ? 'pnp' : 'node-modules'}`,
|
||||
];
|
||||
|
||||
const command = commands.join(' && ');
|
||||
|
||||
logger.info(`🧶 Installing Yarn 2`);
|
||||
logger.debug(command);
|
||||
|
||||
try {
|
||||
await exec(command, { cwd });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Installing Yarn 2 failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const configureYarn2ForE2E = async ({ cwd }: Options) => {
|
||||
const commands = [
|
||||
// ⚠️ Need to set registry because Yarn 2 is not using the conf of Yarn 1 (URL is hardcoded in CircleCI config.yml)
|
||||
`yarn config set npmScopes --json '{ "storybook": { "npmRegistryServer": "http://localhost:6000/" } }'`,
|
||||
// Some required magic to be able to fetch deps from local registry
|
||||
`yarn config set unsafeHttpWhitelist --json '["localhost"]'`,
|
||||
// Disable fallback mode to make sure everything is required correctly
|
||||
`yarn config set pnpFallbackMode none`,
|
||||
// We need to be able to update lockfile when bootstrapping the examples
|
||||
`yarn config set enableImmutableInstalls false`,
|
||||
// Discard all YN0013 - FETCH_NOT_CACHED messages
|
||||
`yarn config set logFilters --json '[ { "code": "YN0013", "level": "discard" } ]'`,
|
||||
];
|
||||
|
||||
const command = commands.join(' && ');
|
||||
logger.info(`🎛 Configuring Yarn 2`);
|
||||
logger.debug(command);
|
||||
|
||||
try {
|
||||
await exec(command, { cwd });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Configuring Yarn 2 failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const generate = async ({ cwd, name, appName, version, generator }: Options) => {
|
||||
const command = generator.replace(/{{appName}}/g, appName).replace(/{{version}}/g, version);
|
||||
|
||||
logger.info(`🏗 Bootstrapping ${name} project`);
|
||||
logger.debug(command);
|
||||
|
||||
try {
|
||||
await exec(command, { cwd });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Bootstrapping ${name} failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const initStorybook = async ({ cwd, autoDetect = true, name, e2e }: Options) => {
|
||||
logger.info(`🎨 Initializing Storybook with @storybook/cli`);
|
||||
try {
|
||||
const type = autoDetect ? '' : `--type ${name}`;
|
||||
const linkable = e2e ? '' : '--linkable';
|
||||
const sbCLICommand = useLocalSbCli
|
||||
? `node ${path.join(__dirname, '../../esm/generate')}`
|
||||
: `yarn dlx -p @storybook/cli sb`;
|
||||
|
||||
await exec(`${sbCLICommand} init --yes ${type} ${linkable}`, { cwd });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Storybook initialization failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const addRequiredDeps = async ({ cwd, additionalDeps }: Options) => {
|
||||
logger.info(`🌍 Adding needed deps & installing all deps`);
|
||||
try {
|
||||
// Remove any lockfile generated without Yarn 2
|
||||
shell.rm(path.join(cwd, 'package-lock.json'), path.join(cwd, 'yarn.lock'));
|
||||
if (additionalDeps && additionalDeps.length > 0) {
|
||||
await exec(`yarn add -D ${additionalDeps.join(' ')}`, {
|
||||
cwd,
|
||||
});
|
||||
} else {
|
||||
await exec(`yarn install`, {
|
||||
cwd,
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Dependencies installation failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const addTypescript = async ({ cwd }: Options) => {
|
||||
logger.info(`👮🏻 Adding typescript and tsconfig.json`);
|
||||
try {
|
||||
await exec(`yarn add -D typescript@latest`, { cwd });
|
||||
const tsConfig = {
|
||||
compilerOptions: {
|
||||
baseUrl: '.',
|
||||
esModuleInterop: true,
|
||||
jsx: 'preserve',
|
||||
skipLibCheck: true,
|
||||
strict: true,
|
||||
},
|
||||
include: ['src/*'],
|
||||
};
|
||||
const tsConfigJsonPath = path.resolve(cwd, 'tsconfig.json');
|
||||
await writeJSON(tsConfigJsonPath, tsConfig, { encoding: 'utf8', spaces: 2 });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Creating tsconfig.json failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const doTask = async (
|
||||
task: (options: Options) => Promise<void>,
|
||||
options: Options,
|
||||
condition = true
|
||||
) => {
|
||||
if (condition) {
|
||||
await task(options);
|
||||
logger.log();
|
||||
}
|
||||
};
|
||||
|
||||
export const createAndInit = async (
|
||||
cwd: string,
|
||||
{ name, version, ...rest }: Parameters,
|
||||
{ e2e, pnp }: Configuration
|
||||
) => {
|
||||
const options: Options = {
|
||||
name,
|
||||
version,
|
||||
appName: path.basename(cwd),
|
||||
creationPath: path.join(cwd, '..'),
|
||||
cwd,
|
||||
e2e,
|
||||
pnp,
|
||||
...rest,
|
||||
};
|
||||
|
||||
logger.log();
|
||||
logger.info(`🏃♀️ Starting for ${name} ${version}`);
|
||||
logger.log();
|
||||
logger.debug(options);
|
||||
logger.log();
|
||||
|
||||
console.log({ creationPath: options.creationPath });
|
||||
|
||||
await doTask(generate, { ...options, cwd: options.creationPath });
|
||||
|
||||
await doTask(installYarn2, options);
|
||||
|
||||
if (e2e) {
|
||||
await doTask(configureYarn2ForE2E, options);
|
||||
}
|
||||
|
||||
await doTask(addTypescript, options, !!options.typescript);
|
||||
await doTask(addRequiredDeps, options);
|
||||
await doTask(initStorybook, options);
|
||||
};
|
||||
125
lib/cli/src/repro.ts
Normal file
125
lib/cli/src/repro.ts
Normal file
@ -0,0 +1,125 @@
|
||||
import prompts from 'prompts';
|
||||
import { logger } from '@storybook/node-logger';
|
||||
import path from 'path';
|
||||
import { createAndInit, Parameters, exec } from './repro-generators/scripts';
|
||||
import * as configs from './repro-generators/configs';
|
||||
import { SupportedFrameworks } from './project_types';
|
||||
|
||||
interface ReproOptions {
|
||||
outputDirectory: string;
|
||||
framework?: SupportedFrameworks;
|
||||
list?: boolean;
|
||||
template?: string;
|
||||
e2e?: boolean;
|
||||
generator?: string;
|
||||
pnp?: boolean;
|
||||
}
|
||||
|
||||
const TEMPLATES = configs as Record<string, Parameters>;
|
||||
|
||||
const FRAMEWORKS = Object.values(configs).reduce<Record<SupportedFrameworks, Parameters[]>>(
|
||||
(acc, cur) => {
|
||||
acc[cur.framework] = [...(acc[cur.framework] || []), cur];
|
||||
return acc;
|
||||
},
|
||||
{} as Record<SupportedFrameworks, Parameters[]>
|
||||
);
|
||||
|
||||
export const repro = async ({
|
||||
outputDirectory,
|
||||
list,
|
||||
template,
|
||||
framework,
|
||||
generator,
|
||||
e2e,
|
||||
pnp,
|
||||
}: ReproOptions) => {
|
||||
if (list) {
|
||||
logger.info('Available templates');
|
||||
Object.entries(FRAMEWORKS).forEach(([fmwrk, templates]) => {
|
||||
logger.info(fmwrk);
|
||||
templates.forEach((t) => logger.info(`- ${t.name}`));
|
||||
if (fmwrk === 'other') {
|
||||
logger.info('- blank');
|
||||
}
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
let selectedDirectory = outputDirectory;
|
||||
if (!selectedDirectory) {
|
||||
const { directory } = await prompts({
|
||||
type: 'text',
|
||||
message: 'Enter the output directory',
|
||||
name: 'directory',
|
||||
});
|
||||
selectedDirectory = directory;
|
||||
// if (fs.existsSync(selectedDirectory)) {
|
||||
// throw new Error(`Repro: ${selectedDirectory} already exists`);
|
||||
// }
|
||||
}
|
||||
|
||||
let selectedTemplate = template;
|
||||
let selectedFramework = framework;
|
||||
if (!selectedTemplate && !generator) {
|
||||
if (!selectedFramework) {
|
||||
const { framework: frameworkOpt } = await prompts({
|
||||
type: 'select',
|
||||
message: 'Select the repro framework',
|
||||
name: 'framework',
|
||||
choices: Object.keys(FRAMEWORKS).map((f) => ({ title: f, value: f })),
|
||||
});
|
||||
selectedFramework = frameworkOpt;
|
||||
}
|
||||
selectedTemplate = (
|
||||
await prompts({
|
||||
type: 'select',
|
||||
message: 'Select the repro base template',
|
||||
name: 'template',
|
||||
choices: FRAMEWORKS[selectedFramework as SupportedFrameworks].map((f) => ({
|
||||
title: f.name,
|
||||
value: f.name,
|
||||
})),
|
||||
})
|
||||
).template;
|
||||
}
|
||||
|
||||
const selectedConfig = !generator
|
||||
? TEMPLATES[selectedTemplate]
|
||||
: {
|
||||
name: 'custom',
|
||||
version: 'custom',
|
||||
generator,
|
||||
};
|
||||
|
||||
if (!selectedConfig) {
|
||||
throw new Error('Repro: please specify a valid template type');
|
||||
}
|
||||
|
||||
try {
|
||||
const cwd = path.isAbsolute(selectedDirectory)
|
||||
? selectedDirectory
|
||||
: path.join(process.cwd(), selectedDirectory);
|
||||
|
||||
logger.info(`Running ${selectedTemplate} into ${cwd}`);
|
||||
|
||||
await createAndInit(cwd, selectedConfig, {
|
||||
e2e: !!e2e,
|
||||
pnp: !!pnp,
|
||||
});
|
||||
|
||||
if (!e2e) {
|
||||
await initGitRepo(cwd);
|
||||
}
|
||||
} catch (error) {
|
||||
logger.error('Failed to create repro');
|
||||
}
|
||||
};
|
||||
|
||||
const initGitRepo = async (cwd: string) => {
|
||||
await exec('git init', { cwd });
|
||||
await exec('echo "node_modules" >> .gitignore', { cwd });
|
||||
await exec('git add --all', { cwd });
|
||||
await exec('git commit -am "added storybook"', { cwd });
|
||||
await exec('git tag repro-base', { cwd });
|
||||
};
|
||||
@ -1,6 +1,6 @@
|
||||
/* eslint-disable no-irregular-whitespace */
|
||||
import path from 'path';
|
||||
import { remove, ensureDir, pathExists, writeFile, writeJSON } from 'fs-extra';
|
||||
import { remove, ensureDir, pathExists } from 'fs-extra';
|
||||
import { prompt } from 'enquirer';
|
||||
import pLimit from 'p-limit';
|
||||
|
||||
@ -10,206 +10,45 @@ import { exec } from './utils/command';
|
||||
// @ts-ignore
|
||||
import { filterDataForCurrentCircleCINode } from './utils/concurrency';
|
||||
|
||||
import * as configs from './run-e2e-config';
|
||||
import * as configs from '../lib/cli/src/repro-generators/configs';
|
||||
import { Parameters } from '../lib/cli/src/repro-generators/configs';
|
||||
|
||||
const logger = console;
|
||||
|
||||
export interface Parameters {
|
||||
/** E2E configuration name */
|
||||
export interface Options {
|
||||
/** CLI repro template to use */
|
||||
name: string;
|
||||
/** framework version */
|
||||
version: string;
|
||||
/** CLI to bootstrap the project */
|
||||
generator: string;
|
||||
/** Use storybook framework detection */
|
||||
autoDetect?: boolean;
|
||||
/** Pre-build hook */
|
||||
preBuildCommand?: string;
|
||||
/** When cli complains when folder already exists */
|
||||
ensureDir?: boolean;
|
||||
/** Dependencies to add before building Storybook */
|
||||
additionalDeps?: string[];
|
||||
/** Add typescript dependency and creates a tsconfig.json file */
|
||||
typescript?: boolean;
|
||||
}
|
||||
|
||||
export interface Options extends Parameters {
|
||||
cwd?: string;
|
||||
}
|
||||
|
||||
const rootDir = path.join(__dirname, '..');
|
||||
const siblingDir = path.join(__dirname, '..', '..', 'storybook-e2e-testing');
|
||||
|
||||
const prepareDirectory = async ({
|
||||
cwd,
|
||||
ensureDir: ensureDirOption = true,
|
||||
}: Options): Promise<boolean> => {
|
||||
const prepareDirectory = async ({ cwd }: Options): Promise<boolean> => {
|
||||
const siblingExists = await pathExists(siblingDir);
|
||||
|
||||
if (!siblingExists) {
|
||||
await ensureDir(siblingDir);
|
||||
}
|
||||
|
||||
await exec('git init', { cwd: siblingDir });
|
||||
await exec('npm init -y', { cwd: siblingDir });
|
||||
await writeFile(path.join(siblingDir, '.gitignore'), 'node_modules\n');
|
||||
|
||||
const cwdExists = await pathExists(cwd);
|
||||
|
||||
if (cwdExists) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (ensureDirOption) {
|
||||
await ensureDir(cwd);
|
||||
}
|
||||
|
||||
return false;
|
||||
};
|
||||
|
||||
const cleanDirectory = async ({ cwd }: Options): Promise<void> => {
|
||||
await remove(cwd);
|
||||
await remove(path.join(siblingDir, 'node_modules'));
|
||||
await remove(path.join(siblingDir, 'package.json'));
|
||||
await remove(path.join(siblingDir, 'yarn.lock'));
|
||||
await remove(path.join(siblingDir, '.yarnrc.yml'));
|
||||
await remove(path.join(siblingDir, '.yarn'));
|
||||
};
|
||||
|
||||
const installYarn2 = async ({ cwd }: Options) => {
|
||||
const commands = [`yarn set version berry`, `yarn config set enableGlobalCache true`];
|
||||
|
||||
if (!useYarn2Pnp) {
|
||||
commands.push('yarn config set nodeLinker node-modules');
|
||||
}
|
||||
|
||||
const command = commands.join(' && ');
|
||||
|
||||
logger.info(`🧶 Installing Yarn 2`);
|
||||
logger.debug(command);
|
||||
|
||||
try {
|
||||
await exec(command, { cwd });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Installing Yarn 2 failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const configureYarn2 = async ({ cwd }: Options) => {
|
||||
const commands = [
|
||||
// Create file to ensure yarn will be ok to set some config in the current directory and not in the parent
|
||||
`touch yarn.lock`,
|
||||
// ⚠️ Need to set registry because Yarn 2 is not using the conf of Yarn 1
|
||||
`yarn config set npmScopes --json '{ "storybook": { "npmRegistryServer": "http://localhost:6000/" } }'`,
|
||||
// Some required magic to be able to fetch deps from local registry
|
||||
`yarn config set unsafeHttpWhitelist --json '["localhost"]'`,
|
||||
// Disable fallback mode to make sure everything is required correctly
|
||||
`yarn config set pnpFallbackMode none`,
|
||||
`yarn config set enableGlobalCache true`,
|
||||
// We need to be able to update lockfile when bootstrapping the examples
|
||||
`yarn config set enableImmutableInstalls false`,
|
||||
// Add package extensions
|
||||
// https://github.com/facebook/create-react-app/pull/9872
|
||||
`yarn config set "packageExtensions.react-scripts@*.peerDependencies.react" "*"`,
|
||||
`yarn config set "packageExtensions.react-scripts@*.dependencies.@pmmmwh/react-refresh-webpack-plugin" "*"`,
|
||||
];
|
||||
|
||||
if (!useYarn2Pnp) {
|
||||
commands.push('yarn config set nodeLinker node-modules');
|
||||
}
|
||||
|
||||
const command = commands.join(' && ');
|
||||
logger.info(`🎛 Configuring Yarn 2`);
|
||||
logger.debug(command);
|
||||
|
||||
try {
|
||||
await exec(command, { cwd });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Configuring Yarn 2 failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const generate = async ({ cwd, name, version, generator }: Options) => {
|
||||
let command = generator.replace(/{{name}}/g, name).replace(/{{version}}/g, version);
|
||||
if (useYarn2Pnp) {
|
||||
command = command.replace(/npx/g, `yarn dlx`);
|
||||
}
|
||||
|
||||
logger.info(`🏗 Bootstrapping ${name} project`);
|
||||
logger.debug(command);
|
||||
|
||||
try {
|
||||
await exec(command, { cwd });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Bootstrapping ${name} failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const initStorybook = async ({ cwd, autoDetect = true, name }: Options) => {
|
||||
logger.info(`🎨 Initializing Storybook with @storybook/cli`);
|
||||
try {
|
||||
const type = autoDetect ? '' : `--type ${name}`;
|
||||
|
||||
const sbCLICommand = useLocalSbCli
|
||||
? 'node ../../storybook/lib/cli/dist/esm/generate'
|
||||
: 'yarn dlx -p @storybook/cli sb';
|
||||
|
||||
await exec(`${sbCLICommand} init --yes ${type}`, { cwd });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Storybook initialization failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const addRequiredDeps = async ({ cwd, additionalDeps }: Options) => {
|
||||
logger.info(`🌍 Adding needed deps & installing all deps`);
|
||||
try {
|
||||
if (additionalDeps && additionalDeps.length > 0) {
|
||||
await exec(`yarn add -D ${additionalDeps.join(' ')}`, {
|
||||
cwd,
|
||||
});
|
||||
} else {
|
||||
await exec(`yarn install`, {
|
||||
cwd,
|
||||
});
|
||||
}
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Dependencies installation failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const addTypescript = async ({ cwd }: Options) => {
|
||||
logger.info(`👮🏻 Adding typescript and tsconfig.json`);
|
||||
try {
|
||||
await exec(`yarn add -D typescript@latest`, { cwd });
|
||||
const tsConfig = {
|
||||
compilerOptions: {
|
||||
baseUrl: '.',
|
||||
esModuleInterop: true,
|
||||
jsx: 'preserve',
|
||||
skipLibCheck: true,
|
||||
strict: true,
|
||||
},
|
||||
include: ['src/*'],
|
||||
};
|
||||
const tsConfigJsonPath = path.resolve(cwd, 'tsconfig.json');
|
||||
await writeJSON(tsConfigJsonPath, tsConfig, { encoding: 'utf8', spaces: 2 });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Creating tsconfig.json failed`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const buildStorybook = async ({ cwd, preBuildCommand }: Options) => {
|
||||
const buildStorybook = async ({ cwd }: Options) => {
|
||||
logger.info(`👷 Building Storybook`);
|
||||
try {
|
||||
if (preBuildCommand) {
|
||||
await exec(preBuildCommand, { cwd });
|
||||
}
|
||||
await exec(`yarn build-storybook --quiet`, { cwd });
|
||||
} catch (e) {
|
||||
logger.error(`🚨 Storybook build failed`);
|
||||
@ -224,59 +63,58 @@ const serveStorybook = async ({ cwd }: Options, port: string) => {
|
||||
return serve(staticDirectory, port);
|
||||
};
|
||||
|
||||
const runCypress = async ({ name, version }: Options, location: string, open: boolean) => {
|
||||
const runCypress = async ({ name }: Options, location: string, open: boolean) => {
|
||||
const cypressCommand = open ? 'open' : 'run';
|
||||
logger.info(`🤖 Running Cypress tests`);
|
||||
try {
|
||||
await exec(
|
||||
`yarn cypress ${cypressCommand} --config integrationFolder="cypress/generated" --env location="${location}"`,
|
||||
`yarn cypress ${cypressCommand} --config pageLoadTimeout=4000,execTimeout=4000,taskTimeout=4000,responseTimeout=4000,integrationFolder="cypress/generated" --env location="${location}"`,
|
||||
{ cwd: rootDir }
|
||||
);
|
||||
logger.info(`✅ E2E tests success`);
|
||||
logger.info(`🎉 Storybook is working great with ${name} ${version}!`);
|
||||
logger.info(`🎉 Storybook is working great with ${name}!`);
|
||||
} catch (e) {
|
||||
logger.error(`🚨 E2E tests fails`);
|
||||
logger.info(`🥺 Storybook has some issues with ${name} ${version}!`);
|
||||
logger.info(`🥺 Storybook has some issues with ${name}!`);
|
||||
throw e;
|
||||
}
|
||||
};
|
||||
|
||||
const runTests = async ({ name, version, ...rest }: Parameters) => {
|
||||
const runTests = async ({ name, ...rest }: Parameters) => {
|
||||
const options = {
|
||||
name,
|
||||
version,
|
||||
...rest,
|
||||
cwd: path.join(siblingDir, `${name}-${version}`),
|
||||
cwd: path.join(siblingDir, `${name}`),
|
||||
};
|
||||
|
||||
logger.log();
|
||||
logger.info(`🏃♀️ Starting for ${name} ${version}`);
|
||||
logger.info(`🏃♀️ Starting for ${name}`);
|
||||
logger.log();
|
||||
logger.debug(options);
|
||||
logger.log();
|
||||
|
||||
if (!(await prepareDirectory(options))) {
|
||||
// We need to install Yarn 2 to be able to bootstrap the different apps used
|
||||
// for the tests with `yarn dlx`
|
||||
await installYarn2({ ...options, cwd: siblingDir });
|
||||
// Call repro cli
|
||||
const sbCLICommand = useLocalSbCli
|
||||
? 'node ../storybook/lib/cli/bin repro'
|
||||
: // Need to use npx because at this time we don't have Yarn 2 installed
|
||||
'npx -p @storybook/cli sb repro';
|
||||
|
||||
await generate({ ...options, cwd: siblingDir });
|
||||
logger.log();
|
||||
const targetFolder = path.join(siblingDir, `${name}`);
|
||||
const commandArgs = [
|
||||
targetFolder,
|
||||
`--framework ${options.framework}`,
|
||||
`--template ${options.name}`,
|
||||
'--e2e',
|
||||
];
|
||||
|
||||
// Configure Yarn 2 in the bootstrapped project to make it use the local
|
||||
// verdaccio registry
|
||||
await configureYarn2(options);
|
||||
|
||||
if (options.typescript) {
|
||||
await addTypescript(options);
|
||||
logger.log();
|
||||
if (pnp) {
|
||||
commandArgs.push('--pnp');
|
||||
}
|
||||
|
||||
await addRequiredDeps(options);
|
||||
logger.log();
|
||||
|
||||
await initStorybook(options);
|
||||
logger.log();
|
||||
const command = `${sbCLICommand} ${commandArgs.join(' ')}`;
|
||||
logger.debug(command);
|
||||
await exec(command, { cwd: siblingDir });
|
||||
|
||||
await buildStorybook(options);
|
||||
logger.log();
|
||||
@ -304,8 +142,8 @@ const runTests = async ({ name, version, ...rest }: Parameters) => {
|
||||
|
||||
// Run tests!
|
||||
const runE2E = async (parameters: Parameters) => {
|
||||
const { name, version } = parameters;
|
||||
const cwd = path.join(siblingDir, `${name}-${version}`);
|
||||
const { name } = parameters;
|
||||
const cwd = path.join(siblingDir, `${name}`);
|
||||
if (startWithCleanSlate) {
|
||||
logger.log();
|
||||
logger.info(`♻️ Starting with a clean slate, removing existing ${name} folder`);
|
||||
@ -341,7 +179,7 @@ const runE2E = async (parameters: Parameters) => {
|
||||
};
|
||||
|
||||
program.option('--clean', 'Clean up existing projects before running the tests', false);
|
||||
program.option('--use-yarn-2-pnp', 'Run tests using Yarn 2 PnP instead of Yarn 1 + npx', false);
|
||||
program.option('--pnp', 'Run tests using Yarn 2 PnP instead of Yarn 1 + npx', false);
|
||||
program.option(
|
||||
'--use-local-sb-cli',
|
||||
'Run tests using local @storybook/cli package (⚠️ Be sure @storybook/cli is properly build as it will not be rebuild before running the tests)',
|
||||
@ -356,48 +194,45 @@ program.option(
|
||||
program.parse(process.argv);
|
||||
|
||||
const {
|
||||
useYarn2Pnp,
|
||||
pnp,
|
||||
useLocalSbCli,
|
||||
clean: startWithCleanSlate,
|
||||
args: frameworkArgs,
|
||||
skip: frameworksToSkip,
|
||||
}: {
|
||||
pnp?: boolean;
|
||||
useLocalSbCli?: boolean;
|
||||
clean?: boolean;
|
||||
args?: string[];
|
||||
skip?: string[];
|
||||
} = program;
|
||||
|
||||
const typedConfigs: { [key: string]: Parameters } = configs;
|
||||
const e2eConfigs: { [key: string]: Parameters } = {};
|
||||
|
||||
// Compute the list of frameworks we will run E2E for
|
||||
if (frameworkArgs.length > 0) {
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const [framework, version = 'latest'] of frameworkArgs.map((arg) => arg.split('@'))) {
|
||||
e2eConfigs[`${framework}-${version}`] = Object.values(typedConfigs).find(
|
||||
(c) => c.name === framework && c.version === version
|
||||
);
|
||||
}
|
||||
frameworkArgs.forEach((framework) => {
|
||||
e2eConfigs[framework] = Object.values(typedConfigs).find((c) => c.name === framework);
|
||||
});
|
||||
} else {
|
||||
Object.values(typedConfigs).forEach((config) => {
|
||||
e2eConfigs[`${config.name}-${config.version}`] = config;
|
||||
e2eConfigs[config.name] = config;
|
||||
});
|
||||
|
||||
// CRA Bench is a special case of E2E tests, it requires Node 12 as `@storybook/bench` is using `@hapi/hapi@19.2.0`
|
||||
// which itself need Node 12.
|
||||
delete e2eConfigs['cra_bench-latest'];
|
||||
}
|
||||
|
||||
if (frameworksToSkip.length > 0) {
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const [framework, version = 'latest'] of frameworksToSkip.map((arg: string) =>
|
||||
arg.split('@')
|
||||
)) {
|
||||
delete e2eConfigs[`${framework}-${version}`];
|
||||
}
|
||||
}
|
||||
// Remove frameworks listed with `--skip` arg
|
||||
frameworksToSkip.forEach((framework) => {
|
||||
delete e2eConfigs[framework];
|
||||
});
|
||||
|
||||
const perform = () => {
|
||||
const limit = pLimit(1);
|
||||
const narrowedConfigs = Object.values(e2eConfigs);
|
||||
|
||||
const list = filterDataForCurrentCircleCINode(narrowedConfigs) as Parameters[];
|
||||
|
||||
logger.info(`📑 Will run E2E tests for:${list.map((c) => `${c.name}@${c.version}`).join(', ')}`);
|
||||
logger.info(`📑 Will run E2E tests for:${list.map((c) => `${c.name}`).join(', ')}`);
|
||||
|
||||
return Promise.all(list.map((config) => limit(() => runE2E(config))));
|
||||
};
|
||||
|
||||
@ -58,10 +58,8 @@ const startVerdaccio = (port: number) => {
|
||||
};
|
||||
const registryUrl = (command: string, url?: string) =>
|
||||
new Promise<string>((res, rej) => {
|
||||
const args = url
|
||||
? ['config', 'set', 'npmRegistryServer', url]
|
||||
: ['config', 'get', 'npmRegistryServer'];
|
||||
exec(`${command} ${args.join(' ')}`, (e, stdout) => {
|
||||
const args = url ? ['config', 'set', 'registry', url] : ['config', 'get', 'registry'];
|
||||
exec(`${command} ${args.join(' ')}`, { cwd: path.join(process.cwd(), '..') }, (e, stdout) => {
|
||||
if (e) {
|
||||
rej(e);
|
||||
} else {
|
||||
@ -71,7 +69,7 @@ const registryUrl = (command: string, url?: string) =>
|
||||
});
|
||||
|
||||
const registriesUrl = (yarnUrl?: string, npmUrl?: string) =>
|
||||
Promise.all([registryUrl('yarn', yarnUrl), registryUrl('npm', npmUrl || yarnUrl)]);
|
||||
Promise.all([registryUrl('/usr/local/bin/yarn', yarnUrl), registryUrl('npm', npmUrl || yarnUrl)]);
|
||||
|
||||
const applyRegistriesUrl = (
|
||||
yarnUrl: string,
|
||||
|
||||
21
tests.md
Normal file
21
tests.md
Normal file
@ -0,0 +1,21 @@
|
||||
# Repro Test
|
||||
|
||||
| Framework | Template | Repro | Link | e2e |
|
||||
| -------------- | ------------------------- | ----- | ---- | --- |
|
||||
| React | cra | OK | | OK |
|
||||
| React | cra_typescript | | | |
|
||||
| React | react | | | |
|
||||
| React | react_typescript | | | |
|
||||
| React | react_in_yarn_workspace | | | |
|
||||
| Angular | angular 10 | | | |
|
||||
| Angular | angular latest | | | |
|
||||
| web components | web_components | | | |
|
||||
| web components | web_components_typescript | | | |
|
||||
| vue | vue | | | |
|
||||
| vue3 | vue3 | | | |
|
||||
| html | html | | | |
|
||||
| mithril | mithril | | | |
|
||||
| preact | preact | | | |
|
||||
| rax | rax | | | |
|
||||
| vue | sfcVue | | | |
|
||||
| svelte | svelte | | | |
|
||||
Loading…
x
Reference in New Issue
Block a user