Added tests

.circleci/config.yml

@@ -0,0 +1,57 @@
+version: 2.1
+
+commands:
+  install_dependencies:
+    description: "Installs dependencies and uses CircleCI's cache"
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - dependencies-{{ checksum "yarn.lock" }}
+            - dependencies-
+      - run:
+          command: |
+            yarn install
+      - save_cache:
+          paths:
+            - node_modules
+          key: dependencies-{{ checksum "yarn.lock" }}
+
+jobs:
+  style:
+    docker:
+      - image: node:latest
+    steps:
+      - install_dependencies
+      - run:
+          name: prettier
+          command: |
+            yarn prettier --check
+      - run:
+          name: lint
+          command: |
+            yarn lint
+
+  frontend:
+    docker:
+      - image: node:latest
+    steps:
+      - install_dependencies
+      - run:
+          name: typecheck
+          command: |
+            yarn typecheck
+      - run:
+          name: test
+          command: |
+            yarn test
+      - run:
+          name: coverage
+          command: |
+            yarn coverage
+
+workflows:
+  version: 2
+  tilt:
+    jobs:
+      - style

.eslintrc.js

@@ -0,0 +1,34 @@
+module.exports = {
+  extends: ["eslint:recommended", "plugin:react-hooks/recommended"],
+  rules: {
+    orderedImports: true,
+    completedDocs: [
+      true,
+      {
+        enums: true,
+        functions: {
+          visibilities: ["exported"],
+        },
+        interfaces: {
+          visibilities: ["exported"],
+        },
+        methods: {
+          tags: {
+            content: {},
+            existence: ["inheritdoc", "override"],
+          },
+        },
+        types: {
+          visibilities: ["exported"],
+        },
+        variables: {
+          visibilities: ["exported"],
+        },
+      },
+    ],
+    maxClassesPerFile: false,
+    maxLineLength: false,
+    memberOrdering: false,
+    variableName: false,
+  },
+};

.gitignore

@@ -7,6 +7,7 @@
 
 # testing
 /coverage
+__snapshots__
 
 # building
 /build
@@ -21,3 +22,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+

.prettierrc.js

@@ -0,0 +1,21 @@
+module.exports = {
+  bracketSpacing: true,
+  printWidth: 80,
+  parser: "typescript",
+  trailingComma: "all",
+  arrowParens: "always",
+  overrides: [
+    {
+      files: "README.md",
+      options: {
+        parser: "markdown",
+      },
+    },
+    {
+      files: "*.json",
+      options: {
+        parser: "json",
+      }
+    }
+  ],
+};

codecov.yml

@@ -0,0 +1,16 @@
+coverage:
+  status:
+    project:
+      default: off
+      dashboard:
+        target: 80%
+        flags: dashboard
+
+flags:
+  dashboard:
+    paths:
+      - src/
+      - data/
+
+ignore:
+  - node_modules

package.json

@@ -8,26 +8,42 @@
   ],
   "private": false,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.11.10",
-    "@testing-library/react": "^11.2.5",
-    "@testing-library/user-event": "^13.0.6",
-    "@types/jest": "^26.0.22",
     "@types/node": "^14.14.37",
     "@types/react-dom": "^17.0.3",
     "@types/react-select": "^4.0.13",
     "@types/styled-components": "^5.1.9",
+    "browserslist": "^4.16.6",
+    "http-server": "^0.12.3",
+    "npm-run-all": "^4.1.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "^4.0.3",
     "react-select": "^4.3.0",
     "styled-components": "^5.2.1",
     "typescript": "^4.2.3"
   },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.10",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/user-event": "^13.0.6",
+    "@types/jest": "^26.0.22",
+    "codecov": "^3.8.2",
+    "eslint": "^7.28.0",
+    "eslint-plugin-react-hooks": "^4.2.0",
+    "prettier": "^2.3.1"
+  },
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "coverage": "codecov -f coverage/*.json -F dashboard",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "typecheck": "tsc --noEmit",
+    "eject": "react-scripts eject",
+    "lint": "eslint --config .eslintrc.js",
+    "prettier": "prettier --config .prettierrc.js '{data,src}/**/*.{json,ts,tsx}'",
+    "http-server:data": "http-server ./ -c-1",
+    "http-server:app": "http-server ./build --proxy http://localhost:8080 --port 3000",
+    "serve:production": "npm-run-all --parallel http-server:data http-server:app"
   },
   "eslintConfig": {
     "extends": "react-app"

src/app.tsx

@@ -3,7 +3,7 @@ import { createGlobalStyle } from "styled-components";
 import SearchBar from "./components/searchBar";
 import Greeter from "./components/greeter";
 import AppList from "./components/appList";
-import BookmarkList from "./components/bookmarkList";
+import BookmarkList from "./components/bookmarks";
 import Settings from "./components/settings";
 import Imprint from "./components/imprint";
 
@@ -29,15 +29,21 @@ const GlobalStyle = createGlobalStyle`
  * Renders the entire app by calling individual components
  */
 const App = () => {
-
-  const { appData, bookmarkData, searchProviderData, themeData, imprintData, greeterData } = useFetcher();
+  const {
+    appData,
+    bookmarkData,
+    searchProviderData,
+    themeData,
+    imprintData,
+    greeterData,
+  } = useFetcher();
 
   return (
     <>
       <GlobalStyle />
       <div>
         <SearchBar providers={searchProviderData?.providers} />
-        {!themeData.error && !searchProviderData.error && (
+        {(!themeData.error || !searchProviderData.error) && (
           <Settings
             themes={themeData?.themes}
             providers={searchProviderData?.providers}

src/components/app.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
 import Icon from "./icon";
 import styled from "styled-components";
 import selectedTheme from "../lib/theme";
@@ -51,16 +51,17 @@ export interface IAppProps {
 
 /**
  * Renders a single app shortcut
- * @param {IAppProps} props - The props of the given app
+ * @param {IAppProps} props the props of the given app
+ * @returns {React.ReactNode} the child node for the given app
  */
-export const App = ({ name, icon, url, displayURL, newTab }: IAppProps) => {
-
-  useEffect(() => { console.log(newTab) }, [newTab])
-
-  const linkAttrs = (newTab !== undefined && newTab) ? {
-    target: '_blank',
-    rel: 'noopener noreferrer',
-  } : {};
+const App = ({ name, icon, url, displayURL, newTab }: IAppProps) => {
+  const linkAttrs =
+    newTab !== undefined && newTab
+      ? {
+          target: "_blank",
+          rel: "noopener noreferrer",
+        }
+      : {};
 
   return (
     <AppContainer href={url} {...linkAttrs}>
@@ -73,4 +74,6 @@ export const App = ({ name, icon, url, displayURL, newTab }: IAppProps) => {
       </DetailsContainer>
     </AppContainer>
   );
-}
+};
+
+export default App;

src/components/appCategory.tsx

@@ -1,6 +1,5 @@
-import React from "react";
 import styled from "styled-components";
-import { App, IAppProps } from "./app";
+import App, { IAppProps } from "./app";
 import { ItemList, Item, SubHeadline } from "./elements";
 
 const CategoryHeadline = styled(SubHeadline)`
@@ -18,9 +17,10 @@ export interface IAppCategoryProps {
 
 /**
  * Renders one app category
- * @param {IAppCategoryProps} props - The props of the given category
+ * @param {IAppCategoryProps} props props of the given category
+ * @returns {React.ReactNode} the app category node
  */
-export const AppCategory = ({ name, items }: IAppCategoryProps) => (
+const AppCategory = ({ name, items }: IAppCategoryProps) => (
   <CategoryContainer>
     {name && <CategoryHeadline>{name}</CategoryHeadline>}
     <ItemList>
@@ -38,3 +38,5 @@ export const AppCategory = ({ name, items }: IAppCategoryProps) => (
     </ItemList>
   </CategoryContainer>
 );
+
+export default AppCategory;

src/components/appList.tsx

@@ -1,4 +1,4 @@
-import { AppCategory, IAppCategoryProps } from "./appCategory";
+import AppCategory, { IAppCategoryProps } from "./appCategory";
 import { IAppProps } from "./app";
 
 import { Headline, ListContainer } from "./elements";
@@ -10,7 +10,8 @@ export interface IAppListProps {
 
 /**
  * Renders one list containing all app categories and uncategorized apps
- * @param {IAppListProps} props - The props of the given list of apps
+ * @param {IAppListProps} props props of the given list of apps
+ * @returns {React.ReactNode} the app list component
  */
 const AppList = ({ categories, apps }: IAppListProps) => (
   <ListContainer>
@@ -20,10 +21,7 @@ const AppList = ({ categories, apps }: IAppListProps) => (
         <AppCategory key={[name, idx].join("")} name={name} items={items} />
       ))}
     {apps && (
-      <AppCategory
-        name={categories ? "Uncategorized apps" : ""}
-        items={apps}
-      />
+      <AppCategory name={categories ? "Uncategorized apps" : ""} items={apps} />
     )}
   </ListContainer>
 );