issue#21

03 Tests samples/README.md

@@ -21,7 +21,7 @@
 - Tests samples for events onScroll 
 - Test samples for onMouseUp and onMouseDown
 - Test samples for onContextMenu 
-- Test samples for onSubmit
+- Test samples for onSubmit [onSubmitTest](./src/components/NameForm/NameForm.test.tsx)
 - Tests samples for useSuscribeToScroll 
 - Tests samples using ref an useRef hook 
 

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

@@ -2,28 +2,37 @@
 @headerBackgroundColor: gainsboro;
 @evenTrBackgroundColor:  #ffe8e8;
 @oddTrBackgroundColor: white;
-
-.messages-table{
-    border: @tableBorder;
-    width: 80%;
-    border-collapse: collapse;
-    td, th {
+div {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    .messages-table{
         border: @tableBorder;
-    };
-    thead{
-        tr{
-            background-color: @headerBackgroundColor;
-            text-align: left;
-        }
-    }
-    tbody{
-        tr{
-            &:nth-child(even){
-                background-color: @evenTrBackgroundColor;
+        width: 80%;
+        border-collapse: collapse;
+        td, th {
+            border: @tableBorder;
+        };
+        thead{
+            tr{
+                background-color: @headerBackgroundColor;
+                text-align: left;
             }
-            &:nth-child(odd){
-                background-color: @oddTrBackgroundColor;
+        }
+        tbody{
+            tr{
+                &:nth-child(even){
+                    background-color: @evenTrBackgroundColor;
+                }
+                &:nth-child(odd){
+                    background-color: @oddTrBackgroundColor;
+                }
             }
         }
     }
-};
+    button {
+        width: 20%;
+        background-color: black;
+        color: white;
+    }
+};

03 Tests samples/src/components/MessageList/MessageList.tsx

@@ -3,24 +3,30 @@ import './MessageList.less';
 import { Message } from '../../model';
 
 interface MessageListProps {
-    messages: Message[],
+	messages: Message[];
 }
 
 export const MessageList = (props: MessageListProps) => {
-  return (<table className="messages-table">
-    <thead>
-      <tr>
-        <th>Subject</th>
-        <th>Body</th>
-      </tr>
-    </thead>
-    <tbody>
-      {props.messages.map(message => {
-        return (<tr key={message.id}>
-          <td>{message.subject}</td>
-          <td>{message.body}</td>
-        </tr>);
-      })}
-    </tbody>
-  </table>);
+  return (
+    <div>
+      <table className="messages-table">
+        <thead>
+          <tr>
+            <th>Subject</th>
+            <th>Body</th>
+          </tr>
+        </thead>
+        <tbody>
+          {props.messages.map((message) => {
+            return (
+              <tr key={message.id}>
+                <td>{message.subject}</td>
+                <td>{message.body}</td>
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+    </div>
+  );
 };

03 Tests samples/src/components/MessagesSection/MessagesSection.test.tsx

@@ -5,7 +5,6 @@ import Adapter from 'enzyme-adapter-react-16';
 import sinon from 'sinon';
 import  { MessagesSectionComponent } from './MessagesSection';
 
-
 describe('Message List component test', () => {
   configure({ adapter: new Adapter() });
 

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { MessageForm, MessageList } from '../index';
+import { MessageForm, MessageList, NameForm } from '../index';
 import { connect } from 'react-redux';
 import { getAllMessages } from '../../redux/actions/MessagesActions';
 import './MessagesSection.less';
@@ -36,6 +36,7 @@ export class MessagesSectionComponent extends React.Component<
         <h1>Messages management sample, deployed</h1>
         <MessageForm messages={messages} />
         <MessageList messages={messages} />
+        <NameForm />
       </div>
     );
   }

03 Tests samples/src/components/NameForm/NameForm.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { NameForm } from './NameForm';
+import { configure } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+describe('<NameForm', () => {
+  configure({ adapter: new Adapter() });
+  let component;
+  beforeEach(() => {
+    component = mount(<NameForm />);
+  });
+  it('Should call alert() when submit button is clicked', () => {
+    window.alert = jest.fn();
+    component.setState({ value: 'Hello' });
+    const expectedValue = 'A name was submitted: Hello';
+    component.find('form').simulate('submit');
+    expect(window.alert).toHaveBeenCalledWith(expectedValue);
+  });
+  it('Should handle state changes', () => {
+    component.setState({clicked: false});
+    expect(component.state().clicked).toBe(false);
+    component.find('form').simulate('submit');
+    expect(component.state().clicked).toBe(true);
+  });
+});

03 Tests samples/src/components/NameForm/NameForm.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+interface MyState {
+  value: string;
+  clicked: boolean;
+}
+export class NameForm extends React.Component<{}, MyState> {
+  constructor(props: MyState) {
+    super(props);
+    this.state = { value: '' , clicked: false };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({ value: event.target.value });
+  }
+
+  handleSubmit(event) {
+    alert('A name was submitted: ' + this.state.value);
+    this.setState({clicked: true});
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <label>
+          Name:
+          <input
+            type="text"
+            value={this.state.value}
+            onChange={this.handleChange}
+          />
+        </label>
+        <input type="submit" value="Submit" />
+      </form>
+    );
+  }
+}

03 Tests samples/src/components/index.ts

@@ -1,11 +1,11 @@
 import {MessageList} from './MessageList/MessageList';
 import {MessageForm} from './MessageForm/MessageForm';
 import {MessagesSection} from './MessagesSection/MessagesSection';
-
-
+import {NameForm} from './NameForm/NameForm';
 
 export {
   MessageList,
   MessageForm,
   MessagesSection,
+  NameForm,
 };