Modularise <TopBar> and <BackButton> to account for multiple link routes

Relates #125
fac-14 · Oct 17, 2018 · 0510870 · 0510870
1 parent 8f6dd28
commit 0510870
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git a/__test__/RevisionPage.test.js b/__test__/RevisionPage.test.js
@@ -36,6 +36,8 @@ describe("Testing Body component", () => {
     const markSchemeList = getByTestId("mark-scheme-list");
     expect(markSchemeList.children.length).toBeGreaterThan(0);
   });
+  // This passes even when the CompleteButton component is hijacked with a React Router link - why?
+  // Can React Testing Library interpret <Link /> components?
   test("when more than one element of the mark scheme is completed, the submission tick should render", () => {
     fireEvent.click(getByText("Introduces themselves"));
     fireEvent.click(getByTestId("complete"));

diff --git a/src/components/Pages/AddNew/AddTile.js b/src/components/Pages/AddNew/AddTile.js
@@ -28,7 +28,7 @@ export default class AddTile extends React.Component {
     return (
       <React.Fragment>
         <TopBar
-          exam={this.state.exam}
+          backLink={this.state.exam}
           submitCase={this.submitTile}
           stationName={"add new"}
           tickDisplayed={true}

diff --git a/src/components/Pages/AddNew/NewCase.js b/src/components/Pages/AddNew/NewCase.js
@@ -45,7 +45,7 @@ export default class NewCase extends React.Component {
     return (
       <React.Fragment>
         <TopBar
-          exam={this.props.match.params.exam}
+          backLink={this.props.match.params.exam}
           stationName={this.props.match.params.station}
           submitCase={this.submitCase}
           tickDisplayed={this.state.tickDisplayed}

diff --git a/src/components/Pages/Revision/RevisionPage.js b/src/components/Pages/Revision/RevisionPage.js
@@ -90,10 +90,12 @@ export default class RevisionPage extends React.Component {
         markSchemeElements={this.state.markSchemeElements}
       />
     );
+    const { exam, station } = this.props.match.params;
     return (
       <React.Fragment>
         <TopBar
           id="topbar"
+          backLink={`${exam}/${station}`}
           stationName={this.state.stationName}
           submitCase={this.submitCase}
           tickDisplayed={this.state.tickDisplayed}

diff --git a/src/components/TopBar/TopBar.js b/src/components/TopBar/TopBar.js
@@ -13,7 +13,7 @@ export default class TopBar extends React.Component {
     return (
       <React.Fragment>
         <div id="topbar-container">
-          <BackButton link={this.props.exam} />
+          <BackButton link={this.props.backLink} />
           <h3 id="topbar-title">{this.props.stationName}</h3>
           <h3 id="topbar-timer">{timerFormat(this.props.time)}</h3>
           {this.props.tickDisplayed && (
@@ -30,7 +30,7 @@ export default class TopBar extends React.Component {
 }
 
 TopBar.propTypes = {
-  exam: PropTypes.string,
+  backLink: PropTypes.string,
   submitCase: PropTypes.func,
   stationName: PropTypes.string,
   tickDisplayed: PropTypes.bool,