2022-09-24 16:20:54 +08:00
|
|
|
import { queryByTestId } from "@testing-library/dom";
|
|
|
|
|
import "@testing-library/jest-dom";
|
|
|
|
|
import {
|
2020-07-19 01:14:27 +08:00
|
|
|
encodeHTML,
|
2020-07-19 23:04:41 +08:00
|
|
|
getCardColors,
|
2022-09-24 16:20:54 +08:00
|
|
|
kFormatter,
|
2022-11-21 17:10:46 +08:00
|
|
|
parseBoolean,
|
2022-09-24 16:20:54 +08:00
|
|
|
renderError,
|
2020-07-27 16:39:35 +08:00
|
|
|
wrapTextMultiline,
|
2022-09-24 19:20:52 +08:00
|
|
|
} from "../src/common/utils.js";
|
2020-07-25 15:59:32 +08:00
|
|
|
|
2020-07-12 00:40:13 +08:00
|
|
|
describe("Test utils.js", () => {
|
|
|
|
|
it("should test kFormatter", () => {
|
|
|
|
|
expect(kFormatter(1)).toBe(1);
|
|
|
|
|
expect(kFormatter(-1)).toBe(-1);
|
|
|
|
|
expect(kFormatter(500)).toBe(500);
|
|
|
|
|
expect(kFormatter(1000)).toBe("1k");
|
|
|
|
|
expect(kFormatter(10000)).toBe("10k");
|
|
|
|
|
expect(kFormatter(12345)).toBe("12.3k");
|
|
|
|
|
expect(kFormatter(9900000)).toBe("9900k");
|
|
|
|
|
});
|
|
|
|
|
|
2022-11-21 17:10:46 +08:00
|
|
|
it("should test parseBoolean", () => {
|
|
|
|
|
expect(parseBoolean(true)).toBe(true);
|
|
|
|
|
expect(parseBoolean(false)).toBe(false);
|
|
|
|
|
|
|
|
|
|
expect(parseBoolean("true")).toBe(true);
|
|
|
|
|
expect(parseBoolean("false")).toBe(false);
|
|
|
|
|
expect(parseBoolean("True")).toBe(true);
|
|
|
|
|
expect(parseBoolean("False")).toBe(false);
|
|
|
|
|
expect(parseBoolean("TRUE")).toBe(true);
|
|
|
|
|
expect(parseBoolean("FALSE")).toBe(false);
|
|
|
|
|
|
|
|
|
|
expect(parseBoolean("1")).toBe(undefined);
|
|
|
|
|
expect(parseBoolean("0")).toBe(undefined);
|
|
|
|
|
expect(parseBoolean("")).toBe(undefined);
|
|
|
|
|
expect(parseBoolean(undefined)).toBe(undefined);
|
|
|
|
|
});
|
|
|
|
|
|
2020-07-12 00:40:13 +08:00
|
|
|
it("should test encodeHTML", () => {
|
|
|
|
|
expect(encodeHTML(`<html>hello world<,.#4^&^@%!))`)).toBe(
|
2020-09-25 00:08:14 +08:00
|
|
|
"<html>hello world<,.#4^&^@%!))",
|
2020-07-12 00:40:13 +08:00
|
|
|
);
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("should test renderError", () => {
|
|
|
|
|
document.body.innerHTML = renderError("Something went wrong");
|
2020-07-25 15:59:32 +08:00
|
|
|
expect(
|
2020-09-25 00:08:14 +08:00
|
|
|
queryByTestId(document.body, "message").children[0],
|
2020-07-25 15:59:32 +08:00
|
|
|
).toHaveTextContent(/Something went wrong/gim);
|
2022-09-24 16:20:54 +08:00
|
|
|
expect(
|
|
|
|
|
queryByTestId(document.body, "message").children[1],
|
|
|
|
|
).toBeEmptyDOMElement(2);
|
2020-07-25 15:59:32 +08:00
|
|
|
|
|
|
|
|
// Secondary message
|
|
|
|
|
document.body.innerHTML = renderError(
|
|
|
|
|
"Something went wrong",
|
2020-09-25 00:08:14 +08:00
|
|
|
"Secondary Message",
|
2020-07-12 00:40:13 +08:00
|
|
|
);
|
2020-07-25 15:59:32 +08:00
|
|
|
expect(
|
2020-09-25 00:08:14 +08:00
|
|
|
queryByTestId(document.body, "message").children[1],
|
2020-07-25 15:59:32 +08:00
|
|
|
).toHaveTextContent(/Secondary Message/gim);
|
2020-07-12 00:40:13 +08:00
|
|
|
});
|
2020-07-19 01:14:27 +08:00
|
|
|
|
2020-07-19 23:04:41 +08:00
|
|
|
it("getCardColors: should return expected values", () => {
|
|
|
|
|
let colors = getCardColors({
|
|
|
|
|
title_color: "f00",
|
|
|
|
|
text_color: "0f0",
|
2022-11-20 03:18:42 +08:00
|
|
|
ring_color: "0000ff",
|
2020-07-19 23:04:41 +08:00
|
|
|
icon_color: "00f",
|
|
|
|
|
bg_color: "fff",
|
2021-04-28 02:58:44 +08:00
|
|
|
border_color: "fff",
|
2020-07-19 23:04:41 +08:00
|
|
|
theme: "dark",
|
|
|
|
|
});
|
|
|
|
|
expect(colors).toStrictEqual({
|
|
|
|
|
titleColor: "#f00",
|
|
|
|
|
textColor: "#0f0",
|
|
|
|
|
iconColor: "#00f",
|
2022-11-20 03:18:42 +08:00
|
|
|
ringColor: "#0000ff",
|
2020-07-19 23:04:41 +08:00
|
|
|
bgColor: "#fff",
|
2021-04-28 02:58:44 +08:00
|
|
|
borderColor: "#fff",
|
2020-07-19 23:04:41 +08:00
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
it("getCardColors: should fallback to default colors if color is invalid", () => {
|
|
|
|
|
let colors = getCardColors({
|
|
|
|
|
title_color: "invalidcolor",
|
|
|
|
|
text_color: "0f0",
|
|
|
|
|
icon_color: "00f",
|
|
|
|
|
bg_color: "fff",
|
2021-04-28 02:58:44 +08:00
|
|
|
border_color: "invalidColor",
|
2020-07-19 23:04:41 +08:00
|
|
|
theme: "dark",
|
|
|
|
|
});
|
|
|
|
|
expect(colors).toStrictEqual({
|
|
|
|
|
titleColor: "#2f80ed",
|
|
|
|
|
textColor: "#0f0",
|
|
|
|
|
iconColor: "#00f",
|
2022-11-20 03:18:42 +08:00
|
|
|
ringColor: "#2f80ed",
|
2020-07-19 23:04:41 +08:00
|
|
|
bgColor: "#fff",
|
2021-04-28 02:58:44 +08:00
|
|
|
borderColor: "#e4e2e2",
|
2020-07-19 23:04:41 +08:00
|
|
|
});
|
|
|
|
|
});
|
2020-07-25 15:59:32 +08:00
|
|
|
|
2020-07-19 23:04:41 +08:00
|
|
|
it("getCardColors: should fallback to specified theme colors if is not defined", () => {
|
|
|
|
|
let colors = getCardColors({
|
|
|
|
|
theme: "dark",
|
|
|
|
|
});
|
|
|
|
|
expect(colors).toStrictEqual({
|
|
|
|
|
titleColor: "#fff",
|
|
|
|
|
textColor: "#9f9f9f",
|
2022-11-20 03:18:42 +08:00
|
|
|
ringColor: "#fff",
|
2020-07-19 23:04:41 +08:00
|
|
|
iconColor: "#79ff97",
|
|
|
|
|
bgColor: "#151515",
|
2021-04-28 02:58:44 +08:00
|
|
|
borderColor: "#e4e2e2",
|
2020-07-19 23:04:41 +08:00
|
|
|
});
|
|
|
|
|
});
|
2022-11-20 03:18:42 +08:00
|
|
|
|
|
|
|
|
it("getCardColors: should return ring color equal to title color if not ring color is defined", () => {
|
|
|
|
|
let colors = getCardColors({
|
|
|
|
|
title_color: "f00",
|
|
|
|
|
text_color: "0f0",
|
|
|
|
|
icon_color: "00f",
|
|
|
|
|
bg_color: "fff",
|
|
|
|
|
border_color: "fff",
|
|
|
|
|
theme: "dark",
|
|
|
|
|
});
|
|
|
|
|
expect(colors).toStrictEqual({
|
|
|
|
|
titleColor: "#f00",
|
|
|
|
|
textColor: "#0f0",
|
|
|
|
|
iconColor: "#00f",
|
|
|
|
|
ringColor: "#f00",
|
|
|
|
|
bgColor: "#fff",
|
|
|
|
|
borderColor: "#fff",
|
|
|
|
|
});
|
|
|
|
|
});
|
2020-07-12 00:40:13 +08:00
|
|
|
});
|
2020-07-27 16:39:35 +08:00
|
|
|
|
|
|
|
|
describe("wrapTextMultiline", () => {
|
|
|
|
|
it("should not wrap small texts", () => {
|
|
|
|
|
{
|
|
|
|
|
let multiLineText = wrapTextMultiline("Small text should not wrap");
|
|
|
|
|
expect(multiLineText).toEqual(["Small text should not wrap"]);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
it("should wrap large texts", () => {
|
|
|
|
|
let multiLineText = wrapTextMultiline(
|
|
|
|
|
"Hello world long long long text",
|
|
|
|
|
20,
|
2020-09-25 00:08:14 +08:00
|
|
|
3,
|
2020-07-27 16:39:35 +08:00
|
|
|
);
|
|
|
|
|
expect(multiLineText).toEqual(["Hello world long", "long long text"]);
|
|
|
|
|
});
|
|
|
|
|
it("should wrap large texts and limit max lines", () => {
|
|
|
|
|
let multiLineText = wrapTextMultiline(
|
|
|
|
|
"Hello world long long long text",
|
|
|
|
|
10,
|
2020-09-25 00:08:14 +08:00
|
|
|
2,
|
2020-07-27 16:39:35 +08:00
|
|
|
);
|
|
|
|
|
expect(multiLineText).toEqual(["Hello", "world long..."]);
|
|
|
|
|
});
|
2021-10-18 21:41:50 +08:00
|
|
|
it("should wrap chinese by punctuation", () => {
|
|
|
|
|
let multiLineText = wrapTextMultiline(
|
|
|
|
|
"专门为刚开始刷题的同学准备的算法基地，没有最细只有更细，立志用动画将晦涩难懂的算法说的通俗易懂！",
|
|
|
|
|
);
|
|
|
|
|
expect(multiLineText.length).toEqual(3);
|
|
|
|
|
expect(multiLineText[0].length).toEqual(18 * 8); // &#xxxxx; x 8
|
|
|
|
|
});
|
2020-07-27 16:39:35 +08:00
|
|
|
});
|
