fix(client): add tests for layoutSelector (#41047)

client/utils/gatsby/layoutSelector.js

@@ -13,21 +13,22 @@ export default function layoutSelector({ element, props }) {
   } = props;
 
   if (element.type === FourOhFourPage) {
-    return <DefaultLayout pathname={pathname}>{element}</DefaultLayout>;
+    return (
+      <DefaultLayout pathname={pathname} showFooter={true}>
+        {element}
+      </DefaultLayout>
+    );
   }
   if (/\/certification\//.test(pathname)) {
     return (
       <CertificationLayout pathname={pathname}>{element}</CertificationLayout>
     );
   }
-  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 <DefaultLayout pathname={pathname}>{element}</DefaultLayout>;
+  return (
+    <DefaultLayout pathname={pathname} showFooter={true}>
+      {element}
+    </DefaultLayout>
+  );
 }
 
 layoutSelector.propTypes = {

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(<Provider store={store}>{LayoutReactComponent}</Provider>);
+  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');
+});