ButtonContainer tests added

Author: zoltantothcom

.storybook/Storyshots.test.js

@@ -1,4 +1,4 @@
-// import initStoryshots from '@storybook/addon-storyshots';
-// import 'jest-styled-components';
+import initStoryshots from '@storybook/addon-storyshots';
+import 'jest-styled-components';
 
-// initStoryshots();
+initStoryshots();

__tests__/ButtonContainer.test.js

@@ -0,0 +1,198 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import configureStore from 'redux-mock-store';
+import { mount } from 'enzyme';
+import 'jest-styled-components';
+import { ButtonContainer } from '../src/components/ButtonContainer';
+import { submit } from '../src/actions';
+
+const middlewares = [];
+const mockStore = configureStore(middlewares);
+
+import { mapStateToProps, mapDispatchToProps } from '../src/components/ButtonContainer';
+
+const patterns = [
+  {
+    uuid: 'id_12',
+    name: 'Singleton',
+    type: 'creational',
+    codeES5: `function Person() {
+  if (typeof Person.instance === 'object') return Person.instance;
+
+  Person.instance = this;
+
+  return this;
+}
+
+module.exports = Person;`,
+    codeES6: `class Person {
+  constructor() {
+    if (typeof Person.instance === 'object') {
+      return Person.instance;
+    }
+    Person.instance = this;
+    return this;
+  }
+}
+
+export default Person;`
+  },
+
+  {
+    uuid: 'id_34',
+    name: 'Singleton',
+    type: 'creational',
+    codeES5: `function Person() {
+  if (typeof Person.instance === 'object') return Person.instance;
+
+  Person.instance = this;
+
+  return this;
+}
+
+module.exports = Person;`,
+    codeES6: `class Person {
+  constructor() {
+    if (typeof Person.instance === 'object') {
+      return Person.instance;
+    }
+    Person.instance = this;
+    return this;
+  }
+}
+
+export default Person;`
+  },
+
+  {
+    uuid: 'id_56',
+    name: 'Singleton',
+    type: 'creational',
+    codeES5: `function Person() {
+  if (typeof Person.instance === 'object') return Person.instance;
+
+  Person.instance = this;
+
+  return this;
+}
+
+module.exports = Person;`,
+    codeES6: `class Person {
+  constructor() {
+    if (typeof Person.instance === 'object') {
+      return Person.instance;
+    }
+    Person.instance = this;
+    return this;
+  }
+}
+
+export default Person;`
+  },
+
+  {
+    uuid: 'id_78',
+    name: 'Singleton',
+    type: 'creational',
+    codeES5: `function Person() {
+  if (typeof Person.instance === 'object') return Person.instance;
+
+  Person.instance = this;
+
+  return this;
+}
+
+module.exports = Person;`,
+    codeES6: `class Person {
+  constructor() {
+    if (typeof Person.instance === 'object') {
+      return Person.instance;
+    }
+    Person.instance = this;
+    return this;
+  }
+}
+
+export default Person;`
+  }
+];
+
+describe('<ButtonContainer /> dispatch action', () => {
+  it('should dispatch action', () => {
+    // Initialize mockstore with empty state
+    const initialState = {};
+    const store = mockStore(initialState);
+
+    // Dispatch the action
+    store.dispatch(submit('test'));
+
+    // Test if the store dispatched the expected actions
+    const actions = store.getActions();
+
+    const expectedPayload = {
+      type: 'SUBMIT',
+      payload: 'test'
+    };
+    expect(actions).toEqual([expectedPayload]);
+  });
+});
+
+describe('<ButtonContainer /> component', () => {
+  const mockClick = jest.fn();
+  const patternsList = patterns;
+  const current = patterns[0];
+  const buttonContainerEl = (
+    <ButtonContainer patterns={patternsList} current={current} onClick={mockClick} />
+  );
+  let buttonContainer;
+
+  beforeEach(() => {
+    buttonContainer = mount(buttonContainerEl);
+  });
+
+  it('should roll the dice again when button is clicked', () => {
+    const dispatch = jest.fn();
+
+    mapDispatchToProps(dispatch).onClick('test');
+    expect(dispatch.mock.calls[0][0]).toEqual({
+      type: 'SUBMIT',
+      payload: 'test'
+    });
+  });
+
+  it('should show previously rolled value', () => {
+    const initialState = {
+      progress: {
+        current: 0
+      },
+      patterns: [0, 1, 2, 3]
+    };
+
+    // Just call the method directly passing in sample data
+    // to make sure it does what it's supposed to
+    expect(mapStateToProps(initialState).patterns).toEqual([0, 1, 2, 3]);
+    expect(mapStateToProps(initialState).current).toEqual(0);
+  });
+
+  it('renders without crashing', () => {
+    expect(buttonContainer).toBeTruthy();
+  });
+
+  it('has styled-component rendered classes', () => {
+    const tree = renderer.create(buttonContainerEl).toJSON();
+    expect(tree.props.className).toBeDefined();
+  });
+
+  it('generates 4 buttons', () => {
+    expect(buttonContainer.find('button')).toHaveLength(4);
+  });
+
+  it('responds to button click', () => {
+    buttonContainer
+      .find('button')
+      .first()
+      .simulate('click');
+
+    expect(mockClick.mock.calls.length).toEqual(1);
+  });
+});

package.json

@@ -67,6 +67,7 @@
     "jest-styled-components": "^6.3.1",
     "prettier": "1.16.2",
     "react-test-renderer": "^16.7.0",
+    "redux-mock-store": "^1.5.3",
     "storybook-addon-styled-component-theme": "^1.1.1",
     "webpack": "^4.29.0",
     "webpack-bundle-analyzer": "^3.0.3",

src/components/ButtonContainer.jsx

@@ -15,7 +15,7 @@ const StyledButtonContainer = styled.div`
   margin: 1rem 0 2rem;
 `;
 
-const ButtonContainer = props => {
+export const ButtonContainer = props => {
   const { current, patterns, onClick } = props;
 
   // get 3 random patterns in addition to correct one
@@ -39,9 +39,9 @@ ButtonContainer.propTypes = {
   onClick: PropTypes.func.isRequired
 };
 
-const mapStateToProps = ({ progress: { current }, patterns }) => ({ patterns, current });
+export const mapStateToProps = ({ progress: { current }, patterns }) => ({ patterns, current });
 
-const mapDispatchToProps = dispatch => ({
+export const mapDispatchToProps = dispatch => ({
   onClick: id => {
     dispatch(submit(id));
   }

src/pages/About.jsx

@@ -30,14 +30,14 @@ const About = () => (
 
     <Header>References</Header>
     <p>
-      All the code samples impudently taken from this{' '}
+      All the code samples are taken from this{' '}
       <cite>
         <a href="//github.com/fbeline/Design-Patterns-JS" target="_blank">
           awesome code compilation
         </a>{' '}
         by Felipe Beline
-      </cite>{' '}
-      - because I have no shame.
+      </cite>
+      .
     </p>
     <p>
       If you want a deep dive into the subject I can't recommend enough{' '}

yarn.lock

@@ -8974,6 +8974,13 @@ [email protected]:
   dependencies:
     minimatch "3.0.4"
 
+redux-mock-store@^1.5.3:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/redux-mock-store/-/redux-mock-store-1.5.3.tgz#1f10528949b7ce8056c2532624f7cafa98576c6d"
+  integrity sha512-ryhkkb/4D4CUGpAV2ln1GOY/uh51aczjcRz9k2L2bPx/Xja3c5pSGJJPyR25GNVRXtKIExScdAgFdiXp68GmJA==
+  dependencies:
+    lodash.isplainobject "^4.0.6"
+
 redux@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.1.tgz#436cae6cc40fbe4727689d7c8fae44808f1bfef5"