Add tests

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

@@ -0,0 +1,9 @@
+// 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__/imprint.spec.tsx.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`imprint.tsx Tests Imprint 1`] = `[Function]`;
+
+exports[`imprint.tsx Tests ImprintField 1`] = `[Function]`;

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

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`modal.tsx Tests modal with icon 1`] = `[Function]`;
+
+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]`;

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

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

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`settings.tsx Tests forms 1`] = `[Function]`;
+
+exports[`settings.tsx Tests sections 1`] = `[Function]`;
+
+exports[`settings.tsx Tests settings rendering 1`] = `[Function]`;
+
+exports[`settings.tsx Tests settings rendering 2`] = `[Function]`;
+
+exports[`settings.tsx Tests settings rendering 3`] = `[Function]`;
+
+exports[`settings.tsx Tests settings rendering 4`] = `[Function]`;
+
+exports[`settings.tsx Tests tables 1`] = `[Function]`;

src/test/components/elements.spec.tsx

@@ -0,0 +1,39 @@
+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/imprint.spec.tsx

@@ -0,0 +1,61 @@
+import { fireEvent, render } from "@testing-library/react";
+import Imprint, { IImprintProps, ImprintField } from "../../components/imprint";
+
+const props: IImprintProps = {
+  name: {
+    text: "Test Name",
+    link: "#",
+  },
+  address: {
+    text: "Test Address",
+    link: "#",
+  },
+  phone: {
+    text: "Test Phone",
+    link: "#",
+  },
+  email: {
+    text: "Test Email",
+    link: "#",
+  },
+  url: {
+    text: "Test URL",
+    link: "#",
+  },
+  text: "This is a test!",
+};
+
+describe("imprint.tsx", () => {
+  beforeEach(() => {
+    delete global.window.location;
+    global.window = Object.create(window);
+    global.window.location = {
+      port: "123",
+      protocol: "http:",
+      hostname: "localhost",
+      href: "test",
+    };
+  });
+
+  it("Tests Imprint", () => {
+    const { asFragment } = render(<Imprint imprint={props} />);
+    expect(asFragment).toMatchSnapshot();
+  });
+
+  it("Tests #imprint", () => {
+    const location = window.location.href;
+    window.location.href = location + "#imprint";
+
+    const imprintModal = render(<Imprint imprint={props} />);
+
+    fireEvent.click(imprintModal.getByTestId("toggle-button"));
+    //fireEvent.click(imprintModal.getByTestId("close-button"));
+
+    expect(window.location.href).toEqual(location);
+  });
+
+  it("Tests ImprintField", () => {
+    const { asFragment } = render(<ImprintField field={props.name} />);
+    expect(asFragment).toMatchSnapshot();
+  });
+});

src/test/components/modal.spec.tsx

@@ -0,0 +1,78 @@
+import { fireEvent, render } from "@testing-library/react";
+import Modal, { IModalProps } from "../../components/modal";
+
+const iconProps: IModalProps = {
+  element: "icon",
+  icon: "bug_report",
+  title: "Test Modal",
+  onClose: jest.fn(),
+  children: <p>Hello</p>,
+};
+
+const invalidIconProps: IModalProps = {
+  element: "icon",
+  title: "Test Modal",
+  onClose: jest.fn(),
+  children: <p>Hello</p>,
+};
+
+const textProps: IModalProps = {
+  element: "text",
+  text: "Test",
+  title: "Test Modal",
+  onClose: jest.fn(),
+  children: <p>Hello</p>,
+};
+
+const noneProps: IModalProps = {
+  element: "none",
+  title: "Test Modal",
+  children: <p>Hello</p>,
+};
+
+const setup = (props: IModalProps) => {
+  const modal = render(
+    <Modal
+      element={props.element}
+      icon={props.icon}
+      text={props.text}
+      title={props.title}
+      onClose={props.onClose}
+    >
+      {props.children}
+    </Modal>,
+  );
+
+  return modal;
+};
+
+describe("modal.tsx", () => {
+  it("Tests modal with icon button", () => {
+    const modal = setup(iconProps);
+    expect(modal.asFragment).toMatchSnapshot();
+    fireEvent.click(modal.getByTestId("toggle-button"));
+    fireEvent.click(modal.getByTestId("close-button"));
+    expect(iconProps.onClose).toHaveBeenCalledTimes(2);
+  });
+
+  it("Tests modal with text button", () => {
+    const modal = setup(textProps);
+    expect(modal.asFragment).toMatchSnapshot();
+    fireEvent.click(modal.getByTestId("toggle-button"));
+    fireEvent.click(modal.getByTestId("close-button"));
+    expect(textProps.onClose).toHaveBeenCalledTimes(2);
+  });
+
+  it("Tests modal with neither", () => {
+    const modal = setup(noneProps);
+    expect(modal.asFragment).toMatchSnapshot();
+  });
+
+  it("Tests modal with icon", () => {
+    const modal = setup(invalidIconProps);
+    expect(modal.asFragment).toMatchSnapshot();
+    fireEvent.click(modal.getByTestId("toggle-button"));
+    fireEvent.click(modal.getByTestId("close-button"));
+    expect(invalidIconProps.onClose).toHaveBeenCalledTimes(2);
+  });
+});

src/test/components/searchBar.spec.tsx

@@ -0,0 +1,101 @@
+import { fireEvent, render } from "@testing-library/react";
+import SearchBar, {
+  handleQueryWithProvider,
+  ISearchProviderProps,
+  ISearchBarProps,
+} from "../../components/searchBar";
+
+const providers: Array<ISearchProviderProps> = [
+  {
+    name: "Allmusic",
+    url: "https://www.allmusic.com/search/all/",
+    prefix: "/a",
+  },
+  {
+    name: "Discogs",
+    url: "https://www.discogs.com/search/?q=",
+    prefix: "/di",
+  },
+  {
+    name: "Duck Duck Go",
+    url: "https://duckduckgo.com/?q=",
+    prefix: "/d",
+  },
+];
+
+const setup = () => {
+  const searchBar = render(<SearchBar providers={providers} />);
+  const input = searchBar.getByTestId("search-input");
+  const clearButton = searchBar.getByTestId("search-clear");
+  const submitButton = searchBar.getByTestId("search-submit");
+
+  return {
+    searchBar,
+    input,
+    clearButton,
+    submitButton,
+  };
+};
+
+describe("searchBar.tsx", () => {
+  beforeEach(() => {
+    delete global.window.location;
+    global.window = Object.create(window);
+    global.window.location = {
+      port: "123",
+      protocol: "http:",
+      hostname: "localhost",
+    };
+  });
+
+  it("Tests SearchBar rendering", () => {
+    const { asFragment } = render(<SearchBar providers={providers} />);
+    expect(asFragment).toMatchSnapshot();
+  });
+
+  it("Tests handleQueryWithProvider", () => {
+    providers.forEach((provider: ISearchProviderProps) => {
+      handleQueryWithProvider(providers, provider.prefix + " test");
+      expect(window.location.href).toEqual(provider.url + "test");
+    });
+  });
+
+  it("Tests handleQueryWithProvider default", () => {
+    handleQueryWithProvider(providers, "test");
+    expect(window.location.href).toEqual("https://google.com/search?q=test");
+  });
+
+  it("Tests handleQueryWithProvider without providers", () => {
+    handleQueryWithProvider(undefined, "test");
+    expect(window.location.href).toEqual("https://google.com/search?q=test");
+  });
+
+  it("Tests SearchBar component with default search", () => {
+    const { input, submitButton } = setup();
+    fireEvent.change(input, { target: { value: "test" } });
+    fireEvent.click(submitButton);
+
+    expect(window.location.href).toEqual("https://google.com/search?q=test");
+  });
+
+  it("Tests SearchBar component with other search", () => {
+    const { input, submitButton } = setup();
+
+    fireEvent.change(input, { target: { value: "/a test" } });
+    fireEvent.click(submitButton);
+
+    expect(window.location.href).toEqual(
+      "https://www.allmusic.com/search/all/test",
+    );
+  });
+
+  it("Tests SearchBar component clear", () => {
+    const { input, clearButton, submitButton } = setup();
+
+    fireEvent.change(input, { target: { value: "/a test" } });
+    fireEvent.click(clearButton);
+    fireEvent.click(submitButton);
+
+    expect(window.location.href).toEqual("https://google.com/search?q=");
+  });
+});

src/test/components/settings.spec.tsx

@@ -0,0 +1,143 @@
+import { fireEvent, render } from "@testing-library/react";
+import Settings, {
+  FormContainer,
+  Table,
+  TableRow,
+  TableCell,
+  HeadCell,
+  Section,
+  SectionHeadline,
+  SelectorStyle,
+} from "../../components/settings";
+import { ISearchProviderProps } from "../../components/searchBar";
+import { IThemeProps } from "../../lib/theme";
+
+const themes: Array<IThemeProps> = [
+  {
+    label: "Classic",
+    value: 0,
+    mainColor: "#000000",
+    accentColor: "#1e272e",
+    backgroundColor: "#ffffff",
+  },
+  {
+    label: "Classic",
+    value: 0,
+    mainColor: "#000000",
+    accentColor: "#1e272e",
+    backgroundColor: "#ffffff",
+  },
+];
+
+const providers: Array<ISearchProviderProps> = [
+  {
+    name: "Allmusic",
+    url: "https://www.allmusic.com/search/all/",
+    prefix: "/a",
+  },
+  {
+    name: "Discogs",
+    url: "https://www.discogs.com/search/?q=",
+    prefix: "/di",
+  },
+  {
+    name: "Duck Duck Go",
+    url: "https://duckduckgo.com/?q=",
+    prefix: "/d",
+  },
+];
+
+const propsList = [
+  {
+    themes: themes,
+    providers: providers,
+  },
+  {
+    themes: themes,
+    providers: undefined,
+  },
+  {
+    themes: undefined,
+    providers: providers,
+  },
+  {
+    themes: undefined,
+    providers: undefined,
+  },
+];
+
+describe("settings.tsx", () => {
+  const location: Location = window.location;
+  8;
+
+  beforeEach(() => {
+    // @ts-ignore
+    delete window.location;
+
+    window.location = {
+      ...location,
+      reload: jest.fn(),
+    };
+  });
+
+  it("Tests forms", () => {
+    const { asFragment } = render(<FormContainer />);
+    expect(asFragment).toMatchSnapshot();
+  });
+
+  it("Tests tables", () => {
+    const { asFragment } = render(
+      <Table>
+        <tbody>
+          <TableRow>
+            <HeadCell>Test</HeadCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>Test</TableCell>
+          </TableRow>
+        </tbody>
+      </Table>,
+    );
+
+    expect(asFragment).toMatchSnapshot();
+  });
+
+  it("Tests sections", () => {
+    const { asFragment } = render(
+      <Section>
+        <SectionHeadline>Test</SectionHeadline>
+      </Section>,
+    );
+
+    expect(asFragment).toMatchSnapshot();
+  });
+
+  it("Tests settings rendering", () => {
+    propsList.forEach((props) => {
+      const settings = render(
+        <Settings themes={props.themes} providers={props.providers} />,
+      );
+
+      expect(settings.asFragment).toMatchSnapshot();
+    });
+  });
+
+  // TODO: Finish this test
+  it("Tests theme setting", () => {
+    const settings = render(
+      <Settings
+        themes={propsList[0].themes}
+        providers={propsList[0].providers}
+      />,
+    );
+
+    const toggleButton = settings.getByTestId("toggle-button");
+
+    const submitButton = settings.getByTestId("button-submit");
+    const refreshButton = settings.getByTestId("button-refresh");
+
+    fireEvent.click(toggleButton);
+
+    fireEvent.click(submitButton);
+  });
+});

src/test/lib/fetcher.spec.tsx

@@ -0,0 +1,46 @@
+import { ok } from "assert";
+import useFetcher, {
+  defaults,
+  handleResponse,
+  handleError,
+  fetchProduction,
+  fetchDevelopment,
+} from "../../lib/fetcher";
+
+describe("fetcher.tsx", () => {
+  it("Tests handleResponse", () => {});
+
+  it("Tests handleError", () => {
+    expect(handleError("apps", Error("Test!"))).toEqual({
+      ...defaults.app,
+      error: "Test!",
+    });
+
+    expect(handleError("bookmark", Error("Test!"))).toEqual({
+      ...defaults.bookmark,
+      error: "Test!",
+    });
+
+    expect(handleError("searchProvider", Error("Test!"))).toEqual({
+      ...defaults.search,
+      error: "Test!",
+    });
+
+    expect(handleError("theme", Error("Test!"))).toEqual({
+      ...defaults.theme,
+      error: "Test!",
+    });
+
+    expect(handleError("imprint", Error("Test!"))).toEqual({
+      ...defaults.imprint,
+      error: "Test!",
+    });
+
+    expect(handleError("greeter", Error("Test!"))).toEqual({
+      ...defaults.greeter,
+      error: "Test!",
+    });
+
+    expect(handleError("", Error("Test!"))).toEqual(undefined);
+  });
+});

src/test/lib/theme.spec.tsx

@@ -1,8 +1,4 @@
-import selectedTheme, {
-  getTheme,
-  IThemeProps,
-  setTheme,
-} from "../../lib/theme";
+import { getTheme, IThemeProps, setTheme } from "../../lib/theme";
 
 const props: IThemeProps = {
   label: "Classic",
@@ -12,33 +8,47 @@ const props: IThemeProps = {
   backgroundColor: "#ffffff",
 };
 
-const theme = JSON.stringify(props);
+const location: Location = window.location;
+const setup = () => {
+  Object.defineProperty(window, "localStorage", {
+    value: {
+      getItem: jest.fn(() => JSON.stringify(props)),
+      setItem: jest.fn(() => null),
+    },
+    writable: true,
+  });
+
+  // @ts-ignore
+  delete window.location;
+
+  window.location = {
+    ...location,
+    reload: jest.fn(),
+  };
+};
 
 describe("theme.tsx", () => {
-  beforeEach(() => {
-    Object.defineProperty(window, "localStorage", {
-      value: {
-        getItem: jest.fn(() => null),
-        setItem: jest.fn(() => null),
-      },
-      writable: true,
-    });
-  });
-
   it("setTheme test", () => {
-    setTheme(theme);
+    setup();
 
+    setTheme(props);
     expect(window.localStorage.setItem).toHaveBeenCalledTimes(1);
-    expect(window.localStorage.setItem).toHaveBeenCalledWith("theme", theme);
+    expect(window.localStorage.setItem).toHaveBeenCalledWith(
+      "theme",
+      JSON.stringify(props),
+    );
+    expect(window.location.reload).toHaveBeenCalledTimes(1);
   });
 
-  it("getTheme test", () => {
-    const themeTest = getTheme();
+  it("Tests getTheme", () => {
+    setup();
+
+    let themeTest = getTheme();
     expect(themeTest).toEqual(props);
   });
 
-  it("selectedTheme test", () => {
-    const themeTest = selectedTheme;
-    expect(themeTest).toEqual(props);
+  it("Tests getTheme with empty parameters", () => {
+    localStorage.setItem("theme", "");
+    expect(getTheme()).toEqual({});
   });
 });