From 4f4defe7251bc2274b1a348a3c68c3efdb640ceb Mon Sep 17 00:00:00 2001
From: dkessler <dkessler@pillartechnology.com>
Date: Mon, 24 May 2021 08:47:32 -0500
Subject: [PATCH] added a header for usability

---
 README.md               | 49 ++++++++++++++++++++++++++++++++++++++++-
 src/Header.js           |  8 +++++++
 src/test/Header.test.js |  8 +++++++
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/Header.js
 create mode 100644 src/test/Header.test.js

diff --git a/README.md b/README.md
index 5caa8a9..478f585 100644
--- a/README.md
+++ b/README.md
@@ -755,4 +755,51 @@ test('should throw an exception the note array is undefined', () => {
 - Don't forget to rerun your Cypress tests.  Green!
 - Commit on Green.
 
-[Code for this section](https://github.com/pairing4good/tdd-amplify-react/commit/8905e6d1e7c40c4ccc912f14bdca83fc19b68b73)
\ No newline at end of file
+[Code for this section](https://github.com/pairing4good/tdd-amplify-react/commit/8905e6d1e7c40c4ccc912f14bdca83fc19b68b73)
+
+## Usability
+Customers rarely ask explicitly for a usable product.  In this application rich world that we live in it's assumed that applications will be delivered with common sense usability baked-in.  When I look at the application as it stands, a few things pop out at me.
+1. Header - there's no heading telling you what this application does
+1. Validation - there's no form field validation
+1. Reset Form - after a note is created the form fields are not reset
+
+### Header
+- Create a new file `Header.js` in the `src` directory
+```js
+function Header() {
+
+  return (
+
+  );
+}
+
+export 
+```
+- Let's test drive this component
+- Create a new file `Header.test.js` in the `src/test` directory
+```js
+import { render, screen } from '@testing-library/react';
+import Header from '../Header';
+  
+test('should display header', () => {
+  render(<Header />);
+  const heading = screen.getByRole('heading', { level: 1 });
+  expect(heading).toHaveTextContent('My Notes App')
+});
+```
+- We have a failing test.
+- Let's make it pass
+```js
+function Header() {
+
+  return (
+    <h1>My Notes App</h1>
+  );
+}
+
+export default Header;
+```
+- It's Green!
+- Commit your code!
+
+[Code for this section]()
diff --git a/src/Header.js b/src/Header.js
new file mode 100644
index 0000000..a8ecea5
--- /dev/null
+++ b/src/Header.js
@@ -0,0 +1,8 @@
+function Header() {
+
+  return (
+    <h1>My Notes App</h1>
+  );
+}
+
+export default Header;
\ No newline at end of file
diff --git a/src/test/Header.test.js b/src/test/Header.test.js
new file mode 100644
index 0000000..f56adb0
--- /dev/null
+++ b/src/test/Header.test.js
@@ -0,0 +1,8 @@
+import { render, screen } from '@testing-library/react';
+import Header from '../Header';
+  
+test('should display header', () => {
+  render(<Header />);
+  const heading = screen.getByRole('heading', { level: 1 });
+  expect(heading).toHaveTextContent('My Notes App')
+});
\ No newline at end of file