feat: Added compact layout for top languages card (#179)

* compact layout for top langs card

* 🐞 FIX: most used lang should be first, apply correct colors, removed nested svgs and height set

* 🐞 FIX: conditionally rendering layout compact

* 🐞 FIX: border radius on lang progressbar

* refactor: refactored code & fixed bugs

* fix: toFixed

* chore: change string interpolation

* docs: updated readme

Co-authored-by: anuraghazra <hazru.anurag@gmail.com>
This commit is contained in:
Sagar
2020-07-26 21:45:23 +05:30
committed by GitHub
parent 3bdcf3d61f
commit b8330a88e1
4 changed files with 139 additions and 19 deletions

View File

@ -207,4 +207,19 @@ describe("Test renderTopLanguages", () => {
);
});
});
it('should render with layout compact', () => {
document.body.innerHTML = renderTopLanguages(langs, {layout: 'compact'});
expect(queryByTestId(document.body, "header")).toHaveTextContent("Top Languages");
expect(queryAllByTestId(document.body, "lang-name")[0]).toHaveTextContent("HTML 40.00%");
expect(queryAllByTestId(document.body, "lang-progress")[0]).toHaveAttribute("width","120.00");
expect(queryAllByTestId(document.body, "lang-name")[1]).toHaveTextContent("javascript 40.00%");
expect(queryAllByTestId(document.body, "lang-progress")[1]).toHaveAttribute("width","120.00");
expect(queryAllByTestId(document.body, "lang-name")[2]).toHaveTextContent("css 20.00%");
expect(queryAllByTestId(document.body, "lang-progress")[2]).toHaveAttribute("width","60.00");
})
});