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');
+});