Update tests, apply formatting

src/test/app.spec.tsx

@@ -1,9 +1,18 @@
 import { render } from "@testing-library/react";
 import App, { GlobalStyle } from "../app";
+import { IThemeProps } from "../lib/theme";
+
+const props: IThemeProps = {
+  label: "Classic",
+  value: 0,
+  mainColor: "#000000",
+  accentColor: "#1e272e",
+  backgroundColor: "#ffffff",
+};
 
 describe("app.tsx", () => {
   it("Tests GlobalStyle", () => {
-    const { asFragment } = render(<GlobalStyle />);
+    const { asFragment } = render(<GlobalStyle theme={props} />);
     expect(asFragment).toMatchSnapshot();
   });
 });

src/test/components/greeter.spec.tsx

@@ -64,7 +64,7 @@ it("isBetween test", () => {
 });
 
 it("getExtension test", () => {
-  expect(getExtension(0)).toEqual("");
+  expect(getExtension(0)).toEqual("th");
   expect(getExtension(1)).toEqual("st");
   expect(getExtension(2)).toEqual("nd");
   expect(getExtension(3)).toEqual("rd");

src/test/components/searchBar.spec.tsx

@@ -7,6 +7,7 @@ import SearchBar, {
 
 const props: ISearchProps = {
   defaultProvider: "https://test.com?q=",
+  placeholder: "",
   providers: [
     {
       name: "Allmusic",
@@ -73,6 +74,7 @@ describe("searchBar.tsx", () => {
   it("Tests handleQueryWithProvider without providers", () => {
     const test: ISearchProps = {
       defaultProvider: "https://test.com?q=",
+      placeholder: "",
       providers: undefined,
     };
 

src/test/components/settings.spec.tsx

@@ -30,6 +30,7 @@ const themes: Array<IThemeProps> = [
 
 const search: ISearchProps = {
   defaultProvider: "https://test.com?q=",
+  placeholder: "",
   providers: [
     {
       name: "Allmusic",
@@ -130,10 +131,23 @@ describe("settings.tsx", () => {
     expect(window.location.reload).toHaveBeenCalledTimes(1);
   });
 
-  it("Tests theme selection", () => {
+  it("Tests light theme selection", () => {
     const settings = render(<Settings themes={themes} search={search} />);
 
-    fireEvent.change(settings.getByTestId("select"), { target: { value: 0 } });
+    fireEvent.change(settings.getByTestId("select-light"), {
+      target: { value: 0 },
+    });
+
+    fireEvent.click(settings.getByTestId("button-submit"));
+    expect(window.location.reload).toHaveBeenCalledTimes(1);
+  });
+
+  it("Tests dark theme selection", () => {
+    const settings = render(<Settings themes={themes} search={search} />);
+
+    fireEvent.change(settings.getByTestId("select-dark"), {
+      target: { value: 0 },
+    });
 
     fireEvent.click(settings.getByTestId("button-submit"));
     expect(window.location.reload).toHaveBeenCalledTimes(1);
@@ -142,7 +156,9 @@ describe("settings.tsx", () => {
   it("Tests theme selection", () => {
     const settings = render(<Settings themes={themes} search={search} />);
 
-    fireEvent.change(settings.getByTestId("select"), { target: { value: 5 } });
+    fireEvent.change(settings.getByTestId("select-light"), {
+      target: { value: 5 },
+    });
 
     fireEvent.click(settings.getByTestId("button-submit"));
     expect(window.location.reload).toHaveBeenCalledTimes(0);

src/test/lib/theme.spec.tsx

@@ -28,13 +28,25 @@ const setup = () => {
 };
 
 describe("theme.tsx", () => {
-  it("setTheme test", () => {
+  it("setTheme light test", () => {
     setup();
 
-    setTheme(props);
-    expect(window.localStorage.setItem).toHaveBeenCalledTimes(1);
+    setTheme("light", props);
+    expect(window.localStorage.setItem).toHaveBeenCalledTimes(2);
     expect(window.localStorage.setItem).toHaveBeenCalledWith(
-      "theme",
+      "light-theme",
+      JSON.stringify(props),
+    );
+    expect(window.location.reload).toHaveBeenCalledTimes(1);
+  });
+
+  it("setTheme dark test", () => {
+    setup();
+
+    setTheme("dark", props);
+    expect(window.localStorage.setItem).toHaveBeenCalledTimes(2);
+    expect(window.localStorage.setItem).toHaveBeenCalledWith(
+      "dark-theme",
       JSON.stringify(props),
     );
     expect(window.location.reload).toHaveBeenCalledTimes(1);