Skip to content

Commit

Permalink
Merge pull request #58 from storybookjs/feat/add-url-flag
Browse files Browse the repository at this point in the history
feat: add url flag
  • Loading branch information
yannbf authored Feb 18, 2022
2 parents 6507ef2 + 6df6b2d commit a30234e
Show file tree
Hide file tree
Showing 5 changed files with 31 additions and 34 deletions.
13 changes: 11 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -88,9 +88,11 @@ yarn storybook
yarn test-storybook
```

> **NOTE:** The runner assumes that your Storybook is running on port `6006`. If you're running Storybook in another port, set the TARGET_URL before running your command like:
> **NOTE:** The runner assumes that your Storybook is running on port `6006`. If you're running Storybook in another port, either use --url or set the TARGET_URL before running your command like:
>
> ```jsx
> yarn test-storybook --url http://localhost:9009
> or
> TARGET_URL=http://localhost:9009 yarn test-storybook
> ```
Expand All @@ -106,6 +108,7 @@ Usage: test-storybook [options]
| `-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` |
| `--url` | Define the URL to run tests in. Useful for custom Storybook URLs <br/>`test-storybook --url http://the-storybook-url-here.com` |
| `--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` |
Expand All @@ -124,13 +127,19 @@ The test runner uses [jest-playwright](https://github.com/playwright-community/j

## Running against a deployed Storybook

By default, the test runner assumes that you're running it against a locally served Storybook.
By default, the test runner assumes that you're running it against a locally served Storybook on port 6006.
If you want to define a target url so it runs against deployed Storybooks, you can do so by passing the `TARGET_URL` environment variable:

```bash
TARGET_URL=https://the-storybook-url-here.com yarn test-storybook
```

Or by using the `--url` flag:

```bash
yarn test-storybook --url https://the-storybook-url-here.com
```

### Stories.json mode

By default, the test runner transforms your story files into tests. It also supports a secondary "stories.json mode" which runs directly against your Storybook's `stories.json`, a static index of all the stories.
Expand Down
12 changes: 9 additions & 3 deletions bin/test-storybook.js
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ async function checkStorybook(url) {
console.error(
dedent`[test-storybook] It seems that your Storybook instance is not running at: ${url}. Are you sure it's running?
If you're not running Storybook on the default 6006 port or want to run the tests against any custom URL, you can set the TARGET_URL variable like so:
If you're not running Storybook on the default 6006 port or want to run the tests against any custom URL, you can pass the --url flag like so:
TARGET_URL=http://localhost:9009 yarn test-storybook
yarn test-storybook --url http://localhost:9009
More info at https://github.com/storybookjs/test-runner#getting-started`
);
Expand Down Expand Up @@ -134,8 +134,14 @@ const main = async () => {
process.exit(0);
}

const targetURL = sanitizeURL(process.env.TARGET_URL || `http://localhost:6006`);
const targetURL = sanitizeURL(process.env.TARGET_URL || runnerOptions.url);
await checkStorybook(targetURL);

process.env.TARGET_URL = targetURL;

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) {
Expand Down
33 changes: 4 additions & 29 deletions playwright/custom-environment.js
Original file line number Diff line number Diff line change
@@ -1,41 +1,16 @@
require('regenerator-runtime/runtime');
const PlaywrightEnvironment = require('jest-playwright-preset/lib/PlaywrightEnvironment').default;

const sanitizeURL = (url) => {
let finalURL = url
// prepend URL protocol if not there
if (finalURL.indexOf("http://") === -1 && finalURL.indexOf("https://") === -1) {
finalURL = 'http://' + finalURL;
}

// remove iframe.html if present
finalURL = finalURL.replace(/iframe.html\s*$/, "");

// add forward slash at the end if not there
if (finalURL.slice(-1) !== '/') {
finalURL = finalURL + '/';
}

return finalURL;
}

class CustomEnvironment extends PlaywrightEnvironment {
async setup() {
await super.setup();
const page = this.global.page;
const start = new Date();
const targetURL = sanitizeURL(process.env.TARGET_URL || `http://localhost:6006`);

const referenceURL = process.env.REFERENCE_URL && sanitizeURL(process.env.REFERENCE_URL);

if ('TARGET_URL' in process.env && !process.env.TARGET_URL) {
console.log(`Received TARGET_URL but with a falsy value: ${process.env.TARGET_URL
}, will fallback to ${targetURL} instead.`)
}
const { TARGET_URL: targetUrl, REFERENCE_URL: referenceUrl } = process.env

await page.goto(`${targetURL}iframe.html`, { waitUntil: 'load' }).catch((err) => {
await page.goto(`${targetUrl}iframe.html`, { waitUntil: 'load' }).catch((err) => {
if (err.message?.includes('ERR_CONNECTION_REFUSED')) {
const errorMessage = `Could not access the Storybook instance at ${targetURL}. Are you sure it's running?\n\n${err.message}`;
const errorMessage = `Could not access the Storybook instance at ${targetUrl}. Are you sure it's running?\n\n${err.message}`;
throw new Error(errorMessage)
}

Expand All @@ -52,7 +27,7 @@ class CustomEnvironment extends PlaywrightEnvironment {
constructor(storyId, errorMessage) {
super(errorMessage);
this.name = 'StorybookTestRunnerError';
const storyUrl = \`${referenceURL || targetURL}?path=/story/\${storyId}\`;
const storyUrl = \`${referenceUrl || targetUrl}?path=/story/\${storyId}\`;
const finalStoryUrl = \`\${storyUrl}&addonPanel=storybook/interactions/panel\`;
this.message = \`\nAn error occurred in the following story:\n\${finalStoryUrl}\n\nMessage:\n \${errorMessage}\`;
Expand Down
2 changes: 2 additions & 0 deletions src/util/getCliOptions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import type { BrowserType } from 'jest-playwright-preset';
type CliOptions = {
runnerOptions: {
storiesJson?: boolean;
url?: string;
configDir?: string;
eject?: boolean;
browsers?: BrowserType | BrowserType[];
Expand All @@ -18,6 +19,7 @@ const STORYBOOK_RUNNER_COMMANDS: StorybookRunnerCommand[] = [
'configDir',
'browsers',
'eject',
'url',
];

export const getCliOptions = () => {
Expand Down
5 changes: 5 additions & 0 deletions src/util/getParsedCliOptions.ts
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,11 @@ export const getParsedCliOptions = () => {
'Define browsers to run tests in. Could be one or multiple of: chromium, firefox, webkit',
['chromium']
)
.option(
'--url <url>',
'Define the URL to run tests in. Useful for custom Storybook URLs',
'http://localhost:6006'
)
.option(
'--maxWorkers <amount>',
'Specifies the maximum number of workers the worker-pool will spawn for running tests'
Expand Down

0 comments on commit a30234e

Please sign in to comment.