diff --git a/client/src/components/Header/Header.test.js b/client/src/components/Header/Header.test.js index 3797dd35154..79ab0ec1243 100644 --- a/client/src/components/Header/Header.test.js +++ b/client/src/components/Header/Header.test.js @@ -2,19 +2,17 @@ import React from 'react'; import ShallowRenderer from 'react-test-renderer/shallow'; import TestRenderer from 'react-test-renderer'; - -import Header from './'; +import { UniversalNav } from './components/UniversalNav'; import NavLinks from './components/NavLinks'; -describe('
', () => { +describe('', () => { it('renders to the DOM', () => { const shallow = new ShallowRenderer(); - shallow.render(
); + shallow.render(); const result = shallow.getRenderOutput(); expect(result).toBeTruthy(); }); }); - describe('', () => { const root = TestRenderer.create().root; const aTags = root.findAllByType('a'); @@ -25,17 +23,23 @@ describe('', () => { return acc; }, []); - const expectedLinks = ['/', '/portfolio']; + const expectedLinks = ['/learn', '/', '/portfolio']; it('renders to the DOM', () => { expect(root).toBeTruthy(); }); - it('has 3 a tags', () => { + it('has 3 links', () => { expect(aTags.length === 3).toBeTruthy(); }); - it('has link to portfolio', () => { + it('has links to learn, main, and portfolio', () => { // checks if all links in expected links exist in links expect(expectedLinks.every(elem => links.indexOf(elem) > -1)).toBeTruthy(); }); }); + +const UniversalNavProps = { + displayMenu: false, + menuButtonRef: {}, + toggleDisplayMenu: function() {} +}; diff --git a/client/src/components/Header/components/MenuButton.js b/client/src/components/Header/components/MenuButton.js new file mode 100644 index 00000000000..1b6667aedea --- /dev/null +++ b/client/src/components/Header/components/MenuButton.js @@ -0,0 +1,26 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const MenuButton = React.forwardRef((props, ref) => { + return ( + + ); +}); + +MenuButton.displayName = 'MenuButton'; +MenuButton.propTypes = { + className: PropTypes.string, + displayMenu: PropTypes.bool.isRequired, + onClick: PropTypes.func.isRequired +}; + +export default MenuButton; diff --git a/client/src/components/Header/components/NavLinks.js b/client/src/components/Header/components/NavLinks.js index 245dddedb5e..535b9d8908f 100644 --- a/client/src/components/Header/components/NavLinks.js +++ b/client/src/components/Header/components/NavLinks.js @@ -1,16 +1,25 @@ import React from 'react'; import { Link } from '../../helpers'; -export function NavLinks() { +import PropTypes from 'prop-types'; + +const propTypes = { + displayMenu: PropTypes.bool +}; + +function NavLinks({ displayMenu }) { return (
-
    -
  • - Projects -
    • +
    • Light
      • +
    • + Projects +
    • Portfolio
      • @@ -19,5 +28,6 @@ export function NavLinks() { ); } +NavLinks.propTypes = propTypes; NavLinks.displayName = 'NavLinks'; export default NavLinks; diff --git a/client/src/components/Header/components/UniversalNav.js b/client/src/components/Header/components/UniversalNav.js index ce6230d4c06..53ac87e344f 100644 --- a/client/src/components/Header/components/UniversalNav.js +++ b/client/src/components/Header/components/UniversalNav.js @@ -1,27 +1,48 @@ import React from 'react'; +import PropTypes from 'prop-types'; + import { Link } from '../../helpers'; import NavLogo from './NavLogo'; import SearchBar from '../../search/searchBar/SearchBar'; +import MenuButton from './MenuButton'; import NavLinks from './NavLinks'; import './universalNav.css'; -export function UniversalNav() { - return ( -