fixed 2 hometask

src/components/Chat/Chat.js

@@ -1,38 +1,40 @@
-import React from 'react';
-import Message from "../Message/Message";
+import React, { Component } from 'react';
+import Message from '../Message/Message';
 
-export default class Chat extends React.Component {
-    constructor(props){
-        super(props);
-        this.state = {
-            messages: [],
-            messageInput: ''
-        };
-    }
-    changeInputMessage = event => {
-        this.setState({ messageInput : event.target.value })
-    };
+export default class Chat extends Component {
+  state = {
+    messages: [],
+    messageInput: ''
+  };
+
+  changeInputMessage = event => {
+    this.setState({ messageInput: event.target.value });
+  };
 
-    sendMessageOnEnter = event => {
-        if(event.key === 'Enter') {
-            this.setState({ messages : this.state.messageInput });
-            this.setState({ messageInput : '' });
-            console.log(this.state.messages, "this.state.messageInput");
-        }
+  sendMessageOnEnter = event => {
+    if (event.key === 'Enter') {
+      this.setState({ messages: [...this.state.messages, this.state.messageInput ] });
+      this.setState({ messageInput:""});
+    }
+  };
 
-    };
+  render() {
+    const { messages } = this.state;
 
-    render() {
-        return (
-            <div>
-                <div className="chat">
-                    Hello
-                </div>
-                <input onChange={this.changeInputMessage} onKeyPress={this.sendMessageOnEnter} className="input-message" />
+    return (
+      <div>
+        <div className="chat">
 
-                <Message text='my name is Ivan' disc={this.state.messageInput}  />
-            </div>
+        </div>
+        <input
+          onChange={this.changeInputMessage}
+          onKeyPress={this.sendMessageOnEnter}
+          className="input-message"
+          value={this.state.messageInput}
+        />
 
-        )
-    }
-}
+        <Message text={messages} />
+      </div>
+    );
+  }
+}

src/components/Chat/Chat.test.js

@@ -11,24 +11,18 @@ describe('Компонента Chat', () => {
       expect(wrapper.find('div.chat')).toHaveLength(1);
     });
     it('Содержит input с классом input-message', () => {
-      expect(
-        wrapper.find('input.input-message'),
-      ).toHaveLength(1);
+      expect(wrapper.find('input.input-message')).toHaveLength(1);
     });
   });
 
   describe('Методы компоненты', () => {
     const wrapper = shallow(<Chat />);
     it('Содержит метод changeInputMessage', () => {
-      expect(
-        wrapper.instance().changeInputMessage,
-      ).toBeDefined();
+      expect(wrapper.instance().changeInputMessage).toBeDefined();
     });
 
     it('Содержит метод sendMessageOnEnter', () => {
-      expect(
-        wrapper.instance().sendMessageOnEnter,
-      ).toBeDefined();
+      expect(wrapper.instance().sendMessageOnEnter).toBeDefined();
     });
   });
 
@@ -46,43 +40,29 @@ describe('Компонента Chat', () => {
     it('При вводе значения в input, оно сохраняется в state.messageInput', () => {
       const wrapper = shallow(<Chat />);
 
-      wrapper
-        .find('input')
-        .simulate('change', { target: { value: 10 } });
+      wrapper.find('input').simulate('change', { target: { value: 10 } });
 
       expect(wrapper.state().messageInput).toEqual(10);
     });
 
     it('При нажатии Enter в input, значение в state.messages станет содержать [{text: значение_из_messageInput}], а state.messageInput станет пустой строкой ""', () => {
       const wrapper = shallow(<Chat />);
 
-      wrapper
-        .find('input')
-        .simulate('change', { target: { value: 10 } });
+      wrapper.find('input').simulate('change', { target: { value: 10 } });
 
-      wrapper
-        .find('input')
-        .simulate('keyPress', { key: 'Enter' });
+      wrapper.find('input').simulate('keyPress', { key: 'Enter' });
 
-      expect(wrapper.state().messages).toEqual([
-        { text: 10 },
-      ]);
+      expect(wrapper.state().messages).toEqual([{ text: 10 }]);
     });
   });
 
   describe('проверка рендера компонент Messages', () => {
     it('Содержимое state.messages рендерится в список компонент Message', () => {
       const wrapper = shallow(<Chat />);
-      wrapper
-        .find('input')
-        .simulate('change', { target: { value: 10 } });
-      wrapper
-        .find('input')
-        .simulate('keyPress', { key: 'Enter' });
+      wrapper.find('input').simulate('change', { target: { value: 10 } });
+      wrapper.find('input').simulate('keyPress', { key: 'Enter' });
 
-      expect(
-        wrapper.contains(<Message text={10} />),
-      ).toBeTruthy();
+      expect(wrapper.contains(<Message text={10} />)).toBeTruthy();
     });
   });
 });

src/components/Chat/index.js

@@ -1 +1 @@
-export { default } from './Chat';
+export { default } from './Chat';

src/components/Message/Message.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, {Component} from 'react';
 
-export default class Message extends React.Component {
-    render() {
-        return (
-            <span className="message">
-                {this.props.text}
-                {this.props.disc}
-            </span>
-        )
-    }
-}
+export default class Message extends Component {
+  render() {
+    const {text} = this.props;
+    return (
+      <span className="message">
+        {text}<br/>
+      </span>
+    );
+  }
+}