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

+