fix: failing test

bigcommerce · Nov 6, 2019 · 87d1607 · 87d1607
1 parent eb2492d
commit 87d1607
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 33 deletions.
diff --git a/packages/big-design/src/components/Dropdown/Dropdown.tsx b/packages/big-design/src/components/Dropdown/Dropdown.tsx
@@ -10,7 +10,7 @@ import { List } from '../List';
 import { ListItem } from '../List/Item';
 import { Tooltip, TooltipProps } from '../Tooltip';
 
-import { DropdownItem, DropdownLinkItem, DropdownProps } from './types';
+import { DropdownLinkItem, DropdownOption, DropdownProps } from './types';
 
 interface DropdownState {
   highlightedItem: HTMLLIElement | null;
@@ -104,36 +104,34 @@ export class Dropdown<T extends any> extends React.PureComponent<DropdownProps<T
     );
   }
 
-  private getContent(option: DropdownItem<T> | DropdownLinkItem<T>, isHighlighted: boolean) {
-    const { content, disabled, icon } = option;
-    const child = (
+  private wrapInLink(option: DropdownLinkItem<T>, content: React.ReactChild) {
+    return (
+      <Link href={option.url} target={option.target}>
+        {content}
+      </Link>
+    );
+  }
+
+  private getContent(option: DropdownOption<T>, isHighlighted: boolean) {
+    const { disabled, icon, tooltip } = option;
+
+    const baseContent = (
       <Flex alignItems="center" flexDirection="row">
         {icon && <FlexItem paddingRight="xSmall">{this.renderIcon(option, isHighlighted)}</FlexItem>}
-        {content}
+        {option.content}
       </Flex>
     );
 
-    return this.getTooltip(
-      option,
-      option.type === 'link' && !disabled ? (
-        <Link href={option.url} target={option.target}>
-          {child}
-        </Link>
-      ) : (
-        child
-      ),
-    );
-  }
+    const content = option.type === 'link' && !disabled ? this.wrapInLink(option, baseContent) : baseContent;
 
-  private getTooltip(option: DropdownItem<T> | DropdownLinkItem<T>, trigger: React.ReactChild) {
-    const { disabled, tooltip } = option;
+    return disabled && tooltip ? this.wrapInTooltip(tooltip, content) : content;
+  }
 
-    return disabled && tooltip ? (
-      <Tooltip placement="right" trigger={trigger} modifiers={this.tooltipModifiers} inline={false}>
+  private wrapInTooltip(tooltip: DropdownOption<T>['tooltip'], trigger: React.ReactChild) {
+    return (
+      <Tooltip placement="left" trigger={trigger} modifiers={this.tooltipModifiers} inline={false}>
         {tooltip}
       </Tooltip>
-    ) : (
-      trigger
     );
   }
 
@@ -155,7 +153,7 @@ export class Dropdown<T extends any> extends React.PureComponent<DropdownProps<T
     );
   }
 
-  private renderIcon(item: DropdownItem<T> | DropdownLinkItem<T>, isHighlighted: boolean) {
+  private renderIcon(item: DropdownOption<T>, isHighlighted: boolean) {
     return (
       React.isValidElement(item.icon) &&
       React.cloneElement(item.icon, {
@@ -165,7 +163,7 @@ export class Dropdown<T extends any> extends React.PureComponent<DropdownProps<T
     );
   }
 
-  private iconColor(item: DropdownItem<T> | DropdownLinkItem<T>, isHighlighted: boolean) {
+  private iconColor(item: DropdownOption<T>, isHighlighted: boolean) {
     if (item.disabled) {
       return 'secondary40';
     }
@@ -205,7 +203,7 @@ export class Dropdown<T extends any> extends React.PureComponent<DropdownProps<T
     return id || this.uniqueDropdownId;
   }
 
-  private getItemId(item: DropdownItem<T> | DropdownLinkItem<T>, index: number) {
+  private getItemId(item: DropdownOption<T>, index: number) {
     const { id } = item;
 
     return id || `${this.getDropdownId()}-item-${index}`;
@@ -246,7 +244,7 @@ export class Dropdown<T extends any> extends React.PureComponent<DropdownProps<T
     this.toggleList();
   };
 
-  private handleOnItemClick = (item: DropdownItem<T> | DropdownLinkItem<T>) => {
+  private handleOnItemClick = (item: DropdownOption<T>) => {
     if (item.disabled) {
       return;
     }

diff --git a/packages/big-design/src/components/Dropdown/spec.tsx b/packages/big-design/src/components/Dropdown/spec.tsx
@@ -277,15 +277,17 @@ test('does not forward styles', () => {
   expect(getByRole('listbox')).not.toHaveStyle('background: red');
 });
 
-test('dropdown component renders items with tooltip (when item disabled)', () => {
+test('renders tooltip with disabled item', () => {
+  const tooltipContent = 'Option with tooltip';
+  const tooltipText = 'This is tooltip message';
   const { getByRole, getByText } = render(
     <Dropdown
       onClick={onClick}
       options={[
         { content: 'Option 1', type: 'string', value: '0' },
         {
-          content: 'Option with tooltip',
-          tooltip: { message: 'This is tooltip message' },
+          content: tooltipContent,
+          tooltip: tooltipText,
           disabled: true,
           type: 'string',
         },
@@ -297,7 +299,33 @@ test('dropdown component renders items with tooltip (when item disabled)', () =>
   const trigger = getByRole('button');
 
   fireEvent.click(trigger);
-  fireEvent.mouseEnter(getByText('Option with tooltip'));
+  fireEvent.mouseEnter(getByText(tooltipContent));
 
-  expect(getByText('This is tooltip message')).toBeInTheDocument();
+  expect(getByText(tooltipText)).toBeInTheDocument();
+});
+
+test("doesn't render tooltip on enabled item", () => {
+  const tooltipContent = 'Option with tooltip';
+  const tooltipText = 'This is tooltip message';
+  const { getByRole, getByText, queryByText } = render(
+    <Dropdown
+      onClick={onClick}
+      options={[
+        { content: 'Option 1', type: 'string', value: '0' },
+        {
+          content: tooltipContent,
+          tooltip: tooltipText,
+          type: 'string',
+        },
+        { content: 'Option 3', type: 'string', value: '2', actionType: 'destructive' },
+      ]}
+      trigger={<Button>Button</Button>}
+    />,
+  );
+  const trigger = getByRole('button');
+
+  fireEvent.click(trigger);
+  fireEvent.mouseEnter(getByText(tooltipContent));
+
+  expect(queryByText(tooltipText)).not.toBeInTheDocument();
 });
diff --git a/packages/big-design/src/components/Dropdown/types.ts b/packages/big-design/src/components/Dropdown/types.ts
@@ -2,9 +2,11 @@ import { Placement } from 'popper.js';
 
 import { ListItemProps } from '../List/Item';
 
+export type DropdownOption<T> = DropdownItem<T> | DropdownLinkItem<T>;
+
 export interface DropdownProps<T> extends Omit<React.HTMLAttributes<HTMLUListElement>, 'children'> {
   maxHeight?: number;
-  options: Array<DropdownItem<T> | DropdownLinkItem<T>>;
+  options: Array<DropdownOption<T>>;
   placement?: Placement;
   trigger: React.ReactElement;
 }
@@ -14,7 +16,7 @@ interface BaseItem<T> extends Omit<ListItemProps, 'children' | 'content' | 'onCl
   icon?: React.ReactElement;
   tooltip?: string;
   value?: T;
-  onClick?(item: DropdownItem<T> | DropdownLinkItem<T>): void;
+  onClick?(item: DropdownOption<T>): void;
 }
 
 export interface DropdownItem<T> extends BaseItem<T> {