fix/add-tests+change-button-to-link

Co-authored-by: ojeytonwilliams ojeytonwilliams@gmail.com

client/src/templates/Challenges/components/Challenge-Title.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { navigate } from 'gatsby';
-import { Button } from '@freecodecamp/react-bootstrap';
+import Link from '../../../components/helpers/Link';
 
 import './challenge-title.css';
 
@@ -32,28 +31,26 @@ function ChallengeTitle({
   return (
     <div className='challenge-title-wrap'>
       {showPrevNextBtns ? (
-        <Button
+        <Link
           aria-label='Previous lesson'
-          bsStyle='primary'
-          className='btn-invert'
-          onClick={() => navigate(prevChallengePath)}
+          className='btn-invert btn btn-primary'
+          to={prevChallengePath}
         >
           &lt;
-        </Button>
+        </Link>
       ) : null}
       <h2 className='text-center challenge-title'>
         {children || 'Happy Coding!'}
         {icon}
       </h2>
       {showPrevNextBtns ? (
-        <Button
+        <Link
           aria-label='Next lesson'
-          bsStyle='primary'
-          className='btn-invert'
-          onClick={() => navigate(introPath ? introPath : nextChallengePath)}
+          className='btn-invert btn btn-primary'
+          to={introPath ? introPath : nextChallengePath}
         >
           &gt;
-        </Button>
+        </Link>
       ) : null}
     </div>
   );

client/src/templates/Challenges/components/ChallengeTitle.test.js

@@ -0,0 +1,73 @@
+/* global expect */
+
+import React from 'react';
+import Enzyme, { shallow } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+import Link from '../../../components/helpers/Link';
+import renderer from 'react-test-renderer';
+
+import ChallengeTitle from './Challenge-Title';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+const baseProps = {
+  children: 'title text',
+  introPath: '/intro/path',
+  isCompleted: true,
+  nextChallengePath: '/next',
+  prevChallengePath: '/prev',
+  showPrevNextBtns: true
+};
+
+describe('<ChallengeTitle/>', () => {
+  it('renders 0 <Link/>s by default', () => {
+    const titleToRender = <ChallengeTitle />;
+    const title = shallow(titleToRender);
+    expect(title.find(Link).length).toBe(0);
+  });
+
+  it('renders a previous and a next <Link/>', () => {
+    const titleToRender = <ChallengeTitle {...baseProps} />;
+    const title = shallow(titleToRender);
+    expect(title.find(Link).length).toBe(2);
+  });
+
+  it('has a link to the previous challenge', () => {
+    const titleToRender = <ChallengeTitle {...baseProps} />;
+    const title = shallow(titleToRender);
+    expect(
+      title
+        .find(Link)
+        .first()
+        .prop('to')
+    ).toBe('/prev');
+  });
+
+  it('has a link to the next introduction if there is one', () => {
+    const titleToRender = <ChallengeTitle {...baseProps} />;
+    const title = shallow(titleToRender);
+    expect(
+      title
+        .find(Link)
+        .last()
+        .prop('to')
+    ).toBe('/intro/path');
+  });
+
+  it('has a link to the next challenge otherwise', () => {
+    const props = { ...baseProps, introPath: null };
+    const titleToRender = <ChallengeTitle {...props} />;
+    const title = shallow(titleToRender);
+    expect(
+      title
+        .find(Link)
+        .last()
+        .prop('to')
+    ).toBe('/next');
+  });
+
+  it('renders correctly', () => {
+    const tree = renderer.create(<ChallengeTitle {...baseProps} />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

client/src/templates/Challenges/components/__snapshots__/ChallengeTitle.test.js.snap

@@ -0,0 +1,31 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ChallengeTitle/> renders correctly 1`] = `
+<div
+  className="challenge-title-wrap"
+>
+  <MockedLink
+    aria-label="Previous lesson"
+    className="btn-invert btn btn-primary"
+    to="/prev"
+  >
+    &lt;
+  </MockedLink>
+  <h2
+    className="text-center challenge-title"
+  >
+    title text
+    <i
+      className="ion-checkmark-circled text-primary"
+      title="Completed"
+    />
+  </h2>
+  <MockedLink
+    aria-label="Next lesson"
+    className="btn-invert btn btn-primary"
+    to="/intro/path"
+  >
+    &gt;
+  </MockedLink>
+</div>
+`;

client/src/templates/Challenges/components/challenge-title.css

@@ -9,6 +9,6 @@
   padding: 0 15px;
 }
 
-.challenge-title-wrap > Button {
+.challenge-title-wrap > a {
   align-self: flex-start;
 }