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">
This commit is contained in:
Brian Litwin 2019-01-04 15:56:38 -05:00 committed by Dandelion Mané
parent 7c7fa2d83d
commit 2b9cef66ed
2 changed files with 26 additions and 1 deletions

View File

@ -112,6 +112,7 @@ export function createApp(
{spacer()} {spacer()}
<Link href={feedbackUrl}>feedback</Link> <Link href={feedbackUrl}>feedback</Link>
</p> </p>
<ProjectDetail repoId={this.props.repoId} />
<button <button
disabled={ disabled={
appState.type === "UNINITIALIZED" || 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<{| export class LoadingIndicator extends React.PureComponent<{|
+appState: AppState, +appState: AppState,
|}> { |}> {

View File

@ -12,7 +12,7 @@ import {FactorioStaticAdapter} from "../plugins/demo/appAdapter";
import {defaultWeightsForAdapter} from "./weights/weights"; import {defaultWeightsForAdapter} from "./weights/weights";
import {PagerankTable} from "./pagerankTable/Table"; import {PagerankTable} from "./pagerankTable/Table";
import {createApp, LoadingIndicator} from "./App"; import {createApp, LoadingIndicator, ProjectDetail} from "./App";
import {Prefix as GithubPrefix} from "../plugins/github/nodes"; import {Prefix as GithubPrefix} from "../plugins/github/nodes";
require("../webutil/testUtil").configureEnzyme(); require("../webutil/testUtil").configureEnzyme();
@ -111,6 +111,22 @@ describe("explorer/App", () => {
expect(link.prop("href")).toMatch(/https?:\/\//); 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:", () => { describe("when in state:", () => {
function testAnalyzeCredButton(stateFn, {disabled}) { function testAnalyzeCredButton(stateFn, {disabled}) {
const adjective = disabled ? "disabled" : "working"; const adjective = disabled ? "disabled" : "working";