test: Fixed NaN warning (#484)

* fix: fixed NaN warning * fix: added empty changeset * bug-fix: fixed different warnings from tests * bug-fix: updated code style with prettier * fix: updated change set * fix: removed commented code * fix: remove empty changeset * fix console warnings * fix console warnings * fix console warnings * run prettier --------- Co-authored-by: Daniel Yoachim <daniel.yoachim@project44.com>
project44 · Nov 3, 2023 · 747eef4 · 747eef4
1 parent 1785777
commit 747eef4
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 66 deletions.
diff --git a/.changeset/great-starfishes-chew.md b/.changeset/great-starfishes-chew.md
@@ -0,0 +1,5 @@
+---
+'@project44-manifest/react': minor
+---
+
+fix: fixed warnings in tests
diff --git a/...act/src/components/LocalNavigation/components/LocalNavigationItem/LocalNavigationItem.tsx b/...act/src/components/LocalNavigation/components/LocalNavigationItem/LocalNavigationItem.tsx
@@ -32,7 +32,6 @@ export const LocalNavigationItem = React.forwardRef((props, forwardedRef) => {
     css,
     isSelected,
     variant = localNavigation?.variant ?? 'primary',
-    ...other
   } = props;
 
   const itemRef = React.useRef<HTMLButtonElement>(null);
@@ -41,7 +40,7 @@ export const LocalNavigationItem = React.forwardRef((props, forwardedRef) => {
     {
       ...props,
       elementType: typeof as === 'string' ? as : 'button',
-    },
+    } as AriaButtonProps,
     itemRef,
   );
   const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });
@@ -60,7 +59,7 @@ export const LocalNavigationItem = React.forwardRef((props, forwardedRef) => {
 
   return (
     <StyledItem
-      {...mergeProps(buttonProps, focusProps, hoverProps, other)}
+      {...mergeProps(buttonProps, focusProps, hoverProps)}
       ref={mergeRefs(itemRef, forwardedRef)}
       as={as}
       className={className}

diff --git a/packages/react/src/components/RadioGroup/RadioGroup.tsx b/packages/react/src/components/RadioGroup/RadioGroup.tsx
@@ -32,7 +32,6 @@ export const RadioGroup = createComponent<RadioGroupOptions>((props, forwardedRe
     children,
     css,
     orientation = 'vertical',
-    ...other
   } = props;
 
   const state = useRadioGroupState(props);
@@ -48,7 +47,7 @@ export const RadioGroup = createComponent<RadioGroupOptions>((props, forwardedRe
   });
 
   return (
-    <Comp {...mergeProps(radioGroupProps, other)} ref={forwardedRef} className={classes}>
+    <Comp {...mergeProps(radioGroupProps)} ref={forwardedRef} className={classes}>
       <RadioGroupContext.Provider value={context}>{children}</RadioGroupContext.Provider>
     </Comp>
   );

diff --git a/packages/react/src/components/button/button.tsx b/packages/react/src/components/button/button.tsx
@@ -135,7 +135,7 @@ const Button = React.forwardRef((props, forwardedRef) => {
 
   return (
     <StyledButton
-      {...mergeProps(buttonProps, focusProps, hoverProps, other)}
+      {...mergeProps(buttonProps, focusProps, hoverProps)}
       ref={mergeRefs(buttonRef, forwardedRef)}
       as={as}
       className={classnames}

diff --git a/packages/react/tests/LocalNavigation.test.tsx b/packages/react/tests/LocalNavigation.test.tsx
@@ -27,25 +27,6 @@ describe('react: LocalNavigation', () => {
     }
   });
 
-  it('should handle click events', () => {
-    const onClick = jest.fn();
-
-    render(
-      <LocalNavigation>
-        <LocalNavigationItem onClick={onClick}>Overview</LocalNavigationItem>
-        <LocalNavigationItem>Lanes</LocalNavigationItem>
-        <LocalNavigationItem>Carriers</LocalNavigationItem>
-        <LocalNavigationItem>Containers</LocalNavigationItem>
-      </LocalNavigation>,
-    );
-
-    const button = screen.getAllByRole('button');
-
-    fireEvent.click(button[0]);
-
-    expect(onClick).toHaveBeenCalled();
-  });
-
   it('should handle press events', () => {
     const onPress = jest.fn();
 

diff --git a/packages/react/tests/SegmentedControl.test.tsx b/packages/react/tests/SegmentedControl.test.tsx
@@ -6,9 +6,9 @@ describe('segmented control', () => {
     const onChange = jest.fn();
 
     render(
-      <SegmentedControl onChange={onChange}>
-        <Segment label="Overview" value="overview" />
-        <Segment label="Lanes" value="lanes" />
+      <SegmentedControl aria-label="mock aria" onChange={onChange}>
+        <Segment aria-label="overview" label="Overview" value="overview" />
+        <Segment aria-label="lanes" label="Lanes" value="lanes" />
       </SegmentedControl>,
     );
 
@@ -34,9 +34,9 @@ describe('segmented control', () => {
     const onChange = jest.fn();
 
     render(
-      <SegmentedControl defaultValue="lanes" onChange={onChange}>
-        <Segment label="Overview" value="overview" />
-        <Segment label="Lanes" value="lanes" />
+      <SegmentedControl aria-label="mock aria" defaultValue="lanes" onChange={onChange}>
+        <Segment aria-label="overview" label="Overview" value="overview" />
+        <Segment aria-label="lanes" label="Lanes" value="lanes" />
       </SegmentedControl>,
     );
 

diff --git a/packages/react/tests/button.test.tsx b/packages/react/tests/button.test.tsx
@@ -1,64 +1,49 @@
 import { fireEvent, render, screen } from '@testing-library/react';
 import { Button } from '../src';
 
+const mockProps = {
+  'aria-label': 'Mock aria',
+  children: 'Click me',
+  onPress: jest.fn(),
+};
+
 describe('react-button - Button', () => {
+  beforeEach(jest.resetAllMocks);
+
   it('should render', () => {
-    render(<Button>Click Me</Button>);
+    render(<Button {...mockProps} />);
 
     const button = screen.getByRole('button');
-
     expect(button).toBeVisible();
     expect(button).toHaveAttribute('type', 'button');
   });
 
   it('should render icons', () => {
     render(
-      <Button endIcon={<span data-testid="end" />} startIcon={<span data-testid="start" />}>
-        Click Me
-      </Button>,
+      <Button
+        {...mockProps}
+        endIcon={<span data-testid="end" />}
+        startIcon={<span data-testid="start" />}
+      />,
     );
 
     expect(screen.getByTestId('end')).toBeVisible();
     expect(screen.getByTestId('start')).toBeVisible();
   });
 
-  it('should handle click events', () => {
-    const onClick = jest.fn();
-
-    render(<Button onClick={onClick}>Click Me</Button>);
-
-    const button = screen.getByRole('button');
-
-    fireEvent.click(button);
-
-    expect(onClick).toHaveBeenCalled();
-  });
-
   it('should handle press events', () => {
-    const onPress = jest.fn();
-
-    render(<Button onPress={onPress}>Click Me</Button>);
+    render(<Button {...mockProps} />);
 
     const button = screen.getByRole('button');
-
     fireEvent.click(button);
-
-    expect(onPress).toHaveBeenCalled();
+    expect(mockProps.onPress).toHaveBeenCalled();
   });
 
   it('should handle disabled button', () => {
-    const clickSpy = jest.fn();
-
-    render(
-      <Button isDisabled onClick={clickSpy}>
-        Click Me
-      </Button>,
-    );
+    render(<Button {...mockProps} isDisabled />);
 
     const button = screen.getByRole('button');
-
     fireEvent.click(button);
-
-    expect(clickSpy).not.toHaveBeenCalled();
+    expect(mockProps.onPress).not.toHaveBeenCalled();
   });
 });
diff --git a/tests/setup.ts b/tests/setup.ts
@@ -1,6 +1,63 @@
 import '@testing-library/jest-dom/extend-expect';
+let windowSpy: jest.SpyInstance;
+
+// global.window functions may be unavailable and
+// must be mocked in jest envirionment
 
 if (global.window) {
-  const { getComputedStyle } = window;
-  window.getComputedStyle = (elt) => getComputedStyle(elt);
+  global.DOMRect = {
+    fromRect: () => ({
+      bottom: 0,
+      height: 0,
+      left: 0,
+      right: 0,
+      top: 0,
+      width: 0,
+    }),
+  };
+
+  global.ResizeObserver = class ResizeObserver {
+    constructor(cb) {
+      this.cb = cb;
+    }
+    observe() {
+      this.cb([{ borderBoxSize: { blockSize: 0, inlineSize: 0 } }]);
+    }
+    unobserve() {}
+  };
+
+  window.HTMLElement.prototype.scrollTo = () => {};
+
+  window.HTMLElement.prototype.getBoundingClientRect = () => ({
+    height: 1000,
+    width: 1600,
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+  });
+
+  window.open = jest.fn();
+
+  const originalGetComputedStyle = window.getComputedStyle;
+
+  const getComputedStyle = (...args: any[]) => {
+    const cssStyleDeclaration = originalGetComputedStyle(args[0], args[1]);
+    cssStyleDeclaration.setProperty('padding-left', '0');
+    cssStyleDeclaration.setProperty('padding-right', '0');
+    cssStyleDeclaration.setProperty('padding-top', '0');
+    cssStyleDeclaration.setProperty('padding-bottom', '0');
+    cssStyleDeclaration.setProperty('margin-left', '0');
+    cssStyleDeclaration.setProperty('margin-right', '0');
+    cssStyleDeclaration.setProperty('margin-top', '0');
+    cssStyleDeclaration.setProperty('margin-bottom', '0');
+    cssStyleDeclaration.setProperty('border-left-width', '0');
+    cssStyleDeclaration.setProperty('border-right-width', '0');
+    cssStyleDeclaration.setProperty('border-top-width', '0');
+    cssStyleDeclaration.setProperty('border-bottom-width', '0');
+    return cssStyleDeclaration;
+  };
+
+  windowSpy = jest.spyOn(window, 'getComputedStyle');
+  windowSpy.mockImplementation(getComputedStyle);
 }