add icon and theme tests

codecov.yml

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

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) => {
+export const Icon = ({ name, size }: IIconProps) => (
-  let Container = styled(IconContainer)`
+  <IconContainer color={selectedTheme.mainColor} theme={size}>
-    font-size: ${size ? size : "24px"};
+    {name}
-    color: ${selectedTheme.mainColor};
+  </IconContainer>
-  `;
+);
-
-  return <Container>{name}</Container>;
-};
 
 /**
  * Renders a button with an icon

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) {

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]`;

src/test/components/icon.spec.tsx

@@ -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} />,

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);
+  });
+});