Add tests

src/components/app.tsx

@@ -1,4 +1,3 @@
-import { useEffect } from "react";
 import Icon from "./icon";
 import styled from "styled-components";
 import selectedTheme from "../lib/theme";

src/components/icon.tsx

@@ -8,6 +8,7 @@ interface IIconProps {
 }
 
 interface IIconButtonProps {
+  testid?: string;
   icon: string;
   onClick: (e: React.FormEvent) => void;
 }
@@ -38,7 +39,7 @@ const IconContainer = styled.i`
   text-rendering: optimizeLegibility;
   -moz-osx-font-smoothing: grayscale;
   font-feature-settings: "liga";
-  font-size: ${(props) => props.theme};
+  font-size: ${(props) => props.about};
   color: ${(props) => props.color};
 `;
 
@@ -48,7 +49,7 @@ const IconContainer = styled.i`
  * @returns {React.ReactNode} the icon node
  */
 export const Icon = ({ name, size }: IIconProps) => (
-  <IconContainer color={selectedTheme.mainColor} theme={size}>
+  <IconContainer color={selectedTheme.mainColor} about={size}>
     {name}
   </IconContainer>
 );
@@ -58,8 +59,8 @@ export const Icon = ({ name, size }: IIconProps) => (
  * @param {IIconProps} props - The props of the given IconButton
  * @returns {React.ReactNode} the icon button node
  */
-export const IconButton = ({ icon, onClick }: IIconButtonProps) => (
-  <StyledButton onClick={onClick}>
+export const IconButton = ({ testid, icon, onClick }: IIconButtonProps) => (
+  <StyledButton data-testid={testid} onClick={onClick}>
     <Icon name={icon} />
   </StyledButton>
 );

src/components/imprint.tsx

@@ -41,7 +41,7 @@ export interface IImprintProps {
   text: string;
 }
 
-interface IImprintComponentProps {
+export interface IImprintComponentProps {
   imprint: IImprintProps;
 }
 
@@ -59,7 +59,7 @@ interface IImprintFieldProps {
  * @param {IImprintFieldComponentProps} props data for the field
  * @returns {React.ReactNode} the imprint field component
  */
-const ImprintField = ({ field }: IImprintFieldComponentProps) => (
+export const ImprintField = ({ field }: IImprintFieldComponentProps) => (
   <Link href={field.link}>{field.text}</Link>
 );
 
@@ -82,8 +82,10 @@ const Imprint = ({ imprint }: IImprintComponentProps) => (
             condition={!window.location.href.endsWith("#imprint")}
             onClose={() => {
               if (window.location.href.endsWith("#imprint")) {
-                let location = window.location.href.replace("#imprint", "");
-                window.location.href = location;
+                window.location.href = window.location.href.replace(
+                  "#imprint",
+                  "",
+                );
               }
             }}
           >

src/components/modal.tsx

@@ -38,7 +38,7 @@ const TitleContainer = styled.div`
   justify-content: space-between;
 `;
 
-interface IModalProps {
+export interface IModalProps {
   element: string;
   icon?: string;
   text?: string;
@@ -72,15 +72,27 @@ const Modal = ({
   return (
     <>
       {element === "icon" && (
-        <IconButton icon={icon ?? ""} onClick={() => closeModal()} />
+        <IconButton
+          icon={icon ?? ""}
+          testid="toggle-button"
+          onClick={() => closeModal()}
+        />
       )}
 
-      {element === "text" && <Text onClick={() => closeModal()}>{text}</Text>}
+      {element === "text" && (
+        <Text data-testid="toggle-button" onClick={() => closeModal()}>
+          {text}
+        </Text>
+      )}
 
       <ModalContainer hidden={modalHidden}>
         <TitleContainer>
           <Headline>{title}</Headline>
-          <IconButton icon="close" onClick={() => closeModal()} />
+          <IconButton
+            icon="close"
+            testid="close-button"
+            onClick={() => closeModal()}
+          />
         </TitleContainer>
         {children}
       </ModalContainer>

src/components/searchBar.tsx

@@ -43,10 +43,35 @@ export interface ISearchProviderProps {
   prefix: string;
 }
 
-interface ISearchBarProps {
+export interface ISearchBarProps {
   providers: Array<ISearchProviderProps> | undefined;
 }
 
+export const handleQueryWithProvider = (
+  providers: Array<ISearchProviderProps> | undefined,
+  query: string,
+) => {
+  let queryArray: Array<string> = query.split(" ");
+  let prefix: string = queryArray[0];
+
+  queryArray.shift();
+
+  let searchQuery: string = queryArray.join(" ");
+
+  let providerFound: boolean = false;
+  if (providers) {
+    providers.forEach((provider: ISearchProviderProps) => {
+      if (provider.prefix === prefix) {
+        providerFound = true;
+        window.location.href = provider.url + searchQuery;
+      }
+    });
+  }
+
+  if (!providerFound)
+    window.location.href = "https://google.com/search?q=" + query;
+};
+
 /**
  * Renders a search bar
  * @param {ISearchBarProps} props - The search providers for the search bar to use
@@ -61,7 +86,7 @@ const SearchBar = ({ providers }: ISearchBarProps) => {
     var query: string = input || "";
 
     if (query.split(" ")[0].includes("/")) {
-      handleQueryWithProvider(query);
+      handleQueryWithProvider(providers, query);
     } else {
       window.location.href = "https://google.com/search?q=" + query;
     }
@@ -69,32 +94,11 @@ const SearchBar = ({ providers }: ISearchBarProps) => {
     e.preventDefault();
   };
 
-  const handleQueryWithProvider = (query: string) => {
-    let queryArray: Array<string> = query.split(" ");
-    let prefix: string = queryArray[0];
-
-    queryArray.shift();
-
-    let searchQuery: string = queryArray.join(" ");
-
-    let providerFound: boolean = false;
-    if (providers) {
-      providers.forEach((provider: ISearchProviderProps) => {
-        if (provider.prefix === prefix) {
-          providerFound = true;
-          window.location.href = provider.url + searchQuery;
-        }
-      });
-    }
-
-    if (!providerFound)
-      window.location.href = "https://google.com/search?q=" + query;
-  };
-
   return (
     <Search onSubmit={(e) => handleSearchQuery(e)}>
       <SearchInput
         type="text"
+        data-testid="search-input"
         value={input}
         onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
           setInput(e.target.value)
@@ -102,12 +106,17 @@ const SearchBar = ({ providers }: ISearchBarProps) => {
       ></SearchInput>
       <SearchButton
         type="button"
+        data-testid="search-clear"
         onClick={() => setInput("")}
         hidden={buttonsHidden}
       >
         Clear
       </SearchButton>
-      <SearchButton type="submit" hidden={buttonsHidden}>
+      <SearchButton
+        type="submit"
+        data-testid="search-submit"
+        hidden={buttonsHidden}
+      >
         Search
       </SearchButton>
     </Search>

src/components/settings.tsx

@@ -4,47 +4,51 @@ import styled from "styled-components";
 import Select, { ValueType } from "react-select";
 
 import { ISearchProviderProps } from "./searchBar";
-import selectedTheme, { setTheme, IThemeProps } from "../lib/theme";
+import selectedTheme, {
+  defaultTheme,
+  setTheme,
+  IThemeProps,
+} from "../lib/theme";
 import { Button, SubHeadline } from "./elements";
 
 import Modal from "./modal";
 
-const FormContainer = styled.div`
+export const FormContainer = styled.div`
   display: grid;
   grid-template-columns: auto auto auto;
 `;
 
-const Table = styled.table`
+export const Table = styled.table`
   font-weight: 400;
   background: none;
   color: ${selectedTheme.mainColor};
 `;
 
-const TableRow = styled.tr`
+export const TableRow = styled.tr`
   border-bottom: 1px solid ${selectedTheme.mainColor};
 `;
 
-const TableCell = styled.td`
+export const TableCell = styled.td`
   background: none;
   padding-top: 0.5rem;
 `;
 
-const HeadCell = styled.th`
+export const HeadCell = styled.th`
   font-weight: 700;
   background: none;
 `;
 
-const Section = styled.div`
+export const Section = styled.div`
   padding: 1rem 0;
 `;
 
-const SectionHeadline = styled(SubHeadline)`
+export const SectionHeadline = styled(SubHeadline)`
   width: 100%;
   border-bottom: 1px solid ${selectedTheme.accentColor};
   margin-bottom: 0.5rem;
 `;
 
-const SelectorStyle: any = {
+export const SelectorStyle: any = {
   container: (base: any): any => ({
     ...base,
     margin: "0 2px",
@@ -113,7 +117,7 @@ interface ISettingsProps {
  * @param {Array<ISearchProviderProps>} providers - the list of search providers
  */
 const Settings = ({ themes, providers }: ISettingsProps) => {
-  const [newTheme, setNewTheme] = useState<IThemeProps>();
+  const [newTheme, setNewTheme] = useState<IThemeProps>(defaultTheme);
 
   if (themes || providers) {
     return (
@@ -123,6 +127,7 @@ const Settings = ({ themes, providers }: ISettingsProps) => {
             <SectionHeadline>Theme:</SectionHeadline>
             <FormContainer>
               <Select
+                classNamePrefix="list"
                 options={themes}
                 defaultValue={selectedTheme}
                 onChange={(e: ValueType<IThemeProps, false>) => {
@@ -130,10 +135,18 @@ const Settings = ({ themes, providers }: ISettingsProps) => {
                 }}
                 styles={SelectorStyle}
               />
-              <Button onClick={() => setTheme(JSON.stringify(newTheme))}>
+              <Button
+                data-testid="button-submit"
+                onClick={() => setTheme(newTheme)}
+              >
                 Apply
               </Button>
-              <Button onClick={() => window.location.reload()}>Refresh</Button>
+              <Button
+                data-testid="button-refresh"
+                onClick={() => window.location.reload()}
+              >
+                Refresh
+              </Button>
             </FormContainer>
           </Section>
         )}