From e056595a77582a4fabdba841949b1906b939d9ba Mon Sep 17 00:00:00 2001
From: Christopher Davies <github@christophilus.com>
Date: Thu, 29 Mar 2018 10:36:55 -0400
Subject: [PATCH] Add more unit tests to the header component

---
 .../header/__snapshots__/header.test.js.snap  |  10 +
 .../__snapshots__/header_logo.test.js.snap    |  27 +++
 src/components/header/header.test.js          |  11 +
 .../__snapshots__/header_alert.test.js.snap   | 203 +++++++++++++++++-
 .../header/header_alert/header_alert.js       |   5 +-
 .../header/header_alert/header_alert.test.js  |  49 +++++
 .../header_breadcrumbs.test.js.snap           |   6 +-
 .../header_breadcrumbs.test.js                |   6 +-
 src/components/header/header_logo.test.js     |  13 ++
 .../__snapshots__/header_section.test.js.snap |  11 +
 .../header_section_item.test.js.snap          |  10 +
 .../header_section_item_button.test.js.snap   |  11 +
 .../header_section/header_section.test.js     |  13 ++
 .../header_section_item.test.js               |  11 +
 .../header_section_item_button.test.js        |  11 +
 15 files changed, 389 insertions(+), 8 deletions(-)

diff --git a/src/components/header/__snapshots__/header.test.js.snap b/src/components/header/__snapshots__/header.test.js.snap
index dd572efd114..2ac2a381dee 100644
--- a/src/components/header/__snapshots__/header.test.js.snap
+++ b/src/components/header/__snapshots__/header.test.js.snap
@@ -7,3 +7,13 @@ exports[`EuiHeader is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiHeader renders children 1`] = `
+<div
+  class="euiHeader"
+>
+  <span>
+    Hello!
+  </span>
+</div>
+`;
diff --git a/src/components/header/__snapshots__/header_logo.test.js.snap b/src/components/header/__snapshots__/header_logo.test.js.snap
index effa933074b..1ff7b6c47d9 100644
--- a/src/components/header/__snapshots__/header_logo.test.js.snap
+++ b/src/components/header/__snapshots__/header_logo.test.js.snap
@@ -90,3 +90,30 @@ exports[`EuiHeaderLogo renders href 1`] = `
   </svg>
 </a>
 `;
+
+exports[`EuiHeaderLogo renders optional props 1`] = `
+<a
+  class="euiHeaderLogo"
+  style="color:red"
+>
+  <svg
+    class="euiIcon euiHeaderLogo__icon euiIcon--xLarge"
+    height="16"
+    title="Moby Dick"
+    viewBox="0 0 16 16"
+    width="16"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g
+      fill-rule="evenodd"
+    >
+      <path
+        d="M7.5 2.236L1.618 14h11.764L7.5 2.236zm.894-.447l5.882 11.764A1 1 0 0 1 13.382 15H1.618a1 1 0 0 1-.894-1.447L6.606 1.789a1 1 0 0 1 1.788 0z"
+      />
+      <path
+        d="M7 6h1v5H7zM7 12h1v1H7z"
+      />
+    </g>
+  </svg>
+</a>
+`;
diff --git a/src/components/header/header.test.js b/src/components/header/header.test.js
index fe7c01c2973..5c988e1ff7d 100644
--- a/src/components/header/header.test.js
+++ b/src/components/header/header.test.js
@@ -13,4 +13,15 @@ describe('EuiHeader', () => {
     expect(component)
       .toMatchSnapshot();
   });
+
+  test('renders children', () => {
+    const component = render(
+      <EuiHeader>
+        <span>Hello!</span>
+      </EuiHeader>
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
 });
diff --git a/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap b/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap
index 71fe7a15487..cd58e83100c 100644
--- a/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap
+++ b/src/components/header/header_alert/__snapshots__/header_alert.test.js.snap
@@ -32,12 +32,209 @@ exports[`EuiHeaderAlert is rendered 1`] = `
       />
     </svg>
   </button>
-  <p
+  <div
+    class="euiHeaderAlert__title"
+  >
+    title
+  </div>
+  <div
+    class="euiHeaderAlert__text"
+  />
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiHeaderAlert__action euiLink"
+      />
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiHeaderAlert__date"
+      >
+        date
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiHeaderAlert renders action 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiHeaderAlert testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <button
+    aria-label="Dismiss"
+    class="euiButtonIcon euiButtonIcon--primary euiHeaderAlert__dismiss"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="euiIcon euiButtonIcon__icon euiIcon--medium"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xlink="http://www.w3.org/1999/xlink"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <path
+          d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+          id="cross-a"
+        />
+      </defs>
+      <use
+        fill-rule="nonzero"
+        href="#cross-a"
+      />
+    </svg>
+  </button>
+  <div
     class="euiHeaderAlert__title"
   >
     title
-  </p>
-  <p
+  </div>
+  <div
+    class="euiHeaderAlert__text"
+  />
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiHeaderAlert__action euiLink"
+      >
+        <button>
+          Quietly take to the ship
+        </button>
+      </div>
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiHeaderAlert__date"
+      >
+        date
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiHeaderAlert renders date as an element 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiHeaderAlert testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <button
+    aria-label="Dismiss"
+    class="euiButtonIcon euiButtonIcon--primary euiHeaderAlert__dismiss"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="euiIcon euiButtonIcon__icon euiIcon--medium"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xlink="http://www.w3.org/1999/xlink"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <path
+          d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+          id="cross-a"
+        />
+      </defs>
+      <use
+        fill-rule="nonzero"
+        href="#cross-a"
+      />
+    </svg>
+  </button>
+  <div
+    class="euiHeaderAlert__title"
+  >
+    shazm
+  </div>
+  <div
+    class="euiHeaderAlert__text"
+  />
+  <div
+    class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--responsive"
+  >
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiHeaderAlert__action euiLink"
+      />
+    </div>
+    <div
+      class="euiFlexItem euiFlexItem--flexGrowZero"
+    >
+      <div
+        class="euiHeaderAlert__date"
+      >
+        <h2>
+          October 18, 1851
+        </h2>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`EuiHeaderAlert renders title as an element 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiHeaderAlert testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <button
+    aria-label="Dismiss"
+    class="euiButtonIcon euiButtonIcon--primary euiHeaderAlert__dismiss"
+    type="button"
+  >
+    <svg
+      aria-hidden="true"
+      class="euiIcon euiButtonIcon__icon euiIcon--medium"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xlink="http://www.w3.org/1999/xlink"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <path
+          d="M7.293 8l-4.147 4.146a.5.5 0 0 0 .708.708L8 8.707l4.146 4.147a.5.5 0 0 0 .708-.708L8.707 8l4.147-4.146a.5.5 0 0 0-.708-.708L8 7.293 3.854 3.146a.5.5 0 1 0-.708.708L7.293 8z"
+          id="cross-a"
+        />
+      </defs>
+      <use
+        fill-rule="nonzero"
+        href="#cross-a"
+      />
+    </svg>
+  </button>
+  <div
+    class="euiHeaderAlert__title"
+  >
+    <h2>
+      Circumambulate the city
+    </h2>
+  </div>
+  <div
     class="euiHeaderAlert__text"
   />
   <div
diff --git a/src/components/header/header_alert/header_alert.js b/src/components/header/header_alert/header_alert.js
index 9533dfef7a5..44658c2894c 100644
--- a/src/components/header/header_alert/header_alert.js
+++ b/src/components/header/header_alert/header_alert.js
@@ -33,9 +33,9 @@ export const EuiHeaderAlert = ({
         className="euiHeaderAlert__dismiss"
       />
 
-      <p className="euiHeaderAlert__title">{title}</p>
+      <div className="euiHeaderAlert__title">{title}</div>
 
-      <p className="euiHeaderAlert__text">{text}</p>
+      <div className="euiHeaderAlert__text">{text}</div>
 
       <EuiFlexGroup justifyContent="spaceBetween">
         <EuiFlexItem grow={false}>
@@ -54,7 +54,6 @@ export const EuiHeaderAlert = ({
 
 EuiHeaderAlert.propTypes = {
   action: PropTypes.node,
-  children: PropTypes.node,
   className: PropTypes.string,
   date: PropTypes.node.isRequired,
   text: PropTypes.node,
diff --git a/src/components/header/header_alert/header_alert.test.js b/src/components/header/header_alert/header_alert.test.js
index 918116ee223..d0e7a541525 100644
--- a/src/components/header/header_alert/header_alert.test.js
+++ b/src/components/header/header_alert/header_alert.test.js
@@ -17,4 +17,53 @@ describe('EuiHeaderAlert', () => {
     expect(component)
       .toMatchSnapshot();
   });
+
+  test('renders action', () => {
+    const action = (
+      <button>Quietly take to the ship</button>
+    );
+    const component = render(
+      <EuiHeaderAlert
+        {...requiredProps}
+        title="title"
+        date="date"
+        action={action}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
+  test('renders title as an element', () => {
+    const title = (
+      <h2>Circumambulate the city</h2>
+    );
+    const component = render(
+      <EuiHeaderAlert
+        {...requiredProps}
+        date="date"
+        title={title}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
+  test('renders date as an element', () => {
+    const date = (
+      <h2>October 18, 1851</h2>
+    );
+    const component = render(
+      <EuiHeaderAlert
+        {...requiredProps}
+        title="shazm"
+        date={date}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
 });
diff --git a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.js.snap b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.js.snap
index 58e09405be5..0bbd09ea87f 100644
--- a/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.js.snap
+++ b/src/components/header/header_breadcrumbs/__snapshots__/header_breadcrumbs.test.js.snap
@@ -5,5 +5,9 @@ exports[`EuiHeaderBreadcrumbs is rendered 1`] = `
   aria-label="aria-label"
   class="euiHeaderBreadcrumbs testClass1 testClass2"
   data-test-subj="test subject string"
-/>
+>
+  <span>
+    I thought I would sail about a little and see the watery part of the world.
+  </span>
+</div>
 `;
diff --git a/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js b/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js
index 8566717a75b..0ffc5189293 100644
--- a/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js
+++ b/src/components/header/header_breadcrumbs/header_breadcrumbs.test.js
@@ -7,7 +7,11 @@ import { EuiHeaderBreadcrumbs } from './header_breadcrumbs';
 describe('EuiHeaderBreadcrumbs', () => {
   test('is rendered', () => {
     const component = render(
-      <EuiHeaderBreadcrumbs {...requiredProps} />
+      <EuiHeaderBreadcrumbs {...requiredProps}>
+        <span>
+          I thought I would sail about a little and see the watery part of the world.
+        </span>
+      </EuiHeaderBreadcrumbs>
     );
 
     expect(component)
diff --git a/src/components/header/header_logo.test.js b/src/components/header/header_logo.test.js
index a16499b9715..ac831c10e0b 100644
--- a/src/components/header/header_logo.test.js
+++ b/src/components/header/header_logo.test.js
@@ -22,4 +22,17 @@ describe('EuiHeaderLogo', () => {
     expect(component)
       .toMatchSnapshot();
   });
+
+  test('renders optional props', () => {
+    const component = render(
+      <EuiHeaderLogo
+        iconType="alert"
+        iconTitle="Moby Dick"
+        style={{ color: 'red' }}
+      />
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
 });
diff --git a/src/components/header/header_section/__snapshots__/header_section.test.js.snap b/src/components/header/header_section/__snapshots__/header_section.test.js.snap
index 66e61f9c431..7ef9287c561 100644
--- a/src/components/header/header_section/__snapshots__/header_section.test.js.snap
+++ b/src/components/header/header_section/__snapshots__/header_section.test.js.snap
@@ -8,6 +8,17 @@ exports[`EuiHeaderSection is rendered 1`] = `
 />
 `;
 
+exports[`EuiHeaderSection renders optional params 1`] = `
+<div
+  class="euiHeaderSection euiHeaderSection--left"
+  style="color:blue"
+>
+  <span>
+    Some years ago never mind how long precisely...
+  </span>
+</div>
+`;
+
 exports[`EuiHeaderSection side defaults to left 1`] = `
 <div
   class="euiHeaderSection euiHeaderSection--left"
diff --git a/src/components/header/header_section/__snapshots__/header_section_item.test.js.snap b/src/components/header/header_section/__snapshots__/header_section_item.test.js.snap
index d0a685ba9f6..43950f6be22 100644
--- a/src/components/header/header_section/__snapshots__/header_section_item.test.js.snap
+++ b/src/components/header/header_section/__snapshots__/header_section_item.test.js.snap
@@ -19,3 +19,13 @@ exports[`EuiHeaderSectionItem is rendered 1`] = `
   data-test-subj="test subject string"
 />
 `;
+
+exports[`EuiHeaderSectionItem renders children 1`] = `
+<div
+  class="euiHeaderSectionItem"
+>
+  <span>
+    Call me Ishmael.
+  </span>
+</div>
+`;
diff --git a/src/components/header/header_section/__snapshots__/header_section_item_button.test.js.snap b/src/components/header/header_section/__snapshots__/header_section_item_button.test.js.snap
index 72bdb627377..407fafc9b2f 100644
--- a/src/components/header/header_section/__snapshots__/header_section_item_button.test.js.snap
+++ b/src/components/header/header_section/__snapshots__/header_section_item_button.test.js.snap
@@ -8,3 +8,14 @@ exports[`EuiHeaderSectionItemButton is rendered 1`] = `
   type="button"
 />
 `;
+
+exports[`EuiHeaderSectionItemButton renders children 1`] = `
+<button
+  class="euiHeaderSectionItem__button"
+  type="button"
+>
+  <span>
+    Ahoy!
+  </span>
+</button>
+`;
diff --git a/src/components/header/header_section/header_section.test.js b/src/components/header/header_section/header_section.test.js
index e9188134f87..6e771df4eba 100644
--- a/src/components/header/header_section/header_section.test.js
+++ b/src/components/header/header_section/header_section.test.js
@@ -14,6 +14,19 @@ describe('EuiHeaderSection', () => {
       .toMatchSnapshot();
   });
 
+  test('renders optional params', () => {
+    const component = render(
+      <EuiHeaderSection style={{ color: 'blue' }}>
+        <span>
+          Some years ago never mind how long precisely...
+        </span>
+      </EuiHeaderSection>
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
   describe('side', () => {
     test('defaults to left', () => {
       const component = render(
diff --git a/src/components/header/header_section/header_section_item.test.js b/src/components/header/header_section/header_section_item.test.js
index 3996567ddce..26f9ccd45c0 100644
--- a/src/components/header/header_section/header_section_item.test.js
+++ b/src/components/header/header_section/header_section_item.test.js
@@ -14,6 +14,17 @@ describe('EuiHeaderSectionItem', () => {
       .toMatchSnapshot();
   });
 
+  test('renders children', () => {
+    const component = render(
+      <EuiHeaderSectionItem>
+        <span>Call me Ishmael.</span>
+      </EuiHeaderSectionItem>
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
   describe('border', () => {
     test('defaults to left', () => {
       const component = render(
diff --git a/src/components/header/header_section/header_section_item_button.test.js b/src/components/header/header_section/header_section_item_button.test.js
index b56b07672d0..87c9c3bed25 100644
--- a/src/components/header/header_section/header_section_item_button.test.js
+++ b/src/components/header/header_section/header_section_item_button.test.js
@@ -15,6 +15,17 @@ describe('EuiHeaderSectionItemButton', () => {
       .toMatchSnapshot();
   });
 
+  test('renders children', () => {
+    const component = render(
+      <EuiHeaderSectionItemButton>
+        <span>Ahoy!</span>
+      </EuiHeaderSectionItemButton>
+    );
+
+    expect(component)
+      .toMatchSnapshot();
+  });
+
   describe('onClick', () => {
     test(`isn't called upon instantiation`, () => {
       const onClickHandler = sinon.stub();