Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

storybook-addon-specifications

Package Overview
Dependencies
Maintainers
1
Versions
22
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

storybook-addon-specifications - npm Package Compare versions

Comparing version 1.0.14 to 1.0.15

.storybook/__tests__/sample.ci.mocha.stories.js

33

.storybook/__conf__/mochaMockConfig.js

@@ -1,2 +0,2 @@

import {storiesOf, action, linkTo, specs, describe, it} from "../__mocks__/facade-mocha";
import {storiesOf, action, linkTo, specs, describe, it,} from "../__mocks__/facade-mocha";
global.storiesOf = storiesOf;

@@ -8,21 +8,20 @@ global.action = action;

global.it = it;
global.after = after;
global.before = before;
global.beforeEach = beforeEach;
global.afterEach = afterEach;
require('babel-register')();
import { jsdom } from 'jsdom';
var jsdom = require('jsdom').jsdom;
var exposedProperties = ['window', 'navigator', 'document'];
global.document = jsdom('');
global.window = document.defaultView;
Object.keys(document.defaultView).forEach((property) => {
if (typeof global[property] === 'undefined') {
exposedProperties.push(property);
global[property] = document.defaultView[property];
/**
* Mocking browser-like DOM
*/
global.document = jsdom('<!doctype html><html><body></body></html>', {
headers: {
'User-Agent':
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7)' +
' AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24'
}
});
global.navigator = {
userAgent: 'node.js'
};
global.window = document.defaultView;
global.navigator = global.window.navigator;

6

.storybook/__mocks__/facade-mocha.js

@@ -22,2 +22,6 @@ export const storiesOf = function storiesOf() {

export const describe = describe;
export const it = it;
export const it = it;
export const after = after;
export const before = before;
export const afterEach = afterEach;
export const beforeEach = beforeEach;

7

.storybook/__mocks__/facade.js

@@ -34,2 +34,9 @@ export const storiesOf = function storiesOf() {

export const it = jasmine.currentEnv_.it;
export const beforeEach = jasmine.currentEnv_.beforeEach;
export const afterEach = jasmine.currentEnv_.afterEach;
export const xit = jasmine.currentEnv_.xit;
export const xdescribe = jasmine.currentEnv_.xdescribe;
export const fit = jasmine.currentEnv_.fit;
export const after = () => {};
export const before = () => {};

1

.storybook/__tests__/nostory.ci.jest.js

@@ -5,3 +5,2 @@ import React from "react";

describe('Hello World', function () {

@@ -8,0 +7,0 @@ it('Should have the Hello World label', function () {

22

.storybook/__tests__/sample.ci.jest.stories.js
import React from "react";
import {storiesOf, action, describe, it, specs} from "../facade";
import {storiesOf, action, describe, it, specs,
beforeEach, before, after, afterEach, xdescribe,
fit, xit} from "../facade";
import {mount} from "enzyme";

@@ -7,3 +9,3 @@ import expect from "expect";

const stories = storiesOf('Button - CI Sample', module);
const stories = storiesOf('Button - CI JEST Sample', module);

@@ -17,6 +19,20 @@ stories.add('Hello World', function () {

specs(() => describe('Hello World', function () {
let output;
beforeEach(function() {
console.log('BEFORE EACH');
output = mount(helloWorldStory);
});
afterEach(function() {
console.log('AFTER EACH');
});
it('Should have the Hello World label', function () {
let output = mount(helloWorldStory);
expect(output.text()).toContain('Hello World');
});
it('Should have the Hello World label', function () {
expect(output.text()).toContain('Hello World');
});
}));

@@ -23,0 +39,0 @@ return helloWorldStory;

19

.storybook/config.js
import * as storybook from '@kadira/storybook';
//THIS IS NEEDED ONLY IF YOU ARE USING MOCHA AS A TEST RUNNER
import {storiesOf, action, linkTo, specs, describe, it,
after, before, beforeEach, afterEach} from "./facade";
global.storiesOf = storiesOf;
global.action = action;
global.linkTo = linkTo;
global.specs = specs;
global.describe = describe;
global.it = it;
global.after = after;
global.before = before;
global.beforeEach = beforeEach;
global.afterEach = afterEach;
// END OF SPECIFIC MOCHA CONF
const req = require.context('./', true, /stories\.js$/);

@@ -4,0 +23,0 @@

18

.storybook/facade.js

@@ -5,3 +5,8 @@ import {storiesOf as storiesOfReal,

import { specs as specsReal, describe as describeReal,
it as itReal } from '../src'
it as itReal, beforeEach as beforeEachReal,
before as beforeReal, after as afterReal,
afterEach as afterEachReal,
xit as xitReal,
fit as fitReal,
xdescribe as xdescribeReal} from '../src'

@@ -13,2 +18,11 @@ export const storiesOf = storiesOfReal;

export const describe = describeReal;
export const it = itReal;
export const it = itReal;
export const beforeEach = beforeEachReal;
export const afterEach = afterEachReal;
export const before = beforeReal;
export const after = afterReal;
export const xit = xitReal;
export const fit = fitReal;
export const xdescribe = xdescribeReal;

11

CHANGELOG.md

@@ -11,1 +11,12 @@ ## Changelog

#3: improve facade.js to avoid modifying your stories declaration when adding ci
### v1.0.14
* change specs display to improve failures readability
### v1.0.15
* add hooks and jest/mocha specifics functions :
* before, after, beforeEach, afterEach
* jest : xit, fit, xdescribe
* mocha : describe.only, describe.skip, it.only, it.skip

42

dist/index.js

@@ -36,2 +36,44 @@ 'use strict';

});
Object.defineProperty(exports, 'beforeEach', {
enumerable: true,
get: function get() {
return _preview.beforeEach;
}
});
Object.defineProperty(exports, 'afterEach', {
enumerable: true,
get: function get() {
return _preview.afterEach;
}
});
Object.defineProperty(exports, 'after', {
enumerable: true,
get: function get() {
return _preview.after;
}
});
Object.defineProperty(exports, 'before', {
enumerable: true,
get: function get() {
return _preview.before;
}
});
Object.defineProperty(exports, 'xit', {
enumerable: true,
get: function get() {
return _preview.xit;
}
});
Object.defineProperty(exports, 'fit', {
enumerable: true,
get: function get() {
return _preview.fit;
}
});
Object.defineProperty(exports, 'xdescribe', {
enumerable: true,
get: function get() {
return _preview.xdescribe;
}
});
// addons, panels and events get unique names using a prefix

@@ -38,0 +80,0 @@ var ADDON_ID = exports.ADDON_ID = 'storybook-addon-specifications';

73

dist/preview.js

@@ -6,3 +6,3 @@ 'use strict';

});
exports.it = exports.describe = undefined;
exports.xdescribe = exports.xit = exports.fit = exports.afterEach = exports.after = exports.beforeEach = exports.before = exports.it = exports.describe = undefined;
exports.specs = specs;

@@ -20,9 +20,9 @@

var results = {};
var beforeEachFunc = {};
var afterFunc = {};
var afterEachFunc = {};
function specs(specs) {
var storyName = specs();
// get `channel` from the addon API
var channel = _storybookAddons2.default.getChannel();
// send the message using the channel
channel.emit(_.EVENT_ID, { results: results[storyName] });

@@ -39,2 +39,5 @@ }

func();
if (afterFunc[currentStory]) afterFunc[currentStory]();
return storyName;

@@ -44,2 +47,3 @@ };

var it = exports.it = function it(desc, func) {
if (beforeEachFunc[currentStory]) beforeEachFunc[currentStory]();
try {

@@ -52,2 +56,63 @@ func();

}
if (afterEachFunc[currentStory]) afterEachFunc[currentStory]();
};
var before = exports.before = function before(func) {
func();
};
var beforeEach = exports.beforeEach = function beforeEach(func) {
beforeEachFunc[currentStory] = func;
};
var after = exports.after = function after(func) {
afterFunc[currentStory] = func;
};
var afterEach = exports.afterEach = function afterEach(func) {
afterEachFunc[currentStory] = func;
};
var fit = exports.fit = function fit(desc, func) {
it(desc, func);
};
var xit = exports.xit = function xit(desc, func) {};
var xdescribe = exports.xdescribe = function xdescribe(storyName, func) {
currentStory = storyName;
results[currentStory] = {
goodResults: [],
wrongResults: []
};
return storyName;
};
describe.skip = function (storyName, func) {
currentStory = storyName;
results[currentStory] = {
goodResults: [],
wrongResults: []
};
return storyName;
};
it.only = function (desc, func) {
it(desc, func);
};
it.skip = function (desc, func) {};
describe.only = function (storyName, func) {
currentStory = storyName;
results[currentStory] = {
goodResults: [],
wrongResults: []
};
func();
if (afterFunc[currentStory]) afterFunc[currentStory]();
return storyName;
};

4

package.json
{
"name": "storybook-addon-specifications",
"version": "1.0.14",
"version": "1.0.15",
"description": "Add tests to your react storybook stories",

@@ -12,3 +12,3 @@ "main": "dist/index.js",

"jest": "jest",
"mocha": "mocha --compilers js:babel-register --require babel-polyfill -w ./.storybook/__conf__/mochaMockConfig.js \"./.storybook/**/*.stories.mocha.spec.js\""
"mocha": "mocha --compilers js:babel-register --require babel-polyfill ./.storybook/__conf__/mochaMockConfig.js \"./.storybook/**/*.mocha.stories.js\""
},

@@ -15,0 +15,0 @@ "repository": {

86

README.md

@@ -16,4 +16,6 @@ # Specifications Addon [![npm version](https://img.shields.io/npm/v/storybook-addon-specifications.svg)](https://www.npmjs.com/package/storybook-addon-specifications)

* [Using JEST](#using-jest)
* [Hooks and specifics jest features]()
* [Snapshot all your stories automatically](#snapshot-all-your-stories-automatically)
* [Using Mocha](#using-mocha)
* [Hooks and specifics mocha features]()

@@ -64,3 +66,3 @@ ## Getting Started

> Note : if you use enzyme, you will need to add the following lines to your webpack.config.js file. You also needs to add the json library to your dev dependencies.
> Note : if you use enzyme, you will need to add the following lines to your webpack.config.js file. You also needs to add the **json library** to your dev dependencies.

@@ -77,2 +79,4 @@ >```

You can use `beforeEach, before, after and afterEach` functions to mutualize or clean up some stuff.
## Use your stories with a test runner

@@ -152,2 +156,16 @@

#### Hooks and specifics jest features
This addon now supports :
* beforeEach
* afterEach
* fit (no effect on storybook specs execution)
* xit
* xdescribe
Please refer to jest documentation to know how to use them.
If you want to use that with storybook, you'll need to add them to your facade and facade-mock files.
You can find the complete configuration by looking at the [samples directory](https://github.com/mthuret/storybook-addon-specifications/tree/master/.storybook)
#### Snapshot all your stories automatically

@@ -210,6 +228,11 @@

Create the same facade.js file than for the jest configuration
Please note that when using mocha as a test runner, all storybook functions that you
use on your stories files are going to become globally defined. (see step4).
The reason for that simple, unlike Jest, mocking functions is going to be made
by redefining them globally (see step 3).
Create wherever you want a new file that will mock the storybook api
1. Create the same facade.js file than for the jest configuration
2. Create wherever you want a new file that will mock the storybook api
```js

@@ -240,3 +263,3 @@ export const storiesOf = function storiesOf() {

Then create or add those line to a mocha config file :
3. Then create or add those lines to a mocha config file :

@@ -252,6 +275,59 @@ ```js

4. And also those lines to the storybook config file
```js
import {storiesOf, action, linkTo, specs, describe, it} from "./facade";
global.storiesOf = storiesOf;
global.action = action;
global.linkTo = linkTo;
global.specs = specs;
global.describe = describe;
global.it = it;
```
Finally add this to your mocha running script
```
-w test/path/to/your/config/file.js
-require test/path/to/your/config/file.js
```
> **Warning** : if you already have some specific configuration for mocha, please note
that this sample needs to be adapt for your specific use-case. Please also note that
in the sample directory of this repository, the mocha config file is a little bit more
complexe in order to be able to use jsdom.
If you need it, and don't use it already, you can add those line :
```js
/**
*Mocking browser-like DOM
*/
global.document = jsdom('<!doctype html><html><body></body></html>', {
headers: {
'User-Agent':
'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_6_7)' +
' AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.71 Safari/534.24'
}
});
global.window = document.defaultView;
global.navigator = global.window.navigator;
```
#### Hooks and specifics mocha features
This addon now supports :
* beforeEach
* afterEach
* before
* after
* describe.only (no effect on storybook specs execution)
* describe.skip
* it.only (no effect on storybook specs execution)
* it.skip
Please refer to mocha documentation to know how to use them.
If you want to use that with storybook, you'll need to add them to your mocha config and storybook config files.
You can find the complete configuration by looking at the [samples directory](https://github.com/mthuret/storybook-addon-specifications/tree/master/.storybook)

4

src/index.js

@@ -7,2 +7,4 @@ // addons, panels and events get unique names using a prefix

export { register } from './manager';
export { specs, describe, it } from './preview';
export { specs, describe, it,
beforeEach, afterEach, after, before,
xit, fit, xdescribe} from './preview';

74

src/preview.js

@@ -6,9 +6,9 @@ import addons from '@kadira/storybook-addons';

const results = {};
const beforeEachFunc = {};
const afterFunc = {};
const afterEachFunc = {};
export function specs(specs) {
let storyName = specs();
// get `channel` from the addon API
const channel = addons.getChannel();
// send the message using the channel
channel.emit(EVENT_ID, {results : results[storyName]});

@@ -25,2 +25,5 @@ }

func();
if(afterFunc[currentStory]) afterFunc[currentStory]();
return storyName;

@@ -30,2 +33,3 @@ };

export const it = function (desc, func) {
if(beforeEachFunc[currentStory]) beforeEachFunc[currentStory]();
try {

@@ -38,3 +42,67 @@ func();

}
if(afterEachFunc[currentStory]) afterEachFunc[currentStory]();
};
export const before = function(func) {
func()
};
export const beforeEach = function(func) {
beforeEachFunc[currentStory] = func;
};
export const after = function(func) {
afterFunc[currentStory] = func;
};
export const afterEach = function(func) {
afterEachFunc[currentStory] = func;
};
export const fit = function (desc, func) {
it(desc, func)
};
export const xit = function (desc, func) {
};
export const xdescribe = function (storyName, func){
currentStory = storyName;
results[currentStory] = {
goodResults: [],
wrongResults: []
};
return storyName;
};
describe.skip = function (storyName, func){
currentStory = storyName;
results[currentStory] = {
goodResults: [],
wrongResults: []
};
return storyName;
};
it.only = function (desc, func) {
it(desc, func);
};
it.skip = function (desc, func) {
};
describe.only = function (storyName, func) {
currentStory = storyName;
results[currentStory] = {
goodResults: [],
wrongResults: []
};
func();
if(afterFunc[currentStory]) afterFunc[currentStory]();
return storyName;
};
.storybook/__tests__/sample.ci.stories.mocha.spec.js
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc