2020-07-30 21:49:03 +08:00
|
|
|
require("@testing-library/jest-dom");
|
|
|
|
const cssToObject = require("css-to-object");
|
2020-08-02 15:37:26 +08:00
|
|
|
const Card = require("../src/common/Card");
|
|
|
|
const icons = require("../src/common/icons");
|
|
|
|
const { getCardColors } = require("../src/common/utils");
|
2020-07-30 21:49:03 +08:00
|
|
|
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",
|
2020-09-25 00:08:14 +08:00
|
|
|
"0",
|
2020-07-30 21:49:03 +08:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
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",
|
2020-09-25 00:08:14 +08:00
|
|
|
"1",
|
2020-07-30 21:49:03 +08:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2020-09-27 15:40:39 +08:00
|
|
|
it("should have a custom title", () => {
|
|
|
|
const card = new Card({
|
|
|
|
customTitle: "custom title",
|
|
|
|
defaultTitle: "default title",
|
|
|
|
});
|
|
|
|
|
|
|
|
document.body.innerHTML = card.render(``);
|
|
|
|
expect(queryByTestId(document.body, "card-title")).toHaveTextContent(
|
|
|
|
"custom title",
|
|
|
|
);
|
|
|
|
});
|
|
|
|
|
2020-07-30 21:49:03 +08:00
|
|
|
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",
|
2020-09-25 00:08:14 +08:00
|
|
|
"200",
|
2020-07-30 21:49:03 +08:00
|
|
|
);
|
|
|
|
expect(document.getElementsByTagName("svg")[0]).toHaveAttribute(
|
|
|
|
"height",
|
2020-09-25 00:08:14 +08:00
|
|
|
"200",
|
2020-07-30 21:49:03 +08:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
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",
|
2020-09-25 00:08:14 +08:00
|
|
|
"170",
|
2020-07-30 21:49:03 +08:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
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",
|
2020-09-25 00:08:14 +08:00
|
|
|
"translate(0, 55)",
|
2020-07-30 21:49:03 +08:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
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",
|
2020-09-25 00:08:14 +08:00
|
|
|
"translate(0, 25)",
|
2020-07-30 21:49:03 +08:00
|
|
|
);
|
|
|
|
});
|
|
|
|
|
|
|
|
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",
|
2020-09-25 00:08:14 +08:00
|
|
|
"#fff",
|
2020-07-30 21:49:03 +08:00
|
|
|
);
|
|
|
|
});
|
2020-08-03 02:50:30 +08:00
|
|
|
it("should render gradient backgrounds", () => {
|
|
|
|
const { titleColor, textColor, iconColor, bgColor } = getCardColors({
|
|
|
|
title_color: "f00",
|
|
|
|
icon_color: "0f0",
|
|
|
|
text_color: "00f",
|
2020-08-10 00:41:01 +08:00
|
|
|
bg_color: "90,fff,000,f00",
|
2020-08-03 02:50:30 +08:00
|
|
|
theme: "default",
|
|
|
|
});
|
2020-08-10 00:41:01 +08:00
|
|
|
|
2020-08-03 02:50:30 +08:00
|
|
|
const card = new Card({
|
|
|
|
height: 200,
|
|
|
|
colors: {
|
|
|
|
titleColor,
|
|
|
|
textColor,
|
|
|
|
iconColor,
|
|
|
|
bgColor,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
document.body.innerHTML = card.render(``);
|
|
|
|
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
|
|
|
|
"fill",
|
2020-09-25 00:08:14 +08:00
|
|
|
"url(#gradient)",
|
2020-08-03 02:50:30 +08:00
|
|
|
);
|
2020-08-10 00:41:01 +08:00
|
|
|
expect(document.querySelector("defs linearGradient")).toHaveAttribute(
|
2020-08-03 02:50:30 +08:00
|
|
|
"gradientTransform",
|
2020-09-25 00:08:14 +08:00
|
|
|
"rotate(90)",
|
2020-08-03 02:50:30 +08:00
|
|
|
);
|
2020-08-10 00:41:01 +08:00
|
|
|
expect(
|
2020-09-25 00:08:14 +08:00
|
|
|
document.querySelector("defs linearGradient stop:nth-child(1)"),
|
2020-08-10 00:41:01 +08:00
|
|
|
).toHaveAttribute("stop-color", "#fff");
|
|
|
|
expect(
|
2020-09-25 00:08:14 +08:00
|
|
|
document.querySelector("defs linearGradient stop:nth-child(2)"),
|
2020-08-10 00:41:01 +08:00
|
|
|
).toHaveAttribute("stop-color", "#000");
|
|
|
|
expect(
|
2020-09-25 00:08:14 +08:00
|
|
|
document.querySelector("defs linearGradient stop:nth-child(3)"),
|
2020-08-10 00:41:01 +08:00
|
|
|
).toHaveAttribute("stop-color", "#f00");
|
2020-08-03 02:50:30 +08:00
|
|
|
});
|
2020-07-30 21:49:03 +08:00
|
|
|
});
|