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()', () => {