add icon and theme tests

This commit is contained in:
Bastian Meissner 2021-06-14 21:10:28 +02:00
parent 98eccea2b5
commit aa61b2fb76
6 changed files with 61 additions and 14 deletions

View file

@ -9,8 +9,5 @@ coverage:
flags:
dashboard:
paths:
- src/
- data/
ignore:
- node_modules
- src/components/
- src/lib/

View file

@ -38,6 +38,8 @@ const IconContainer = styled.i`
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "liga";
font-size: ${(props) => props.theme};
color: ${(props) => props.color};
`;
/**
@ -45,14 +47,11 @@ const IconContainer = styled.i`
* @param {IIconProps} props props needed for the given icon
* @returns {React.ReactNode} the icon node
*/
export const Icon = ({ name, size }: IIconProps) => {
let Container = styled(IconContainer)`
font-size: ${size ? size : "24px"};
color: ${selectedTheme.mainColor};
`;
return <Container>{name}</Container>;
};
export const Icon = ({ name, size }: IIconProps) => (
<IconContainer color={selectedTheme.mainColor} theme={size}>
{name}
</IconContainer>
);
/**
* Renders a button with an icon

View file

@ -27,7 +27,7 @@ export const setTheme = (theme: string) => {
* Function that gets the saved theme from localStorage or returns the default
* @returns {IThemeProps} the saved theme or the default theme
*/
const getTheme = (): IThemeProps => {
export const getTheme = (): IThemeProps => {
let selectedTheme = defaultTheme;
if (localStorage.getItem("theme") !== null) {

View file

@ -1,5 +1,7 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Icon test (no size) 1`] = `[Function]`;
exports[`Icon test 1`] = `[Function]`;
exports[`IconButton test 1`] = `[Function]`;

View file

@ -12,6 +12,11 @@ it("Icon test", () => {
expect(asFragment).toMatchSnapshot();
});
it("Icon test (no size)", () => {
const { asFragment } = render(<Icon name={props.name} />);
expect(asFragment).toMatchSnapshot();
});
it("IconButton test", () => {
const { asFragment } = render(
<IconButton icon={props.name} onClick={props.onClick} />,

View file

@ -0,0 +1,44 @@
import selectedTheme, {
getTheme,
IThemeProps,
setTheme,
} from "../../lib/theme";
const props: IThemeProps = {
label: "Classic",
value: 0,
mainColor: "#000000",
accentColor: "#1e272e",
backgroundColor: "#ffffff",
};
const theme = JSON.stringify(props);
describe("theme.tsx", () => {
beforeEach(() => {
Object.defineProperty(window, "localStorage", {
value: {
getItem: jest.fn(() => null),
setItem: jest.fn(() => null),
},
writable: true,
});
});
it("setTheme test", () => {
setTheme(theme);
expect(window.localStorage.setItem).toHaveBeenCalledTimes(1);
expect(window.localStorage.setItem).toHaveBeenCalledWith("theme", theme);
});
it("getTheme test", () => {
const themeTest = getTheme();
expect(themeTest).toEqual(props);
});
it("selectedTheme test", () => {
const themeTest = selectedTheme;
expect(themeTest).toEqual(props);
});
});