diff --git a/package.json b/package.json index 606d4f54..78c5970c 100644 --- a/package.json +++ b/package.json @@ -45,11 +45,12 @@ "husky": "^8.0.0", "jest": "^29.0.3", "jest-environment-jsdom": "^29.0.3", + "jest-svg-snapshot": "^0.1.0", "js-yaml": "^4.1.0", "lint-staged": "^13.0.3", "lodash.snakecase": "^4.1.1", "parse-diff": "^0.7.0", - "prettier": "^2.1.2" + "prettier": "^2.8.3" }, "dependencies": { "axios": "^0.24.0", diff --git a/src/common/Card.js b/src/common/Card.js index 2f1d9c29..a99b1563 100644 --- a/src/common/Card.js +++ b/src/common/Card.js @@ -177,7 +177,11 @@ class Card { } ${this.css} - ${process.env.NODE_ENV === "test" ? "" : getAnimations()} + ${ + process.env.NODE_ENV === "test" || this.animations === false + ? "" + : getAnimations() + } ${ this.animations === false ? `* { animation-duration: 0s !important; animation-delay: 0s !important; }` diff --git a/src/getStyles.js b/src/getStyles.js index f7b90f4a..71bb13ad 100644 --- a/src/getStyles.js +++ b/src/getStyles.js @@ -43,6 +43,11 @@ const getProgressAnimation = ({ progress }) => { const getAnimations = () => { return ` /* Animations */ + .stagger { + opacity: 0; + animation: fadeInAnimation 0.3s ease-in-out forwards; + } + @keyframes scaleInAnimation { from { transform: translate(-5px, 5px) scale(0); @@ -89,10 +94,7 @@ const getStyles = ({ /* Selector detects Firefox */ .stat { font-size:12px; } } - .stagger { - opacity: 0; - animation: fadeInAnimation 0.3s ease-in-out forwards; - } + .rank-text { font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor}; animation: scaleInAnimation 0.3s ease-in-out forwards; diff --git a/tests/__snapshots__/renderWakatimeCard.test.js.snap b/tests/__snapshots__/renderWakatimeCard.test.js.snap index 1c0bd701..7ac6240e 100644 --- a/tests/__snapshots__/renderWakatimeCard.test.js.snap +++ b/tests/__snapshots__/renderWakatimeCard.test.js.snap @@ -34,10 +34,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1 /* Selector detects Firefox */ .stat { font-size:12px; } } - .stagger { - opacity: 0; - animation: fadeInAnimation 0.3s ease-in-out forwards; - } + .rank-text { font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58; animation: scaleInAnimation 0.3s ease-in-out forwards; @@ -192,10 +189,7 @@ exports[`Test Render Wakatime Card should render correctly with compact layout w /* Selector detects Firefox */ .stat { font-size:12px; } } - .stagger { - opacity: 0; - animation: fadeInAnimation 0.3s ease-in-out forwards; - } + .rank-text { font: 800 24px 'Segoe UI', Ubuntu, Sans-Serif; fill: #434d58; animation: scaleInAnimation 0.3s ease-in-out forwards; diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-card_width-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-card_width-1-snap.svg new file mode 100644 index 00000000..0e026b04 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-card_width-1-snap.svg @@ -0,0 +1,177 @@ + + Cateline Mnemosyne's GitHub Stats, Rank: A+ + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + Cateline Mnemosyne's GitHub Stats + + + + + + + + + + + A+ + + + + + + + Total Stars Earned: + + 1 + + + + + + Total Commits (2023): + + 7 + + + + + + Total PRs: + 1 + + + + + Total Issues: + + 1 + + + + + + Contributed to (last year): + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-colors-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-colors-1-snap.svg new file mode 100644 index 00000000..c056da64 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-colors-1-snap.svg @@ -0,0 +1,249 @@ + + Cateline Mnemosyne's GitHub Stats, Rank: A+ + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + Cateline Mnemosyne's GitHub Stats + + + + + + + + + + + A+ + + + + + + + + + + + Total Stars Earned: + + 1 + + + + + + + + + + Total Commits (2023): + + 7 + + + + + + + + + + Total PRs: + 1 + + + + + + + + + Total Issues: + + 1 + + + + + + + + + + + Contributed to (last year): + + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-custom_title-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-custom_title-1-snap.svg new file mode 100644 index 00000000..dd1893c0 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-custom_title-1-snap.svg @@ -0,0 +1,179 @@ + + + Hello world, this is a very very very very very long title, Rank: A+ + + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + Hello world, this is a very very very very very long title + + + + + + + + + + + A+ + + + + + + + Total Stars Earned: + + 1 + + + + + + Total Commits (2023): + + 7 + + + + + + Total PRs: + 1 + + + + + Total Issues: + + 1 + + + + + + Contributed to (last year): + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-custom_title-hiderank-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-custom_title-hiderank-1-snap.svg new file mode 100644 index 00000000..7fb46327 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-custom_title-hiderank-1-snap.svg @@ -0,0 +1,164 @@ + + + Hello world, this is a very very very very very long title, Rank: A+ + + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + Hello world, this is a very very very very very long title + + + + + + + + + Total Stars Earned: + + 1 + + + + + + Total Commits (2023): + + 7 + + + + + + Total PRs: + 1 + + + + + Total Issues: + + 1 + + + + + + Contributed to (last year): + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-custom_title-hiderank-card_width-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-custom_title-hiderank-card_width-1-snap.svg new file mode 100644 index 00000000..7fb46327 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-custom_title-hiderank-card_width-1-snap.svg @@ -0,0 +1,164 @@ + + + Hello world, this is a very very very very very long title, Rank: A+ + + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + Hello world, this is a very very very very very long title + + + + + + + + + Total Stars Earned: + + 1 + + + + + + Total Commits (2023): + + 7 + + + + + + Total PRs: + 1 + + + + + Total Issues: + + 1 + + + + + + Contributed to (last year): + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide-1-snap.svg new file mode 100644 index 00000000..8e7f1159 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide-1-snap.svg @@ -0,0 +1,152 @@ + + Cateline Mnemosyne's GitHub Stats, Rank: A+ + + Total PRs: 1, Total Issues: 1, Contributed to (last year): 1 + + + + + + + + + Cateline Mnemosyne's GitHub Stats + + + + + + + + + + + A+ + + + + + + + Total PRs: + 1 + + + + + Total Issues: + + 1 + + + + + + Contributed to (last year): + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide_border-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide_border-1-snap.svg new file mode 100644 index 00000000..bea0f159 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide_border-1-snap.svg @@ -0,0 +1,177 @@ + + Cateline Mnemosyne's GitHub Stats, Rank: A+ + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + Cateline Mnemosyne's GitHub Stats + + + + + + + + + + + A+ + + + + + + + Total Stars Earned: + + 1 + + + + + + Total Commits (2023): + + 7 + + + + + + Total PRs: + 1 + + + + + Total Issues: + + 1 + + + + + + Contributed to (last year): + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide_rank-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide_rank-1-snap.svg new file mode 100644 index 00000000..fdd75778 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide_rank-1-snap.svg @@ -0,0 +1,162 @@ + + Cateline Mnemosyne's GitHub Stats, Rank: A+ + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + Cateline Mnemosyne's GitHub Stats + + + + + + + + + Total Stars Earned: + + 1 + + + + + + Total Commits (2023): + + 7 + + + + + + Total PRs: + 1 + + + + + Total Issues: + + 1 + + + + + + Contributed to (last year): + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide_title-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide_title-1-snap.svg new file mode 100644 index 00000000..df9fb84a --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-hide_title-1-snap.svg @@ -0,0 +1,169 @@ + + Cateline Mnemosyne's GitHub Stats, Rank: A+ + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + + + + A+ + + + + + + + Total Stars Earned: + + 1 + + + + + + Total Commits (2023): + + 7 + + + + + + Total PRs: + 1 + + + + + Total Issues: + + 1 + + + + + + Contributed to (last year): + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-line_height-show_icons-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-line_height-show_icons-1-snap.svg new file mode 100644 index 00000000..ca0d8d15 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-line_height-show_icons-1-snap.svg @@ -0,0 +1,249 @@ + + Cateline Mnemosyne's GitHub Stats, Rank: A+ + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + Cateline Mnemosyne's GitHub Stats + + + + + + + + + + + A+ + + + + + + + + + + + Total Stars Earned: + + 1 + + + + + + + + + + Total Commits (2023): + + 7 + + + + + + + + + + Total PRs: + 1 + + + + + + + + + Total Issues: + + 1 + + + + + + + + + + + Contributed to (last year): + + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-locale-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-locale-1-snap.svg new file mode 100644 index 00000000..70fa588e --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-locale-1-snap.svg @@ -0,0 +1,185 @@ + + + Статистика + GitHub + пользователя + Cateline Mnemosyne, Rank: A+ + + + Всего звезд: 1, Всего коммитов in 2023 : 1, Всего pull request`ов: 1, Всего + issue: 1, Внёс вклад в (last year): 1 + + + + + + + + + Статистика + GitHub + пользователя + Cateline Mnemosyne + + + + + + + + + + + A+ + + + + + + + Всего звезд: + + 1 + + + + + + Всего коммитов (2023): + + 7 + + + + + + Всего pull request`ов: + 1 + + + + + Всего issue: + + 1 + + + + + + Внёс вклад в (last year): + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-option-theme-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-option-theme-1-snap.svg new file mode 100644 index 00000000..e4648a93 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-option-theme-1-snap.svg @@ -0,0 +1,177 @@ + + Cateline Mnemosyne's GitHub Stats, Rank: A+ + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + Cateline Mnemosyne's GitHub Stats + + + + + + + + + + + A+ + + + + + + + Total Stars Earned: + + 1 + + + + + + Total Commits (2023): + + 7 + + + + + + Total PRs: + 1 + + + + + Total Issues: + + 1 + + + + + + Contributed to (last year): + + 1 + + + + + + diff --git a/tests/svg/__snapshots__/statscard.test.js-statscard-should-match-default-stat-card-1-snap.svg b/tests/svg/__snapshots__/statscard.test.js-statscard-should-match-default-stat-card-1-snap.svg new file mode 100644 index 00000000..4951c929 --- /dev/null +++ b/tests/svg/__snapshots__/statscard.test.js-statscard-should-match-default-stat-card-1-snap.svg @@ -0,0 +1,177 @@ + + Cateline Mnemosyne's GitHub Stats, Rank: A+ + + Total Stars Earned: 1, Total Commits in 2023 : 1, Total PRs: 1, Total + Issues: 1, Contributed to (last year): 1 + + + + + + + + + Cateline Mnemosyne's GitHub Stats + + + + + + + + + + + A+ + + + + + + + Total Stars Earned: + + 1 + + + + + + Total Commits (2023): + + 7 + + + + + + Total PRs: + 1 + + + + + Total Issues: + + 1 + + + + + + Contributed to (last year): + + 1 + + + + + + diff --git a/tests/svg/statsCard.test.js b/tests/svg/statsCard.test.js new file mode 100644 index 00000000..227714f1 --- /dev/null +++ b/tests/svg/statsCard.test.js @@ -0,0 +1,152 @@ +import "jest-svg-snapshot"; +import "@testing-library/jest-dom"; +import renderStatsCard from "../../src/cards/stats-card"; +import prettier from "prettier"; + +const STATS_DATA = { + name: "Cateline Mnemosyne", + totalPRs: 1, + totalCommits: 7, + totalIssues: 1, + totalStars: 1, + contributedTo: 1, + rank: { + level: "A+", + score: 50.893750297869225, + }, +}; + +const format = (svg) => prettier.format(svg, { parser: "html" }); + +describe("statsCard", () => { + it("should match default stat card", () => { + const svg = format( + renderStatsCard(STATS_DATA, { disable_animations: true }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + it("option hide", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + hide: ["commits", "stars"], + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + it("option hide_border", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + hide_border: true, + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + it("option hide_title", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + hide_title: true, + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + it("option hide_rank", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + hide_rank: true, + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + it("option theme", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + theme: "radical", + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + it("option card_width", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + card_width: 800, + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + it("option custom_title", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + custom_title: + "Hello world, this is a very very very very very long title", + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + it("option custom_title hideRank", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + hide_rank: true, + custom_title: + "Hello world, this is a very very very very very long title", + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + + it("option custom_title hideRank card_width", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + card_width: 300, + hide_rank: true, + custom_title: + "Hello world, this is a very very very very very long title", + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + + it("option line_height show_icons", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + line_height: 30, + show_icons: true, + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + + it("option locale", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + locale: "ru", + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); + + it("option colors", () => { + const svg = format( + renderStatsCard(STATS_DATA, { + disable_animations: true, + border_color: "0044ff", + title_color: "abd200", + icon_color: "b7d364", + text_color: "68b587", + bg_color: "0a0f0b", + show_icons: true, + }), + ); + expect(svg).toMatchSVGSnapshot(); + }); +});