prioritise borderVariant over selected prop (#149)

Author: adrianhhong

src/components/node/node-border.test.tsx

@@ -16,7 +16,9 @@ describe('node-border', () => {
   it('Should have animated preview border', () => {
     renderComponent({ variant: 'preview' });
     const result = screen.getByText('child');
-    expect(getComputedStyle(result).animation).not.toBeEmpty();
+    const animationValue = getComputedStyle(result).animation;
+    expect(animationValue).toBeTruthy();
+    expect(animationValue).not.toBe('none');
   });
 
   it('Should have subtle border', () => {

src/components/node/node-border.tsx

@@ -46,14 +46,16 @@ export const NodeBorder = ({ children, variant }: PropsWithChildren<Props>) => {
   if (variant === 'preview') {
     return (
       <Border>
-        <AnimatedBorder>{children}</AnimatedBorder>
+        <AnimatedBorder data-testid="node-border">{children}</AnimatedBorder>
       </Border>
     );
   }
 
   return (
     <Border>
-      <BasicBorder outlineBorderColor={getBasicBorderColor()}>{children}</BasicBorder>
+      <BasicBorder data-testid="node-border" outlineBorderColor={getBasicBorderColor()}>
+        {children}
+      </BasicBorder>
     </Border>
   );
 };

src/components/node/node.test.tsx

@@ -1,6 +1,7 @@
 import { screen } from '@testing-library/react';
 import { NodeProps, useViewport } from '@xyflow/react';
 import { userEvent } from '@testing-library/user-event';
+import { palette } from '@leafygreen-ui/palette';
 
 import { render } from '@/mocks/testing-utils';
 import { InternalNode } from '@/types/internal';
@@ -104,4 +105,11 @@ describe('node', () => {
     await userEvent.click(button);
     expect(onAddFieldToNodeClickMock).toHaveBeenCalled();
   });
+
+  it('Should prioritise borderVariant over selected prop when setting the border', () => {
+    render(
+      <Node {...DEFAULT_PROPS} selected type="collection" data={{ ...DEFAULT_PROPS.data, borderVariant: 'subtle' }} />,
+    );
+    expect(getComputedStyle(screen.getByTestId('node-border')).outline).toEqual(`2px solid ${palette.gray.base}`);
+  });
 });

src/components/node/node.tsx

@@ -138,6 +138,13 @@ export const Node = ({
     return theme.node.mongoDBAccent;
   };
 
+  const getBorderVariant = () => {
+    if (borderVariant) {
+      return borderVariant;
+    }
+    return selected ? 'selected' : undefined;
+  };
+
   const getHeaderBackground = () => {
     if (disabled && !isHovering) {
       return theme.node.disabledHeader;
@@ -176,7 +183,7 @@ export const Node = ({
 
   return (
     <div title={title} onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-      <NodeBorder variant={selected ? 'selected' : borderVariant}>
+      <NodeBorder variant={getBorderVariant()}>
         <NodeHandle
           id="source"
           position={Position.Right}