Challenge page Review Link encodeURI fix (#1588)

* add encode function to link challengeName

* add a render test

* add routing to withProvider

Author: jschwarz2030

src/components/ChallengeDetail/ChallengeDetail.js

@@ -235,7 +235,7 @@ export class ChallengeDetail extends Component {
                           className={classNames(
                             "mr-text-green-lighter hover:mr-text-white mr-mr-4 mr-leading-none",
                             {"mr-border-r-2 mr-border-white-10 mr-pr-4 mr-mr-4": manageControl})}
-                          to={`/review?challengeId=${challenge.id}&challengeName=${challenge.name}`}
+                          to={`/review?challengeId=${challenge.id}&challengeName=${encodeURIComponent(challenge.name)}`}
                         >
                           <FormattedMessage {...messages.viewReviews} />
                         </Link>

src/components/ChallengeDetail/ChallengeDetail.test.js

@@ -0,0 +1,18 @@
+import "@testing-library/jest-dom";
+import * as React from "react";
+import { IntlProvider } from "react-intl";
+import { render, fireEvent, screen, waitFor } from "@testing-library/react";
+import { ChallengeDetail } from "./ChallengeDetail.js";
+
+describe("ChallengeDetail", () => {
+  it("doesn't break if only required props are provided", () => {
+    const { getByText } = render(
+      <IntlProvider locale="en">
+        <ChallengeDetail />
+        <div>Test Passes</div>
+      </IntlProvider>
+    );
+    const text = getByText("Test Passes");
+    expect(text).toBeInTheDocument();
+  });
+});

src/setupTests.js

@@ -2,6 +2,8 @@ import "@testing-library/jest-dom";
 import React, { Fragment } from "react";
 import Enzyme, { shallow, render, mount } from "enzyme";
 import Adapter from "enzyme-adapter-react-16";
+import { createBrowserHistory } from "history";
+import { Router } from "react-router-dom";
 import { render as rtlRender } from "@testing-library/react";
 import { Provider } from "react-redux";
 import { IntlProvider } from "react-intl";
@@ -14,9 +16,11 @@ Enzyme.configure({ adapter: new Adapter() });
 global.shallow = shallow;
 global.render = render;
 global.mount = mount;
+global.scrollTo = jest.fn();
 
 // React testing library methods
 const reduxStore = initializeStore();
+const routerHistory = createBrowserHistory();
 
 global.withProvider = (
   ui,
@@ -26,7 +30,9 @@ global.withProvider = (
     return (
       <Fragment>
         <Provider store={store}>
-          <IntlProvider locale="en">{children}</IntlProvider>
+          <IntlProvider locale="en">
+            <Router history={routerHistory}>{children}</Router>
+          </IntlProvider>
         </Provider>
         <div id="external-root"></div>
       </Fragment>