Update tests, apply formatting

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;

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}>
+  <IconContainer about={size}>{name}</IconContainer>
-    {name}
-  </IconContainer>
 );
 
 /**

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>

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

src/lib/fetcher.tsx

@@ -68,7 +68,7 @@ export const defaults = {
   },
   search: {
     search: {
-      placeholder: '',
+      placeholder: "",
       defaultProvider: "https://google.com/search?q=",
       providers: [],
     },

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;

src/lib/useMediaQuery.tsx

@@ -17,7 +17,7 @@ const useMediaQuery = (query: string) => {
   }, [matches, query]);
 
   return matches;
-}
+};
 
 export const IsDark = () => useMediaQuery("(prefers-color-scheme: dark");
 

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);
+    setTheme("light", props);
-    expect(window.localStorage.setItem).toHaveBeenCalledTimes(1);
+    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);