Skip to content

Commit

Permalink
fix: firefox text overflow issue (#1492)
Browse files Browse the repository at this point in the history 
* Fixed Firefox text overflow / overwriting issue

Tests currently don't work becouse it appears that '@supports' is not supported by cssToObject used within the tests. I currently have no idea how to fix that test but the cards themself appear to not be broken

Fixes #664

Fixes #1134

* Fixed tests by moving to other css-to-object

Moved the `css-to-object` package to @UpperCod's version for test fix. This doesn't seem to have the same issues as the older package

* chore: cleanup test

Co-authored-by: Anurag <hazru.anurag@gmail.com>
  • Loading branch information
@anuraghazra
T. de Kimpe and anuraghazra committed Dec 13, 2021
1 parent 798bf72 commit b6c184e
Show file tree
Hide file tree
Showing 8 changed files with 115 additions and 83 deletions.
2 changes: 1 addition & 1 deletion package.json
View file
Expand Up @@ -16,10 +16,10 @@
"@actions/github": "^4.0.0",
"@testing-library/dom": "^7.20.0",
"@testing-library/jest-dom": "^5.11.0",
"@uppercod/css-to-object": "^1.1.1",
"axios": "^0.24.0",
"axios-mock-adapter": "^1.18.1",
"color-contrast-checker": "^2.1.0",
"css-to-object": "^1.1.0",
"hjson": "^3.2.2",
"husky": "^4.2.5",
"jest": "^26.1.0",
Expand Down
4 changes: 4 additions & 0 deletions src/common/Card.js
View file
Expand Up @@ -154,6 +154,10 @@ class Card {
fill: ${this.colors.titleColor};
animation: fadeInAnimation 0.8s ease-in-out forwards;
}
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.header { font-size: 15.5px; }
}
${this.css}
${process.env.NODE_ENV === "test" ? "" : getAnimations()}
Expand Down
4 changes: 4 additions & 0 deletions src/getStyles.js
View file
Expand Up @@ -71,6 +71,10 @@ const getStyles = ({
.stat {
font: 600 14px 'Segoe UI', Ubuntu, "Helvetica Neue", Sans-Serif; fill: ${textColor};
}
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.stat { font-size:12px; }
}
.stagger {
opacity: 0;
animation: fadeInAnimation 0.3s ease-in-out forwards;
Expand Down
16 changes: 16 additions & 0 deletions tests/__snapshots__/renderWakatimeCard.test.js.snap
View file
Expand Up @@ -15,11 +15,19 @@ exports[`Test Render Wakatime Card should render correctly 1`] = `
fill: #2f80ed;
animation: fadeInAnimation 0.8s ease-in-out forwards;
}
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.header { font-size: 15.5px; }
}
.stat {
font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333;
}
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.stat { font-size:12px; }
}
.stagger {
opacity: 0;
animation: fadeInAnimation 0.3s ease-in-out forwards;
Expand Down Expand Up @@ -164,11 +172,19 @@ exports[`Test Render Wakatime Card should render correctly with compact layout 1
fill: #2f80ed;
animation: fadeInAnimation 0.8s ease-in-out forwards;
}
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.header { font-size: 15.5px; }
}
.stat {
font: 600 14px 'Segoe UI', Ubuntu, \\"Helvetica Neue\\", Sans-Serif; fill: #333;
}
@supports(-moz-appearance: auto) {
/* Selector detects Firefox */
.stat { font-size:12px; }
}
.stagger {
opacity: 0;
animation: fadeInAnimation 0.3s ease-in-out forwards;
Expand Down
6 changes: 3 additions & 3 deletions tests/card.test.js
View file
@@ -1,5 +1,5 @@
require("@testing-library/jest-dom");
const cssToObject = require("css-to-object");
const cssToObject = require("@uppercod/css-to-object").cssToObject;
const Card = require("../src/common/Card");
const icons = require("../src/common/icons");
const { getCardColors } = require("../src/common/utils");
Expand Down Expand Up @@ -137,9 +137,9 @@ describe("Card", () => {

const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);
const headerClassStyles = stylesObject[".header"];
const headerClassStyles = stylesObject[":host"][".header "];

expect(headerClassStyles.fill).toBe("#f00");
expect(headerClassStyles["fill"].trim()).toBe("#f00");
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
"#fff",
Expand Down
66 changes: 35 additions & 31 deletions tests/renderRepoCard.test.js
View file
@@ -1,5 +1,5 @@
require("@testing-library/jest-dom");
const cssToObject = require("css-to-object");
const cssToObject = require("@uppercod/css-to-object").cssToObject;
const renderRepoCard = require("../src/cards/repo-card");

const { queryByTestId } = require("@testing-library/dom");
Expand Down Expand Up @@ -130,13 +130,13 @@ describe("Test renderRepoCard", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerClassStyles = stylesObject[".header"];
const descClassStyles = stylesObject[".description"];
const iconClassStyles = stylesObject[".icon"];
const headerClassStyles = stylesObject[":host"][".header "];
const descClassStyles = stylesObject[":host"][".description "];
const iconClassStyles = stylesObject[":host"][".icon "];

expect(headerClassStyles.fill).toBe("#2f80ed");
expect(descClassStyles.fill).toBe("#333");
expect(iconClassStyles.fill).toBe("#586069");
expect(headerClassStyles.fill.trim()).toBe("#2f80ed");
expect(descClassStyles.fill.trim()).toBe("#333");
expect(iconClassStyles.fill.trim()).toBe("#586069");
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
"#fffefe",
Expand All @@ -158,13 +158,13 @@ describe("Test renderRepoCard", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerClassStyles = stylesObject[".header"];
const descClassStyles = stylesObject[".description"];
const iconClassStyles = stylesObject[".icon"];
const headerClassStyles = stylesObject[":host"][".header "];
const descClassStyles = stylesObject[":host"][".description "];
const iconClassStyles = stylesObject[":host"][".icon "];

expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`);
expect(descClassStyles.fill).toBe(`#${customColors.text_color}`);
expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`);
expect(descClassStyles.fill.trim()).toBe(`#${customColors.text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
"#252525",
Expand All @@ -180,13 +180,15 @@ describe("Test renderRepoCard", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerClassStyles = stylesObject[".header"];
const descClassStyles = stylesObject[".description"];
const iconClassStyles = stylesObject[".icon"];
const headerClassStyles = stylesObject[":host"][".header "];
const descClassStyles = stylesObject[":host"][".description "];
const iconClassStyles = stylesObject[":host"][".icon "];

expect(headerClassStyles.fill).toBe(`#${themes[name].title_color}`);
expect(descClassStyles.fill).toBe(`#${themes[name].text_color}`);
expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`);
expect(headerClassStyles.fill.trim()).toBe(
`#${themes[name].title_color}`,
);
expect(descClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
`#${themes[name].bg_color}`,
Expand All @@ -203,13 +205,13 @@ describe("Test renderRepoCard", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerClassStyles = stylesObject[".header"];
const descClassStyles = stylesObject[".description"];
const iconClassStyles = stylesObject[".icon"];
const headerClassStyles = stylesObject[":host"][".header "];
const descClassStyles = stylesObject[":host"][".description "];
const iconClassStyles = stylesObject[":host"][".icon "];

expect(headerClassStyles.fill).toBe("#5a0");
expect(descClassStyles.fill).toBe(`#${themes.radical.text_color}`);
expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
expect(headerClassStyles.fill.trim()).toBe("#5a0");
expect(descClassStyles.fill.trim()).toBe(`#${themes.radical.text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
`#${themes.radical.bg_color}`,
Expand All @@ -226,13 +228,15 @@ describe("Test renderRepoCard", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerClassStyles = stylesObject[".header"];
const descClassStyles = stylesObject[".description"];
const iconClassStyles = stylesObject[".icon"];
const headerClassStyles = stylesObject[":host"][".header "];
const descClassStyles = stylesObject[":host"][".description "];
const iconClassStyles = stylesObject[":host"][".icon "];

expect(headerClassStyles.fill).toBe(`#${themes.default.title_color}`);
expect(descClassStyles.fill).toBe(`#${themes.default.text_color}`);
expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
expect(headerClassStyles.fill.trim()).toBe(
`#${themes.default.title_color}`,
);
expect(descClassStyles.fill.trim()).toBe(`#${themes.default.text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
`#${themes.radical.bg_color}`,
Expand Down
66 changes: 35 additions & 31 deletions tests/renderStatsCard.test.js
View file
@@ -1,5 +1,5 @@
require("@testing-library/jest-dom");
const cssToObject = require("css-to-object");
const cssToObject = require("@uppercod/css-to-object").cssToObject;
const renderStatsCard = require("../src/cards/stats-card");

const {
Expand Down Expand Up @@ -81,13 +81,13 @@ describe("Test renderStatsCard", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.textContent);

const headerClassStyles = stylesObject[".header"];
const statClassStyles = stylesObject[".stat"];
const iconClassStyles = stylesObject[".icon"];
const headerClassStyles = stylesObject[":host"][".header "];
const statClassStyles = stylesObject[":host"][".stat "];
const iconClassStyles = stylesObject[":host"][".icon "];

expect(headerClassStyles.fill).toBe("#2f80ed");
expect(statClassStyles.fill).toBe("#333");
expect(iconClassStyles.fill).toBe("#4c71f2");
expect(headerClassStyles.fill.trim()).toBe("#2f80ed");
expect(statClassStyles.fill.trim()).toBe("#333");
expect(iconClassStyles.fill.trim()).toBe("#4c71f2");
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
"#fffefe",
Expand All @@ -107,13 +107,13 @@ describe("Test renderStatsCard", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerClassStyles = stylesObject[".header"];
const statClassStyles = stylesObject[".stat"];
const iconClassStyles = stylesObject[".icon"];
const headerClassStyles = stylesObject[":host"][".header "];
const statClassStyles = stylesObject[":host"][".stat "];
const iconClassStyles = stylesObject[":host"][".icon "];

expect(headerClassStyles.fill).toBe(`#${customColors.title_color}`);
expect(statClassStyles.fill).toBe(`#${customColors.text_color}`);
expect(iconClassStyles.fill).toBe(`#${customColors.icon_color}`);
expect(headerClassStyles.fill.trim()).toBe(`#${customColors.title_color}`);
expect(statClassStyles.fill.trim()).toBe(`#${customColors.text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${customColors.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
"#252525",
Expand All @@ -129,13 +129,13 @@ describe("Test renderStatsCard", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerClassStyles = stylesObject[".header"];
const statClassStyles = stylesObject[".stat"];
const iconClassStyles = stylesObject[".icon"];
const headerClassStyles = stylesObject[":host"][".header "];
const statClassStyles = stylesObject[":host"][".stat "];
const iconClassStyles = stylesObject[":host"][".icon "];

expect(headerClassStyles.fill).toBe("#5a0");
expect(statClassStyles.fill).toBe(`#${themes.radical.text_color}`);
expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
expect(headerClassStyles.fill.trim()).toBe("#5a0");
expect(statClassStyles.fill.trim()).toBe(`#${themes.radical.text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
`#${themes.radical.bg_color}`,
Expand All @@ -151,13 +151,15 @@ describe("Test renderStatsCard", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerClassStyles = stylesObject[".header"];
const statClassStyles = stylesObject[".stat"];
const iconClassStyles = stylesObject[".icon"];
const headerClassStyles = stylesObject[":host"][".header "];
const statClassStyles = stylesObject[":host"][".stat "];
const iconClassStyles = stylesObject[":host"][".icon "];

expect(headerClassStyles.fill).toBe(`#${themes[name].title_color}`);
expect(statClassStyles.fill).toBe(`#${themes[name].text_color}`);
expect(iconClassStyles.fill).toBe(`#${themes[name].icon_color}`);
expect(headerClassStyles.fill.trim()).toBe(
`#${themes[name].title_color}`,
);
expect(statClassStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${themes[name].icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
`#${themes[name].bg_color}`,
Expand All @@ -175,13 +177,15 @@ describe("Test renderStatsCard", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerClassStyles = stylesObject[".header"];
const statClassStyles = stylesObject[".stat"];
const iconClassStyles = stylesObject[".icon"];
const headerClassStyles = stylesObject[":host"][".header "];
const statClassStyles = stylesObject[":host"][".stat "];
const iconClassStyles = stylesObject[":host"][".icon "];

expect(headerClassStyles.fill).toBe(`#${themes.default.title_color}`);
expect(statClassStyles.fill).toBe(`#${themes.default.text_color}`);
expect(iconClassStyles.fill).toBe(`#${themes.radical.icon_color}`);
expect(headerClassStyles.fill.trim()).toBe(
`#${themes.default.title_color}`,
);
expect(statClassStyles.fill.trim()).toBe(`#${themes.default.text_color}`);
expect(iconClassStyles.fill.trim()).toBe(`#${themes.radical.icon_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
`#${themes.radical.bg_color}`,
Expand Down
34 changes: 17 additions & 17 deletions tests/renderTopLanguages.test.js
View file
@@ -1,5 +1,5 @@
require("@testing-library/jest-dom");
const cssToObject = require("css-to-object");
const cssToObject = require("@uppercod/css-to-object").cssToObject;
const renderTopLanguages = require("../src/cards/top-languages-card");

const { queryByTestId, queryAllByTestId } = require("@testing-library/dom");
Expand Down Expand Up @@ -109,11 +109,11 @@ describe("Test renderTopLanguages", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.textContent);

const headerStyles = stylesObject[".header"];
const langNameStyles = stylesObject[".lang-name"];
const headerStyles = stylesObject[":host"][".header "];
const langNameStyles = stylesObject[":host"][".lang-name "];

expect(headerStyles.fill).toBe("#2f80ed");
expect(langNameStyles.fill).toBe("#333");
expect(headerStyles.fill.trim()).toBe("#2f80ed");
expect(langNameStyles.fill.trim()).toBe("#333");
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
"#fffefe",
Expand All @@ -133,11 +133,11 @@ describe("Test renderTopLanguages", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerStyles = stylesObject[".header"];
const langNameStyles = stylesObject[".lang-name"];
const headerStyles = stylesObject[":host"][".header "];
const langNameStyles = stylesObject[":host"][".lang-name "];

expect(headerStyles.fill).toBe(`#${customColors.title_color}`);
expect(langNameStyles.fill).toBe(`#${customColors.text_color}`);
expect(headerStyles.fill.trim()).toBe(`#${customColors.title_color}`);
expect(langNameStyles.fill.trim()).toBe(`#${customColors.text_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
"#252525",
Expand All @@ -153,11 +153,11 @@ describe("Test renderTopLanguages", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerStyles = stylesObject[".header"];
const langNameStyles = stylesObject[".lang-name"];
const headerStyles = stylesObject[":host"][".header "];
const langNameStyles = stylesObject[":host"][".lang-name "];

expect(headerStyles.fill).toBe("#5a0");
expect(langNameStyles.fill).toBe(`#${themes.radical.text_color}`);
expect(headerStyles.fill.trim()).toBe("#5a0");
expect(langNameStyles.fill.trim()).toBe(`#${themes.radical.text_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
`#${themes.radical.bg_color}`,
Expand All @@ -173,11 +173,11 @@ describe("Test renderTopLanguages", () => {
const styleTag = document.querySelector("style");
const stylesObject = cssToObject(styleTag.innerHTML);

const headerStyles = stylesObject[".header"];
const langNameStyles = stylesObject[".lang-name"];
const headerStyles = stylesObject[":host"][".header "];
const langNameStyles = stylesObject[":host"][".lang-name "];

expect(headerStyles.fill).toBe(`#${themes[name].title_color}`);
expect(langNameStyles.fill).toBe(`#${themes[name].text_color}`);
expect(headerStyles.fill.trim()).toBe(`#${themes[name].title_color}`);
expect(langNameStyles.fill.trim()).toBe(`#${themes[name].text_color}`);
expect(queryByTestId(document.body, "card-bg")).toHaveAttribute(
"fill",
`#${themes[name].bg_color}`,
Expand Down

1 comment on commit b6c184e

@vercel
Copy link

@vercel vercel bot commented on b6c184e Dec 13, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.