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()}
|
{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,
|
||||||
|}> {
|
|}> {
|
||||||
|
|
|
@ -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";
|
||||||
|
|
Loading…
Reference in New Issue