add icon and theme tests
This commit is contained in:
parent
98eccea2b5
commit
aa61b2fb76
6 changed files with 61 additions and 14 deletions
|
@ -9,8 +9,5 @@ coverage:
|
|||
flags:
|
||||
dashboard:
|
||||
paths:
|
||||
- src/
|
||||
- data/
|
||||
|
||||
ignore:
|
||||
- node_modules
|
||||
- src/components/
|
||||
- src/lib/
|
||||
|
|
|
@ -38,6 +38,8 @@ const IconContainer = styled.i`
|
|||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: "liga";
|
||||
font-size: ${(props) => props.theme};
|
||||
color: ${(props) => props.color};
|
||||
`;
|
||||
|
||||
/**
|
||||
|
@ -45,14 +47,11 @@ const IconContainer = styled.i`
|
|||
* @param {IIconProps} props props needed for the given icon
|
||||
* @returns {React.ReactNode} the icon node
|
||||
*/
|
||||
export const Icon = ({ name, size }: IIconProps) => {
|
||||
let Container = styled(IconContainer)`
|
||||
font-size: ${size ? size : "24px"};
|
||||
color: ${selectedTheme.mainColor};
|
||||
`;
|
||||
|
||||
return <Container>{name}</Container>;
|
||||
};
|
||||
export const Icon = ({ name, size }: IIconProps) => (
|
||||
<IconContainer color={selectedTheme.mainColor} theme={size}>
|
||||
{name}
|
||||
</IconContainer>
|
||||
);
|
||||
|
||||
/**
|
||||
* Renders a button with an icon
|
||||
|
|
|
@ -27,7 +27,7 @@ export const setTheme = (theme: string) => {
|
|||
* Function that gets the saved theme from localStorage or returns the default
|
||||
* @returns {IThemeProps} the saved theme or the default theme
|
||||
*/
|
||||
const getTheme = (): IThemeProps => {
|
||||
export const getTheme = (): IThemeProps => {
|
||||
let selectedTheme = defaultTheme;
|
||||
|
||||
if (localStorage.getItem("theme") !== null) {
|
||||
|
|
|
@ -1,5 +1,7 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Icon test (no size) 1`] = `[Function]`;
|
||||
|
||||
exports[`Icon test 1`] = `[Function]`;
|
||||
|
||||
exports[`IconButton test 1`] = `[Function]`;
|
||||
|
|
|
@ -12,6 +12,11 @@ it("Icon test", () => {
|
|||
expect(asFragment).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("Icon test (no size)", () => {
|
||||
const { asFragment } = render(<Icon name={props.name} />);
|
||||
expect(asFragment).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it("IconButton test", () => {
|
||||
const { asFragment } = render(
|
||||
<IconButton icon={props.name} onClick={props.onClick} />,
|
||||
|
|
44
src/test/lib/theme.spec.tsx
Normal file
44
src/test/lib/theme.spec.tsx
Normal file
|
@ -0,0 +1,44 @@
|
|||
import selectedTheme, {
|
||||
getTheme,
|
||||
IThemeProps,
|
||||
setTheme,
|
||||
} from "../../lib/theme";
|
||||
|
||||
const props: IThemeProps = {
|
||||
label: "Classic",
|
||||
value: 0,
|
||||
mainColor: "#000000",
|
||||
accentColor: "#1e272e",
|
||||
backgroundColor: "#ffffff",
|
||||
};
|
||||
|
||||
const theme = JSON.stringify(props);
|
||||
|
||||
describe("theme.tsx", () => {
|
||||
beforeEach(() => {
|
||||
Object.defineProperty(window, "localStorage", {
|
||||
value: {
|
||||
getItem: jest.fn(() => null),
|
||||
setItem: jest.fn(() => null),
|
||||
},
|
||||
writable: true,
|
||||
});
|
||||
});
|
||||
|
||||
it("setTheme test", () => {
|
||||
setTheme(theme);
|
||||
|
||||
expect(window.localStorage.setItem).toHaveBeenCalledTimes(1);
|
||||
expect(window.localStorage.setItem).toHaveBeenCalledWith("theme", theme);
|
||||
});
|
||||
|
||||
it("getTheme test", () => {
|
||||
const themeTest = getTheme();
|
||||
expect(themeTest).toEqual(props);
|
||||
});
|
||||
|
||||
it("selectedTheme test", () => {
|
||||
const themeTest = selectedTheme;
|
||||
expect(themeTest).toEqual(props);
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue