From 2b9cef66ed27939d036e0c0e844b206ce54d8b2d Mon Sep 17 00:00:00 2001
From: Brian Litwin <brian.n.litwin@gmail.com>
Date: Fri, 4 Jan 2019 15:56:38 -0500
Subject: [PATCH] Add project title to explorer page (#1032)

Resolves #1027

Using `repoId.owner/repoId.name` for the project title
because that is how projects are identified on `PrototypePage`.

Created a `<ProjectDetail />` component inside `<App />`  that consumes a `RepoId`
and renders a title.

**Test Plan:**

Added two unit tests:

The first verifies that the parent `<App />` component
instantiates a `<ProjectDetai />` component with the correct props.
The current correct prop is a `RepoId` object.

The second test verifies that the `<ProjectDetail />` component renders
the title correctly given the `RepoId`, ie as a `<p>` element
with `repoId.owner/repoId.name` for text.

Visual tests verify that the title is above the Analyze Cred
button, and that clicking from one project to another renders
the appropriate title for separate projects.

Attaching a screenshot as a comment at #1032
for reference:

<img width="1253" alt="screenshot 2019-01-04 13 40 03" src="https://user-images.githubusercontent.com/26695477/50706562-34aeff00-102c-11e9-9c1c-6c1e3fa6c415.png">
---
 src/explorer/App.js      |  9 +++++++++
 src/explorer/App.test.js | 18 +++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/src/explorer/App.js b/src/explorer/App.js
index df310db..dfdfe17 100644
--- a/src/explorer/App.js
+++ b/src/explorer/App.js
@@ -112,6 +112,7 @@ export function createApp(
             {spacer()}
             <Link href={feedbackUrl}>feedback</Link>
           </p>
+          <ProjectDetail repoId={this.props.repoId} />
           <button
             disabled={
               appState.type === "UNINITIALIZED" ||
@@ -136,6 +137,14 @@ export function createApp(
   };
 }
 
+export class ProjectDetail extends React.PureComponent<{|
+  +repoId: RepoId,
+|}> {
+  render() {
+    return <p>{`${this.props.repoId.owner}/${this.props.repoId.name}`}</p>;
+  }
+}
+
 export class LoadingIndicator extends React.PureComponent<{|
   +appState: AppState,
 |}> {
diff --git a/src/explorer/App.test.js b/src/explorer/App.test.js
index 25cb8d3..f8db765 100644
--- a/src/explorer/App.test.js
+++ b/src/explorer/App.test.js
@@ -12,7 +12,7 @@ import {FactorioStaticAdapter} from "../plugins/demo/appAdapter";
 import {defaultWeightsForAdapter} from "./weights/weights";
 
 import {PagerankTable} from "./pagerankTable/Table";
-import {createApp, LoadingIndicator} from "./App";
+import {createApp, LoadingIndicator, ProjectDetail} from "./App";
 import {Prefix as GithubPrefix} from "../plugins/github/nodes";
 
 require("../webutil/testUtil").configureEnzyme();
@@ -111,6 +111,22 @@ describe("explorer/App", () => {
     expect(link.prop("href")).toMatch(/https?:\/\//);
   });
 
+  it("instantiates a ProjectDetail component with correct props", () => {
+    const {el} = example();
+    const projectDetail = el.find(ProjectDetail);
+    const correctProps = {repoId: makeRepoId("foo", "bar")};
+    expect(projectDetail.props()).toEqual(correctProps);
+  });
+
+  it("ProjectDetail component renders repoId correctly", () => {
+    const repoId = makeRepoId("foo", "bar");
+    const projectDetail = shallow(<ProjectDetail repoId={repoId} />);
+    const title = projectDetail.findWhere(
+      (p) => p.is("p") && p.text() === "foo/bar"
+    );
+    expect(title).toHaveLength(1);
+  });
+
   describe("when in state:", () => {
     function testAnalyzeCredButton(stateFn, {disabled}) {
       const adjective = disabled ? "disabled" : "working";