add chart and icons tests

package.json

@@ -79,6 +79,7 @@
     "eslint-plugin-storybook": "^0.6.15",
     "eslint-plugin-unused-imports": "^2.0.0",
     "jest": "^29.7.0",
+    "jest-canvas-mock": "^2.5.2",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom-testing-mocks": "^1.11.0",
     "pre-commit": "^1.2.2",

src/components/accordion/overrides.tsx

@@ -1,10 +1,11 @@
 import { AccordionOverrides } from "baseui/accordion";
+import { expandProperty } from "inline-style-expand-shorthand";
 
 export const getAccordionOverrides = (): AccordionOverrides => {
   return {
     PanelContainer: {
       style: () => ({
-        borderBottom: "none",
+        ...expandProperty("borderBottom", "none"),
         marginTop: "4px",
       }),
     },

src/components/chart/Chart.test.tsx

@@ -0,0 +1,48 @@
+import { render } from "@testing-library/react";
+import Chart from "./ChartWrapper";
+import { LineSeries } from "./series";
+import { MockViewport, mockViewport } from "jsdom-testing-mocks";
+import { setupJestCanvasMock } from "jest-canvas-mock";
+
+let viewport: MockViewport;
+
+beforeEach(() => {
+  viewport = mockViewport({ width: "1320px", height: "568px" });
+  setupJestCanvasMock();
+});
+
+afterEach(() => {
+  viewport.cleanup();
+});
+
+const lineData = [
+  { time: "2018-12-22", value: 23 },
+  { time: "2018-12-23", value: 54 },
+  { time: "2018-12-24", value: 36 },
+  { time: "2018-12-25", value: 48 },
+  { time: "2018-12-26", value: 24 },
+  { time: "2018-12-27", value: 73 },
+  { time: "2018-12-28", value: 287 },
+  { time: "2018-12-29", value: 96 },
+  { time: "2018-12-30", value: 37 },
+  { time: "2018-12-31", value: 54 },
+  { time: "2019-01-01", value: 62 },
+  { time: "2019-01-02", value: 71 },
+  { time: "2019-01-03", value: 88 },
+  { time: "2019-01-04", value: 99 },
+  { time: "2019-01-05", value: 13 },
+  { time: "2019-01-06", value: 28 },
+  { time: "2019-01-07", value: 92 },
+];
+
+describe("Chart", () => {
+  it("renders without crashing", () => {
+    render(
+      <Chart height={400}>
+        <LineSeries data={lineData} />
+      </Chart>
+    );
+  });
+
+  // Add more tests as needed
+});

src/components/icons/Icons.test.tsx

@@ -0,0 +1,17 @@
+import { isValidElement } from "react";
+import * as Icons from ".";
+import { render } from "../../test-utils/render";
+
+describe("Icons", () => {
+  it("all icons render", () => {
+    const keys = Object.keys(Icons);
+    keys.forEach((key) => {
+      const Icon = Icons[key as keyof typeof Icons];
+
+      if (isValidElement(<Icon />)) {
+        const { container } = render(<Icon />);
+        expect(container.firstChild).toBeInTheDocument();
+      }
+    });
+  });
+});

src/components/menu/ui/MenuItem.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef } from "react";
+import { cloneElement, forwardRef } from "react";
 import { MenuItemProps, MenuItemTypographyProps } from "../types";
 import { ParagraphSmall, ParagraphMedium, ParagraphLarge } from "baseui/typography";
 import { useStyletron, styled } from "baseui";
@@ -38,7 +38,7 @@ const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
         <LinkComponent className={css(getLinkComponentStyles())}>
           {item?.selected != null && <Checkbox checked={item.selected} />}
           {item?.startEnhancer &&
-            React.cloneElement(item.startEnhancer, {
+            cloneElement(item.startEnhancer, {
               size: 16,
               className: css(isAreaSelected ? svgActiveStyles : {}),
             })}
@@ -48,7 +48,7 @@ const MenuItem = forwardRef<HTMLLIElement, MenuItemProps>(
           <EndWrapper>
             {item?.suffixText && <TypographyComponent color={paragraphColor}>{item.suffixText}</TypographyComponent>}
             {item?.endEnhancer &&
-              React.cloneElement(item.endEnhancer, {
+              cloneElement(item.endEnhancer, {
                 size: 16,
                 className: css(isAreaSelected ? svgActiveStyles : {}),
               })}