From 786aca82f142b8ea564f48dca8de2d01e645af17 Mon Sep 17 00:00:00 2001
From: phntxx <meissner.bastian@gmail.com>
Date: Sun, 11 Jul 2021 15:58:42 +0200
Subject: [PATCH] Update tests, apply formatting

---
 src/components/greeter.tsx             |  4 +---
 src/components/icon.tsx                |  4 +---
 src/components/select.tsx              | 17 ++++++++++++-----
 src/components/settings.tsx            |  3 ++-
 src/lib/fetcher.tsx                    |  2 +-
 src/lib/theme.tsx                      |  5 ++++-
 src/lib/useMediaQuery.tsx              |  2 +-
 src/test/app.spec.tsx                  | 11 ++++++++++-
 src/test/components/greeter.spec.tsx   |  2 +-
 src/test/components/searchBar.spec.tsx |  2 ++
 src/test/components/settings.spec.tsx  | 22 +++++++++++++++++++---
 src/test/lib/theme.spec.tsx            | 20 ++++++++++++++++----
 12 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/src/components/greeter.tsx b/src/components/greeter.tsx
index f5c1205..db30679 100644
--- a/src/components/greeter.tsx
+++ b/src/components/greeter.tsx
@@ -68,7 +68,7 @@ export const getGreeting = (greetings: Array<IGreetingProps>): string => {
  * @returns {string} extension for that number
  */
 export const getExtension = (day: number) => {
-  let extension = "";
+  let extension = "th";
 
   if (day % 10 === 1) {
     extension = "st";
@@ -76,8 +76,6 @@ export const getExtension = (day: number) => {
     extension = "nd";
   } else if (day % 10 === 3) {
     extension = "rd";
-  } else if (isBetween(day, 4, 20) || (day > 20 && day % 10 >= 4)) {
-    extension = "th";
   }
 
   return extension;
diff --git a/src/components/icon.tsx b/src/components/icon.tsx
index ca1d5ab..ae9bb42 100644
--- a/src/components/icon.tsx
+++ b/src/components/icon.tsx
@@ -48,9 +48,7 @@ const IconContainer = styled.i`
  * @returns {React.ReactNode} the icon node
  */
 export const Icon = ({ name, size }: IIconProps) => (
-  <IconContainer about={size}>
-    {name}
-  </IconContainer>
+  <IconContainer about={size}>{name}</IconContainer>
 );
 
 /**
diff --git a/src/components/select.tsx b/src/components/select.tsx
index 65d4229..e77a4b4 100644
--- a/src/components/select.tsx
+++ b/src/components/select.tsx
@@ -8,8 +8,9 @@ export interface IItemProps {
 export interface ISelectProps {
   items: Array<IItemProps>;
   onChange: (item: any) => void;
-  current: string;
+  current?: string;
   className?: string;
+  testId?: string;
 }
 
 const update = (
@@ -20,18 +21,24 @@ const update = (
   onChange(items.find((item) => item.value.toString() === e.target.value));
 };
 
-const Select = ({ items, onChange, current, className }: ISelectProps) => (
+const Select = ({
+  items,
+  onChange,
+  current,
+  className,
+  testId,
+}: ISelectProps) => (
   <select
-    data-testid="select"
+    data-testid={"select" + (testId ? "-" + testId : "")}
     onChange={(e) => update(items, onChange, e)}
     className={className}
+    defaultValue={current}
   >
     {items.map(({ label, value }, index) => (
       <option
-        data-testid={"option-" + index}
+        data-testid={"option-" + (testId ? testId + "-" : "") + index}
         key={[label, index].join("")}
         value={value.toString()}
-        selected={current === label}
       >
         {label}
       </option>
diff --git a/src/components/settings.tsx b/src/components/settings.tsx
index 3c2ac9a..b40021f 100644
--- a/src/components/settings.tsx
+++ b/src/components/settings.tsx
@@ -91,7 +91,6 @@ const Settings = ({ themes, search }: ISettingsProps) => {
 
   const currentLightTheme = getTheme("light").label;
   const currentDarkTheme = getTheme("dark").label;
-  console.log(currentLightTheme, currentDarkTheme);
 
   if (themes || search) {
     return (
@@ -105,12 +104,14 @@ const Settings = ({ themes, search }: ISettingsProps) => {
                 items={themes}
                 onChange={(theme: IThemeProps) => setNewLightTheme(theme)}
                 current={currentLightTheme}
+                testId="light"
               ></ThemeSelect>
               <ThemeHeader>Dark</ThemeHeader>
               <ThemeSelect
                 items={themes}
                 onChange={(theme: IThemeProps) => setNewDarkTheme(theme)}
                 current={currentDarkTheme}
+                testId="dark"
               ></ThemeSelect>
             </FormContainer>
             <Button
diff --git a/src/lib/fetcher.tsx b/src/lib/fetcher.tsx
index 6c8ddb6..076b741 100644
--- a/src/lib/fetcher.tsx
+++ b/src/lib/fetcher.tsx
@@ -68,7 +68,7 @@ export const defaults = {
   },
   search: {
     search: {
-      placeholder: '',
+      placeholder: "",
       defaultProvider: "https://google.com/search?q=",
       providers: [],
     },
diff --git a/src/lib/theme.tsx b/src/lib/theme.tsx
index 181c783..2734b75 100644
--- a/src/lib/theme.tsx
+++ b/src/lib/theme.tsx
@@ -54,7 +54,10 @@ export const getTheme = (scheme?: string): IThemeProps => {
     currentScheme = "dark-theme";
   }
 
-  let theme = currentScheme === "dark-theme" ? localStorage.getItem("dark-theme") : localStorage.getItem("light-theme");
+  let theme =
+    currentScheme === "dark-theme"
+      ? localStorage.getItem("dark-theme")
+      : localStorage.getItem("light-theme");
   if (theme !== null) selectedTheme = JSON.parse(theme || "{}");
 
   return selectedTheme;
diff --git a/src/lib/useMediaQuery.tsx b/src/lib/useMediaQuery.tsx
index ccc7048..df1efdd 100644
--- a/src/lib/useMediaQuery.tsx
+++ b/src/lib/useMediaQuery.tsx
@@ -17,7 +17,7 @@ const useMediaQuery = (query: string) => {
   }, [matches, query]);
 
   return matches;
-}
+};
 
 export const IsDark = () => useMediaQuery("(prefers-color-scheme: dark");
 
diff --git a/src/test/app.spec.tsx b/src/test/app.spec.tsx
index 953f39c..0033368 100644
--- a/src/test/app.spec.tsx
+++ b/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();
   });
 });
diff --git a/src/test/components/greeter.spec.tsx b/src/test/components/greeter.spec.tsx
index 62caa4e..6cb6a0d 100644
--- a/src/test/components/greeter.spec.tsx
+++ b/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");
diff --git a/src/test/components/searchBar.spec.tsx b/src/test/components/searchBar.spec.tsx
index 79fae2d..6e7c132 100644
--- a/src/test/components/searchBar.spec.tsx
+++ b/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,
     };
 
diff --git a/src/test/components/settings.spec.tsx b/src/test/components/settings.spec.tsx
index 33a474b..4988cfd 100644
--- a/src/test/components/settings.spec.tsx
+++ b/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);
diff --git a/src/test/lib/theme.spec.tsx b/src/test/lib/theme.spec.tsx
index 90a0b80..7b9ba8a 100644
--- a/src/test/lib/theme.spec.tsx
+++ b/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);