diff --git a/src/core/components/NavBar/index.js b/src/core/components/NavBar/index.js
new file mode 100644
index 00000000000..8c19102129f
--- /dev/null
+++ b/src/core/components/NavBar/index.js
@@ -0,0 +1,23 @@
+import React, { PropTypes } from 'react';
+import { Link } from 'react-router';
+
+import 'core/components/NavBar/styles.scss';
+
+export const NavBarItem = ({ children }) => {children};
+NavBarItem.propTypes = {
+ children: PropTypes.node,
+};
+
+export const NavBarLink = ({ children, ...props }) => (
+
+ {children}
+
+);
+NavBarLink.propTypes = {
+ children: PropTypes.node,
+};
+
+export const NavBar = ({ children }) =>
{children}
;
+NavBar.propTypes = {
+ children: PropTypes.node,
+};
diff --git a/src/core/components/NavBar/styles.scss b/src/core/components/NavBar/styles.scss
new file mode 100644
index 00000000000..d774d632d9a
--- /dev/null
+++ b/src/core/components/NavBar/styles.scss
@@ -0,0 +1,29 @@
+.NavBar {
+ align-items: center;
+ justify-content: space-between;
+ background: #444;
+ display: flex;
+ height: 50px;
+ padding: 0 10px;
+ width: 100%;
+}
+
+.NavBarLink {
+ background: transparent;
+ border: none;
+ border-radius: 4px;
+ color: #fff;
+ display: block;
+ height: 30px;
+ line-height: 30px;
+ min-width: 50px;
+ padding: 0 10px;
+ text-decoration: none;
+ transition: 200ms;
+
+ &:hover {
+ background-color: #fff;
+ color: #444;
+ cursor: pointer;
+ }
+}
diff --git a/src/search/components/NavBar/index.js b/src/search/components/NavBar/index.js
new file mode 100644
index 00000000000..d19f79fd659
--- /dev/null
+++ b/src/search/components/NavBar/index.js
@@ -0,0 +1,17 @@
+import React, { PropTypes } from 'react';
+
+import {
+ NavBar,
+ NavBarLink,
+} from 'core/components/NavBar';
+
+const SearchNavBar = () => (
+
+ Search
+
+);
+SearchNavBar.propTypes = {
+ logout: PropTypes.func.isRequired,
+};
+
+export default SearchNavBar;
diff --git a/src/search/containers/App.js b/src/search/containers/App.js
index 502eb41cbfb..8bc4337237f 100644
--- a/src/search/containers/App.js
+++ b/src/search/containers/App.js
@@ -1,9 +1,10 @@
import React, { PropTypes } from 'react';
import Helmet from 'react-helmet';
-import 'search/css/App.scss';
import { gettext as _ } from 'core/utils';
+import NavBar from 'search/components/NavBar';
+import 'search/css/App.scss';
export default class App extends React.Component {
static propTypes = {
@@ -17,7 +18,10 @@ export default class App extends React.Component {
- {children}
+
+
+ {children}
+
);
}
diff --git a/src/search/containers/CurrentSearchPage.js b/src/search/containers/CurrentSearchPage.js
index b9131fa2bb4..2e57ec64c1d 100644
--- a/src/search/containers/CurrentSearchPage.js
+++ b/src/search/containers/CurrentSearchPage.js
@@ -5,8 +5,12 @@ import { search } from 'core/api';
import SearchPage from 'search/components/SearchPage';
import { searchStart, searchLoad, searchFail } from 'search/actions';
-export function mapStateToProps(state) {
- return state.search;
+export function mapStateToProps(state, ownProps) {
+ const { location } = ownProps;
+ if (location.query.q === state.search.query) {
+ return state.search;
+ }
+ return {};
}
function performSearch({ dispatch, page, query, api }) {
diff --git a/src/search/css/App.scss b/src/search/css/App.scss
index 2db74b5c24c..05595a0f26f 100644
--- a/src/search/css/App.scss
+++ b/src/search/css/App.scss
@@ -4,10 +4,13 @@
body {
background: $body-color;
- margin: 20px;
color: $text-color-default;
}
+.App {
+ margin: 20px;
+}
+
* {
box-sizing: border-box;
}
diff --git a/tests/client/core/components/TestNavBar.js b/tests/client/core/components/TestNavBar.js
new file mode 100644
index 00000000000..17988a48a9e
--- /dev/null
+++ b/tests/client/core/components/TestNavBar.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { Link } from 'react-router';
+
+import { shallowRender } from 'tests/client/helpers';
+import { NavBar, NavBarItem, NavBarLink } from 'core/components/NavBar';
+
+describe('', () => {
+ it('wraps its children in a span', () => {
+ const root = shallowRender(Foo);
+ assert.equal(root.props.className, 'NavBarItem');
+ assert.equal(root.type, 'span');
+ assert.equal(root.props.children, 'Foo');
+ });
+});
+
+describe('', () => {
+ it('wraps its children in a span', () => {
+ const root = shallowRender(Baileys Taproom);
+ assert.equal(root.type, NavBarItem);
+ assert.equal(root.props.children.type, Link);
+ assert.equal(root.props.children.props.to, '/bar');
+ assert.equal(root.props.children.props.children, 'Baileys Taproom');
+ });
+});
+
+describe('', () => {
+ it('wraps its children in a div', () => {
+ const root = shallowRender(Navigate places!);
+ assert.equal(root.type, 'div');
+ assert.equal(root.props.className, 'NavBar');
+ assert.equal(root.props.children, 'Navigate places!');
+ });
+});
diff --git a/tests/client/search/components/TestNavBar.js b/tests/client/search/components/TestNavBar.js
new file mode 100644
index 00000000000..8e9d13a9b9c
--- /dev/null
+++ b/tests/client/search/components/TestNavBar.js
@@ -0,0 +1,16 @@
+import React from 'react';
+
+import { NavBar, NavBarLink } from 'core/components/NavBar';
+import SearchNavBar from 'search/components/NavBar';
+import { shallowRender } from 'tests/client/helpers';
+
+describe('', () => {
+ it('renders a link to Search', () => {
+ const root = shallowRender();
+ assert.equal(root.type, NavBar);
+ const link = root.props.children;
+ assert.equal(link.type, NavBarLink);
+ assert.equal(link.props.to, '/search');
+ assert.equal(link.props.children, 'Search');
+ });
+});
diff --git a/tests/client/search/containers/TestApp.js b/tests/client/search/containers/TestApp.js
index 8371999a9bb..5b2b1711531 100644
--- a/tests/client/search/containers/TestApp.js
+++ b/tests/client/search/containers/TestApp.js
@@ -13,6 +13,10 @@ describe('App', () => {
const root = shallowRender();
assert.equal(root.type, 'div');
// First child is .
- assert.equal(root.props.children[1].type, MyComponent);
+ // Second child is .
+ // Third child is the wrapper.
+ const wrapper = root.props.children[2];
+ assert.equal(wrapper.props.className, 'App');
+ assert.equal(wrapper.props.children.type, MyComponent);
});
});
diff --git a/tests/client/search/containers/TestCurrentSearchPage.js b/tests/client/search/containers/TestCurrentSearchPage.js
index 23ed12b02bf..1fda99d4e28 100644
--- a/tests/client/search/containers/TestCurrentSearchPage.js
+++ b/tests/client/search/containers/TestCurrentSearchPage.js
@@ -13,11 +13,16 @@ describe('CurrentSearchPage.mapStateToProps()', () => {
cd: { slug: 'cd', name: 'cd-block' } },
search: { query: 'ad-block', loading: false, results: [{ slug: 'ab', name: 'ad-block' }] },
};
- const props = mapStateToProps(state);
- it('passes the search state', () => {
+ it('passes the search state if the URL and state query matches', () => {
+ const props = mapStateToProps(state, { location: { query: { q: 'ad-block' } } });
assert.strictEqual(props, state.search);
});
+
+ it('does not pass search state if the URL and state query do not match', () => {
+ const props = mapStateToProps(state, { location: { query: { q: 'more-ads' } } });
+ assert.deepEqual(props, {});
+ });
});
describe('CurrentSearchPage.isLoaded()', () => {