2 files changed, 103 insertions, 7 deletions
diff --git a/ui/app/components/page-container/page-container-header/page-container-header.component.js b/ui/app/components/page-container/page-container-header/page-container-header.component.js
index 5a5de1e5a..a8458604e 100644
--- a/ui/app/components/page-container/page-container-header/page-container-header.component.js
+++ b/ui/app/components/page-container/page-container-header/page-container-header.component.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
+import classnames from 'classnames'
 
 export default class PageContainerHeader extends Component {
-
   static propTypes = {
     title: PropTypes.string,
     subtitle: PropTypes.string,
@@ -11,8 +11,18 @@ export default class PageContainerHeader extends Component {
     onBackButtonClick: PropTypes.func,
     backButtonStyles: PropTypes.object,
     backButtonString: PropTypes.string,
-    children: PropTypes.node,
-  };
+    tabs: PropTypes.node,
+  }
+
+  renderTabs () {
+    const { tabs } = this.props
+
+    return tabs && (
+      <ul className="page-container__tabs">
+        { tabs }
+      </ul>
+    )
+  }
 
   renderHeaderRow () {
     const { showBackButton, onBackButtonClick, backButtonStyles, backButtonString } = this.props
@@ -31,15 +41,18 @@ export default class PageContainerHeader extends Component {
   }
 
   render () {
-    const { title, subtitle, onClose, children } = this.props
+    const { title, subtitle, onClose, tabs } = this.props
 
     return (
-      <div className="page-container__header">
+      <div className={
+        classnames(
+          'page-container__header',
+          { 'page-container__header--no-padding-bottom': Boolean(tabs) }
+        )
+      }>
 
         { this.renderHeaderRow() }
 
-        { children }
-
         {
           title && <div className="page-container__title">
             { title }
@@ -59,6 +72,7 @@ export default class PageContainerHeader extends Component {
           />
         }
 
+        { this.renderTabs() }
       </div>
     )
   }
diff --git a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
index e69de29bb..59304b2bd 100644
--- a/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
+++ b/ui/app/components/page-container/page-container-header/tests/page-container-header.component.test.js
@@ -0,0 +1,82 @@
+import React from 'react'
+import assert from 'assert'
+import { shallow } from 'enzyme'
+import sinon from 'sinon'
+import PageContainerHeader from '../page-container-header.component'
+
+describe('Page Container Header', () => {
+  let wrapper, style, onBackButtonClick, onClose
+
+  beforeEach(() => {
+    style = {test: 'style'}
+    onBackButtonClick = sinon.spy()
+    onClose = sinon.spy()
+
+    wrapper = shallow(<PageContainerHeader
+      showBackButton = {true}
+      onBackButtonClick = {onBackButtonClick}
+      backButtonStyles = {style}
+      title = {'Test Title'}
+      subtitle = {'Test Subtitle'}
+      tabs = {'Test Tab'}
+      onClose = {onClose}
+    />)
+  })
+
+  describe('Render Header Row', () => {
+
+    it('renders back button', () => {
+      assert.equal(wrapper.find('.page-container__back-button').length, 1)
+      assert.equal(wrapper.find('.page-container__back-button').text(), 'Back')
+    })
+
+    it('ensures style prop', () => {
+      assert.equal(wrapper.find('.page-container__back-button').props().style, style)
+    })
+
+    it('should call back button when click is simulated', () => {
+      wrapper.find('.page-container__back-button').prop('onClick')()
+      assert.equal(onBackButtonClick.callCount, 1)
+    })
+  })
+
+  describe('Render', () => {
+    let header, headerRow, pageTitle, pageSubtitle, pageClose, pageTab
+
+    beforeEach(() => {
+      header = wrapper.find('.page-container__header--no-padding-bottom')
+      headerRow = wrapper.find('.page-container__header-row')
+      pageTitle = wrapper.find('.page-container__title')
+      pageSubtitle = wrapper.find('.page-container__subtitle')
+      pageClose = wrapper.find('.page-container__header-close')
+      pageTab = wrapper.find('.page-container__tabs')
+    })
+
+    it('renders page container', () => {
+      assert.equal(header.length, 1)
+      assert.equal(headerRow.length, 1)
+      assert.equal(pageTitle.length, 1)
+      assert.equal(pageSubtitle.length, 1)
+      assert.equal(pageClose.length, 1)
+      assert.equal(pageTab.length, 1)
+    })
+
+    it('renders title', () => {
+      assert.equal(pageTitle.text(), 'Test Title')
+    })
+
+    it('renders subtitle', () => {
+      assert.equal(pageSubtitle.text(), 'Test Subtitle')
+    })
+
+    it('renders tabs', () => {
+      assert.equal(pageTab.text(), 'Test Tab')
+    })
+
+    it('should call close when click is simulated', () => {
+      pageClose.prop('onClick')()
+      assert.equal(onClose.callCount, 1)
+    })
+  })
+
+})