Create custom select, update tests

src/test/components/__snapshots__/elements.spec.tsx.snap

@@ -1,9 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Tests Button 1`] = `[Function]`;
-
-exports[`Tests Headline 1`] = `[Function]`;
-
-exports[`Tests Lists 1`] = `[Function]`;
-
-exports[`Tests SubHeadline 1`] = `[Function]`;

src/test/components/__snapshots__/modal.spec.tsx.snap

@@ -7,3 +7,5 @@ exports[`modal.tsx Tests modal with icon button 1`] = `[Function]`;
 exports[`modal.tsx Tests modal with neither 1`] = `[Function]`;
 
 exports[`modal.tsx Tests modal with text button 1`] = `[Function]`;
+
+exports[`modal.tsx Tests modal without onClose behaviour 1`] = `[Function]`;

src/test/components/__snapshots__/select.spec.tsx.snap

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`select.tsx Tests select rendering 1`] = `[Function]`;

src/test/components/elements.spec.tsx

@@ -1,39 +0,0 @@
-import { render } from "@testing-library/react";
-import {
-  ListContainer,
-  Headline,
-  SubHeadline,
-  ItemList,
-  Item,
-  Button,
-} from "../../components/elements";
-
-it("Tests Lists", () => {
-  const { asFragment } = render(
-    <ListContainer>
-      <ItemList>
-        <Item>Test</Item>
-      </ItemList>
-    </ListContainer>,
-  );
-
-  expect(asFragment).toMatchSnapshot();
-});
-
-it("Tests Headline", () => {
-  const { asFragment } = render(<Headline>Test</Headline>);
-
-  expect(asFragment).toMatchSnapshot();
-});
-
-it("Tests SubHeadline", () => {
-  const { asFragment } = render(<SubHeadline>Test</SubHeadline>);
-
-  expect(asFragment).toMatchSnapshot();
-});
-
-it("Tests Button", () => {
-  const { asFragment } = render(<Button>Test</Button>);
-
-  expect(asFragment).toMatchSnapshot();
-});

src/test/components/icon.spec.tsx

@@ -4,7 +4,7 @@ import Icon, { IconButton } from "../../components/icon";
 const props = {
   name: "bug_report",
   size: "20px",
-  onClick: () => console.log("test"),
+  onClick: jest.fn(),
 };
 
 it("Icon test", () => {
@@ -18,13 +18,12 @@ it("Icon test (no size)", () => {
 });
 
 it("IconButton test", () => {
-  const { asFragment } = render(
+  const iconButton = render(
     <IconButton icon={props.name} onClick={props.onClick} />,
   );
-  expect(asFragment).toMatchSnapshot();
 
-  const handleClick = jest.fn();
-  render(<IconButton icon="question_answer" onClick={handleClick} />);
-  fireEvent.click(screen.getByText(/question_answer/i));
-  expect(handleClick).toHaveBeenCalledTimes(1);
+  expect(iconButton.asFragment).toMatchSnapshot();
+
+  fireEvent.click(screen.getByText(/bug_report/i));
+  expect(props.onClick).toHaveBeenCalledTimes(1);
 });

src/test/components/modal.spec.tsx

@@ -75,4 +75,11 @@ describe("modal.tsx", () => {
     fireEvent.click(modal.getByTestId("close-button"));
     expect(invalidIconProps.onClose).toHaveBeenCalledTimes(2);
   });
+
+  it("Tests modal without onClose behaviour", () => {
+    const modal = setup(noneProps);
+    expect(modal.asFragment).toMatchSnapshot();
+    fireEvent.click(modal.getByTestId("close-button"));
+    expect(iconProps.onClose).toHaveBeenCalledTimes(0);
+  });
 });

src/test/components/select.spec.tsx

@@ -0,0 +1,42 @@
+import { fireEvent, render } from "@testing-library/react";
+import Select, { IItemProps } from "../../components/select";
+
+const onChange = jest.fn();
+const items: Array<IItemProps> = [
+  {
+    label: "Test 1",
+    value: 0,
+  },
+  {
+    label: "Test 2",
+    value: 1,
+  },
+];
+
+describe("select.tsx", () => {
+  it("Tests select rendering", () => {
+    const { asFragment } = render(
+      <Select items={items} onChange={(item) => onChange(item)}></Select>,
+    );
+
+    expect(asFragment).toMatchSnapshot();
+  });
+
+  it("Tests select onChange", () => {
+    const select = render(
+      <Select items={items} onChange={(item) => onChange(item)}></Select>,
+    );
+
+    fireEvent.change(select.getByTestId("select"), { target: { value: 1 } });
+    expect(onChange).toBeCalledWith(items[1]);
+  });
+
+  it("Tests select onChange with undefined item", () => {
+    const select = render(
+      <Select items={items} onChange={(item) => onChange(item)}></Select>,
+    );
+
+    fireEvent.change(select.getByTestId("select"), { target: { value: 5 } });
+    expect(onChange).toBeCalledWith(undefined);
+  });
+});

src/test/components/settings.spec.tsx

@@ -7,7 +7,6 @@ import Settings, {
   HeadCell,
   Section,
   SectionHeadline,
-  SelectorStyle,
 } from "../../components/settings";
 import { ISearchProps } from "../../components/searchBar";
 import { IThemeProps } from "../../lib/theme";
@@ -22,7 +21,7 @@ const themes: Array<IThemeProps> = [
   },
   {
     label: "Classic",
-    value: 0,
+    value: 1,
     mainColor: "#000000",
     accentColor: "#1e272e",
     backgroundColor: "#ffffff",
@@ -116,27 +115,36 @@ describe("settings.tsx", () => {
 
   it("Tests settings rendering", () => {
     propsList.forEach((props) => {
-      const settings = render(
+      const { asFragment } = render(
         <Settings themes={props.themes} search={props.search} />,
       );
 
-      expect(settings.asFragment).toMatchSnapshot();
+      expect(asFragment).toMatchSnapshot();
     });
   });
 
-  // TODO: Finish this test
-  it("Tests theme setting", () => {
-    const settings = render(
-      <Settings themes={propsList[0].themes} search={propsList[0].search} />,
-    );
+  it("Tests submit button", () => {
+    const settings = render(<Settings themes={themes} search={search} />);
 
-    const toggleButton = settings.getByTestId("toggle-button");
+    fireEvent.click(settings.getByTestId("button-refresh"));
+    expect(window.location.reload).toHaveBeenCalledTimes(1);
+  });
 
-    const submitButton = settings.getByTestId("button-submit");
-    const refreshButton = settings.getByTestId("button-refresh");
+  it("Tests theme selection", () => {
+    const settings = render(<Settings themes={themes} search={search} />);
 
-    fireEvent.click(toggleButton);
+    fireEvent.change(settings.getByTestId("select"), { target: { value: 0 } });
 
-    fireEvent.click(submitButton);
+    fireEvent.click(settings.getByTestId("button-submit"));
+    expect(window.location.reload).toHaveBeenCalledTimes(1);
+  });
+
+  it("Tests theme selection", () => {
+    const settings = render(<Settings themes={themes} search={search} />);
+
+    fireEvent.change(settings.getByTestId("select"), { target: { value: 5 } });
+
+    fireEvent.click(settings.getByTestId("button-submit"));
+    expect(window.location.reload).toHaveBeenCalledTimes(0);
   });
 });