avior/codestats-readme
1
0
Fork 0
mirror of https://github.com/Aviortheking/codestats-readme.git synced 2025-07-28 23:09:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: added reusable Card class to reduce code & test duplication (#260)

Browse Source 
* refactor: added reusable Card class to reduce code & test duplication

* fix: top-langs card width & documented card_width option
This commit is contained in:
Anurag Hazra
2020-07-30 19:19:03 +05:30
committed by GitHub
parent 34b5dcb181
commit 3b0f1b11a0
10 changed files with 425 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
tests/card.test.js Normal file
View File

@ -0,0 +1,136 @@
require("@testing-library/jest-dom");
const cssToObject = require("css-to-object");
const Card = require("../src/Card");
const icons = require("../src/icons");
const { getCardColors } = require("../src/utils");
const { queryByTestId } = require("@testing-library/dom");
describe("Card", () => {
it("should hide border", () => {
const card = new Card({});
card.setHideBorder(true);
document.body.innerHTML = card.render(``);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"stroke-opacity",
"0"
);
});
it("should not hide border", () => {
const card = new Card({});
card.setHideBorder(false);
document.body.innerHTML = card.render(``);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"stroke-opacity",
"1"
);
});
it("should hide title", () => {
const card = new Card({});
card.setHideTitle(true);
document.body.innerHTML = card.render(``);
expect(queryByTestId(document.body, "card-title")).toBeNull();
});
it("should not hide title", () => {
const card = new Card({});
card.setHideTitle(false);
document.body.innerHTML = card.render(``);
expect(queryByTestId(document.body, "card-title")).toBeInTheDocument();
});
it("title should have prefix icon", () => {
const card = new Card({ title: "ok", titlePrefixIcon: icons.contribs });
document.body.innerHTML = card.render(``);
expect(document.getElementsByClassName("icon")[0]).toBeInTheDocument();
});
it("title should not have prefix icon", () => {
const card = new Card({ title: "ok" });
document.body.innerHTML = card.render(``);
expect(document.getElementsByClassName("icon")[0]).toBeUndefined();
});
it("should have proper height, width", () => {
const card = new Card({ height: 200, width: 200, title: "ok" });
document.body.innerHTML = card.render(``);
expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
"height",
"200"
);
expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
"height",
"200"
);
});
it("should have less height after title is hidden", () => {
const card = new Card({ height: 200, title: "ok" });
card.setHideTitle(true);
document.body.innerHTML = card.render(``);
expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
"height",
"170"
);
});
it("main-card-body should have proper when title is visible", () => {
const card = new Card({ height: 200 });
document.body.innerHTML = card.render(``);
expect(queryByTestId(document.body, "main-card-body")).toHaveAttribute(
"transform",
"translate(0, 55)"
);
});
it("main-card-body should have proper position after title is hidden", () => {
const card = new Card({ height: 200 });
card.setHideTitle(true);
document.body.innerHTML = card.render(``);
expect(queryByTestId(document.body, "main-card-body")).toHaveAttribute(
"transform",
"translate(0, 25)"
);
});
it("should render with correct colors", () => {
// returns theme based colors with proper overrides and defaults
const { titleColor, textColor, iconColor, bgColor } = getCardColors({
title_color: "f00",
icon_color: "0f0",
text_color: "00f",
bg_color: "fff",
theme: "default",
});
const card = new Card({
height: 200,
colors: {
titleColor,
textColor,
iconColor,
bgColor,
},
});
document.body.innerHTML = card.render(``);
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"];
expect(headerClassStyles.fill).toBe("#f00");
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
"#fff"
);
});
});

43
tests/renderStatsCard.test.js
View File

@ -69,20 +69,6 @@ describe("Test renderStatsCard", () => {
expect(queryByTestId(document.body, "contribs")).toBeNull();
});
it("should hide_border", () => {
document.body.innerHTML = renderStatsCard(stats, { hide_border: true });
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"stroke-opacity",
"0"
);
document.body.innerHTML = renderStatsCard(stats, { hide_border: false });
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"stroke-opacity",
"1"
);
});
it("should hide_rank", () => {
document.body.innerHTML = renderStatsCard(stats, { hide_rank: true });
@ -202,35 +188,6 @@ describe("Test renderStatsCard", () => {
);
});
it("should hide the title", () => {
document.body.innerHTML = renderStatsCard(stats, {
hide_title: true,
});
expect(document.getElementsByClassName("header")[0]).toBeUndefined();
expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
"height",
"165"
);
expect(queryByTestId(document.body, "card-body-content")).toHaveAttribute(
"transform",
"translate(0, -30)"
);
});
it("should not hide the title", () => {
document.body.innerHTML = renderStatsCard(stats, {});
expect(document.getElementsByClassName("header")[0]).toBeDefined();
expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
"height",
"195"
);
expect(queryByTestId(document.body, "card-body-content")).toHaveAttribute(
"transform",
"translate(0, 0)"
);
});
it("should render icons correctly", () => {
document.body.innerHTML = renderStatsCard(stats, {

19
tests/renderTopLanguages.test.js
View File

@ -98,25 +98,6 @@ describe("Test renderTopLanguages", () => {
expect(document.querySelector("svg")).toHaveAttribute("height", "245");
});
it("should hide_title", () => {
document.body.innerHTML = renderTopLanguages(langs, { hide_title: false });
expect(document.querySelector("svg")).toHaveAttribute("height", "205");
expect(queryByTestId(document.body, "lang-items")).toHaveAttribute(
"y",
"55"
);
// Lets hide now
document.body.innerHTML = renderTopLanguages(langs, { hide_title: true });
expect(document.querySelector("svg")).toHaveAttribute("height", "175");
expect(queryByTestId(document.body, "header")).not.toBeInTheDocument();
expect(queryByTestId(document.body, "lang-items")).toHaveAttribute(
"y",
"25"
);
});
it("should render with custom width set", () => {
document.body.innerHTML = renderTopLanguages(langs, {});