fix unit test (Option.test.tsx)

Author: based-ghost

__stories__/helpers/constants/theme.ts

@@ -1,6 +1,7 @@
 import type { Theme } from '../../../src';
 import { createThemeOptions } from '../utils';
-import { mergeThemes } from '../../../src/utils';
+import { mergeDeep } from '../../../src/utils';
+import { DEFAULT_THEME } from '../../../src/constants';
 
 // Normalize animation props as be default they are type of styled-component's "FlattenSimpleInterpolation"
 const FADE_IN_KEYFRAMES_STR = 'FADE_IN_KEYFRAMES 0.25s ease-in-out';
@@ -71,7 +72,7 @@ export const ThemeConfigMap: Theme = {
 };
 
 export const THEME_OPTIONS = createThemeOptions(ThemeEnum);
-export const THEME_DEFAULTS = mergeThemes(THEME_ANIMATIONS);
+export const THEME_DEFAULTS = mergeDeep(DEFAULT_THEME, THEME_ANIMATIONS);
 
 export const THEME_CONFIG: Theme = {
   menu: {

__tests__/Option.test.tsx

@@ -1,11 +1,13 @@
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import type { CSSProperties } from 'react';
 import { render } from '@testing-library/react';
+import Option from '../src/components/Menu/Option';
 import userEvent from '@testing-library/user-event';
 import { OPTION_DISABLED_CLS } from '../src/constants';
-import Option, { type OptionProps } from '../src/components/Menu/Option';
 import { MENU_OPTIONS, RENDER_OPTION_LABEL_MOCK, stringifyCSSProperties, ThemeTestHOC } from './helpers';
 
+type OptionProps = ComponentProps<typeof Option>;
+
 // ============================================
 // Helper functions & test data for Option.tsx component
 // ============================================

__tests__/helpers/ThemeTestHOC.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import { DEFAULT_THEME } from '../../src/utils';
 import { ThemeProvider } from 'styled-components';
+import { DEFAULT_THEME } from '../../src/constants';
 
 const ThemeTestHOC = ({ children }) => (
   <ThemeProvider theme={DEFAULT_THEME}>

package.json

@@ -97,7 +97,7 @@
     "react-toastify": "^9.1.1",
     "react-window": "^1.8.8",
     "rimraf": "^3.0.2",
-    "rollup": "^3.2.5",
+    "rollup": "^3.3.0",
     "rollup-plugin-terser": "^7.0.2",
     "styled-components": "^5.3.6",
     "typescript": "^4.8.4",

src/Select.tsx

@@ -20,6 +20,7 @@ import {
   MenuPositionEnum,
   FunctionDefaults,
   EMPTY_ARRAY,
+  DEFAULT_THEME,
   SELECT_WRAPPER_ATTRS,
   PLACEHOLDER_DEFAULT,
   LOADING_MSG_DEFAULT,
@@ -34,7 +35,7 @@ import type { FixedSizeList } from 'react-window';
 import styled, { css, ThemeProvider, type DefaultTheme } from 'styled-components';
 import { Menu, Value, AriaLiveRegion, AutosizeInput, IndicatorIcons } from './components';
 import { useDebounce, useCallbackRef, useMenuOptions, useMountEffect, useUpdateEffect, useMenuPositioner } from './hooks';
-import { isBoolean, isFunction, mergeThemes, suppressEvent, normalizeValue, IS_TOUCH_DEVICE, isArrayWithLength } from './utils';
+import { isBoolean, isFunction, isPlainObject, mergeDeep, suppressEvent, normalizeValue, IS_TOUCH_DEVICE, isArrayWithLength } from './utils';
 import type {
   Theme,
   SelectRef,
@@ -257,7 +258,11 @@ const Select = forwardRef<SelectRef, SelectProps>((
   const [focusedOption, setFocusedOption] = useState<FocusedOption>(FOCUSED_OPTION_DEFAULT);
 
   // Memoized DefaultTheme object for styled-components ThemeProvider
-  const theme = useMemo<DefaultTheme>(() => mergeThemes(themeConfig), [themeConfig]);
+  const theme = useMemo<DefaultTheme>(() => {
+    return isPlainObject(themeConfig)
+      ? mergeDeep(DEFAULT_THEME, themeConfig)
+      : DEFAULT_THEME;
+  }, [themeConfig]);
 
   // Memoized callback functions referencing optional function properties on Select.tsx
   const getOptionLabelFn = useMemo<OptionLabelCallback>(() => getOptionLabel || FunctionDefaults.OPTION_LABEL, [getOptionLabel]);

src/constants/index.ts

@@ -1,4 +1,5 @@
 export * from './dom';
 export * from './enums';
+export * from './theme';
 export * from './styled';
 export * from './defaults';

src/utils/theme.ts renamed to src/constants/theme.ts

@@ -1,7 +1,5 @@
-import type { Theme } from '../types';
-import { mergeDeep, isPlainObject } from './common';
 import type { DefaultTheme } from 'styled-components';
-import { BOUNCE_ANIMATION_CSS, FADE_IN_ANIMATION_CSS } from '../constants';
+import { BOUNCE_ANIMATION_CSS, FADE_IN_ANIMATION_CSS } from './styled';
 
 /**
  * A contextual styled-components DefaultTheme object with default key-value pairs for CSS props.
@@ -91,14 +89,4 @@ export const DEFAULT_THEME: DefaultTheme = {
       transition: 'color 0.2s ease-out'
     }
   }
-};
-
-/**
- * If theme param is a valid object, attempt to merge with static DEFAULT_THEME.
- * A new object of DefaultTheme type is returned, with properties overriden as defined in theme param.
- */
-export const mergeThemes = (theme?: Theme): DefaultTheme => {
-  return isPlainObject(theme)
-    ? mergeDeep(DEFAULT_THEME, theme)
-    : DEFAULT_THEME;
 };

src/utils/index.ts

@@ -1,4 +1,3 @@
 export * from './menu';
-export * from './theme';
 export * from './common';
 export * from './device';