added form reset after a note is created so that users can easily enter a new note

Author: kesslerpillar

README.md

@@ -944,4 +944,62 @@ test('should add a new note when name and description are provided', () => {
 - Rerun you Cypress tests.
 - Commit!
 
-[Code for this section](https://github.com/pairing4good/tdd-amplify-react/commit/959bafeba3080065bbaa161825d1371b739a3973)
+[Code for this section](https://github.com/pairing4good/tdd-amplify-react/commit/959bafeba3080065bbaa161825d1371b739a3973)
+
+## Reset Form
+One a note is saved the name and description fields should be reset to empty strings.
+
+- Add a test to `NoteForm.test.js`
+```js
+test('should add a new note when name and description are provided', () => {
+    formData.name = "test name";
+    formData.description = "test description";
+
+    const button = screen.getByTestId('note-form-submit');
+
+    fireEvent.click(button);
+
+    expect(formData.name).toBe("");
+    expect(formData.description).toBe("");
+});
+```
+- Make this failing test go Green
+```js
+function createNote() {
+    if (!props.formData.name || !props.formData.description) return;
+    props.setNotesCallback([ ...props.notes, props.formData ]);
+    props.formData.name = '';
+    props.formData.description = '';
+}
+```
+- Green
+- Run the Cypress tests and it's **Red**.
+
+What happened?  Well while this approach worked for a lower level component test it does not work when React is managing its own [state](https://reactjs.org/docs/state-and-lifecycle.html).  React clearly states that you should [not modify state directly](https://reactjs.org/docs/state-and-lifecycle.html#do-not-modify-state-directly).  Instead you should use the [setState](https://reactjs.org/docs/hooks-state.html) callback hook.
+
+- Let's update the test to use the `setFormDataCallback` callback.
+```js
+test('should add a new note when name and description are provided', () => {
+    formData.name = "test name";
+    formData.description = "test description";
+
+    const button = screen.getByTestId('note-form-submit');
+
+    fireEvent.click(button);
+
+    expect(setFormDataCallback).toHaveBeenCalledWith({name: '', description: ''});
+});
+```
+- This red test drives these code changes
+```js
+function createNote() {
+    if (!props.formData.name || !props.formData.description) return;
+    props.setNotesCallback([ ...props.notes, props.formData ]);
+    props.setFormDataCallback({name: '', description: ''});
+}
+```
+- Green!
+- Cypress test is now Green!
+- Commit
+
+[Code for this section]()

src/NoteForm.js

@@ -1,8 +1,9 @@
 function NoteForm(props) {
-    
+
     function createNote() {
-    if (!props.formData.name || !props.formData.description) return;
-    props.setNotesCallback([ ...props.notes, props.formData ]);
+        if (!props.formData.name || !props.formData.description) return;
+        props.setNotesCallback([ ...props.notes, props.formData ]);
+        props.setFormDataCallback({name: '', description: ''});
     }
 
     return (

src/test/NoteForm.test.js

@@ -2,11 +2,13 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import NoteForm from "../NoteForm";
 
 const setNotesCallback = jest.fn();
+const setFormDataCallback = jest.fn();
 const formData = {name: '', description: ''}
 
 beforeEach(() => {
     render(<NoteForm notes={[]} 
             setNotesCallback={setNotesCallback}
+            setFormDataCallback={setFormDataCallback}
             formData={formData}/>)
 });
 
@@ -29,8 +31,8 @@ test('should display the description placeholder', () => {
 });
 
 test('should require name and description', () => {
-    formData.description = "";
     formData.name = "";
+    formData.description = "";
 
     const button = screen.getByTestId('note-form-submit');
 
@@ -40,8 +42,8 @@ test('should require name and description', () => {
 });
 
 test('should require name when description provided', () => {
-    formData.description = "test description";
     formData.name = "";
+    formData.description = "test description";
 
     const button = screen.getByTestId('note-form-submit');
 
@@ -51,8 +53,8 @@ test('should require name when description provided', () => {
 });
 
 test('should require description when name provided', () => {
-    formData.description = "";
     formData.name = "test name";
+    formData.description = "";
 
     const button = screen.getByTestId('note-form-submit');
 
@@ -62,12 +64,23 @@ test('should require description when name provided', () => {
 });
 
 test('should add a new note when name and description are provided', () => {
-    formData.description = "test description";
     formData.name = "test name";
+    formData.description = "test description";
 
     const button = screen.getByTestId('note-form-submit');
 
     fireEvent.click(button);
 
     expect(setNotesCallback.mock.calls.length).toBe(1);
+});
+
+test('should add a new note when name and description are provided', () => {
+    formData.name = "test name";
+    formData.description = "test description";
+
+    const button = screen.getByTestId('note-form-submit');
+
+    fireEvent.click(button);
+
+    expect(setFormDataCallback).toHaveBeenCalledWith({name: '', description: ''});
 });