diff --git a/client/utils/gatsby/layoutSelector.js b/client/utils/gatsby/layoutSelector.js index 7417ae8046..1a21594b18 100644 --- a/client/utils/gatsby/layoutSelector.js +++ b/client/utils/gatsby/layoutSelector.js @@ -13,21 +13,22 @@ export default function layoutSelector({ element, props }) { } = props; if (element.type === FourOhFourPage) { - return {element}; + return ( + + {element} + + ); } if (/\/certification\//.test(pathname)) { return ( {element} ); } - if (/\/guide\//.test(pathname)) { - console.log('Hitting guide for some reason. Need a redirect.'); - } - const splitPath = pathname.split('/'); + const splitPath = pathname.split('/').filter(x => x); const isSuperBlock = - (splitPath.length === 3 && splitPath[1]) || - (splitPath.length === 4 && splitPath[2]); + (splitPath.length === 2 && splitPath[0]) === 'learn' || + (splitPath.length === 3 && splitPath[1]) === 'learn'; if (/\/learn\//.test(pathname) && !isSuperBlock) { return ( @@ -37,7 +38,11 @@ export default function layoutSelector({ element, props }) { ); } - return {element}; + return ( + + {element} + + ); } layoutSelector.propTypes = { diff --git a/client/utils/gatsby/layoutSelector.test.js b/client/utils/gatsby/layoutSelector.test.js new file mode 100644 index 0000000000..ebb77a0ef2 --- /dev/null +++ b/client/utils/gatsby/layoutSelector.test.js @@ -0,0 +1,74 @@ +/* global expect */ +import React from 'react'; +import { Provider } from 'react-redux'; +import ShallowRenderer from 'react-test-renderer/shallow'; + +import layoutSelector from './layoutSelector'; +import { createStore } from '../../src/redux/createStore'; +import FourOhFourPage from '../../src/pages/404'; +import Learn from '../../src/pages/learn'; +import Certification from '../../src/pages/certification'; + +const store = createStore(); +function getComponentNameAndProps(elementType, pathname) { + const shallow = new ShallowRenderer(); + const LayoutReactComponent = layoutSelector({ + element: { type: elementType }, + props: { + location: { + pathname + } + } + }); + shallow.render({LayoutReactComponent}); + const renderedComponent = shallow.getRenderOutput(); + return { + props: renderedComponent.props, + name: renderedComponent.type.WrappedComponent.displayName + }; +} + +test('Challenge path should have DefaultLayout and no footer', () => { + const challengePath = + '/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements'; + const compnentObj = getComponentNameAndProps(Learn, challengePath); + expect(compnentObj.name).toEqual('DefaultLayout'); + expect(compnentObj.props.showFooter).toEqual(false); +}); + +test('SuperBlock path should have DefaultLayout and footer', () => { + const superBlockPath = '/learn/responsive-web-design/'; + const compnentObj = getComponentNameAndProps(Learn, superBlockPath); + expect(compnentObj.name).toEqual('DefaultLayout'); + expect(compnentObj.props.showFooter).toEqual(true); +}); + +test('i18l challenge path should have DefaultLayout and no footer', () => { + const challengePath = + 'espanol/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements/'; + const compnentObj = getComponentNameAndProps(Learn, challengePath); + expect(compnentObj.name).toEqual('DefaultLayout'); + expect(compnentObj.props.showFooter).toEqual(false); +}); + +test('i18l superBlock path should have DefaultLayout and footer', () => { + const superBlockPath = '/learn/responsive-web-design/'; + const compnentObj = getComponentNameAndProps(Learn, superBlockPath); + expect(compnentObj.name).toEqual('DefaultLayout'); + expect(compnentObj.props.showFooter).toEqual(true); +}); + +test('404 page should have DefaultLayout and footer', () => { + const challengePath = + '/espanol/learn/responsive-web-design/basic-html-and-html5/say-hello-to-html-elements/'; + const compnentObj = getComponentNameAndProps(FourOhFourPage, challengePath); + expect(compnentObj.name).toEqual('DefaultLayout'); + expect(compnentObj.props.showFooter).toEqual(true); +}); + +test('Certification path should have CertificationLayout', () => { + const challengePath = + '/certification/mot01/javascript-algorithms-and-data-structures/'; + const compnentObj = getComponentNameAndProps(Certification, challengePath); + expect(compnentObj.name).toEqual('CertificationLayout'); +});