fix: languages color fallback & hide lang if not present (d394add5) · Commits · 郑智淋 / github-readme-stats

src/renderRepoCard.js

+9 −7

Original line number	Diff line number	Diff line
		@@ -27,8 +27,8 @@ const renderRepoCard = (repo, options = {}) => {
		} = options;

		const header = show_owner ? nameWithOwner : name;
		const langName = primaryLanguage ? primaryLanguage.name : "Unspecified";
		const langColor = primaryLanguage ? primaryLanguage.color : "#333";
		const langName = (primaryLanguage && primaryLanguage.name) \|\| "Unspecified";
		const langColor = (primaryLanguage && primaryLanguage.color) \|\| "#333";

		const height = 120;
		const shiftText = langName.length > 15 ? 0 : 30;
		@@ -65,12 +65,14 @@ const renderRepoCard = (repo, options = {}) => {
		</g>
		`;

		const svgLanguage = `
		<g transform="translate(30, 100)">
		const svgLanguage = primaryLanguage
		? `
		<g data-testid="primary-lang" transform="translate(30, 100)">
		<circle data-testid="lang-color" cx="0" cy="-5" r="6" fill="${langColor}" />
		<text data-testid="lang" class="gray" x="15">${langName}</text>
		<text data-testid="lang-name" class="gray" x="15">${langName}</text>
		</g>
		`;
		`
		: "";

		const svgStars =
		stargazers.totalCount > 0 &&
		@@ -120,7 +122,7 @@ const renderRepoCard = (repo, options = {}) => {

		${svgLanguage}

		<g transform="translate(${155 - shiftText}, 100)">
		<g transform="translate(${primaryLanguage ? 155 - shiftText : 25}, 100)">
		${FlexLayout({ items: [svgStars, svgForks], gap: 65 }).join("")}
		</g>

+26 −1

Original line number	Diff line number	Diff line
		@@ -33,7 +33,7 @@ describe("Test renderRepoCard", () => {
		);
		expect(queryByTestId(document.body, "stargazers")).toHaveTextContent("38k");
		expect(queryByTestId(document.body, "forkcount")).toHaveTextContent("100");
		expect(queryByTestId(document.body, "lang")).toHaveTextContent(
		expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
		"TypeScript"
		);
		expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
		@@ -82,6 +82,7 @@ describe("Test renderRepoCard", () => {
		},
		});

		expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
		expect(document.getElementsByTagName("g")[1]).toHaveAttribute(
		"transform",
		"translate(155, 100)"
		@@ -102,6 +103,30 @@ describe("Test renderRepoCard", () => {
		);
		});

		it("should hide language if primaryLanguage is null & fallback to correct values", () => {
		document.body.innerHTML = renderRepoCard({
		...data_repo.repository,
		primaryLanguage: null,
		});

		expect(queryByTestId(document.body, "primary-lang")).toBeNull();

		document.body.innerHTML = renderRepoCard({
		...data_repo.repository,
		primaryLanguage: { color: null, name: null },
		});

		expect(queryByTestId(document.body, "primary-lang")).toBeInTheDocument();
		expect(queryByTestId(document.body, "lang-color")).toHaveAttribute(
		"fill",
		"#333"
		);

		expect(queryByTestId(document.body, "lang-name")).toHaveTextContent(
		"Unspecified"
		);
		});

		it("should render default colors properly", () => {
		document.body.innerHTML = renderRepoCard(data_repo.repository);