@dump247/storybook-state - npm Package Compare versions

Comparing version 1.2.0 to 1.2.1

dist/index.js

@@ -6,2 +6,3 @@ 'use strict';
 });
+exports.Store = undefined;
 
@@ -34,3 +35,3 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-var Store = function () {
+var Store = exports.Store = function () {
   function Store(initialState) {
@@ -37,0 +38,0 @@ _classCallCheck(this, Store);

package.json

 {
   "name": "@dump247/storybook-state",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Manage component state in storybook stories.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

 # Storybook State
 
-An extension for [React Storybook](https://storybook.js.org/) that manages the state of a stateless
+An extension for [Storybook](https://storybook.js.org/) that manages the state of a stateless
 component. This makes it easier to write stories for stateless components.
@@ -10,3 +10,2 @@
 
-
 ```sh
@@ -13,0 +12,0 @@ npm install --save-dev @dump247/storybook-state

src/index.js

@@ -5,3 +5,3 @@ import React from 'react';
 
-class Store {
+export class Store {
   constructor(initialState) {
@@ -8,0 +8,0 @@ this.initialState = Object.freeze({ ...initialState });

src/index.test.js

 import React from 'react';
-import { withState } from './index';
+import { withState, Store } from './index';
 import { mount, configure } from 'enzyme';
@@ -9,2 +9,10 @@ import Adapter from 'enzyme-adapter-react-15';
 
+function expectProps(component) {
+  const props = component.props();
+  return expect(Object.keys(props)
+    .filter(k => !k.startsWith('on'))
+    .reduce((o, k) => { o[k] = props[k]; return o; }, {})
+  );
+}
+
 function mockChannel() {
@@ -18,73 +26,119 @@ return { emit: jest.fn(), on: jest.fn(), removeListener: jest.fn() };
 
-const TestComponent = (props) => {
-  return (
-    <div>
-      <button id="setvar1" onClick={props.onSetVar1}>Set var1</button>
-      <button id="setvar2" onClick={props.onSetVar2}>Set var2</button>
-      <button id="reset" onClick={props.onReset}>Reset</button>
-    </div>
-  );
-};
+describe('Store', () => {
+  test('constructor initializes state', () => {
+    const store = new Store({ var1: 'value 1' });
 
-test('initial state is passed to component', () => {
-  const stateComponent = mount(withState({ var1: 1 }, (store) => <TestComponent {...store.state}/>)());
-  const testComponent = stateComponent.childAt(0);
-  expect(testComponent.props()).toEqual({ var1: 1 });
-});
+    expect(store.state).toEqual({ var1: 'value 1' });
+  });
 
-test('set existing state variable', () => {
-  const stateComponent = mount(withState({ var1: 1 }, (store) => (
-    <TestComponent {...store.state} onSetVar1={() => store.set({ var1: 2 })}/>
-  ))());
+  test('state is immutable', () => {
+    const store = new Store({ var1: 'value 1' });
 
-  expectProps(stateComponent.childAt(0)).toEqual({ var1: 1 });
+    store.var1 = 'value 2';
+    expect(store.state).toEqual({ var1: 'value 1' });
+  });
 
-  stateComponent.childAt(0).find('#setvar1').simulate('click');
+  test('set and reset', () => {
+    const store = new Store({ var1: 'value 1' });
 
-  expectProps(stateComponent.childAt(0)).toEqual({ var1: 2 });
-});
+    store.set({ var2: 'value 2' });
+    expect(store.state).toEqual({ var1: 'value 1', var2: 'value 2' });
 
-test('set new state variable', () => {
-  const stateComponent = mount(withState({ var1: 1 }, (store) => (
-    <TestComponent {...store.state} onSetVar2={() => store.set({ var2: 3 })}/>
-  ))());
+    store.set({ var1: 'value 3' });
+    expect(store.state).toEqual({ var1: 'value 3', var2: 'value 2' });
 
-  expectProps(stateComponent.childAt(0)).toEqual({ var1: 1 });
+    store.set({ var1: 'value 4', var2: 'value 5', var3: 'value 6' });
+    expect(store.state).toEqual({ var1: 'value 4', var2: 'value 5', var3: 'value 6' });
 
-  stateComponent.childAt(0).find('#setvar2').simulate('click');
+    store.reset();
+    expect(store.state).toEqual({ var1: 'value 1' });
+  });
 
-  expectProps(stateComponent.childAt(0)).toEqual({ var1: 1, var2: 3 });
+  test('subscribe and unsubscribe', () => {
+    const handler = jest.fn();
+    const store = new Store({ var1: 'value 1' });
+    store.subscribe(handler);
+
+    store.set({ var1: 'value 2' });
+    expect(handler.mock.calls[0][0]).toEqual({ var1: 'value 2' });
+
+    store.reset();
+    expect(handler.mock.calls[1][0]).toEqual({ var1: 'value 1' });
+
+    // Second reset does nothing
+    store.reset();
+    expect(handler.mock.calls.length).toBe(2);
+
+    store.unsubscribe(handler);
+    store.set({ var1: 'value 3' });
+    expect(handler.mock.calls.length).toBe(2);
+    expect(store.state).toEqual({ var1: 'value 3' });
+  });
 });
 
-test('reset to initial state', () => {
-  const stateComponent = mount(withState({ var1: 1 }, (store) => (
-    <TestComponent {...store.state}
-                   onSetVar2={() => store.set({ var2: 3 })}
-                   onSetVar1={() => store.set({ var1: 2 })}
-                   onReset={() => store.reset()}/>
-  ))());
+describe('withState', () => {
+  const TestComponent = (props) => {
+    return (
+      <div>
+        <button id="setvar1" onClick={props.onSetVar1}>Set var1</button>
+        <button id="setvar2" onClick={props.onSetVar2}>Set var2</button>
+        <button id="reset" onClick={props.onReset}>Reset</button>
+      </div>
+    );
+  };
 
-  expect(stateComponent.childAt(0).props()).toMatchObject({ var1: 1 });
+  test('initial state is passed to component', () => {
+    const stateComponent = mount(withState({ var1: 1 }, (store) => <TestComponent {...store.state}/>)());
+    const testComponent = stateComponent.childAt(0);
+    expect(testComponent.props()).toEqual({ var1: 1 });
+  });
 
-  stateComponent.childAt(0).find('#setvar1').simulate('click');
-  stateComponent.childAt(0).find('#setvar2').simulate('click');
+  test('set existing state variable', () => {
+    const stateComponent = mount(withState({ var1: 1 }, (store) => (
+      <TestComponent {...store.state} onSetVar1={() => store.set({ var1: 2 })}/>
+    ))());
 
-  expectProps(stateComponent.childAt(0)).toEqual({ var1: 2, var2: 3 });
+    expectProps(stateComponent.childAt(0)).toEqual({ var1: 1 });
 
-  stateComponent.childAt(0).find('#reset').simulate('click');
+    stateComponent.childAt(0).find('#setvar1').simulate('click');
 
-  expectProps(stateComponent.childAt(0)).toEqual({ var1: 1 });
-});
+    expectProps(stateComponent.childAt(0)).toEqual({ var1: 2 });
+  });
 
-test('unmount state component', () => {
-  const stateComponent = mount(withState({ var1: 1 }, (store) => <TestComponent {...store.state}/>)());
-  stateComponent.unmount();
+  test('set new state variable', () => {
+    const stateComponent = mount(withState({ var1: 1 }, (store) => (
+      <TestComponent {...store.state} onSetVar2={() => store.set({ var2: 3 })}/>
+    ))());
+
+    expectProps(stateComponent.childAt(0)).toEqual({ var1: 1 });
+
+    stateComponent.childAt(0).find('#setvar2').simulate('click');
+
+    expectProps(stateComponent.childAt(0)).toEqual({ var1: 1, var2: 3 });
+  });
+
+  test('reset to initial state', () => {
+    const stateComponent = mount(withState({ var1: 1 }, (store) => (
+      <TestComponent {...store.state}
+                     onSetVar2={() => store.set({ var2: 3 })}
+                     onSetVar1={() => store.set({ var1: 2 })}
+                     onReset={() => store.reset()}/>
+    ))());
+
+    expect(stateComponent.childAt(0).props()).toMatchObject({ var1: 1 });
+
+    stateComponent.childAt(0).find('#setvar1').simulate('click');
+    stateComponent.childAt(0).find('#setvar2').simulate('click');
+
+    expectProps(stateComponent.childAt(0)).toEqual({ var1: 2, var2: 3 });
+
+    stateComponent.childAt(0).find('#reset').simulate('click');
+
+    expectProps(stateComponent.childAt(0)).toEqual({ var1: 1 });
+  });
+
+  test('unmount state component', () => {
+    const stateComponent = mount(withState({ var1: 1 }, (store) => <TestComponent {...store.state}/>)());
+    stateComponent.unmount();
+  })
 });
-
-function expectProps(component) {
-  const props = component.props();
-  return expect(Object.keys(props)
-    .filter(k => !k.startsWith('on'))
-    .reduce((o, k) => { o[k] = props[k]; return o; }, {})
-  );
-}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28885

increased by6.28%

Lines of code

505

increased by8.84%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

70

decreased by-1.41%

No dependency changes