Feature/issue#18 events on click

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
 
 
 

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%;
+}

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 (
+    <button onClick={handleOnClick} className="dButton"> Hi, click me! </button>
+  );
+};

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<void>,

03 Tests samples/src/components/MessagesSection/MessagesSection.less

@@ -4,4 +4,5 @@
     justify-content: space-between;
     width: 80%;
     margin: 0 auto;
+
 }

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);
+  });
+
 });

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<void>;
@@ -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<
         <h1>Messages management sample, deployed</h1>
         <MessageForm messages={messages} />
         <MessageList messages={messages} />
+        <Button
+          onClickButton={(event) => {
+            this.handleCallAlert(event);
+          }}
+        />
       </div>
     );
   }

03 Tests samples/src/components/index.ts

@@ -1,11 +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,
 };