From 942cba97da6dc2a05fd4159acc67506c6bea9d75 Mon Sep 17 00:00:00 2001 From: Bastian Meissner Date: Sun, 13 Feb 2022 20:57:26 +0100 Subject: [PATCH] Replace useFetcher with useFetch. --- src/app.tsx | 34 ++--- src/components/bookmarks.tsx | 30 ++-- src/components/greeter.tsx | 30 ++-- src/components/imprint.tsx | 78 +++++----- src/components/searchBar.tsx | 4 +- src/components/select.tsx | 32 ++-- src/components/settings.tsx | 171 +++++++++++---------- src/lib/fetch.d.ts | 31 ---- src/lib/fetch.tsx | 91 ----------- src/lib/fetcher.d.ts | 32 ---- src/lib/fetcher.tsx | 278 ---------------------------------- src/lib/useFetch.tsx | 95 ++++++++++++ src/lib/useTheme.tsx | 4 + src/test/lib/fetcher.spec.tsx | 46 ------ src/test/lib/theme.spec.tsx | 76 ---------- 15 files changed, 292 insertions(+), 740 deletions(-) delete mode 100644 src/lib/fetch.d.ts delete mode 100644 src/lib/fetch.tsx delete mode 100644 src/lib/fetcher.d.ts delete mode 100644 src/lib/fetcher.tsx create mode 100644 src/lib/useFetch.tsx delete mode 100644 src/test/lib/fetcher.spec.tsx delete mode 100644 src/test/lib/theme.spec.tsx diff --git a/src/app.tsx b/src/app.tsx index 2c5bfe1..884f372 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -8,7 +8,7 @@ import Settings from "./components/settings"; import Imprint from "./components/imprint"; import { IThemeProps, getTheme, setScheme } from "./lib/useTheme"; -import useFetcher from "./lib/fetcher"; +import useFetch from "./lib/useFetch"; import useMediaQuery from "./lib/useMediaQuery"; export const GlobalStyle = createGlobalStyle<{ theme: IThemeProps }>` @@ -33,37 +33,29 @@ const App = () => { const { appData, bookmarkData, - searchProviderData, + searchData, themeData, imprintData, greeterData, - } = useFetcher(); + } = useFetch(); const theme = getTheme(); let isDark = useMediaQuery("(prefers-color-scheme: dark)"); - if (isDark) { - setScheme("dark-theme"); - } else { - setScheme("light-theme"); - } + setScheme(isDark ? "dark-theme" : "light-theme"); return (
- - {(!themeData.error || !searchProviderData.error) && ( - - )} - - {!appData.error && ( - - )} - {!bookmarkData.error && } - {!imprintData.error && } + + + + + +
); diff --git a/src/components/bookmarks.tsx b/src/components/bookmarks.tsx index bf0c0ee..05b70f5 100644 --- a/src/components/bookmarks.tsx +++ b/src/components/bookmarks.tsx @@ -38,7 +38,7 @@ export interface IBookmarkGroupProps { } export interface IBookmarkListProps { - groups: Array; + groups?: Array; } export const Bookmark = ({ name, url, newTab }: IBookmarkProps) => { @@ -83,15 +83,23 @@ export const BookmarkGroup = ({ name, items }: IBookmarkGroupProps) => ( * @param {IBookmarkListProps} props props of the given bookmark list * @returns {React.ReactNode} the bookmark list component */ -const BookmarkList = ({ groups }: IBookmarkListProps) => ( - - Bookmarks - - {groups.map(({ name, items }, index) => ( - - ))} - - -); +const BookmarkList = ({ groups }: IBookmarkListProps) => { + if (groups === undefined || groups.length <= 0) return <>; + + return ( + + Bookmarks + + {groups.map(({ name, items }, index) => ( + + ))} + + + ); +}; export default BookmarkList; diff --git a/src/components/greeter.tsx b/src/components/greeter.tsx index 441680e..50c1b9b 100644 --- a/src/components/greeter.tsx +++ b/src/components/greeter.tsx @@ -20,7 +20,11 @@ const DateText = styled.h3` `; export interface IGreeterComponentProps { - data: IGreeterProps; + greeter?: IGreeterDataProps; +} + +export interface IGreeterDataProps { + greeter: IGreeterProps; } export interface IGreeterProps { @@ -114,13 +118,21 @@ export const getDateString = ( * @param {IGreeterComponentProps} data required greeter data * @returns {React.ReactNode} the greeter */ -const Greeter = ({ data }: IGreeterComponentProps) => ( - - - {getDateString(data.days, data.months, data.dateformat)} - - {getGreeting(data.greetings)} - -); +const Greeter = ({ greeter }: IGreeterComponentProps) => { + if (greeter === undefined) return <>; + + return ( + + + {getDateString( + greeter.greeter.days, + greeter.greeter.months, + greeter.greeter.dateformat, + )} + + {getGreeting(greeter.greeter.greetings)} + + ); +}; export default Greeter; diff --git a/src/components/imprint.tsx b/src/components/imprint.tsx index 0331646..3694d4b 100644 --- a/src/components/imprint.tsx +++ b/src/components/imprint.tsx @@ -40,7 +40,7 @@ export interface IImprintProps { } export interface IImprintComponentProps { - imprint: IImprintProps; + imprint?: IImprintProps; } interface IImprintFieldComponentProps { @@ -72,41 +72,45 @@ export const onClose = () => { * @param {IImprintProps} props contents of the imprint * @returns {React.ReactNode} the imprint node */ -const Imprint = ({ imprint }: IImprintComponentProps) => ( - <> - - About - - - Imprint - -
- - Information in accordance with section 5 TMG - - <> - {imprint.name && } - {imprint.address && } - {imprint.email && } - {imprint.phone && } - {imprint.url && } - -
-
- Imprint - {imprint.text && {imprint.text}} -
- - - - - -); +const Imprint = ({ imprint }: IImprintComponentProps) => { + if (imprint === undefined) return <>; + + return ( + <> + + About + + + Imprint + +
+ + Information in accordance with section 5 TMG + + <> + {imprint.name && } + {imprint.address && } + {imprint.email && } + {imprint.phone && } + {imprint.url && } + +
+
+ Imprint + {imprint.text && {imprint.text}} +
+ + + + + + ); +}; export default Imprint; diff --git a/src/components/searchBar.tsx b/src/components/searchBar.tsx index a38479e..beb14a8 100644 --- a/src/components/searchBar.tsx +++ b/src/components/searchBar.tsx @@ -48,7 +48,7 @@ export interface ISearchProps { } interface ISearchBarProps { - search: ISearchProps; + search?: ISearchProps; } export const handleQueryWithProvider = ( @@ -85,6 +85,8 @@ const SearchBar = ({ search }: ISearchBarProps) => { useEffect(() => setButtonsHidden(input === ""), [input]); + if (search === undefined) return <>; + const handleSearchQuery = (e: React.FormEvent) => { var query: string = input || ""; diff --git a/src/components/select.tsx b/src/components/select.tsx index 5c6d77e..7e6d531 100644 --- a/src/components/select.tsx +++ b/src/components/select.tsx @@ -46,29 +46,15 @@ const Select = ({ className={className} value={selected} > - {items.map(({ label, value }, index) => { - if (label === current) { - return ( - - ); - } else { - return ( - - ); - } - })} + {items.map(({ label, value }, index) => ( + + ))} ); }; diff --git a/src/components/settings.tsx b/src/components/settings.tsx index 58845af..136ccdd 100644 --- a/src/components/settings.tsx +++ b/src/components/settings.tsx @@ -4,7 +4,12 @@ import styled from "styled-components"; import Select from "./select"; import { ISearchProps } from "./searchBar"; -import { setTheme, IThemeProps, getTheme } from "../lib/useTheme"; +import { + setTheme, + IThemeProps, + IThemeDataProps, + getTheme, +} from "../lib/useTheme"; import { Button, SubHeadline } from "./elements"; import Modal from "./modal"; @@ -88,13 +93,13 @@ const ContentContainer = styled.div` `; interface ISettingsProps { - themes: Array | undefined; - search: ISearchProps | undefined; + themes?: IThemeDataProps; + search?: ISearchProps; } /** * Handles the settings-modal - * @param {Array} themes - the list of themes a user can select between + * @param {IThemeDataProps} themes - the list of themes a user can select between * @param {ISearchProps} search - the list of search providers */ const Settings = ({ themes, search }: ISettingsProps) => { @@ -104,87 +109,85 @@ const Settings = ({ themes, search }: ISettingsProps) => { const currentLightTheme = getTheme("light").value; const currentDarkTheme = getTheme("dark").value; - if (themes || search) { - return ( - - - {themes && ( -
- Theme - -
- Light - setNewLightTheme(theme)} - current={currentLightTheme} - testId="light" - > -
-
- Dark - setNewDarkTheme(theme)} - current={currentDarkTheme} - testId="dark" - > -
-
- -
-
- -
- -
- )} - {search && ( -
- Search Providers - <> - Default Search Provider - {search.defaultProvider} - - <> - {search.providers && ( - - - - Search Provider - Prefix + if (themes === undefined && search === undefined) return <>; + + return ( + + + {themes !== undefined && ( +
+ Theme + +
+ Light + setNewLightTheme(theme)} + current={currentLightTheme} + testId="light" + > +
+
+ Dark + setNewDarkTheme(theme)} + current={currentDarkTheme} + testId="dark" + > +
+
+ +
+
+ +
+ +
+ )} + {search !== undefined && ( +
+ Search Providers + <> + Default Search Provider + {search.defaultProvider} + + <> + {search.providers && ( +
+ + + Search Provider + Prefix + + {search.providers.map(({ name, prefix }, index) => ( + + {name} + {prefix} - {search.providers.map(({ name, prefix }, index) => ( - - {name} - {prefix} - - ))} - -
- )} - -
- )} - - - ); - } else { - return <>; - } + ))} + + + )} + + + )} + + + ); }; export default Settings; diff --git a/src/lib/fetch.d.ts b/src/lib/fetch.d.ts deleted file mode 100644 index 1926e3a..0000000 --- a/src/lib/fetch.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { ISearchProps } from "../components/searchBar"; -import { IBookmarkGroupProps } from "../components/bookmarks"; -import { IAppProps, IAppCategoryProps } from "../components/apps"; -import { IThemeProps } from "./theme"; -import { IImprintProps } from "../components/imprint"; -import { IGreeterProps } from "../components/greeter"; - -declare module "../data/apps.json" { - export const categories: IAppCategoryProps[]; - export const apps: IAppProps[]; -} - -declare module "../data/search.json" { - export const search: ISearchProps; -} - -declare module "../data/bookmarks.json" { - export const groups: IBookmarkGroupProps[]; -} - -declare module "../data/themes.json" { - export const themes: IThemeProps[]; -} - -declare module "../data/imprint.json" { - export const imprint: IImprintProps; -} - -declare module "../data/greeter.json" { - export const greeter: IGreeterProps; -} diff --git a/src/lib/fetch.tsx b/src/lib/fetch.tsx deleted file mode 100644 index b38994e..0000000 --- a/src/lib/fetch.tsx +++ /dev/null @@ -1,91 +0,0 @@ -import React, { useCallback, useEffect, useState } from "react"; -import { IAppListProps } from "../components/apps"; -import { IThemeProps } from "./useTheme"; -import { IBookmarkListProps } from "../components/bookmarks"; -import { ISearchProps } from "../components/searchBar"; -import { IImprintProps } from "../components/imprint"; -import { IGreeterProps } from "../components/greeter"; - -const inProduction = process.env.NODE_ENV === "production"; - -interface IFetchItemProps { - url: string; - setHook?: React.Dispatch>; -} - -interface IFetchListProps { - app: IFetchItemProps; - bookmarks: IFetchItemProps; - greeter: IFetchItemProps; - imprint: IFetchItemProps; - search: IFetchItemProps; - themes: IFetchItemProps; -} - -let fetchList: IFetchListProps = { - app: { url: "/data/app.json" }, - bookmarks: { url: "/data/bookmarks.json" }, - greeter: { url: "/data/greeter.json" }, - imprint: { url: "/data/imprint.json" }, - search: { url: "/data/search.json" }, - themes: { url: "/data/themes.json" }, -}; - -export const handleResponse = (response: Response, type: string) => { - if (response.ok) return response.json(); - throw new Error("Error fetching " + type + " data"); -}; - -const handleError = (error: Error) => { - console.error(error.message); -}; - -const fetchURL = (url: string, type: string) => { - const response = inProduction ? fetch(url) : import(".." + url); - - return response - .then((response: Response) => handleResponse(response, type)) - .catch(handleError); -}; - -const useFetch = () => { - const [appData, setAppData] = useState(); - fetchList.app.setHook = setAppData; - - const [bookmarkData, setBookmarkData] = useState(); - fetchList.bookmarks.setHook = setBookmarkData; - - const [greeterData, setGreeterData] = useState(); - fetchList.greeter.setHook = setGreeterData; - - const [imprintData, setImprintData] = useState(); - fetchList.imprint.setHook = setImprintData; - - const [searchData, setSearchData] = useState(); - fetchList.search.setHook = setSearchData; - - const [themeData, setThemeData] = useState>(); - fetchList.themes.setHook = setThemeData; - - const callback = useCallback(() => { - Object.entries(fetchList).forEach(([key, val]) => { - fetchURL(val.url, key).then((data) => { - val.setHook(data); - }); - }); - }, []); - - useEffect(() => callback(), [callback]); - - return { - appData, - bookmarkData, - greeterData, - imprintData, - searchData, - themeData, - callback, - }; -}; - -export default useFetch; diff --git a/src/lib/fetcher.d.ts b/src/lib/fetcher.d.ts deleted file mode 100644 index 0f7dce0..0000000 --- a/src/lib/fetcher.d.ts +++ /dev/null @@ -1,32 +0,0 @@ -import { ISearchProps } from "../components/searchBar"; -import { IBookmarkGroupProps } from "../components/bookmarks"; -import { IAppCategoryProps } from "../components/appCategory"; -import { IAppProps } from "../components/app"; -import { IThemeProps } from "./theme"; -import { IImprintProps } from "../components/imprint"; -import { IGreeterProps } from "../components/greeter"; - -declare module "../data/apps.json" { - export const categories: IAppCategoryProps[]; - export const apps: IAppProps[]; -} - -declare module "../data/search.json" { - export const search: ISearchProps; -} - -declare module "../data/bookmarks.json" { - export const groups: IBookmarkGroupProps[]; -} - -declare module "../data/themes.json" { - export const themes: IThemeProps[]; -} - -declare module "../data/imprint.json" { - export const imprint: IImprintProps; -} - -declare module "../data/greeter.json" { - export const greeter: IGreeterProps; -} diff --git a/src/lib/fetcher.tsx b/src/lib/fetcher.tsx deleted file mode 100644 index 5cb93bc..0000000 --- a/src/lib/fetcher.tsx +++ /dev/null @@ -1,278 +0,0 @@ -import { useCallback, useEffect, useState } from "react"; - -import { ISearchProps } from "../components/searchBar"; -import { IBookmarkGroupProps } from "../components/bookmarks"; -import { IAppCategoryProps } from "../components/appCategory"; -import { IAppProps } from "../components/app"; -import { IThemeProps } from "./useTheme"; -import { IImprintProps } from "../components/imprint"; -import { IGreeterProps } from "../components/greeter"; - -const errorMessage = "Failed to load data."; -const inProduction = process.env.NODE_ENV === "production"; - -/** - * Handles the response from the fetch requests - * @param {Response} response - The response given by the fetch request - * @returns - The response in JSON - * @throws - Error with given error message if request failed - */ -export const handleResponse = (response: Response) => { - if (response.ok) return response.json(); - throw new Error(errorMessage); -}; - -export interface ISearchDataProps { - search: ISearchProps; - error: string | boolean; -} - -export interface IBookmarkDataProps { - groups: Array; - error: string | boolean; -} - -export interface IAppDataProps { - categories: Array; - apps: Array; - error: string | boolean; -} - -export interface IThemeDataProps { - themes: Array; - error: string | boolean; -} - -export interface IImprintDataProps { - imprint: IImprintProps; - error: string | boolean; -} - -export interface IGreeterDataProps { - greeter: IGreeterProps; - error: string | boolean; -} - -/** - * Default values for the respective state variables - */ -export const defaults = { - app: { - categories: [], - apps: [], - error: false, - }, - bookmark: { - groups: [], - error: false, - }, - search: { - search: { - placeholder: "", - defaultProvider: "https://google.com/search?q=", - providers: [], - }, - error: false, - }, - theme: { - themes: [], - error: false, - }, - imprint: { - imprint: { - name: { text: "", link: "" }, - address: { text: "", link: "" }, - phone: { text: "", link: "" }, - email: { text: "", link: "" }, - url: { text: "", link: "" }, - text: "", - }, - error: false, - }, - greeter: { - greeter: { - months: [ - "January", - "February", - "March", - "April", - "May", - "June", - "July", - "August", - "September", - "October", - "November", - "December", - ], - days: [ - "Sunday", - "Monday", - "Tuesday", - "Wednesday", - "Thursday", - "Friday", - "Saturday", - ], - greetings: [ - { - greeting: "Good night!", - start: 0, - end: 6, - }, - { - greeting: "Good morning!", - start: 6, - end: 12, - }, - { - greeting: "Good afternoon!", - start: 12, - end: 18, - }, - { - greeting: "Good evening!", - start: 18, - end: 0, - }, - ], - dateformat: "%wd, %m %d%e %y", - }, - error: false, - }, -}; - -/** - * Handles fetch errors by returning the error message. - * @param {string} type - The type of fetch request that threw an error - * @param {Error} error - The error itself - */ -export const handleError = (status: string, error: Error) => { - switch (status) { - case "apps": - return { ...defaults.app, error: error.message }; - case "bookmark": - return { ...defaults.bookmark, error: error.message }; - case "searchProvider": - return { ...defaults.search, error: error.message }; - case "theme": - return { ...defaults.theme, error: error.message }; - case "imprint": - return { ...defaults.imprint, error: error.message }; - case "greeter": - return { ...defaults.greeter, error: error.message }; - default: - break; - } -}; - -/** - * Fetches all of the data by doing fetch requests (only available in production) - */ -export const fetchProduction = Promise.all([ - fetch("/data/apps.json") - .then(handleResponse) - .catch((error: Error) => handleError("apps", error)), - fetch("/data/bookmarks.json") - .then(handleResponse) - .catch((error: Error) => handleError("bookmark", error)), - fetch("/data/search.json") - .then(handleResponse) - .catch((error: Error) => handleError("searchProvider", error)), - fetch("/data/themes.json") - .then(handleResponse) - .catch((error: Error) => handleError("theme", error)), - fetch("/data/imprint.json") - .then(handleResponse) - .catch((error: Error) => handleError("imprint", error)), - fetch("/data/greeter.json") - .then(handleResponse) - .catch((error: Error) => handleError("greeter", error)), -]); - -/** - * Fetches all of the data by importing it (only available in development) - */ -export const fetchDevelopment = Promise.all([ - import("../data/apps.json"), - import("../data/bookmarks.json"), - import("../data/search.json"), - import("../data/themes.json"), - import("../data/imprint.json"), - import("../data/greeter.json"), -]); - -/** - * Fetches app, bookmark, search, theme and imprint data and returns it. - */ -export const useFetcher = () => { - const [appData, setAppData] = useState(defaults.app); - - const [bookmarkData, setBookmarkData] = useState( - defaults.bookmark, - ); - - const [searchProviderData, setSearchProviderData] = - useState(defaults.search); - - const [themeData, setThemeData] = useState(defaults.theme); - - const [imprintData, setImprintData] = useState( - defaults.imprint, - ); - - const [greeterData, setGreeterData] = useState( - defaults.greeter, - ); - - const callback = useCallback(() => { - (inProduction ? fetchProduction : fetchDevelopment).then( - ([ - appData, - bookmarkData, - searchData, - themeData, - imprintData, - greeterData, - ]: [ - IAppDataProps, - IBookmarkDataProps, - ISearchDataProps, - IThemeDataProps, - IImprintDataProps, - IGreeterDataProps, - ]) => { - setAppData(appData.error ? appData : { ...appData, error: false }); - setBookmarkData( - bookmarkData.error ? bookmarkData : { ...bookmarkData, error: false }, - ); - setSearchProviderData( - searchData.error ? searchData : { ...searchData, error: false }, - ); - setThemeData( - themeData.error ? themeData : { ...themeData, error: false }, - ); - setImprintData( - imprintData.error ? imprintData : { ...imprintData, error: false }, - ); - setGreeterData( - greeterData.error ? greeterData : { ...greeterData, error: false }, - ); - }, - ); - }, []); - - useEffect(() => callback(), [callback]); - - return { - appData, - bookmarkData, - searchProviderData, - themeData, - imprintData, - greeterData, - callback, - }; -}; - -export default useFetcher; diff --git a/src/lib/useFetch.tsx b/src/lib/useFetch.tsx new file mode 100644 index 0000000..5468b9a --- /dev/null +++ b/src/lib/useFetch.tsx @@ -0,0 +1,95 @@ +import { useCallback, useEffect, useState } from "react"; + +import { IAppListProps } from "../components/appList"; +import { IBookmarkListProps } from "../components/bookmarks"; +import { ISearchProps } from "../components/searchBar"; +import { IThemeDataProps } from "./useTheme"; +import { IImprintProps } from "../components/imprint"; +import { IGreeterDataProps } from "../components/greeter"; + +export interface IDataProps { + response?: I; + error?: string | boolean; +} + +const inProduction = process.env.NODE_ENV === "production"; + +/** + * Handles the response from the fetch requests + * @param {Response} response - The response given by the fetch request + * @returns - The response in JSON + * @throws - Error with given error message if request failed + */ +export const handleResponse = async (response: Response) => { + if (!response.ok) throw new Error(response.statusText); + return response.json(); +}; + +const fetchFile = (f: string) => { + if (!inProduction) return require(`../data/${f}.json`); + + return fetch(`/data/${f}.json`) + .then(handleResponse) + .catch((error: Error) => { + return { error: error.message }; + }); +}; + +interface IFetchProps { + appData: IDataProps; + bookmarkData: IDataProps; + searchData: IDataProps; + themeData: IDataProps; + imprintData: IDataProps; + greeterData: IDataProps; + callback?: () => void; +} + +/** + * Fetches app, bookmark, search, theme and imprint data and returns it. + */ +export const useFetcher = (): IFetchProps => { + let defaults: IDataProps = { error: true }; + + const [appData, setAppData] = useState>(defaults); + const [bookmarkData, setBookmarkData] = + useState>(defaults); + const [searchData, setSearchData] = + useState>(defaults); + const [themeData, setThemeData] = + useState>(defaults); + const [imprintData, setImprintData] = + useState>(defaults); + const [greeterData, setGreeterData] = + useState>(defaults); + + const callback = useCallback(() => { + let files = ["apps", "bookmarks", "search", "themes", "imprint", "greeter"]; + + Promise.all(files.map((f) => fetchFile(f))).then( + ([apps, bookmarks, search, themes, imprint, greeter]: any) => { + setAppData({ response: apps }); + setBookmarkData({ + response: bookmarks, + }); + setSearchData({ response: search }); + setThemeData({ response: themes }); + setImprintData({ response: imprint }); + setGreeterData({ response: greeter }); + }, + ); + }, []); + + useEffect(() => callback(), [callback]); + + return { + appData, + bookmarkData, + searchData, + themeData, + imprintData, + greeterData, + }; +}; + +export default useFetcher; diff --git a/src/lib/useTheme.tsx b/src/lib/useTheme.tsx index 2734b75..4f097fb 100644 --- a/src/lib/useTheme.tsx +++ b/src/lib/useTheme.tsx @@ -6,6 +6,10 @@ export interface IThemeProps extends IItemProps { backgroundColor: string; } +export interface IThemeDataProps { + themes: IThemeProps[]; +} + export const defaultTheme: IThemeProps = { label: "Classic", value: 0, diff --git a/src/test/lib/fetcher.spec.tsx b/src/test/lib/fetcher.spec.tsx deleted file mode 100644 index 845d97e..0000000 --- a/src/test/lib/fetcher.spec.tsx +++ /dev/null @@ -1,46 +0,0 @@ -import { ok } from "assert"; -import useFetcher, { - defaults, - handleResponse, - handleError, - fetchProduction, - fetchDevelopment, -} from "../../lib/fetcher"; - -describe("fetcher.tsx", () => { - it("Tests handleResponse", () => {}); - - it("Tests handleError", () => { - expect(handleError("apps", Error("Test!"))).toEqual({ - ...defaults.app, - error: "Test!", - }); - - expect(handleError("bookmark", Error("Test!"))).toEqual({ - ...defaults.bookmark, - error: "Test!", - }); - - expect(handleError("searchProvider", Error("Test!"))).toEqual({ - ...defaults.search, - error: "Test!", - }); - - expect(handleError("theme", Error("Test!"))).toEqual({ - ...defaults.theme, - error: "Test!", - }); - - expect(handleError("imprint", Error("Test!"))).toEqual({ - ...defaults.imprint, - error: "Test!", - }); - - expect(handleError("greeter", Error("Test!"))).toEqual({ - ...defaults.greeter, - error: "Test!", - }); - - expect(handleError("", Error("Test!"))).toEqual(undefined); - }); -}); diff --git a/src/test/lib/theme.spec.tsx b/src/test/lib/theme.spec.tsx deleted file mode 100644 index 250dea4..0000000 --- a/src/test/lib/theme.spec.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import { getTheme, IThemeProps, setScheme, setTheme } from "../../lib/useTheme"; - -const props: IThemeProps = { - label: "Classic", - value: 0, - mainColor: "#000000", - accentColor: "#1e272e", - backgroundColor: "#ffffff", -}; - -const location: Location = window.location; -const setup = () => { - Object.defineProperty(window, "localStorage", { - value: { - getItem: jest.fn(() => JSON.stringify(props)), - setItem: jest.fn(() => null), - }, - writable: true, - }); - - // @ts-ignore - delete window.location; - - window.location = { - ...location, - reload: jest.fn(), - }; -}; - -describe("theme.tsx", () => { - it("Tests setScheme", () => { - setup(); - - let value = "dark"; - - setScheme(value); - expect(window.localStorage.setItem).toHaveBeenCalledTimes(1); - expect(window.localStorage.setItem).toHaveBeenCalledWith("theme", value); - }); - - it("setTheme light test", () => { - setup(); - - setTheme("light", props); - expect(window.localStorage.setItem).toHaveBeenCalledTimes(2); - expect(window.localStorage.setItem).toHaveBeenCalledWith( - "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); - }); - - it("Tests getTheme", () => { - setup(); - - let themeTest = getTheme(); - expect(themeTest).toEqual(props); - }); - - it("Tests getTheme with empty parameters", () => { - localStorage.setItem("theme", ""); - expect(getTheme()).toEqual({}); - }); -});