Merge pull request #2401 from steemit/im/2182/more-storybooks

More Component Stories and init component file-structure.

src/app/components/all.scss

@@ -27,7 +27,7 @@
 @import "./elements/Reblog";
 @import "./elements/YoutubePreview";
 @import "./elements/ShareMenu";
-@import "./elements/Author";
+@import "./elements/Author/styles";
 @import "./elements/AuthorDropdown";
 @import "./elements/UserNames";
 @import "./elements/UserKeys";

src/app/components/elements/Author.story.jsx → src/app/components/elements/Author/Author.story.jsx

@@ -4,8 +4,8 @@ import { withKnobs } from '@storybook/addon-knobs';
 import rootReducer from 'app/redux/RootReducer';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
-import Author from './Author';
-import { Center } from './Tooltip.story';
+import Author from './index';
+import { Center } from '../Tooltip.story';
 import { IntlProvider } from 'react-intl';
 
 const store = createStore(rootReducer);

src/app/components/elements/Author/__snapshots__/spec.js.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Author /> renders without crashing 1`] = `
+ShallowWrapper {
+  "length": 1,
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Provider
+    store={
+      Object {
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+        Symbol(observable): [Function],
+      }
+    }
+  >
+    <Connect(Author) />
+  </Provider>,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {},
+    "ref": null,
+    "rendered": null,
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {},
+      "ref": null,
+      "rendered": null,
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactFifteenAdapter {
+      "options": Object {
+        "supportPrevContextArgumentOfComponentDidUpdate": true,
+      },
+    },
+  },
+}
+`;

src/app/components/elements/Author.jsx → src/app/components/elements/Author/index.jsx

@@ -5,7 +5,7 @@ import shouldComponentUpdate from 'app/utils/shouldComponentUpdate';
 import Icon from 'app/components/elements/Icon';
 import { Link } from 'react-router';
 import { authorNameAndRep } from 'app/utils/ComponentFormatters';
-import AuthorDropdown from './AuthorDropdown';
+import AuthorDropdown from '../AuthorDropdown';
 import Reputation from 'app/components/elements/Reputation';
 import normalizeProfile from 'app/utils/NormalizeProfile';
 import Overlay from 'react-overlays/lib/Overlay';

src/app/components/elements/Author/spec.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import Author from './index';
+import rootReducer from 'app/redux/RootReducer';
+import { configure, shallow } from 'enzyme';
+
+import Adapter from 'enzyme-adapter-react-15';
+
+configure({ adapter: new Adapter() });
+
+const store = createStore(rootReducer);
+
+describe('<Author />', () => {
+    const wrapper = shallow(
+        <Provider store={store}>
+            <Author />
+        </Provider>
+    );
+    const container = wrapper.instance();
+
+    it('renders without crashing', () => {
+        expect(wrapper).toBeTruthy();
+        expect(container).toBeTruthy();
+        expect(wrapper).toMatchSnapshot();
+    });
+});

src/app/components/elements/ChangePassword.story.jsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import rootReducer from 'app/redux/RootReducer';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import ChangePassword from './ChangePassword';
+import { Center } from './Tooltip.story';
+
+const store = createStore(rootReducer);
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
+    .add('ChangePassword', () => (
+        <Center>
+            <ChangePassword
+                username={'maitland'}
+                defaultPassword={'password1'}
+                authType={null}
+                priorAuthKey={'posting'} // Required pubkey if authType is given
+            />
+        </Center>
+    ));

src/app/components/elements/Follow/Follow.story.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
+import rootReducer from 'app/redux/RootReducer';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import Follow from './index';
+import { Center } from '../Tooltip.story';
+
+const store = createStore(rootReducer);
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
+    .add('Follow', () => (
+        <Center>
+            <Follow
+                className="float-right"
+                follower={'maitland'}
+                following={'Carol'}
+                what="blog"
+                showFollow={boolean('Show Follow?', true)}
+                showMute={boolean('Show Mute?', true)}
+            />
+        </Center>
+    ));

src/app/components/elements/Follow/__snapshots__/spec.js.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Follow /> renders without crashing 1`] = `
+ShallowWrapper {
+  "length": 1,
+  Symbol(enzyme.__root__): [Circular],
+  Symbol(enzyme.__unrendered__): <Provider
+    store={
+      Object {
+        "dispatch": [Function],
+        "getState": [Function],
+        "replaceReducer": [Function],
+        "subscribe": [Function],
+        Symbol(observable): [Function],
+      }
+    }
+  >
+    <Connect(Follow) />
+  </Provider>,
+  Symbol(enzyme.__renderer__): Object {
+    "batchedUpdates": [Function],
+    "getNode": [Function],
+    "render": [Function],
+    "simulateEvent": [Function],
+    "unmount": [Function],
+  },
+  Symbol(enzyme.__node__): Object {
+    "instance": null,
+    "key": undefined,
+    "nodeType": "class",
+    "props": Object {},
+    "ref": null,
+    "rendered": null,
+    "type": [Function],
+  },
+  Symbol(enzyme.__nodes__): Array [
+    Object {
+      "instance": null,
+      "key": undefined,
+      "nodeType": "class",
+      "props": Object {},
+      "ref": null,
+      "rendered": null,
+      "type": [Function],
+    },
+  ],
+  Symbol(enzyme.__options__): Object {
+    "adapter": ReactFifteenAdapter {
+      "options": Object {
+        "supportPrevContextArgumentOfComponentDidUpdate": true,
+      },
+    },
+  },
+}
+`;

src/app/components/elements/Follow/spec.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { mount, configure, shallow } from 'enzyme';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import Follow from './index';
+import rootReducer from 'app/redux/RootReducer';
+import Adapter from 'enzyme-adapter-react-15';
+
+const store = createStore(rootReducer);
+
+configure({ adapter: new Adapter() });
+
+describe('<Follow />', () => {
+    const wrapper = shallow(
+        <Provider store={store}>
+            <Follow />
+        </Provider>
+    );
+    const container = wrapper.instance();
+
+    it('renders without crashing', () => {
+        expect(wrapper).toBeTruthy();
+        expect(container).toBeTruthy();
+        expect(wrapper).toMatchSnapshot();
+    });
+});

src/app/components/elements/Keys.story.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import rootReducer from 'app/redux/RootReducer';
+import { Map, List } from 'immutable';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import Keys from './Keys';
+import { Center } from './Tooltip.story';
+
+const store = createStore(rootReducer);
+
+const mockAccount = Map({
+    name: 'maitland',
+    posting: Map({
+        key_auths: [
+            List(['SOMETHING', 'HERE']),
+            List(['ANOTHER THING', 'OVER THERE']),
+        ],
+    }),
+});
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
+    .add('Keys', () => (
+        <Center>
+            <Keys account={mockAccount} authType="posting" onKey={() => {}} />
+        </Center>
+    ));

src/app/components/elements/Reblog.story.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs } from '@storybook/addon-knobs';
+import rootReducer from 'app/redux/RootReducer';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+import Reblog from './Reblog';
+import { Center } from './Tooltip.story';
+
+const store = createStore(rootReducer);
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
+    .add('Reblog', () => (
+        <Center>
+            <Reblog
+                permlink={'foo/bar'}
+                author={'maitland'}
+                reblog={() => alert('STEEM WAZ HERE')}
+            />
+        </Center>
+    ));

src/app/components/elements/Reputation.story.jsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import Reputation from './Reputation';
+import { Center } from './Tooltip.story';
+
+storiesOf('Elements', module).add('Reputation', () => (
+    <Center>
+        <Reputation value={1200} />
+    </Center>
+));

src/app/components/elements/TransactionError.story.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import TransactionError from './TransactionError';
+import { Center } from './Tooltip.story';
+import rootReducer from 'app/redux/RootReducer';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+const store = createStore(rootReducer);
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
+    .add('TransactionError', () => (
+        <Center>
+            <TransactionError
+                opType="This is a test"
+                error="There was an error ey"
+            />
+        </Center>
+    ));

src/app/components/elements/UserList.story.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { withKnobs } from '@storybook/addon-knobs';
+import { withKnobs, number } from '@storybook/addon-knobs';
+import { Map, List } from 'immutable';
 import rootReducer from 'app/redux/RootReducer';
 import { Provider } from 'react-redux';
 import { createStore } from 'redux';
@@ -9,9 +10,19 @@ import UserList from './UserList';
 
 const store = createStore(rootReducer);
 
-const mockUsers = Array(70).fill('test');
+const options = {
+    range: true,
+    min: 0,
+    max: 150,
+    step: 1,
+};
 
 storiesOf('Elements', module)
     .addDecorator(withKnobs)
     .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
-    .add('UserList', () => <UserList users={mockUsers} title="User List" />);
+    .add('UserList', () => {
+        let mockUsers = List(
+            Array(number('number of users', 10, options)).fill('test')
+        );
+        return <UserList users={mockUsers} title="User List" />;
+    });

src/app/components/elements/WalletSubMenu.story.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withKnobs, text } from '@storybook/addon-knobs';
+import WalletSubMenu from './WalletSubMenu';
+import { Center } from './Tooltip.story';
+import rootReducer from 'app/redux/RootReducer';
+import { Provider } from 'react-redux';
+import { createStore } from 'redux';
+const store = createStore(rootReducer);
+
+storiesOf('Elements', module)
+    .addDecorator(withKnobs)
+    .addDecorator(getStory => <Provider store={store}>{getStory()}</Provider>)
+    .add('WalletSubMenu', () => (
+        <Center>
+            <WalletSubMenu />
+        </Center>
+    ));

src/app/redux/TransactionSaga.test.js

@@ -14,6 +14,11 @@ import {
 } from './TransactionSaga';
 import { DEBT_TICKER } from 'app/client_config';
 
+import { configure, shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-15';
+
+configure({ adapter: new Adapter() });
+
 const operation = {
     type: 'comment',
     author: 'Alice',