Merge pull request #87 from storybookjs/next

Release 0.0.5
storybookjs · Apr 7, 2022 · 20ce107 · 20ce107
2 parents 98298f2 + 5f8ca11
commit 20ce107
Show file tree

Hide file tree

Showing 15 changed files with 209 additions and 192 deletions.
diff --git a/.storybook/test-runner.ts b/.storybook/test-runner.ts
@@ -1,14 +1,15 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
 import type { TestRunnerConfig } from '../dist/ts';
 
-const customSnapshotsDir = `${process.cwd()}/__snapshots__`;
+const snapshotsDir = process.env.SNAPSHOTS_DIR || '__snapshots__';
+const customSnapshotsDir = `${process.cwd()}/${snapshotsDir}`;
 
 const config: TestRunnerConfig = {
   setup() {
     expect.extend({ toMatchImageSnapshot });
   },
   async postRender(page, context) {
-    const image = await page.screenshot();
+    const image = await page.screenshot({ fullPage: true });
     expect(image).toMatchImageSnapshot({
       customSnapshotsDir,
       customSnapshotIdentifier: context.id,

diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 Storybook contributors
+Copyright (c) 2022 Storybook contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/README.md b/README.md
@@ -2,6 +2,8 @@
 
 Storybook test runner turns all of your stories into executable tests.
 
+Read the announcement: [Interaction Testing with Storybook](https://storybook.js.org/blog/interaction-testing-with-storybook/)
+
 <h2>Table of Contents</h2>
 
 - [Features](#features)

diff --git a/jsdom-jest.config.js b/jsdom-jest.config.js
diff --git a/jsdom/transform.js b/jsdom/transform.js
diff --git a/mocks/fileMock.js b/mocks/fileMock.js
diff --git a/mocks/htmlMock.js b/mocks/htmlMock.js
diff --git a/mocks/styleMock.js b/mocks/styleMock.js
diff --git a/package.json b/package.json
@@ -24,8 +24,6 @@
     "dist/**/*",
     "README.md",
     "playwright",
-    "jsdom",
-    "mocks",
     "*.js",
     "*.d.ts"
   ],
@@ -43,13 +41,11 @@
     "start": "concurrently \"yarn build:watch\" \"yarn storybook -- --no-manager-cache --quiet\"",
     "build-storybook": "build-storybook",
     "release": "yarn build && auto shipit",
-    "test-storybook": "node bin/test-storybook.js --no-cache",
+    "test-storybook": "node bin/test-storybook.js",
+    "test-storybook:no-cache": "yarn test-storybook --no-cache",
+    "test-storybook:json": "yarn test-storybook --stories-json",
     "test-storybook:ci": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook\"",
-    "test-storybook:ci-json": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook --stories-json\"",
-    "test-storybook:jsdom": "jest --no-cache --config ./jsdom-jest.config.js -i",
-    "test-storybook:playwright-no-cache": "jest --no-cache --config ./test-runner-jest.config.js",
-    "test-storybook:playwright": "./bin/test-storybook.js",
-    "test-storybook:playwright-json": "./bin/test-storybook.js --stories-json",
+    "test-storybook:ci-json": "concurrently -k -s first -n \"SB,TEST\" -c \"magenta,blue\" \"yarn build-storybook --quiet && npx http-server storybook-static --port 6006 --silent\" \"wait-on tcp:6006 && yarn test-storybook:json\"",
     "generate-dynamic-stories": "node scripts/generate-dynamic-stories.js"
   },
   "bin": {
@@ -78,11 +74,8 @@
     "auto": "^10.3.0",
     "babel-jest": "^27.0.6",
     "babel-loader": "^8.1.0",
-    "boxen": "^5.0.1",
     "concurrently": "^7.0.0",
-    "dedent": "^0.7.0",
     "jest": "^27.0.6",
-    "jest-environment-jsdom": "^27.0.6",
     "jest-image-snapshot": "^4.5.1",
     "prettier": "^2.3.1",
     "prop-types": "^15.7.2",
@@ -91,8 +84,7 @@
     "rimraf": "^3.0.2",
     "ts-jest": "^27.0.4",
     "typescript": "^4.2.4",
-    "wait-on": "^6.0.0",
-    "zx": "^1.14.1"
+    "wait-on": "^6.0.0"
   },
   "publishConfig": {
     "access": "public"
@@ -106,15 +98,18 @@
   },
   "dependencies": {
     "@storybook/csf": "0.0.2--canary.87bc651.0",
+    "@storybook/core-common": "^6.4.14",
     "@storybook/csf-tools": "^6.4.14",
+    "@storybook/store": "^6.4.14",
     "commander": "^9.0.0",
     "global": "^4.4.0",
     "is-localhost-ip": "^1.4.0",
     "jest-playwright-preset": "^1.7.0",
     "jest-watch-typeahead": "^1.0.0",
     "node-fetch": "^2",
     "playwright": "^1.14.0",
-    "tempy": "^1.0.1"
+    "tempy": "^1.0.1",
+    "ts-dedent": "^2.0.0"
   },
   "peerDependencies": {
     "jest": ">=26.6.3"

diff --git a/preset.js b/preset.js
diff --git a/src/jsdom/index.ts b/src/jsdom/index.ts
diff --git a/src/jsdom/transformJsdom.test.ts b/src/jsdom/transformJsdom.test.ts
diff --git a/src/jsdom/transformJsdom.ts b/src/jsdom/transformJsdom.ts
diff --git a/src/setup-page.ts b/src/setup-page.ts
@@ -18,8 +18,9 @@ const sanitizeURL = (url) => {
 };
 
 export const setupPage = async (page) => {
-  const start = new Date();
   const targetURL = sanitizeURL(process.env.TARGET_URL || `http://localhost:6006`);
+  const viewMode = process.env.VIEW_MODE || 'story';
+  const renderedEvent = viewMode === 'docs' ? 'docsRendered' : 'storyRendered';
 
   const referenceURL = process.env.REFERENCE_URL && sanitizeURL(process.env.REFERENCE_URL);
 
@@ -37,7 +38,6 @@ export const setupPage = async (page) => {
 
     throw err;
   }); // FIXME: configure
-  console.log(`page loaded in ${new Date() - start}ms.`);
 
   // if we ever want to log something from the browser to node
   await page.exposeBinding('logToPage', (_, message) => console.log(message));
@@ -103,7 +103,7 @@ export const setupPage = async (page) => {
         }
 
         return new Promise((resolve, reject) => {
-          channel.on('storyRendered', () => resolve(document.getElementById('root')));
+          channel.on('${renderedEvent}', () => resolve(document.getElementById('root')));
           channel.on('storyUnchanged', () => resolve(document.getElementById('root')));
           channel.on('storyErrored', ({ description }) => reject(
             new StorybookTestRunnerError(storyId, description))
@@ -115,7 +115,7 @@ export const setupPage = async (page) => {
             new StorybookTestRunnerError(storyId, 'The story was missing when trying to access it.'))
           );
 
-          channel.emit('setCurrentStory', { storyId });
+          channel.emit('setCurrentStory', { storyId, viewMode: '${viewMode}' });
         });
       };
     `,