-
Notifications
You must be signed in to change notification settings - Fork 17
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Adding link to copy repo tests badge to repo page (#1218)
* Adding link to copy repo tests badge to repo page * Updating badge tooltip text * Improving vertical spacing between repo sections
- Loading branch information
Showing
17 changed files
with
278 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
ui/src/Badge/RepositoryCoverageBadge.tsx → ...adge/coverage/RepositoryCoverageBadge.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
ui/src/Badge/TestRunCoverageBadge.tsx → ...c/Badge/coverage/TestRunCoverageBadge.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
2 changes: 1 addition & 1 deletion
2
...e/__tests__/TestRunCoverageBadge.spec.tsx → ...e/__tests__/TestRunCoverageBadge.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| import * as React from "react"; | ||
| import { fetchRepositoryTestsBadge } from "../../service/RepositoryService"; | ||
| import TestsBadge from "./TestsBadge"; | ||
|
|
||
| interface RepositoryTestsBadgeProps { | ||
| repoName: string; | ||
| projectName?: string; | ||
| } | ||
|
|
||
| const RepositoryTestsBadge = ({ | ||
| repoName, | ||
| projectName, | ||
| }: RepositoryTestsBadgeProps) => { | ||
| const [badgeSvg, setBadgeSvg] = React.useState<string>(null); | ||
|
|
||
| React.useEffect(() => { | ||
| fetchRepositoryTestsBadge(repoName, projectName) | ||
| .then((response) => { | ||
| setBadgeSvg(response.data); | ||
| }) | ||
| .catch((_) => {}); | ||
| }, [setBadgeSvg]); | ||
|
|
||
| if (badgeSvg) { | ||
| return ( | ||
| <TestsBadge | ||
| badgeSvg={badgeSvg} | ||
| repoName={repoName} | ||
| projectName={projectName} | ||
| /> | ||
| ); | ||
| } else { | ||
| return null; | ||
| } | ||
| }; | ||
|
|
||
| export default RepositoryTestsBadge; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import * as React from "react"; | ||
| import { makeStyles } from "@material-ui/styles"; | ||
| import { useLocation } from "@reach/router"; | ||
| import { CopyToClipboard } from "react-copy-to-clipboard"; | ||
| import { repositoryLinkUrlAPI } from "../../Repository/RepositoryLink"; | ||
| import { Chip, Fade, Link, Tooltip } from "@material-ui/core"; | ||
| import FileCopyOutlinedIcon from "@material-ui/icons/FileCopyOutlined"; | ||
|
|
||
| interface TestsBadgeProps { | ||
| badgeSvg: string; | ||
| repoName: string; | ||
| projectName?: string; | ||
| } | ||
|
|
||
| const useStyles = makeStyles(() => ({ | ||
| badgeLink: { | ||
| display: "inline-block", | ||
| marginLeft: "8px", | ||
| cursor: "pointer", | ||
| }, | ||
| copied: { | ||
| marginLeft: "5px", | ||
| verticalAlign: "top", | ||
| }, | ||
| })); | ||
|
|
||
| const TestsBadge = ({ badgeSvg, repoName, projectName }: TestsBadgeProps) => { | ||
| const classes = useStyles({}); | ||
|
|
||
| const [showCopied, setShowCopied] = React.useState<boolean>(false); | ||
|
|
||
| const location = useLocation(); | ||
|
|
||
| const badgeContents = { __html: badgeSvg }; | ||
|
|
||
| const latestTestRunPageLink = | ||
| location.origin + | ||
| repositoryLinkUrlAPI(repoName, projectName, "/run/latest"); | ||
| const badgeSvgUrl = | ||
| location.origin + | ||
| repositoryLinkUrlAPI(repoName, projectName, "/badge/tests"); | ||
| const badgeMarkdown = `[](${latestTestRunPageLink})`; | ||
|
|
||
| const onCopy = () => { | ||
| setShowCopied(true); | ||
|
|
||
| setTimeout(() => setShowCopied(false), 3000); | ||
| }; | ||
|
|
||
| if (badgeSvg) { | ||
| return ( | ||
| <div> | ||
| <span | ||
| data-testid="tests-badge-contents" | ||
| dangerouslySetInnerHTML={badgeContents} | ||
| /> | ||
| <span className={classes.badgeLink}> | ||
| <Tooltip title="Copy tests badge Markdown readme code to clipboard"> | ||
| <CopyToClipboard onCopy={onCopy} text={badgeMarkdown}> | ||
| <Link | ||
| data-testid="tests-badge-copy-link" | ||
| data-badge={badgeMarkdown} | ||
| > | ||
| <FileCopyOutlinedIcon fontSize="small" /> | ||
| </Link> | ||
| </CopyToClipboard> | ||
| </Tooltip> | ||
| <span> | ||
| <Fade in={showCopied}> | ||
| <Chip | ||
| label="Copied to clipboard" | ||
| variant="outlined" | ||
| size="small" | ||
| className={classes.copied} | ||
| data-testid="tests-badge-copied" | ||
| /> | ||
| </Fade> | ||
| </span> | ||
| </span> | ||
| </div> | ||
| ); | ||
| } else { | ||
| return null; | ||
| } | ||
| }; | ||
|
|
||
| export default TestsBadge; |
56 changes: 56 additions & 0 deletions
56
ui/src/Badge/tests/__tests__/RepositoryTestsBadge.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| import "@testing-library/jest-dom/extend-expect"; | ||
| import React from "react"; | ||
| import MockAdapter from "axios-mock-adapter"; | ||
| import { axiosInstance } from "../../../service/AxiosService"; | ||
| import { act, render } from "@testing-library/react"; | ||
| import { | ||
| createHistory, | ||
| createMemorySource, | ||
| LocationProvider, | ||
| } from "@reach/router"; | ||
| import RepositoryTestsBadge from "../RepositoryTestsBadge"; | ||
|
|
||
| describe("RepositoryTestsBadge", () => { | ||
| let mockAxios; | ||
|
|
||
| beforeEach(() => { | ||
| // @ts-ignore | ||
| mockAxios = new MockAdapter(axiosInstance); | ||
| }); | ||
|
|
||
| afterEach(() => { | ||
| mockAxios.restore(); | ||
| }); | ||
|
|
||
| it("should display tests badge", async () => { | ||
| const repoName = "my-org/my-repo"; | ||
| mockAxios | ||
| .onGet(`http://localhost:8080/repo/${repoName}/badge/tests`) | ||
| .reply(200, "<span>my-badge</span>"); | ||
|
|
||
| document.execCommand = jest.fn(); | ||
|
|
||
| const { findByTestId } = render( | ||
| <LocationProvider history={createHistory(createMemorySource("/ui"))}> | ||
| <RepositoryTestsBadge repoName={repoName} /> | ||
| </LocationProvider>, | ||
| ); | ||
|
|
||
| expect(await findByTestId("tests-badge-contents")).toHaveTextContent( | ||
| "my-badge", | ||
| ); | ||
|
|
||
| expect(await findByTestId("tests-badge-copy-link")).toHaveAttribute( | ||
| "data-badge", | ||
| "[](undefined/repo/my-org/my-repo/run/latest)", | ||
| ); | ||
|
|
||
| await act(async () => { | ||
| (await findByTestId("tests-badge-copy-link")).click(); | ||
| }); | ||
|
|
||
| await findByTestId("tests-badge-copied"); | ||
|
|
||
| expect(document.execCommand).toHaveBeenCalledWith("copy"); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.