Update tests, apply formatting

This commit is contained in:
phntxx 2021-07-11 15:58:42 +02:00
parent f469c1de67
commit 786aca82f1
12 changed files with 70 additions and 24 deletions

View file

@ -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;

View file

@ -48,9 +48,7 @@ const IconContainer = styled.i`
* @returns {React.ReactNode} the icon node
*/
export const Icon = ({ name, size }: IIconProps) => (
<IconContainer about={size}>
{name}
</IconContainer>
<IconContainer about={size}>{name}</IconContainer>
);
/**

View file

@ -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>

View file

@ -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

View file

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

View file

@ -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;

View file

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

View file

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

View file

@ -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");

View file

@ -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,
};

View file

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

View file

@ -28,13 +28,25 @@ const setup = () => {
};
describe("theme.tsx", () => {
it("setTheme test", () => {
it("setTheme light test", () => {
setup();
setTheme(props);
expect(window.localStorage.setItem).toHaveBeenCalledTimes(1);
setTheme("light", props);
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);