diff --git a/.gitignore b/.gitignore index 5d06c05..e293a2c 100644 --- a/.gitignore +++ b/.gitignore @@ -8,3 +8,5 @@ stats.json .DS_Store npm-debug.log .idea +.vscode/** +app/** diff --git a/generators/component/stories.js.hbs b/generators/component/stories.js.hbs index bf3b33e..21271a4 100644 --- a/generators/component/stories.js.hbs +++ b/generators/component/stories.js.hbs @@ -6,9 +6,9 @@ * */ -import React from 'react' -import { storiesOf } from '@storybook/react' -import { {{ properCase name }} } from '../index' +import React from 'react'; +import { storiesOf } from '@storybook/react'; +import { {{ properCase name }} } from '../index'; -storiesOf('{{properCase name}}').add('simple', () => <{{properCase name}} />) +storiesOf('{{properCase name}}').add('simple', () => <{{properCase name}} />); diff --git a/generators/container/Loadable.js.hbs b/generators/container/Loadable.js.hbs index 9f79048..6f46da9 100644 --- a/generators/container/Loadable.js.hbs +++ b/generators/container/Loadable.js.hbs @@ -1,3 +1,3 @@ -import loadable from '@utils/loadable' +import loadable from '@utils/loadable'; -export default loadable(() => import('./index')) +export default loadable(() => import('./index')); diff --git a/generators/container/index.js.hbs b/generators/container/index.js.hbs index 1a5be71..b375223 100644 --- a/generators/container/index.js.hbs +++ b/generators/container/index.js.hbs @@ -1,37 +1,36 @@ /** * - * {{properCase name }} + * {{properCase name }} Container * */ {{#if memo}} -import React, { memo } from 'react' +import React, { memo } from 'react'; {{else}} -import React from 'react' +import React from 'react'; {{/if}} -// import PropTypes from 'prop-types' -import { connect } from 'react-redux' -import { injectIntl } from 'react-intl' +import PropTypes from 'prop-types'; +import { connect } from 'react-redux'; +import { injectIntl } from 'react-intl'; {{#if wantHeaders}} -import { Helmet } from 'react-helmet' +import { Helmet } from 'react-helmet'; {{/if}} -import { FormattedMessage as T } from 'react-intl' +import { FormattedMessage as T } from 'react-intl'; {{#if wantActionsAndReducer}} -import { createStructuredSelector } from 'reselect' +import { createStructuredSelector } from 'reselect'; {{/if}} -import { compose } from 'redux' +import { compose } from 'redux'; {{#if wantSaga}} import { injectSaga } from 'redux-injectors'; {{/if}} {{#if wantActionsAndReducer}} -import { select{{properCase name}} } from './selectors' +import { selectSomePayLoad } from './selectors'; {{/if}} {{#if wantSaga}} -import saga from './saga' +import saga from './saga'; {{/if}} export function {{ properCase name }}() { - return (
{{#if wantHeaders}} @@ -43,27 +42,28 @@ export function {{ properCase name }}() {
) -} +}; {{ properCase name }}.propTypes = { -} + somePayLoad: PropTypes.any, +}; {{#if wantActionsAndReducer}} const mapStateToProps = createStructuredSelector({ - {{ camelCase name }}: select{{properCase name}}(), + somePayLoad: selectSomePayLoad(), }) {{/if}} function mapDispatchToProps(dispatch) { return { dispatch, - } -} + }; +}; {{#if wantActionsAndReducer}} -const withConnect = connect(mapStateToProps, mapDispatchToProps) +const withConnect = connect(mapStateToProps, mapDispatchToProps); {{else}} -const withConnect = connect(null, mapDispatchToProps) +const withConnect = connect(null, mapDispatchToProps); {{/if}} export default compose( @@ -74,6 +74,6 @@ export default compose( {{#if wantSaga}} injectSaga({ key: '{{ camelCase name }}', saga }) {{/if}} -)({{ properCase name }}) +)({{ properCase name }}); -export const {{ properCase name }}Test = compose(injectIntl)({{ properCase name }}) \ No newline at end of file +export const {{ properCase name }}Test = compose(injectIntl)({{ properCase name }}); diff --git a/generators/container/reducer.js.hbs b/generators/container/reducer.js.hbs index cc0a0dd..cf6a1db 100644 --- a/generators/container/reducer.js.hbs +++ b/generators/container/reducer.js.hbs @@ -6,20 +6,20 @@ import produce from 'immer' import { createActions } from 'reduxsauce' -export const initialState = {} +export const initialState = { + somePayLoad: null +} export const { Types: {{ camelCase name }}Types, Creators: {{ camelCase name }}Creators } = createActions({ - defaultAction: ['somePayload'] + defaultAction: ['somePayLoad'] }) -/* eslint-disable default-case, no-param-reassign */ export const {{ camelCase name }}Reducer = (state = initialState, action) => - produce(state, (/* draft */) => { + produce(state, draft => { switch (action.type) { case {{ camelCase name}}Types.DEFAULT_ACTION: - return {...state, somePayload: action.somePayload} + draft.somePayLoad = action.somePayLoad; default: - return state } }) diff --git a/generators/container/reducer.test.js.hbs b/generators/container/reducer.test.js.hbs index 354e20d..1db65b9 100644 --- a/generators/container/reducer.test.js.hbs +++ b/generators/container/reducer.test.js.hbs @@ -1,24 +1,17 @@ -// import produce from 'immer' -import { {{ camelCase name }}Reducer, {{ camelCase name }}Types, initialState } from '../reducer' +import { {{ camelCase name }}Reducer, {{ camelCase name }}Types, initialState } from '../reducer'; -/* eslint-disable default-case, no-param-reassign */ describe('{{ properCase name }} reducer tests', () => { - let state - beforeEach(() => { - state = initialState - }) + it('should return the initial state by default', () => { + expect({{ camelCase name }}Reducer(undefined, {})).toEqual(initialState); + }); - it('should return the initial state', () => { - expect({{ camelCase name }}Reducer(undefined, {})).toEqual(state) - }) - - it('should return the update the state when an action of type DEFAULT is dispatched', () => { - const expectedResult = {...state, somePayload: 'Mohammed Ali Chherawalla'} + it('should return the updated state when an action of type DEFAULT is dispatched', () => { + const expectedResult = {...initialState, somePayLoad: 'Mohammed Ali Chherawalla'}; expect( - {{ camelCase name }}Reducer(state, { + {{ camelCase name }}Reducer(initialState, { type: {{ camelCase name}}Types.DEFAULT_ACTION, - somePayload: 'Mohammed Ali Chherawalla' + somePayLoad: 'Mohammed Ali Chherawalla' }) - ).toEqual(expectedResult) - }) -}) + ).toEqual(expectedResult); + }); +}); diff --git a/generators/container/saga.js.hbs b/generators/container/saga.js.hbs index 3af9fee..2a23cb8 100644 --- a/generators/container/saga.js.hbs +++ b/generators/container/saga.js.hbs @@ -1,13 +1,13 @@ -import { takeLatest } from 'redux-saga/effects' -import { {{ camelCase name}}Types } from './reducer' +import { takeLatest } from 'redux-saga/effects'; +import { {{ camelCase name}}Types } from './reducer'; + // Individual exports for testing -const { DEFAULT_ACTION } = {{ camelCase name }}Types +const { DEFAULT_ACTION } = {{ camelCase name }}Types; export function *defaultFunction (/* action */) { // console.log('Do something here') - -} +}; export default function* {{ camelCase name }}Saga() { - yield takeLatest(DEFAULT_ACTION, defaultFunction) -} \ No newline at end of file + yield takeLatest(DEFAULT_ACTION, defaultFunction); +}; diff --git a/generators/container/saga.test.js.hbs b/generators/container/saga.test.js.hbs index 7c6acb1..fab4110 100644 --- a/generators/container/saga.test.js.hbs +++ b/generators/container/saga.test.js.hbs @@ -2,17 +2,16 @@ * Test {{ camelCase name }} sagas */ -/* eslint-disable redux-saga/yield-effects */ import { takeLatest } from 'redux-saga/effects' import {{ camelCase name}}Saga, { defaultFunction } from '../saga' import { {{ camelCase name}}Types } from '../reducer' describe('{{ properCase name }} saga tests', () => { - const generator = {{ camelCase name }}Saga() + const generator = {{ camelCase name }}Saga(); it('should start task to watch for DEFAULT_ACTION action', () => { expect(generator.next().value).toEqual( takeLatest({{ camelCase name }}Types.DEFAULT_ACTION, defaultFunction) - ) - }) -}) \ No newline at end of file + ); + }); +}); diff --git a/generators/container/selectors.js.hbs b/generators/container/selectors.js.hbs index 9b9611b..2b68957 100644 --- a/generators/container/selectors.js.hbs +++ b/generators/container/selectors.js.hbs @@ -1,17 +1,14 @@ -import { createSelector } from 'reselect' -import { initialState } from './reducer' +import { createSelector } from 'reselect'; +import { initialState } from './reducer'; /** * Direct selector to the {{ camelCase name }} state domain */ -const select{{ properCase name }}Domain = state => state.{{ camelCase name }} || initialState +const select{{ properCase name }}Domain = state => state.{{ camelCase name }} || initialState; -/** - * use createSelector if you are doing something with the returned state. - * https://redux.js.org/usage/deriving-data-selectors#createselector-overview - * e.g: const makeSelect{{ properCase name }} = () => - * createSelector(select{{ properCase name }}Domain, substate => get(substate, 'somevalue')) - */ export const select{{ properCase name }} = () => - createSelector(select{{ properCase name }}Domain, substate => substate) \ No newline at end of file + createSelector(select{{ properCase name }}Domain, substate => substate); + +export const selectSomePayLoad = () => + createSelector(select{{properCase name}}Domain, substate => substate.somePayLoad); diff --git a/generators/container/selectors.test.js.hbs b/generators/container/selectors.test.js.hbs index 9c97e6d..1da1a33 100644 --- a/generators/container/selectors.test.js.hbs +++ b/generators/container/selectors.test.js.hbs @@ -1,16 +1,19 @@ -import { select{{ properCase name }} } from '../selectors' +import { select{{ properCase name }}, selectSomePayLoad } from '../selectors'; describe('{{ properCase name }} selector tests', () => { - let mockedState - - beforeEach(() => { - mockedState = { - {{ camelCase name }}: {} + const mockedState = { + {{ camelCase name }}: { + somePayLoad: "W.S" + } } - }) - it('should select the user state', () => { + it('should select the {{ camelCase name }} state', () => { const {{ camelCase name }}Selector = select{{ properCase name }}(); expect({{ camelCase name }}Selector(mockedState)).toEqual(mockedState.{{ camelCase name }}); - }) + }); + + it('should select the somePayLoad state', () => { + const somePayLoadSelector = selectSomePayLoad(); + expect(somePayLoadSelector(mockedState)).toEqual(mockedState.{{ camelCase name }}.somePayLoad); + }); }) \ No newline at end of file diff --git a/generators/container/test.js.hbs b/generators/container/test.js.hbs index 0446d14..c00e849 100644 --- a/generators/container/test.js.hbs +++ b/generators/container/test.js.hbs @@ -1,26 +1,27 @@ /** * - * Tests for {{ properCase name }} + * Tests for {{ properCase name }} container * * */ -import React from 'react' -import { renderProvider } from '@utils/testUtils' -// import { fireEvent } from '@testing-library/dom' -import { {{ properCase name }}Test as {{ properCase name }} } from '../index' +import React from 'react'; +// import { fireEvent } from '@testing-library/dom'; +import { renderProvider } from '@utils/testUtils'; +import { {{ properCase name }}Test as {{ properCase name }} } from '../index'; describe('<{{ properCase name }} /> container tests', () => { - // let submitSpy + // let submitSpy beforeEach(() => { - // submitSpy = jest.fn() - }) + // submitSpy = jest.fn(); + }); + it('should render and match the snapshot', () => { const { baseElement } = renderProvider( <{{ properCase name }} /> - ) - expect(baseElement).toMatchSnapshot() - }) -}) \ No newline at end of file + ); + expect(baseElement).toMatchSnapshot(); + }); +}); diff --git a/package.json b/package.json index 3d8c93c..8d8341d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-floki", - "version": "1.0.93", + "version": "1.0.94", "description": "A React component, container and test generation library", "repository": { "type": "git",