Merge pull request #60 from storybookjs/feat/auto-detect-stories-json

feat: auto detect stories json mode

README.md

@@ -105,7 +105,8 @@ 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`                                  |
+| `-s`, `--stories-json`          | Run in stories json mode. Automatically detected (requires a compatible Storybook) <br/>`test-storybook --stories-json`          |
+| `--no-stories-json`             | Disables stories json mode <br/>`test-storybook --no-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`                                                                                  |
 | `--url`                         | Define the URL to run tests in. Useful for custom Storybook URLs <br/>`test-storybook --url http://the-storybook-url-here.com`   |
@@ -149,7 +150,7 @@ This is particularly useful for running against a deployed storybook because `st
 To run in stories.json mode, first make sure your Storybook has a v3 `stories.json` file. You can navigate to:
 
 ```
-https://the-storybook-url-here.com/stories.json
+https://your-storybook-url-here.com/stories.json
 ```
 
 It should be a JSON file and the first key should be `"v": 3` followed by a key called `"stories"` containing a map of story IDs to JSON objects.
@@ -167,10 +168,18 @@ module.exports = {
 };
 ```
 
-Once you have a valid `stories.json` file, you can run the test runner against it with the `--stories-json` flag:
+Once you have a valid `stories.json` file, your Storybook will be compatible with the "stories.json mode". 
+
+By default, the test runner will detect whether your Storybook URL is local or remote, and if it is remote, it will run in "stories.json mode" automatically. To disable it, you can pass the `--no-stories-json` flag:
+
+```bash
+yarn test-storybook --no-stories-json
+```
+
+If you are running tests against a local Storybook but for some reason want to run in "stories.json mode", you can pass the `--stories-json` flag:
 
 ```bash
-TARGET_URL=https://the-storybook-url-here.com yarn test-storybook --stories-json
+yarn test-storybook --stories-json
 ```
 
 > **NOTE:** stories.json mode is not compatible with watch mode.

bin/test-storybook.js

@@ -3,6 +3,7 @@
 'use strict';
 
 const fetch = require('node-fetch');
+const isLocalhostIp = require('is-localhost-ip');
 const fs = require('fs');
 const dedent = require('ts-dedent').default;
 const path = require('path');
@@ -22,11 +23,13 @@ process.on('unhandledRejection', (err) => {
   throw err;
 });
 
+const log = (message) => console.log(`[test-storybook] ${message}`)
+
 // Clean up tmp files globally in case of control-c
 let storiesJsonTmpDir;
 const cleanup = () => {
   if (storiesJsonTmpDir) {
-    console.log(`[test-storybook] Cleaning up ${storiesJsonTmpDir}`);
+    log(`Cleaning up ${storiesJsonTmpDir}`);
     fs.rmSync(storiesJsonTmpDir, { recursive: true, force: true });
   }
   process.exit();
@@ -98,7 +101,7 @@ async function fetchStoriesJson(url) {
       fs.writeFileSync(tmpFile, test);
     });
   } catch (err) {
-    console.error(`[test-storybook] Failed to fetch stories.json from ${storiesJsonUrl}`);
+    console.error(`Failed to fetch stories.json from ${storiesJsonUrl}`);
     console.error(
       'More info: https://github.com/storybookjs/test-runner/blob/main/README.md#storiesjson-mode\n'
     );
@@ -108,47 +111,54 @@ async function fetchStoriesJson(url) {
   return tmpDir;
 }
 
-function ejectConfiguration () {
+function ejectConfiguration() {
   const origin = path.resolve(__dirname, '../playwright/test-runner-jest.config.js')
   const destination = path.resolve('test-runner-jest.config.js')
   const fileAlreadyExists = fs.existsSync(destination)
-  
-  if(fileAlreadyExists) {
+
+  if (fileAlreadyExists) {
     throw new Error(dedent`Found existing file at:
     
     ${destination}
     
     Please delete it and rerun this command.
     \n`)
   }
-  
+
   fs.copyFileSync(origin, destination)
-  console.log('[test-runner] Configuration file successfully copied as test-runner-jest.config.js')
+  log('Configuration file successfully copied as test-runner-jest.config.js')
 }
 
 const main = async () => {
   const { jestOptions, runnerOptions } = getCliOptions();
 
-  if(runnerOptions.eject) {
+  if (runnerOptions.eject) {
     ejectConfiguration();
     process.exit(0);
   }
 
   const targetURL = sanitizeURL(process.env.TARGET_URL || runnerOptions.url);
   await checkStorybook(targetURL);
-  
+
   process.env.TARGET_URL = targetURL;
-  
-  if(process.env.REFERENCE_URL) {
+
+  if (process.env.REFERENCE_URL) {
     process.env.REFERENCE_URL = sanitizeURL(process.env.REFERENCE_URL);
   }
 
   // Use TEST_BROWSERS if set, otherwise get from --browser option
   if (!process.env.TEST_BROWSERS && runnerOptions.browsers) {
     process.env.TEST_BROWSERS = runnerOptions.browsers.join(',');
   }
+  const { hostname } = new URL(targetURL)
+
+  const isLocalStorybookIp = await isLocalhostIp(hostname, true)
+  const shouldRunStoriesJson = runnerOptions.storiesJson !== false && !isLocalStorybookIp
+  if (shouldRunStoriesJson) {
+    log('Detected a remote Storybook URL, running in stories json mode. To disable this, run the command again with --no-stories-json')
+  }
 
-  if (runnerOptions.storiesJson) {
+  if (runnerOptions.storiesJson || shouldRunStoriesJson) {
     storiesJsonTmpDir = await fetchStoriesJson(targetURL);
     process.env.TEST_ROOT = storiesJsonTmpDir;
     process.env.TEST_MATCH = '**/*.test.js';
@@ -162,4 +172,4 @@ const main = async () => {
   await executeJestPlaywright(jestOptions);
 };
 
-main().catch((e) => console.log(`[test-storybook] ${e}`));
+main().catch((e) => log(e));

package.json

@@ -109,6 +109,7 @@
     "@storybook/csf-tools": "^6.4.14",
     "commander": "^9.0.0",
     "global": "^4.4.0",
+    "is-localhost-ip": "^1.4.0",
     "jest-playwright-preset": "^1.7.0",
     "node-fetch": "^2",
     "playwright": "^1.14.0",

src/util/getParsedCliOptions.ts

@@ -4,9 +4,9 @@ export const getParsedCliOptions = () => {
   program
     .option(
       '-s, --stories-json',
-      'Run in stories json mode (requires a compatible Storybook)',
-      false
+      'Run in stories json mode. Automatically detected (requires a compatible Storybook)'
     )
+    .option('--no-stories-json', 'Disable stories json mode')
     .option(
       '-c, --config-dir <directory>',
       'Directory where to load Storybook configurations from',

yarn.lock

@@ -7755,6 +7755,11 @@ is-hexadecimal@^1.0.0:
   resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
+is-localhost-ip@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/is-localhost-ip/-/is-localhost-ip-1.4.0.tgz#dd66aaabcbb5dbbc943e00adad5f715d2c3b3a1d"
+  integrity sha512-cN7SzlY7BVxSeoJu5equjsZaKSgD4HCfXrTwu0Jgbq5BbT1BU+D7Lyi/l1KO8H0un0JTlxcQaT/GWVapu+DIDg==
+
 is-map@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"