diff --git a/03 Tests samples/README.md b/03 Tests samples/README.md
index 94f645a..7ebb3c0 100644
--- a/03 Tests samples/README.md
+++ b/03 Tests samples/README.md
@@ -16,14 +16,14 @@
- **Model-mappers** test sample:
-- Tests samples for events onChange ( simulate, fireEvent, ...)
-- Tests samples for events onClick
+- Tests samples for events onChange ( simulate, fireEvent, ...)
+- Tests samples for events onClick [simulateClick](./src/redux/actions/MessagesSection.test.tsx)
- Tests samples for events onScroll
- Test samples for onMouseUp and onMouseDown
-- Test samples for onContextMenu
+- Test samples for onContextMenu
- Test samples for onSubmit
-- Tests samples for useSuscribeToScroll
-- Tests samples using ref an useRef hook
+- Tests samples for useSuscribeToScroll
+- Tests samples using ref an useRef hook
diff --git a/03 Tests samples/src/components/Button/Button.less b/03 Tests samples/src/components/Button/Button.less
new file mode 100644
index 0000000..4abf3ba
--- /dev/null
+++ b/03 Tests samples/src/components/Button/Button.less
@@ -0,0 +1,12 @@
+@whiteColor: white;
+@purpleColor: rgb(184, 40, 184);
+@borderRadius: 10px;
+
+button {
+ background-color: @purpleColor;
+ border: @purpleColor;
+ color: @whiteColor;
+ display: flex;
+ width: 20%;
+ height: 10%;
+}
\ No newline at end of file
diff --git a/03 Tests samples/src/components/Button/Button.tsx b/03 Tests samples/src/components/Button/Button.tsx
new file mode 100644
index 0000000..3ce4d57
--- /dev/null
+++ b/03 Tests samples/src/components/Button/Button.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import './Button.less';
+
+interface ButtonProps{
+ onClickButton: (event) => void;
+
+}
+
+export const Button = (props:ButtonProps) =>{
+ const handleOnClick = () => {
+ props.onClickButton(event);
+ };
+ return (
+
+ );
+};
\ No newline at end of file
diff --git a/03 Tests samples/src/components/MessageForm/MessageForm.tsx b/03 Tests samples/src/components/MessageForm/MessageForm.tsx
index 9845be5..09c3e53 100644
--- a/03 Tests samples/src/components/MessageForm/MessageForm.tsx
+++ b/03 Tests samples/src/components/MessageForm/MessageForm.tsx
@@ -4,6 +4,7 @@ import { connect } from 'react-redux';
import { Message } from '../../model';
import './MessageForm.less';
+
interface MessageFormProps {
messages: Message[],
addMessage?: (newMessage: Message) => Promise,
diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.less b/03 Tests samples/src/components/MessagesSection/MessagesSection.less
index 6d9b40b..3063278 100644
--- a/03 Tests samples/src/components/MessagesSection/MessagesSection.less
+++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.less
@@ -4,4 +4,5 @@
justify-content: space-between;
width: 80%;
margin: 0 auto;
+
}
\ No newline at end of file
diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx
index 2c322a2..ee63571 100644
--- a/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx
+++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx
@@ -4,6 +4,7 @@ import { configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import sinon from 'sinon';
import { MessagesSectionComponent } from './MessagesSection';
+import { Button } from '../Button/Button';
describe('Message List component test', () => {
@@ -27,5 +28,11 @@ describe('Message List component test', () => {
it('should getMessages be called in ComponentDidMound', () =>{
expect(getMessagesSpy.calledOnce).toBe(true);
});
-
+ it('should handle the click event', () =>{
+ window.alert = jest.fn();
+ expect(typeof component.find(Button).at(0).prop('onClickButton')).toBe('function');
+ component.find(Button).at(0).prop('onClickButton')();
+ expect(window.alert).toHaveBeenCalledTimes(1);
+ });
+
});
\ No newline at end of file
diff --git a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx
index d25b7f5..272a82e 100644
--- a/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx
+++ b/03 Tests samples/src/components/MessagesSection/MessagesSection.tsx
@@ -1,9 +1,11 @@
import React from 'react';
+
import { MessageForm, MessageList } from '../index';
import { connect } from 'react-redux';
import { getAllMessages } from '../../redux/actions/MessagesActions';
import './MessagesSection.less';
import { Message } from '../../model';
+import { Button } from '..';
interface MessagesSectionProps {
getMessages: () => Promise;
@@ -27,7 +29,10 @@ export class MessagesSectionComponent extends React.Component<
componentDidMount() {
this.props.getMessages();
}
-
+ handleCallAlert(event) {
+ alert('Hello! I am an alert box!');
+ console.log('alert', event);
+ }
render() {
const { messages } = this.props;
@@ -36,6 +41,11 @@ export class MessagesSectionComponent extends React.Component<
Messages management sample, deployed
+