diff --git a/codecov.yml b/codecov.yml index 261b78c..d4acc21 100644 --- a/codecov.yml +++ b/codecov.yml @@ -9,8 +9,5 @@ coverage: flags: dashboard: paths: - - src/ - - data/ - -ignore: - - node_modules + - src/components/ + - src/lib/ diff --git a/src/components/icon.tsx b/src/components/icon.tsx index 2537258..18f7f21 100644 --- a/src/components/icon.tsx +++ b/src/components/icon.tsx @@ -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 {name}; -}; +export const Icon = ({ name, size }: IIconProps) => ( + + {name} + +); /** * Renders a button with an icon diff --git a/src/lib/theme.tsx b/src/lib/theme.tsx index ebdc07f..11804c5 100644 --- a/src/lib/theme.tsx +++ b/src/lib/theme.tsx @@ -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) { diff --git a/src/test/components/__snapshots__/icon.spec.tsx.snap b/src/test/components/__snapshots__/icon.spec.tsx.snap index 076de6c..6de0c03 100644 --- a/src/test/components/__snapshots__/icon.spec.tsx.snap +++ b/src/test/components/__snapshots__/icon.spec.tsx.snap @@ -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]`; diff --git a/src/test/components/icon.spec.tsx b/src/test/components/icon.spec.tsx index 3a44a1d..2791628 100644 --- a/src/test/components/icon.spec.tsx +++ b/src/test/components/icon.spec.tsx @@ -12,6 +12,11 @@ it("Icon test", () => { expect(asFragment).toMatchSnapshot(); }); +it("Icon test (no size)", () => { + const { asFragment } = render(); + expect(asFragment).toMatchSnapshot(); +}); + it("IconButton test", () => { const { asFragment } = render( , diff --git a/src/test/lib/theme.spec.tsx b/src/test/lib/theme.spec.tsx new file mode 100644 index 0000000..88734b6 --- /dev/null +++ b/src/test/lib/theme.spec.tsx @@ -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); + }); +});