Merge pull request #55 from storybookjs/feat/browsers-flag

feat: add browsers flag
storybookjs · Feb 18, 2022 · 6507ef2 · 6507ef2
2 parents de628da + c9e2fe2
commit 6507ef2
Show file tree

Hide file tree

Showing 6 changed files with 54 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -100,18 +100,19 @@ yarn test-storybook
 Usage: test-storybook [options]
 ```
 
-| Options                         | Description                                                                                                               |
-| ------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
-| `--help`                        | Output usage information <br/>`test-storybook --help`                                                                     |
-| `-s`, `--stories-json`          | Run in stories json mode (requires a compatible Storybook) <br/>`test-storybook --stories-json`                           |
-| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`test-storybook -c .storybook`                                 |
-| `--watch`                       | Run in watch mode <br/>`test-storybook --watch`                                                                           |
-| `--maxWorkers [amount]`         | Specifies the maximum number of workers the worker-pool will spawn for running tests <br/>`test-storybook --maxWorkers=2` |
-| `--no-cache`                    | Disable the cache <br/>`test-storybook --no-cache`                                                                        |
-| `--clearCache`                  | Deletes the Jest cache directory and then exits without running tests <br/>`test-storybook --clearCache`                  |
-| `--verbose`                     | Display individual test results with the test suite hierarchy <br/>`test-storybook --verbose`                             |
-| `-u`, `--updateSnapshot`        | Use this flag to re-record every snapshot that fails during this test run <br/>`test-storybook -u`                        |
-| `--eject`                       | Creates a local configuration file to override defaults of the test-runner <br/>`test-storybook --eject`                  |
+| Options                         | Description                                                                                                                      |
+| ------------------------------- | -------------------------------------------------------------------------------------------------------------------------------- |
+| `--help`                        | Output usage information <br/>`test-storybook --help`                                                                            |
+| `-s`, `--stories-json`          | Run in stories json mode (requires a compatible Storybook) <br/>`test-storybook --stories-json`                                  |
+| `-c`, `--config-dir [dir-name]` | Directory where to load Storybook configurations from <br/>`test-storybook -c .storybook`                                        |
+| `--watch`                       | Run in watch mode <br/>`test-storybook --watch`                                                                                  |
+| `--browsers`                    | Define browsers to run tests in. One or multiple of: chromium, firefox, webkit <br/>`test-storybook --browsers firefox chromium` |
+| `--maxWorkers [amount]`         | Specifies the maximum number of workers the worker-pool will spawn for running tests <br/>`test-storybook --maxWorkers=2`        |
+| `--no-cache`                    | Disable the cache <br/>`test-storybook --no-cache`                                                                               |
+| `--clearCache`                  | Deletes the Jest cache directory and then exits without running tests <br/>`test-storybook --clearCache`                         |
+| `--verbose`                     | Display individual test results with the test suite hierarchy <br/>`test-storybook --verbose`                                    |
+| `-u`, `--updateSnapshot`        | Use this flag to re-record every snapshot that fails during this test run <br/>`test-storybook -u`                               |
+| `--eject`                       | Creates a local configuration file to override defaults of the test-runner <br/>`test-storybook --eject`                         |
 
 ## Configuration
 

diff --git a/bin/test-storybook.js b/bin/test-storybook.js
@@ -137,6 +137,11 @@ const main = async () => {
   const targetURL = sanitizeURL(process.env.TARGET_URL || `http://localhost:6006`);
   await checkStorybook(targetURL);
 
+  // Use TEST_BROWSERS if set, otherwise get from --browser option
+  if (!process.env.TEST_BROWSERS && runnerOptions.browsers) {
+    process.env.TEST_BROWSERS = runnerOptions.browsers.join(',');
+  }
+
   if (runnerOptions.storiesJson) {
     storiesJsonTmpDir = await fetchStoriesJson(targetURL);
     process.env.TEST_ROOT = storiesJsonTmpDir;

diff --git a/src/config/jest-playwright.ts b/src/config/jest-playwright.ts
@@ -1,5 +1,5 @@
 export const getJestConfig = () => {
-  const { TEST_ROOT, TEST_MATCH, STORYBOOK_STORIES_PATTERN } = process.env;
+  const { TEST_ROOT, TEST_MATCH, STORYBOOK_STORIES_PATTERN, TEST_BROWSERS } = process.env;
 
   let config = {
     rootDir: process.cwd(),
@@ -14,6 +14,13 @@ export const getJestConfig = () => {
     globalTeardown: '@storybook/test-runner/playwright/global-teardown.js',
     testEnvironment: '@storybook/test-runner/playwright/custom-environment.js',
     setupFilesAfterEnv: ['@storybook/test-runner/playwright/jest-setup.js'],
+    testEnvironmentOptions: {
+      'jest-playwright': {
+        browsers: TEST_BROWSERS.split(',')
+          .map((p) => p.trim().toLowerCase())
+          .filter(Boolean),
+      },
+    },
   };
 
   if (TEST_MATCH) {

diff --git a/src/util/getCliOptions.test.ts b/src/util/getCliOptions.test.ts
@@ -1,12 +1,7 @@
-import { defaultRunnerOptions, getCliOptions } from './getCliOptions';
+import { getCliOptions } from './getCliOptions';
 import * as cliHelper from './getParsedCliOptions';
 
 describe('getCliOptions', () => {
-  it('returns default options if no extra option is passed', () => {
-    const opts = getCliOptions();
-    expect(opts.runnerOptions).toMatchObject(defaultRunnerOptions);
-  });
-
   it('returns custom options if passed', () => {
     const customConfig = { configDir: 'custom', storiesJson: true };
     jest

diff --git a/src/util/getCliOptions.ts b/src/util/getCliOptions.ts
@@ -1,28 +1,30 @@
 import { getParsedCliOptions } from './getParsedCliOptions';
+import type { BrowserType } from 'jest-playwright-preset';
 
 type CliOptions = {
   runnerOptions: {
-    storiesJson: boolean;
-    configDir: string;
+    storiesJson?: boolean;
+    configDir?: string;
     eject?: boolean;
+    browsers?: BrowserType | BrowserType[];
   };
   jestOptions: string[];
 };
 
 type StorybookRunnerCommand = keyof CliOptions['runnerOptions'];
 
-const STORYBOOK_RUNNER_COMMANDS: StorybookRunnerCommand[] = ['storiesJson', 'configDir', 'eject'];
-
-export const defaultRunnerOptions: CliOptions['runnerOptions'] = {
-  configDir: '.storybook',
-  storiesJson: false,
-};
+const STORYBOOK_RUNNER_COMMANDS: StorybookRunnerCommand[] = [
+  'storiesJson',
+  'configDir',
+  'browsers',
+  'eject',
+];
 
 export const getCliOptions = () => {
   const { options: allOptions, extraArgs } = getParsedCliOptions();
 
   const defaultOptions: CliOptions = {
-    runnerOptions: { ...defaultRunnerOptions },
+    runnerOptions: {},
     jestOptions: process.argv.splice(0, 2),
   };
 

diff --git a/src/util/getParsedCliOptions.ts b/src/util/getParsedCliOptions.ts
@@ -2,9 +2,22 @@ export const getParsedCliOptions = () => {
   const { program } = require('commander');
 
   program
-    .option('-s, --stories-json', 'Run in stories json mode (requires a compatible Storybook)')
-    .option('-c, --config-dir <directory>', 'Directory where to load Storybook configurations from')
-    .option('--watch', 'Run in watch mode')
+    .option(
+      '-s, --stories-json',
+      'Run in stories json mode (requires a compatible Storybook)',
+      false
+    )
+    .option(
+      '-c, --config-dir <directory>',
+      'Directory where to load Storybook configurations from',
+      '.storybook'
+    )
+    .option('--watch', 'Run in watch mode', false)
+    .option(
+      '--browsers <browsers...>',
+      'Define browsers to run tests in. Could be one or multiple of: chromium, firefox, webkit',
+      ['chromium']
+    )
     .option(
       '--maxWorkers <amount>',
       'Specifies the maximum number of workers the worker-pool will spawn for running tests'