chore: bump test coverage

example/package.json

@@ -7,8 +7,8 @@
     "build": "next build"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.5",
-    "@emotion/styled": "^11.10.5",
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "e-prim": "*",
     "next": "13.0.3",
     "react": "^18.2.0",

lib/components/__tests__/__snapshots__/icon.test.tsx.snap

@@ -23,3 +23,26 @@ exports[`icon should render icon 1`] = `
   </svg>
 </div>
 `;
+
+exports[`icon should render with default size and custom viewbox 1`] = `
+.emotion-0 {
+  width: 24px;
+  height: 24px;
+}
+
+<div>
+  <svg
+    class="emotion-0"
+    fill="none"
+    viewBox="0 0 32 32"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M4 12H20M20 12L12 4M20 12L12 20"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</div>
+`;

lib/components/__tests__/icon.test.tsx

@@ -20,4 +20,10 @@ describe("icon", () => {
         wrapper,
       }).container,
     ).toMatchSnapshot());
+
+  test("should render with default size and custom viewbox", () => expect(
+    render(
+      <ArrowIcon viewBoxSize={32} />, {wrapper}
+    ).container
+  ).toMatchSnapshot())
 });

lib/components/icon.tsx

@@ -3,7 +3,7 @@ import { Box, BoxProps } from "./box";
 
 export const DEFAULT_ICON_SIZE = 24;
 
-export type BaseIconProps = BoxProps<"svg"> & {
+export type IconProps = BoxProps<"svg"> & {
   /**
    * Overall size of the icon (square)
    * @default @see {@link DEFAULT_ICON_SIZE}
@@ -17,9 +17,7 @@ export type BaseIconProps = BoxProps<"svg"> & {
   viewBoxSize?: number;
 };
 
-export type IconProps = Omit<BaseIconProps, "viewBoxSize">;
-
-export const BaseIcon: FC<BaseIconProps> = ({
+export const BaseIcon: FC<IconProps> = ({
   size = DEFAULT_ICON_SIZE,
   color,
   viewBoxSize = DEFAULT_ICON_SIZE,

lib/hooks/__tests__/use-media.test.tsx

@@ -12,7 +12,7 @@ describe("useMediaUp", () => {
     setMedia({
       width: "600px",
       type: "screen",
-      orientation: "landscape"
+      orientation: "landscape",
     });
 
     const hook = renderHook(() => useMediaUp("md"), { wrapper });
@@ -24,7 +24,7 @@ describe("useMediaUp", () => {
     setMedia({
       width: "400px",
       type: "screen",
-      orientation: "landscape"
+      orientation: "landscape",
     });
 
     const hook = renderHook(() => useMediaUp("md"), { wrapper });
@@ -38,7 +38,7 @@ describe("useMediaDown", () => {
     setMedia({
       width: "400px",
       type: "screen",
-      orientation: "landscape"
+      orientation: "landscape",
     });
 
     const hook = renderHook(() => useMediaDown("md"), { wrapper });
@@ -50,7 +50,7 @@ describe("useMediaDown", () => {
     setMedia({
       width: "600px",
       type: "screen",
-      orientation: "landscape"
+      orientation: "landscape",
     });
 
     const hook = renderHook(() => useMediaDown("md"), { wrapper });

lib/hooks/use-media.ts

@@ -27,7 +27,7 @@ const useMatchMedia = (breakpoint: keyof TBreakpoint, queryPrefix: string) => {
   }, [calculate]);
 
   return isMatch;
-}
+};
 
 export const useMediaUp = (breakpoint: keyof TBreakpoint) => useMatchMedia(breakpoint, "min-width");
 

lib/jest.config.ts

@@ -14,7 +14,7 @@ const config = {
     "!dist/**",
     "!jest-setup-after-env.ts",
   ],
-  coverageReporters: ["text-summary", "text"],
+  coverageReporters: ["text-summary", "text", "html"],
   testPathIgnorePatterns: ["<rootDir>/node_modules/", "<rootDir>/.next/"],
   testEnvironment: "node",
   moduleNameMapper: pathsToModuleNameMapper(tsConfig.compilerOptions.paths, { prefix: "<rootDir>" }),

lib/package.json

@@ -25,10 +25,10 @@
     "react": ">18"
   },
   "devDependencies": {
-    "@emotion/react": "^11.10.5"
+    "@emotion/react": "^11.11.1"
   },
   "repository": {
     "type": "git",
     "url": "https://github.com/dstoyanoff/emotion-primitive.git"
   }
-}
+}

lib/system/__tests__/css-props-system.test.ts

@@ -3,6 +3,16 @@ import { createCssProps } from "../css-props-system";
 
 describe("css props system", () => {
   describe("createCssProps", () => {
+    test("should throw if default border is not configured", () =>
+      expect(() =>
+        createCssProps(
+          {
+            border: true,
+          },
+          { ...mockTheme, border: undefined },
+        ),
+      ).toThrowError("Border used as boolean, but the theme does not have a default border configured"));
+
     test("should build proper styles - non-responsive", () =>
       expect(
         createCssProps(

lib/system/__tests__/flex-system.test.ts

@@ -34,7 +34,7 @@ describe("flex system", () => {
           {
             inline: {
               xs: false,
-              md: true
+              md: true,
             },
             align: {
               xs: "left",
@@ -70,13 +70,13 @@ describe("flex system", () => {
           "@media (min-width: 500px)": { flexDirection: "column" },
         },
         { "@media (min-width: 0px)": { alignItems: "left" }, "@media (min-width: 500px)": { alignItems: "center" } },
-        { "@media (min-width: 0px)": { alignItems: "center" }, "@media (min-width: 500px)": {} },
+        { "@media (min-width: 0px)": { alignItems: "center" } },
         {},
         {
           "@media (min-width: 0px)": { justifyContent: "center" },
           "@media (min-width: 500px)": { justifyContent: "space-between" },
         },
-        { "@media (min-width: 0px)": {}, "@media (min-width: 500px)": { justifyContent: "center" } },
+        { "@media (min-width: 500px)": { justifyContent: "center" } },
         {},
         { "@media (min-width: 0px)": { gap: "16px" }, "@media (min-width: 500px)": { gap: "10px" } },
       ]));

lib/system/__tests__/theme-functions.test.ts

@@ -34,6 +34,8 @@ describe("theme-functions", () => {
 
     test("should return mixed values", () =>
       expect(spacing(mockTheme.spacingValue, "10px", 4, "10%", 8)).toEqual("10px 16px 10% 32px"));
+
+    test("should return empty string if no values provided", () => expect(spacing(mockTheme.spacingValue)).toEqual(""));
   });
 
   describe("transparentColor", () => {

lib/system/css-props-system.ts

@@ -36,8 +36,13 @@ export const createCssProps = (props: CssPropsSystem, theme: BaseTheme): CssProp
 
   const colorTransformer = (value: PaletteKey) => colorByKey(value, theme.palette);
   const borderTransformer = (value: PaletteKey | boolean) => {
+    if (value === true && !theme.border) {
+      throw new Error("Border used as boolean, but the theme does not have a default border configured");
+    }
+
     const width = pxOrRaw(theme.border?.width ?? 1);
-    const color = colorByKey(value === true ? theme.border?.color : (value as PaletteKey | undefined), theme.palette);
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const color = colorByKey(value === true ? theme.border!.color : (value as PaletteKey | undefined), theme.palette);
 
     return `${width} solid ${color}`;
   };

lib/system/responsive-css-value-factory.ts

@@ -37,12 +37,12 @@ export const responsiveCssValueFactory =
       const breakpoint = key as keyof TBreakpoint;
       const mediaQuery = mediaUp(breakpoint);
 
-      acc[mediaQuery] = acc[mediaQuery] ?? {};
-
       const transformedBreakpointValue = valueTransform(breakpointValue);
 
       if (transformedBreakpointValue) {
-        acc[mediaQuery][propName] = transformedBreakpointValue;
+        acc[mediaQuery] = {
+          [propName]: transformedBreakpointValue,
+        };
       }
 
       return acc;

lib/utils/__tests__/omit.test.ts

@@ -17,4 +17,19 @@ describe("omit", () => {
       key3: "value3",
       key4: "value4",
     }));
+
+  test("with no values", () =>
+    expect(
+      omit({
+        key1: "value1",
+        key2: "value2",
+        key3: "value3",
+        key4: "value4",
+      }),
+    ).toEqual({
+      key1: "value1",
+      key2: "value2",
+      key3: "value3",
+      key4: "value4",
+    }));
 });

package.json

@@ -14,8 +14,8 @@
     "build": "yarn workspace e-prim tsup"
   },
   "devDependencies": {
-    "@emotion/babel-preset-css-prop": "^11.10.0",
-    "@emotion/jest": "^11.10.5",
+    "@emotion/babel-preset-css-prop": "^11.11.0",
+    "@emotion/jest": "^11.11.0",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^29.2.3",
     "@types/node": "18.11.9",