[QA] --test build

[vanessayuenn]

--test build

Feature owner: @ndelangen

Please comment in this discussion thread for any bug report and feedback for this feature as you test out Storybook 8. Kindly adhere to the following format:

Project: Name of your project as entered in Notion
Version: The version of storybook you tested with
Bug/feedback: Details of the bugs/feedback you have

Feature owner should triage the comments here frequently and open issues as needed.

[valentinpalkovic]

Project: Bitwarden Clients (Angular)
Version: 8.0.0-alpha.15
Bug/feedback: Test flag not recognized

The test flag isn't part of the start and build schema. Therefore, adding it as a builder option via angular.json is prohibited. Storybook's Angular builder also doesn't pass the flag further to Storybook's build and dev functions.

List of files that need adjustments:

• https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/build-storybook/index.ts
• https://github.com/storybookjs/storybook/tree/next/code/frameworks/angular/src/builders/start-storybook/index.ts
• https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/start-storybook/schema.json
• https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/builders/build-storybook/schema.json

[valentinpalkovic]

fixed

[ndelangen]

start-storybook shouldn't have it @valentinpalkovic
--test is only for builds

[fredvisser]

Project: Nimble (html)
Version: 8.0.0-beta.2
Bug/feedback:

In our Storybook, the --test flag appears to use a different minify strategy which breaks one of our more complex/dynamic stories. Noticed this when trying to use the Chromatic Visual Test Addon.

By using the --debug-webpack option, we see the configs being used, and here are some important differences:

Namely, "our" build is using terserMinify with (notably) the options mangle: false and keep_fnames: true, whereas the addon's build is using esbuildMinify. If I add the following line to our .storybook/main.js in webpackFinal, the addon build works properly: config.optimization.minimizer[0].options.minimizer.options.keepNames = true; However, that is not a valid option for terserMinify, so it causes "our" build to barf.

Do we have the ability to directly configure the --test webpack config, or could it be a bit more conservative in the minify strategy by default?

[fredvisser]

Looks like the simplest fix was to be explicit about using the terser-webpack-plugin within our .storybook/main.js file, and then both the regular and --test builds use the same config.

I.e.

    const TerserPlugin = require('terser-webpack-plugin');
    config.optimization.minimizer = [
        new TerserPlugin({
            terserOptions: {
                keep_classnames: true,
                keep_fnames: true
            }
        })
    ];