varmessage='Hello! world';// ES5 Expressionletmessage='Hello! world';// ES6 Expressionconstmessage='Hello! world';// ES6 - const like constant or final

// ES5 ExpressionfunctiongetGreetings(){return'Hello! From JavaScript.';};// ES5 ExpressionfunctionaddNumbers(a,b){returna+b;}// ES6 ExpressionconstgetGreetings=()=>{return'Hello! From JavaScript.';};// ES6 ExpressionconstaddNumbers=(a,b)=>a+b;// Or, ES6 ExpressionconstaddNumbers=(a,b)=>{returna+b;};

classAppextendsReact.Component{render(){consttext="Hello! World";return(<div>Messageis:{text}</div>);}}

// create an objectconstproduct={name:'Item 1',price:200};// we can access objectletname=product.name;letprice=product.price;// we can destructuring that object like belowlet{name,price}=product;// Module Import Issue,importReactDOMfrom'react-dom';// no destructuringimport{render}from'react-dom';// with destructuring

// create an arrayconstproduct=['item 1','item 2'];// access without destructuringletproduct1=product[0];letproduct2=product[1];// access with destructuringlet[p1,p2]=product;

// Object spreadconstdefaults={name:'Product 1',price:200};constoptions={...defaults,visible:true};// Output: Object { name: "Product 1", price: 200, visible: true }//Array spreadconstroles=['admin','officer','executive'];constfullRoles=[...roles,'super-admin']//Output: Array ["admin", "officer", "executive", "super-admin"]

node--versionv10.15.3npm--version6.4.1yarn--version1.21.1

# create new react app using commandnpx create-react-app tdd-react-redux# change directory or open directory using terminal commandcdtdd-react-redux# run projectnpm start

tdd-react-redux├── public│   ├── favicon.ico│   ├── index.html│   └── manifest.json└── src    ├── App.css    ├── App.js    ├── App.test.js    ├── index.css    ├── index.js    ├── logo.svg    └── serviceWorker.js├── README.md├── node_modules├── package.json├── .gitignore

yarn add react-router-domyarn add node-sassyarn add prop-typesyarn add-D enzyme enzyme-adapter-react-16 jest jest-enzymeyarn add redux react-redux redux-thunkyarn add-D husky

tdd-react-redux└── src    ├── actions        ├── index.js        ├── types.js    ├── assets        ├── logo.png    ├── components        ├── core            ├── button            ├── headline            ├── listitem            ├── Common.js            ├── IconWithList.js            ├── PrintJson.js            ├── style.scss        ├── layouts        ├── About.js        ├── About.test.js        ├── BlogPost.js        ├── BlogPost.test.js        ├── DetailsPage.js        ├── DetailsPage.test.js        ├── style.scss    ├── reducers        ├── posts            ├── post.integration.test.js            ├── reducer.js        ├── index.js    ├── App.scss    ├── App.js    ├── App.test.js    ├── index.scss    ├── index.js    └── createStore.js    └── serviceWorker.js├── utils    ├── index.js├── .env├── .env.development├── .env.production├── .env.test├── README.md├── node_modules├── package.json├── .gitignore

importPropTypes,{checkPropTypes}from'prop-types';import{applyMiddleware,createStore}from'redux';importrootReducerfrom'./../src/reducers';import{middlewares}from'./../src/createStore';exportconstfindByTestAttr=(component,attr)=>{returncomponent.find(`[data-test='${attr}']`);};exportconstcheckProps=(component,expectedProps)=>{returncheckPropTypes(component.propTypes,expectedProps,'props',component.name)};exportconsttestStore=(initialState)=>{constcreateStoreWithMiddleware=applyMiddleware(...middlewares)(createStore);returncreateStoreWithMiddleware(rootReducer,initialState);};

import{createStore,applyMiddleware}from'redux';importReduxThunkfrom'redux-thunk';importRootReducerfrom'./reducers';exportconstmiddlewares=[ReduxThunk];exportconstcreateStoreWithMiddleware=applyMiddleware(...middlewares)(createStore);exportconststore=createStoreWithMiddleware(RootReducer);

importEnzymefrom'enzyme';importEnzymeAdapterfrom'enzyme-adapter-react-16';Enzyme.configure({adapter:newEnzymeAdapter(),disableLifecycleMethods:true});

importReactfrom'react';importReactDOMfrom'react-dom';import{Provider}from'react-redux';import{store}from'./createStore';importAppfrom'./App';ReactDOM.render(<Providerstore={store}><App/></Provider>, document.getElementById('root'));

import{types}from'./../../actions/types';importpostReducerfrom'./reducer'describe('Posts Reducer',()=>{it('Should return default state',()=>{constnewState=postReducer(undefined,{});expect(newState).toEqual([]);});it('Should return new state if receiving type',()=>{constposts=[{title:'title 1',description:'description 1'},{title:'title 2',description:'description 2'}];constnewState=postReducer(undefined,{type:types.GET_POSTS,payload:posts});expect(newState).toEqual(posts);});});

import{types}from'./../../actions/types';constpostReducer=(state=[],action)=>{switch(action.type){casetypes.GET_POSTS:returnaction.payload;casetypes.GET_FORTNITE_POSTS:returnaction.payload;default:returnstate;}};exportdefaultpostReducer;

import{combineReducers}from'redux';importpostsfrom'./posts/reducer';exportdefaultcombineReducers({posts});

exportconsttypes={GET_POSTS:'getPosts',GET_FORTNITE_POSTS:'getFortnite'};

import{types}from'./types';exportconstfetchPosts=()=>async(dispatch)=>{try{consturl="https://jsonplaceholder.typicode.com";constposts=awaitfetch(`${url}/posts?_limit=10`);constres=awaitposts.json();dispatch({type:types.GET_POSTS,payload:res});}catch(error){console.error("An error occurred");console.error(error);}};exportconstfetchFortnitePosts=()=>async(dispatch)=>{try{consturl="https://fortnite-api.theapinetwork.com/store/get";constresult=awaitfetch(url);constres=awaitresult.json();dispatch({type:types.GET_FORTNITE_POSTS,payload:res});}catch(error){console.error(error);}};

import{testStore}from'./../../../utils';import{fetchPosts,fetchFortnitePosts}from'./../../actions';describe('fetch api action',()=>{letstore;beforeEach(()=>{store=testStore();});it('Store is updated correctly',()=>{returnstore.dispatch(fetchPosts()).then(()=>{constnewState=store.getState();//console.log('response', newState.posts[0]);//expect(newState.posts[0].title).not(undefined);expect(newState.posts[0]).toHaveProperty('title');expect(newState.posts[0]).toHaveProperty('body');});});it('Store is update with Fortnite api data correctly',()=>{conststore=testStore();returnstore.dispatch(fetchFortnitePosts()).then(()=>{constnewState=store.getState();//console.log('output', newState.posts.data);expect(newState.posts.data[0]).toHaveProperty('itemId');expect(newState.posts.data[0].item).toHaveProperty('name');expect(newState.posts.data[0].item.images).toHaveProperty('icon');});});});

importReactfrom'react';import{shallow}from'enzyme';import{findByTestAttr,checkProps}from'../../../../utils'importNavfrom'./index';constsetUp=(props={})=>{returnshallow(<Nav/>);};describe('Index Component',()=>{letcomponent;beforeEach(()=>{component=setUp();});it('Should render without error',()=>{constwrapper=findByTestAttr(component,'navComponent');expect(wrapper.length).toBe(1)});});

importReactfrom'react';import'./style.scss';import{Link}from"react-router-dom";constNav=(props)=>{return(<divdata-test="navComponent"className="navComponent"><divclassName="leftMenus"><Linkto="/">Home</Link><Linkto="/about">About</Link></div><divclassName="rightMenus"><imgdata-test="userLogo"src="https://mesadhan.github.io/assets/profile_pic.jpg"alt="logo"/></div></div>)};exportdefaultNav;

importReactfrom'react';import{shallow}from'enzyme';import{findByTestAttr,checkProps}from'../../../utils'importIconWithListfrom'./IconWithList';describe('IconWithList Component',()=>{describe('Checking PropTpes',()=>{it('Should not throwing warning',()=>{constexpectedProps={name:'item 1',icon:'icon',ratings:{}};constpropsError=checkProps(IconWithList,expectedProps);expect(propsError).toBeUndefined();});});describe('Should Renders',()=>{letcomponent;beforeEach(()=>{constprops={name:'item 1',icon:'icon',ratings:{avgStars:1,totalPoints:1,numberVotes:1},};component=shallow(<IconWithList{...props}/>);});it('Should render a ItemList',()=>{letitemList=findByTestAttr(component,'IconWithListComponent');expect(itemList.length).toBe(1);});it('Should render a name',()=>{lettitle=findByTestAttr(component,'componentTitle');expect(title.length).toBe(1);});it('Should render a Icon',()=>{lettitle=findByTestAttr(component,'componentIcon');expect(title.length).toBe(1);});it('Should render a Stars',()=>{lettitle=findByTestAttr(component,'componentStars');expect(title.length).toBe(1);});it('Should render a Points',()=>{lettitle=findByTestAttr(component,'componentPoints');expect(title.length).toBe(1);});it('Should render a Votes',()=>{lettitle=findByTestAttr(component,'componentVotes');expect(title.length).toBe(1);});});describe('Should Not Renders',()=>{letcomponent;beforeEach(()=>{component=shallow(<IconWithList/>);});it('Component is not render',()=>{letlistItem=findByTestAttr(component,'IconWithListComponent');expect(listItem.length).toBe(0);});});});

importReact,{Component}from'react'importPropTypesfrom'prop-types';import'./style.scss'classIconWithListextendsComponent{render(){const{icon,name,ratings}=this.props;if(!name)returnnull;return(<divdata-test="IconWithListComponent"className="IconWithList"><imgdata-test="componentIcon"className="itemIcon"src={icon}alt="Icon"/><divclassName="itemBoxChildren"><h3className="itemTitle"data-test="componentTitle">{name}</h3><pdata-test="componentStars">Avg.Stars:-{ratings.avgStars}</p><pdata-test="componentPoints">TotalPoints:-{ratings.totalPoints}</p><pdata-test="componentVotes">Votes:-{ratings.numberVotes}</p></div></div>)}};IconWithList.propTypes={name:PropTypes.string};exportdefaultIconWithList;

importReactfrom'react';import{shallow}from'enzyme';import{findByTestAttr,checkProps}from'../../utils'importAboutfrom'./About';constsetUp=(props={})=>{returnshallow(<About/>);};describe('About Component',()=>{letcomponent;beforeEach(()=>{component=setUp();});it('Should render without error',()=>{constwrapper=findByTestAttr(component,'aboutComponent');expect(wrapper.length).toBe(1)});});

importReact,{Component}from'react';classAboutextendsComponent{render(){document.title="About";return(<divdata-test="aboutComponent"><h1>HelloFromAboutPage</h1></div>);}}exportdefaultAbout;

importReactfrom'react';import{shallow}from'enzyme';import{findByTestAttr,checkProps}from'../../utils'importDetailsPagefrom'./DetailsPage';describe('DetailsPage Component',()=>{describe('Checking PropTpes',()=>{it('Should not throwing warning',()=>{constexpectedProps={name:'item 1',icon:'icon',ratings:{}};constpropsError=checkProps(DetailsPage,expectedProps);expect(propsError).toBeUndefined();});});describe('Should Renders',()=>{letcomponent;beforeEach(()=>{constprops={location:{state:{singlePost:{name:null,icon:null,ratings:{avgStars:1,totalPoints:1,numberVotes:1}}}}};component=shallow(<DetailsPage{...props}/>);});it('Component should render',()=>{letlistItem=findByTestAttr(component,'detailsPageComponent');expect(listItem.length).toBe(1);});it('Component should render name',()=>{letlistItem=findByTestAttr(component,'componentName');expect(listItem.length).toBe(1);});});});

importReact,{Component}from'react';import'./style.scss'importPropTypesfrom"prop-types";importIconWithListfrom"./core/IconWithList";classDetailsPageextendsComponent{constructor(props){super(props);document.title="Details Page";}render(){const{name,icon,ratings}=this.props.location.state.singlePost;return(<divdata-test="detailsPageComponent"className="DetailsPageComponent"><h1>ProductDetails</h1><divclassName="DetailsBox"><div><imgdata-test="componentIcon"className="iconBox"src={icon}/></div><divclassName="itemDetails"><h3data-test="componentName">{name}</h3><p>Avg.Stars:{ratings.avgStars}</p><p>TotalPoints:{ratings.totalPoints}</p><p>Votes:{ratings.numberVotes}</p></div></div></div>);}}DetailsPage.propTypes={name:PropTypes.string};exportdefaultDetailsPage;

importReactfrom'react';import{shallow}from'enzyme';import{findByTestAttr,checkProps}from'./../utils'importAppfrom'./App';constsetUp=(props={})=>{returnshallow(<App/>);};describe('App Component',()=>{letcomponent;beforeEach(()=>{component=setUp();});it('Should render without error',()=>{constwrapper=findByTestAttr(component,'appComponent');expect(wrapper.length).toBe(1)});});

importReact,{Component}from'react';importNavfrom'./components/layouts/nav';importHomefrom'./components/Home';importAboutfrom'./components/About';import'./app.scss'import{BrowserRouterasRouter,Switch,Route,}from"react-router-dom";importBlogPostfrom"./components/BlogPost";importDetailsPagefrom"./components/DetailsPage";classAppextendsComponent{render(){return(<Routerbasename={process.env.PUBLIC_URL}><divdata-test="appComponent"className="App"><Nav/><Switch><Routepath="/"exactcomponent={Home}/><Routepath="/item/:id"exactcomponent={DetailsPage}/><Routepath="/about"exactcomponent={About}/></Switch></div></Router>);}}exportdefaultApp;

importReactfrom'react';import{shallow}from'enzyme';import{findByTestAttr,testStore}from'../../utils';importHomefrom"./Home";constsetUp=(initialState={})=>{conststore=testStore(initialState);constcomponent=shallow(<Homestore={store}/>).childAt(0).dive();//console.log( component.debug() );returncomponent;};describe('Home Component',()=>{letcomponent;beforeEach(()=>{constinitialState={posts:[{title:'title 1',body:'Body 1'},{title:'title 2',body:'Body 2'},{title:'title 3',body:'Body 3'}]};component=setUp(initialState)});it('Should render without errors',()=>{letc=findByTestAttr(component,'homeComponent');expect(c.length).toBe(1);});});

importReact,{Component}from'react';importIconWithListfromfrom'./core/IconWithList'import{connect}from'react-redux';import{fetchFortnitePosts,fetchPosts}from'../actions';import'./style.scss'import{Link}from"react-router-dom";classHomeextendsComponent{constructor(props){super(props);this.loadData=this.loadData.bind(this);this.loadData();// initially load data}loadData(){this.props.fetchFortnitePosts();}render(){const{dumPosts,fortnitePosts}=this.props;document.title="Welcome";return(<divdata-test="homeComponent"className="Home"><sectionclassName="main">{fortnitePosts&&<div>{fortnitePosts.map((data,index)=>{const{itemId}=data;constconfigurationListItem={name:data.item.name,icon:data.item.images.icon,ratings:data.item.ratings};return(<Linkto={{pathname:`/item/${itemId}`,state:{singlePost:configurationListItem}}}style={{textDecoration:'none'}}key={index}><IconWithListfrom{...configurationListItem}/></Link>)})}</div>}</section></div>);}}constmapStateToProps=(state)=>{return{dumPosts:state.posts,fortnitePosts:state.posts.data}};// if we and to override dispatcher methodconstmapDispatchToProps=dispatch=>({fetchPosts:()=>dispatch(fetchPosts()),fetchFortnitePosts:()=>dispatch(fetchFortnitePosts()),});//export default connect(mapStateToProps, { fetchPosts })(Home);exportdefaultconnect(mapStateToProps,mapDispatchToProps)(Home);

// executecommandbelow at the root of projectnpminstallenv-cmd--saveOr,yarn add env-cmd

// package.jsonscripts:{"start":"react-scripts start",// `NODE_ENV` is equal to `development`."build":"react-scripts build",// `NODE_ENV` is equal to `production`."build:staging":"env-cmd -f .env.staging react-scripts build",// `NODE_ENV` is equal to `production`....}

"scripts": {    //... more  },  "husky": {    "hooks": {      "pre-push": "CI=true npm test"    }  }

# For run test suiteyarn run test# Run applicationyarn start