From 47168bb87e31e8ee50f6b1a7b8436e9f0efc461a Mon Sep 17 00:00:00 2001 From: mikeapr4 Date: Mon, 10 Sep 2018 15:27:24 -0300 Subject: [PATCH] Promise-based async interface --- .../__tests__/sample.ci.jest.stories.js | 9 +++- .../__tests__/sample.ci.mocha.stories.js | 7 ++- README.md | 50 +++++++++++++++---- src/preview.js | 5 +- 4 files changed, 58 insertions(+), 13 deletions(-) diff --git a/.storybook/__tests__/sample.ci.jest.stories.js b/.storybook/__tests__/sample.ci.jest.stories.js index f85ec70..d24b9d0 100644 --- a/.storybook/__tests__/sample.ci.jest.stories.js +++ b/.storybook/__tests__/sample.ci.jest.stories.js @@ -29,7 +29,12 @@ stories.add('Hello World', function () { expect(output.text()).toContain('Hello World'); }); - it('Should have the Hello World label', function () { + it('Should have the Hello World label', function (done) { + expect(output.text()).toContain('Hello World'); + done(); + }); + + it('Should have the Hello World label', async function () { expect(output.text()).toContain('Hello World'); }); @@ -51,4 +56,4 @@ stories.add('Hello Earth', function () { })); return helloEarthStory; -}); \ No newline at end of file +}); diff --git a/.storybook/__tests__/sample.ci.mocha.stories.js b/.storybook/__tests__/sample.ci.mocha.stories.js index 4f028d7..1a9267d 100644 --- a/.storybook/__tests__/sample.ci.mocha.stories.js +++ b/.storybook/__tests__/sample.ci.mocha.stories.js @@ -33,7 +33,12 @@ stories.add('Hello World', function () { expect(output.text()).toContain('Hello World'); }); - it('Should have the Hello World label', function () { + it('Should have the Hello World label', function (done) { + expect(output.text()).toContain('Hello World'); + done(); + }); + + it('Should have the Hello World label', async function () { expect(output.text()).toContain('Hello World'); }); diff --git a/README.md b/README.md index 20cba7d..84f725f 100644 --- a/README.md +++ b/README.md @@ -58,6 +58,38 @@ stories.add('Hello World', function () { let output = mount(story); expect(output.text()).toContain('Hello World'); }); + + // Asynchronous example using `done` syntax + + it('Should have the Hello World label', function (done) { + let output = mount(story); + setTimeout(function() { + try { + expect(output.text()).toContain('Hello World'); + done(); + } catch (e) { + done(e); + } + }) + }); + + // Asynchronous example using returned Promise, + // assuming a Promise implementation is available, + // also permits async/await where supported + + it('Should have the Hello World label', function () { + let output = mount(story); + return new Promise(function(resolve, reject) { + setTimeout(function() { + try { + expect(output.text()).toContain('Hello World'); + resolve(); + } catch (e) { + reject(e); + } + }) + }); + }); })); return story; @@ -70,7 +102,7 @@ You can use `beforeEach`, `before`, `after` and `afterEach` functions to mutuali ## Using enzyme -To use enzyme inside storybooks, you will need to do the following: +To use enzyme inside storybooks, you will need to do the following: 1. Configure enzyme with an appropriate adapter inside your .storybook/config.js: ```js @@ -100,7 +132,7 @@ Writing tests directly next to the component declaration used for the story is a To do that, the idea is to add to the test runner, all the files used for declaring stories. But because this addon redefine describe and it functions, you'll need some extra-configuration to make the tests pass within the test runner. -This repository has a [directory full of examples](https://github.com/mthuret/storybook-addon-specifications/tree/master/.storybook) where you can find everything that is describe here. +This repository has a [directory full of examples](https://github.com/mthuret/storybook-addon-specifications/tree/master/.storybook) where you can find everything that is describe here. ### Using Jest @@ -234,7 +266,7 @@ If for any reason you want to choose when to snapshot a story, that's also possi ```js export const snapshot = () => {}; ``` -When storybook is going to run, it will do nothing with the snapshot function. +When storybook is going to run, it will do nothing with the snapshot function. ### Using Mocha @@ -313,7 +345,7 @@ complexe in order to be able to use jsdom. >```js > // choose one of the following > import { jsdom } from 'jsdom'; // older versions of JSDOM -> import { JSDOM } from 'jsdom'; // newer version +> import { JSDOM } from 'jsdom'; // newer version >/** > *Mocking browser-like DOM > */ @@ -343,7 +375,7 @@ complexe in order to be able to use jsdom. >global.navigator = global.window.navigator; >``` -or if you are a newer version of jsdom +or if you are a newer version of jsdom >```js >/** @@ -401,16 +433,16 @@ import Example from './example' storiesOf('Example', module) .add('Default', () => { - + // tests are loaded here specs(() => tests) - + return }) ``` -We must first override the Jest describe/it/expect blocks to use the storybook-addon-spec's implementation. -Add the following to your storybook config file. +We must first override the Jest describe/it/expect blocks to use the storybook-addon-spec's implementation. +Add the following to your storybook config file. /.storybook/config.js diff --git a/src/preview.js b/src/preview.js index 1ecd04b..258d568 100644 --- a/src/preview.js +++ b/src/preview.js @@ -49,7 +49,10 @@ export const it = function(desc, func) { try { if (func.length) func(done); else { - func(); + const result = func(); + if (result && typeof result.then === 'function') { + return result.then(() => done(), (e) => done(e || { message: 'failed' })); + } pushGoodResult(); } } catch (e) {