;
+ messages?: Message[];
+}
+
+export class MessagesSectionComponent extends React.Component<
+ MessagesSectionProps
+> {
+ static defaultProps = {
+ messages: [],
+ };
+
+ constructor(props) {
+ super(props);
+ this.state = {
+ messages: [],
+ };
+ }
+
+ componentDidMount() {
+ this.props.getMessages();
+ }
+ handleCallAlert(event) {
+ alert('Hello! I am an alert box!');
+ console.log('alert', event);
+ }
+ render() {
+ const { messages } = this.props;
+
+ return (
+
+
Messages management sample, deployed
+
+
+
+ );
+ }
+}
+
+const mapStateToProps = (state) => {
+ return {
+ messages: state.messages,
+ };
+};
+
+const mapDispatchToProps = (dispatch) => {
+ return {
+ getMessages: () => dispatch(getAllMessages()),
+ };
+};
+
+const MessagesSection = connect(
+ mapStateToProps,
+ mapDispatchToProps
+)(MessagesSectionComponent);
+export { MessagesSection };
diff --git a/03 Tests samples/src/components/index.ts b/03 Tests samples/src/components/index.ts
new file mode 100644
index 0000000..cdd7755
--- /dev/null
+++ b/03 Tests samples/src/components/index.ts
@@ -0,0 +1,12 @@
+import {MessageList} from './MessageList/MessageList';
+import {MessageForm} from './MessageForm/MessageForm';
+import {MessagesSection} from './MessagesSection/MessagesSection';
+import {Button} from './Button/Button';
+
+
+export {
+ MessageList,
+ MessageForm,
+ MessagesSection,
+ Button,
+};
\ No newline at end of file
diff --git a/03 Tests samples/src/index.html b/03 Tests samples/src/index.html
new file mode 100644
index 0000000..2c5018a
--- /dev/null
+++ b/03 Tests samples/src/index.html
@@ -0,0 +1,14 @@
+
+
+
+
+
+ React testing by sample
+
+
+
+
+
diff --git a/03 Tests samples/src/index.tsx b/03 Tests samples/src/index.tsx
new file mode 100644
index 0000000..6d2fd91
--- /dev/null
+++ b/03 Tests samples/src/index.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { App } from './app';
+import { Provider } from 'react-redux';
+import { createStore, compose, applyMiddleware } from 'redux';
+import {MessagesReducer} from './redux/reducers/MessagesReducer';
+import thunk from 'redux-thunk';
+
+const MessagesStore = createStore(MessagesReducer,compose(applyMiddleware(thunk)));
+
+ReactDOM.render(
+
+
+ ,
+
+ document.getElementById('root'));
diff --git a/03 Tests samples/src/model/index.ts b/03 Tests samples/src/model/index.ts
new file mode 100644
index 0000000..8e41c4e
--- /dev/null
+++ b/03 Tests samples/src/model/index.ts
@@ -0,0 +1 @@
+export * from './messagesModel';
\ No newline at end of file
diff --git a/03 Tests samples/src/model/messagesModel.ts b/03 Tests samples/src/model/messagesModel.ts
new file mode 100644
index 0000000..91e79ea
--- /dev/null
+++ b/03 Tests samples/src/model/messagesModel.ts
@@ -0,0 +1,5 @@
+export interface Message {
+ id: number,
+ subject: string,
+ body: string,
+}
\ No newline at end of file
diff --git a/03 Tests samples/src/redux/actions/MessagesActions.test.tsx b/03 Tests samples/src/redux/actions/MessagesActions.test.tsx
new file mode 100644
index 0000000..81eed10
--- /dev/null
+++ b/03 Tests samples/src/redux/actions/MessagesActions.test.tsx
@@ -0,0 +1,42 @@
+import expect from 'expect';
+import * as actions from './MessagesActions';
+import * as BEApi from '../../api/myBackEndApiEndpoint';
+import configureMockStore from 'redux-mock-store';
+import thunk from 'redux-thunk';
+
+const middlewares = [thunk];
+const mockStore = configureMockStore(middlewares);
+const newMessage = { body: 'Important appointment', subject: 'Urgent' };
+
+describe('MessagesActions', () => {
+ let store;
+ beforeEach(() => {
+ store = mockStore({ messages: [] });
+ });
+
+ it('should messages Actions constants be created', () => {
+ expect(actions.GET_ALL).toBe('GET_MESSAGES');
+ expect(actions.ADD_MESSAGE).toBe('ADD_MESSAGE');
+ });
+
+ it('should get all messages returns all messages', () => {
+ return store.dispatch(actions.getAllMessages()).then(() => {
+ const getAllMessageAction = store.getActions()[0];
+ expect(getAllMessageAction.type).toBe(actions.GET_ALL);
+ expect(getAllMessageAction.payload).toHaveLength(2);
+ });
+ });
+
+ it('should add Message return newMessage in its payload', () => {
+ BEApi.addMessage(newMessage).then(response => {
+ const result = {
+ type: actions.ADD_MESSAGE,
+ payload: response[response.length - 1],
+
+ };
+ store.dispatch(actions.addMessage(newMessage)).then(() => {
+ expect(store.getActions()).toContainEqual(result);
+ });
+ });
+ });
+});
\ No newline at end of file
diff --git a/03 Tests samples/src/redux/actions/MessagesActions.ts b/03 Tests samples/src/redux/actions/MessagesActions.ts
new file mode 100644
index 0000000..27a4c69
--- /dev/null
+++ b/03 Tests samples/src/redux/actions/MessagesActions.ts
@@ -0,0 +1,31 @@
+import { getListOfMessages, setMessage, } from '../../api';
+
+export const GET_ALL = 'GET_MESSAGES';
+export const ADD_MESSAGE = 'ADD_MESSAGE';
+
+export const addMessage = message => {
+ return (dispatch) => {
+ return setMessage(message).then(response => {
+ var action = {
+ type: ADD_MESSAGE,
+ payload: response[response.length - 1],
+ };
+
+ dispatch(action);
+ });
+ };
+};
+
+
+export const getAllMessages = () => {
+ return (dispatch) => {
+ return getListOfMessages().then(response => {
+ var action = {
+ type: GET_ALL,
+ payload: response
+ };
+
+ dispatch(action);
+ });
+ };
+};
diff --git a/03 Tests samples/src/redux/reducers/Mesages.Reducer.test.tsx b/03 Tests samples/src/redux/reducers/Mesages.Reducer.test.tsx
new file mode 100644
index 0000000..192eb44
--- /dev/null
+++ b/03 Tests samples/src/redux/reducers/Mesages.Reducer.test.tsx
@@ -0,0 +1,45 @@
+import {MessagesReducer} from './MessagesReducer';
+import { GET_ALL, ADD_MESSAGE } from '../actions/MessagesActions';
+import expect from 'expect';
+
+
+const getAllAction = {
+ type: GET_ALL,
+ payload: [
+ {
+ id: 0,
+ subject: 'Hello world',
+ body: 'Hello world'
+ }
+ ]
+};
+
+const addMessageAction = {
+ type: ADD_MESSAGE,
+ payload: {
+ id: 1,
+ subject: 'Hello world again',
+ body: 'Hello world again'
+ }
+};
+
+describe('Messages Reducer', () =>{
+ it('should return initial state', () =>{
+ expect(MessagesReducer(undefined, {})).toEqual({messages: []});
+ });
+
+ it('should GET_ALL action retrieves all messages in payload', () =>{
+ const initialState = {
+ messages: [],
+ };
+
+ expect(MessagesReducer(initialState, getAllAction)).toEqual({messages: getAllAction.payload});
+ });
+
+ it('should add a new message with ADD_MESSAGE data', () =>{
+ const messages = getAllAction.payload;
+ expect(MessagesReducer({messages: messages}, addMessageAction ).messages).toHaveLength(2);
+ });
+});
+
+
diff --git a/03 Tests samples/src/redux/reducers/MessagesReducer.ts b/03 Tests samples/src/redux/reducers/MessagesReducer.ts
new file mode 100644
index 0000000..8aed7a9
--- /dev/null
+++ b/03 Tests samples/src/redux/reducers/MessagesReducer.ts
@@ -0,0 +1,36 @@
+import { GET_ALL, ADD_MESSAGE } from '../actions/MessagesActions';
+
+const initialState = {
+ messages: []
+};
+
+export function MessagesReducer(state = initialState, action) {
+ switch (action.type) {
+ case ADD_MESSAGE:
+ return addMesagge(state, action);
+ case GET_ALL:
+ return {
+ ...state,
+ messages: action.payload
+ };
+ default:
+ return state;
+ }
+}
+
+const addMesagge = (state, action) => {
+ const filterFunction = (array) => {
+ const filteredArray = array.filter((item, index) => {
+ return item.id == index;
+ });
+ return filteredArray;
+ };
+ const messageArray = [
+ ...state.messages,
+ action.payload,
+ ];
+ return {
+ ...state,
+ messages: filterFunction(messageArray),
+ };
+};
\ No newline at end of file
diff --git a/03 Tests samples/tsconfig.json b/03 Tests samples/tsconfig.json
new file mode 100644
index 0000000..8a26838
--- /dev/null
+++ b/03 Tests samples/tsconfig.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "target": "es6",
+ "module": "es6",
+ "moduleResolution": "node",
+ "declaration": false,
+ "noImplicitAny": false,
+ "sourceMap": true,
+ "jsx": "react",
+ "noLib": false,
+ "allowJs": true,
+ "suppressImplicitAnyIndexErrors": true,
+ "skipLibCheck": true,
+ "esModuleInterop": true
+ },
+ "include": ["./src/**/*"]
+}
diff --git a/README.md b/README.md
index 27ba7c9..1c26c87 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,10 @@
-# samples-for-react-testing-library-training
+# Samples-for-react-tests
+## The first 3 folders are a tutorial using react testing library
+## Last folder is a recopilation of samples for tests using redux architecture
This repository provides a step-by-step tutorial on how to use React Testing Library and React Hooks Testing Library to write basic tests. The structure of the project consists of:
- 00 Base: base project used to start each of the other tutorials
- 01 Testing Components: step-by-step guide to write simple tests for React components using React Testing Library
- 02 Testing Hooks: step-by-step guid to introduce React Hooks Testing Library to test custom hooks
+- 03 Testing redux: This is a set of samples for redux architecture test files.
+
diff --git a/_config.yml b/_config.yml
new file mode 100644
index 0000000..d85c802
--- /dev/null
+++ b/_config.yml
@@ -0,0 +1,2 @@
+title: Test
+logo: "https://www.tuannguyen.tech/wp-content/uploads/2019/01/react.png"