From 76cc34f6ec5b262a1821e93162a057c50ede340d Mon Sep 17 00:00:00 2001
From: Ka-wai Wong <Kawai.Wong@Microsoft.com>
Date: Wed, 23 Jan 2019 16:31:31 -0800
Subject: [PATCH] Add tests for header and make accessible

---
 src/devpanel/components/Header/Header.css     | 23 +++++++++++------
 src/devpanel/components/Header/Header.js      | 25 ++++++-------------
 src/devpanel/components/Header/Header.test.js |  7 ++++++
 .../Header/__snapshots__/Header.test.js.snap  | 13 ++++++++++
 4 files changed, 43 insertions(+), 25 deletions(-)
 create mode 100644 src/devpanel/components/Header/Header.test.js
 create mode 100644 src/devpanel/components/Header/__snapshots__/Header.test.js.snap

diff --git a/src/devpanel/components/Header/Header.css b/src/devpanel/components/Header/Header.css
index e7c57c5..41861bc 100644
--- a/src/devpanel/components/Header/Header.css
+++ b/src/devpanel/components/Header/Header.css
@@ -1,10 +1,19 @@
-.Header {
-  background-color: #363b44;
-  color: #f9bb10;
-  padding: 10px;
+@media only screen {
+  .header {
+    background-color: var(--microsoft-gray-darkest);
+    color: var(--microsoft-white);
+    padding: 10px;
+  }
+
+  .header--text {
+    margin: 0;
+    padding: 0;
+    text-align: center;
+  }
 }
 
-.Header h1 {
-  margin: 0;
-  padding: 0;
+@media only screen and (min-width: 540px) {
+  .header--text {
+    text-align: start;
+  }
 }
diff --git a/src/devpanel/components/Header/Header.js b/src/devpanel/components/Header/Header.js
index 8bf579d..3764d18 100644
--- a/src/devpanel/components/Header/Header.js
+++ b/src/devpanel/components/Header/Header.js
@@ -1,22 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
+
 import './Header.css';
 
-class Header extends Component {
-  componentDidMount () {
-
-  }
-
-  componentWillUnMount () {
-
-  }
-
-  render () {
-    return (
-      <header className='Header'>
-        <h1>Mezzurite Developer Tools</h1>
-      </header>
-    );
-  }
-}
+const Header = () => (
+  <header className='header' role='banner'>
+    <h1 className='header--text'>Mezzurite Developer Tools</h1>
+  </header>
+);
 
 export default Header;
diff --git a/src/devpanel/components/Header/Header.test.js b/src/devpanel/components/Header/Header.test.js
new file mode 100644
index 0000000..e989eb2
--- /dev/null
+++ b/src/devpanel/components/Header/Header.test.js
@@ -0,0 +1,7 @@
+import Header from './Header';
+
+describe('Header.js', () => {
+  it('should render the header', () => {
+    expect(Header()).toMatchSnapshot();
+  });
+});
diff --git a/src/devpanel/components/Header/__snapshots__/Header.test.js.snap b/src/devpanel/components/Header/__snapshots__/Header.test.js.snap
new file mode 100644
index 0000000..b4b2559
--- /dev/null
+++ b/src/devpanel/components/Header/__snapshots__/Header.test.js.snap
@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Header.js should render the header 1`] = `
+<header
+  className="header"
+>
+  <h1
+    className="header--text"
+  >
+    Mezzurite Developer Tools
+  </h1>
+</header>
+`;