diff --git a/.github/workflows/e2e.yaml b/.github/workflows/e2e.yaml index e3cfc196a002..e7f1fe06666a 100644 --- a/.github/workflows/e2e.yaml +++ b/.github/workflows/e2e.yaml @@ -82,7 +82,6 @@ jobs: working-directory: ./tasks/e2e spec: | cypress/integration/01-tutorial/*.spec.js - cypress/integration/03-storybook/*.spec.js cypress/integration/04-logger/*.spec.js - name: Prepare for CLI checks by restoring 01-tutorial end state @@ -90,6 +89,10 @@ jobs: git restore . && git clean -df working-directory: ${{ steps.createpath.outputs.project_path }} + - name: Run `rw storybook` + run: yarn rw storybook --smoke-test + working-directory: ${{ steps.createpath.outputs.project_path }} + - name: Run `rw test api` run: yarn rw test api --no-watch working-directory: ${{ steps.createpath.outputs.project_path }} diff --git a/packages/cli/src/commands/storybook.js b/packages/cli/src/commands/storybook.js index d5c1526db8ea..f58369c83a33 100644 --- a/packages/cli/src/commands/storybook.js +++ b/packages/cli/src/commands/storybook.js @@ -37,6 +37,21 @@ export const builder = (yargs) => { type: 'boolean', default: true, }) + .option('smoke-test', { + describe: + "CI mode plus Smoke-test (skip prompts, don't open browser, exit after successful start)", + type: 'boolean', + default: false, + }) + .check((argv) => { + if (argv.build && argv.smokeTest) { + throw new Error('Can not provide both "--build" and "--smoke-test"') + } + if (argv.build && argv.open) { + throw new Error('Can not provide both "--build" or "--open"') + } + return true + }) } export const handler = ({ @@ -45,6 +60,7 @@ export const handler = ({ build, buildDirectory, managerCache, + smokeTest, }) => { const cwd = getPaths().web.base @@ -69,7 +85,8 @@ export const handler = ({ !build && '--no-version-updates', !managerCache && '--no-manager-cache', build && `--output-dir "${buildDirectory}"`, - !open && '--ci', + !open && !smokeTest && `--ci`, + smokeTest && `--ci --smoke-test`, ].filter(Boolean), { stdio: 'inherit', diff --git a/packages/core/config/webpack.common.js b/packages/core/config/webpack.common.js index 65350f35d529..e655fb388606 100644 --- a/packages/core/config/webpack.common.js +++ b/packages/core/config/webpack.common.js @@ -172,6 +172,7 @@ const getSharedPlugins = (isEnvProduction) => { new Dotenv({ path: path.resolve(redwoodPaths.base, '.env'), silent: true, + ignoreStub: true, // FIXME: this might not be necessary once the storybook webpack 4/5 stuff is ironed out. See also: https://github.com/mrsteele/dotenv-webpack#processenv-stubbing--replacing }), ].filter(Boolean) } diff --git a/packages/testing/config/storybook/main.js b/packages/testing/config/storybook/main.js index bc381eee10cc..e2c7c1425bef 100644 --- a/packages/testing/config/storybook/main.js +++ b/packages/testing/config/storybook/main.js @@ -9,6 +9,7 @@ const { getConfig, getPaths, } = require('@redwoodjs/internal') +const { getProject } = require('@redwoodjs/structure') const config = getConfig() @@ -136,6 +137,15 @@ const baseConfig = { ...(process.env.NODE_ENV !== 'production' && { staticDirs: [`${staticAssetsFolder}`], }), + // only set up type checking for typescript projects + ...(getProject().isTypeScriptProject && { + // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration + typescript: { + check: true, + // By default, the checker runs asynchronously in dev mode. Force it to run synchronously. + checkOptions: { async: false }, + }, + }), } const mergeUserStorybookConfig = (baseConfig) => { diff --git a/tasks/e2e/cypress/integration/03-storybook/storybook.spec.js b/tasks/e2e/cypress/integration/03-storybook/storybook.spec.js index 8b055e329c02..211e0d303e1d 100644 --- a/tasks/e2e/cypress/integration/03-storybook/storybook.spec.js +++ b/tasks/e2e/cypress/integration/03-storybook/storybook.spec.js @@ -12,7 +12,8 @@ describe( 'Redwood Storybook Integration', { baseUrl: 'http://localhost:8910' }, () => { - it('0. Build Storybook Static Files', () => { + // 0. Build Storybook Static Files + before(() => { cy.writeFile( path.join(BASE_DIR, 'web/src/components/BlogPost/BlogPost.stories.js'), Step1_1_BlogPostStory @@ -33,13 +34,11 @@ describe( ) // Slow! - cy.exec(`cd ${BASE_DIR}; yarn rw storybook --build`, { + cy.exec(`cd ${BASE_DIR} || exit; yarn rw storybook --build`, { timeout: 300_0000, - }).then((result) => { - const { code, stderr } = result - expect(code).to.eq(0) - expect(stderr).to.not.contain('ERR!') }) + .its('stderr') + .should('not.contain', 'ERR!') }) it('1. Component: BlogPost', () => {