fix: firefox text overflow issue (#1492)

* 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 anuraghazra/github-readme-stats#664

Fixes anuraghazra/github-readme-stats#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>
This commit is contained in:
T. de KimpeandAnurag authored and GitHub committed 2021-12-13 20:12:03 +05:30
1 parent 798bf72dee
commit b6c184e8ff
8 files changed
+115 -83

No files matched your search

+17 -17
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");
@@ -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",
@@ -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",
@@ -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}`,
@@ -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}`,