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:
parent
7c7fa2d83d
commit
2b9cef66ed
|
@ -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,
|
||||
|}> {
|
||||
|
|
|
@ -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";
|
||||
|
|
Loading…
Reference in New Issue