Create custom select, update tests

src/app.tsx

@@ -43,13 +43,12 @@ const App = () => {
       <GlobalStyle />
       <div>
         <SearchBar search={searchProviderData?.search} />
-        {!themeData.error ||
-          (!searchProviderData.error && (
-            <Settings
-              themes={themeData?.themes}
-              search={searchProviderData?.search}
-            />
-          ))}
+        {(!themeData.error || !searchProviderData.error) && (
+          <Settings
+            themes={themeData?.themes}
+            search={searchProviderData?.search}
+          />
+        )}
         <Greeter data={greeterData.greeter} />
         {!appData.error && (
           <AppList apps={appData.apps} categories={appData.categories} />

src/components/app.tsx

@@ -27,7 +27,7 @@ const DetailsContainer = styled.div`
 `;
 
 const AppName = styled.div`
-  a:hover & {
+  a:hover {
     text-decoration: underline;
   }
 `;

src/components/appCategory.tsx

@@ -24,14 +24,14 @@ const AppCategory = ({ name, items }: IAppCategoryProps) => (
   <CategoryContainer>
     {name && <CategoryHeadline>{name}</CategoryHeadline>}
     <ItemList>
-      {items.map((app, idx) => (
-        <Item key={[app.name, idx].join("")}>
+      {items.map(({ name, icon, displayURL, newTab, url }, index) => (
+        <Item key={[name, index].join("")}>
           <App
-            name={app.name}
-            icon={app.icon}
-            url={app.url}
-            displayURL={app.displayURL}
-            newTab={app.newTab}
+            name={name}
+            icon={icon}
+            url={url}
+            displayURL={displayURL}
+            newTab={newTab}
           />
         </Item>
       ))}

src/components/appList.tsx

@@ -19,8 +19,12 @@ const AppList = ({ categories, apps }: IAppListProps) => {
       <ListContainer>
         <Headline>Applications</Headline>
         {categories &&
-          categories.map(({ name, items }, idx) => (
-            <AppCategory key={[name, idx].join("")} name={name} items={items} />
+          categories.map(({ name, items }, index) => (
+            <AppCategory
+              key={[name, index].join("")}
+              name={name}
+              items={items}
+            />
           ))}
         {apps && (
           <AppCategory

src/components/bookmarks.tsx

@@ -50,8 +50,8 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => (
   <Item>
     <GroupContainer>
       <SubHeadline>{name}</SubHeadline>
-      {items.map(({ name, url }, idx) => (
-        <Bookmark key={[name, idx].join("")} href={url}>
+      {items.map(({ name, url }, index) => (
+        <Bookmark key={[name, index].join("")} href={url}>
           {name}
         </Bookmark>
       ))}
@@ -68,8 +68,8 @@ const BookmarkList = ({ groups }: IBookmarkListProps) => (
   <ListContainer>
     <Headline>Bookmarks</Headline>
     <ItemList>
-      {groups.map(({ name, items }, idx) => (
-        <BookmarkGroup key={[name, idx].join("")} name={name} items={items} />
+      {groups.map(({ name, items }, index) => (
+        <BookmarkGroup key={[name, index].join("")} name={name} items={items} />
       ))}
     </ItemList>
   </ListContainer>

src/components/elements.tsx

@@ -42,6 +42,7 @@ export const Item = styled.li`
 
 export const Button = styled.button`
   text-transform: uppercase;
+  font-family: Roboto, sans-serif;
   font-weight: 400;
   border: 1px solid ${selectedTheme.mainColor};
   color: ${selectedTheme.mainColor};

src/components/select.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+
+export interface IItemProps {
+  label: string;
+  value: any;
+}
+
+export interface ISelectProps {
+  items: Array<IItemProps>;
+  onChange: (item: any) => void;
+  className?: string;
+}
+
+const update = (
+  items: Array<IItemProps>,
+  onChange: (item: any) => void,
+  e: React.ChangeEvent<HTMLSelectElement>,
+) => {
+  onChange(items.find((item) => item.value.toString() === e.target.value));
+};
+
+const Select = ({ items, onChange, className }: ISelectProps) => (
+  <select
+    data-testid="select"
+    onChange={(e) => update(items, onChange, e)}
+    className={className}
+  >
+    {items.map(({ label, value }, index) => (
+      <option
+        data-testid={"option-" + index}
+        key={[label, index].join("")}
+        value={value.toString()}
+      >
+        {label}
+      </option>
+    ))}
+  </select>
+);
+
+export default Select;

src/components/settings.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import styled from "styled-components";
 
-import Select, { ValueType } from "react-select";
+import Select, { IItemProps } from "./select";
 
 import { ISearchProps } from "./searchBar";
 import selectedTheme, { setTheme, IThemeProps } from "../lib/theme";
@@ -55,63 +55,21 @@ const Code = styled.p`
   color: ${selectedTheme.accentColor};
 `;
 
-export const SelectorStyle: any = {
-  container: (base: any): any => ({
-    ...base,
-    margin: "0 2px",
-  }),
-  control: (base: any): any => ({
-    ...base,
-    fontWeight: 500,
-    color: selectedTheme.mainColor,
-    textTransform: "uppercase",
-    width: "12rem",
-    background: "none",
-    borderRadius: 0,
-    border: "1px solid",
-    borderColor: selectedTheme.mainColor,
-    boxShadow: "none",
-    "&:hover": {
-      border: "1px solid",
-      borderColor: selectedTheme.mainColor,
-    },
-  }),
-  dropdownIndicator: (base: any): any => ({
-    ...base,
-    color: selectedTheme.mainColor,
-    "&:hover": {
-      color: selectedTheme.mainColor,
-    },
-  }),
-  indicatorSeparator: () => ({
-    display: "none",
-  }),
-  menu: (base: any): any => ({
-    ...base,
-    backgroundColor: selectedTheme.backgroundColor,
-    border: "1px solid " + selectedTheme.mainColor,
-    borderRadius: 0,
-    boxShadow: "none",
-    margin: "4px 0",
-  }),
-  option: (base: any): any => ({
-    ...base,
-    fontWeight: 500,
-    color: selectedTheme.mainColor,
-    textTransform: "uppercase",
-    borderRadius: 0,
-    boxShadow: "none",
-    backgroundColor: selectedTheme.backgroundColor,
-    "&:hover": {
-      backgroundColor: selectedTheme.mainColor,
-      color: selectedTheme.backgroundColor,
-    },
-  }),
-  singleValue: (base: any): any => ({
-    ...base,
-    color: selectedTheme.mainColor,
-  }),
-};
+const ThemeSelect = styled(Select)`
+  -webkit-appearance: button;
+  -moz-appearance: button;
+
+  text-transform: uppercase;
+  font-family: Roboto, sans-serif;
+  font-weight: 400;
+  border: 1px solid ${selectedTheme.mainColor};
+  color: ${selectedTheme.mainColor};
+  background: none;
+
+  & > option {
+    background-color: ${selectedTheme.backgroundColor};
+  }
+`;
 
 interface ISettingsProps {
   themes: Array<IThemeProps> | undefined;
@@ -133,15 +91,10 @@ const Settings = ({ themes, search }: ISettingsProps) => {
           <Section>
             <SectionHeadline>Theme:</SectionHeadline>
             <FormContainer>
-              <Select
-                classNamePrefix="list"
-                options={themes}
-                defaultValue={selectedTheme}
-                onChange={(e: ValueType<IThemeProps, false>) => {
-                  if (e !== null && e !== undefined) setNewTheme(e);
-                }}
-                styles={SelectorStyle}
-              />
+              <ThemeSelect
+                items={themes}
+                onChange={(theme: IThemeProps) => setNewTheme(theme)}
+              ></ThemeSelect>
               <Button
                 data-testid="button-submit"
                 onClick={() => {
@@ -174,10 +127,10 @@ const Settings = ({ themes, search }: ISettingsProps) => {
                       <HeadCell>Search Provider</HeadCell>
                       <HeadCell>Prefix</HeadCell>
                     </TableRow>
-                    {search.providers.map((provider, index) => (
-                      <TableRow key={provider.name + index}>
-                        <TableCell>{provider.name}</TableCell>
-                        <TableCell>{provider.prefix}</TableCell>
+                    {search.providers.map(({ name, prefix }, index) => (
+                      <TableRow key={name + index}>
+                        <TableCell>{name}</TableCell>
+                        <TableCell>{prefix}</TableCell>
                       </TableRow>
                     ))}
                   </tbody>

src/data/greeter.json

@@ -42,7 +42,7 @@
       {
         "greeting": "Good evening!",
         "start": 18,
-        "end": 0
+        "end": 24
       }
     ],
     "dateformat": "%wd, %m %d%e %y"

src/lib/fetcher.d.ts

@@ -1,5 +1,5 @@
 import { ISearchProps } from "../components/searchBar";
-import { IBookmarkGroupProps } from "../components/bookmarkGroup";
+import { IBookmarkGroupProps } from "../components/bookmarks";
 import { IAppCategoryProps } from "../components/appCategory";
 import { IAppProps } from "../components/app";
 import { IThemeProps } from "./theme";

src/lib/theme.tsx

@@ -1,6 +1,6 @@
-export interface IThemeProps {
-  label: string;
-  value: number;
+import { IItemProps } from "../components/select";
+
+export interface IThemeProps extends IItemProps {
   mainColor: string;
   accentColor: string;
   backgroundColor: string;

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);
   });
 });