From c302e3e138d0f53e40acac613f66c1b941e0bff7 Mon Sep 17 00:00:00 2001
From: Seung Park <seungpark@users.noreply.github.com>
Date: Thu, 15 Sep 2022 10:46:25 -0400
Subject: [PATCH] DOP-3222 follow up: Add unit tests for button uri (#688)

* DOP-2579: update banner component (#682)

* update banner component to v4. match typography with figma design

* minor. fix comment

* DOP-2581 (#683)

* update lg/badge to v5

* commit package lock file

* DOP-2581: update tests (#685)

update tests for operations

* fix button href

* remove redundant else

* update snapshot

* update color logic on button. add test for button to use link

* update snapsho

* minor. remove important styling

* remove debug console
---
 src/components/Button.js                     | 18 ++++++++---------
 tests/unit/Button.test.js                    | 21 +++++++++++++++++---
 tests/unit/__snapshots__/Button.test.js.snap |  7 +++++--
 3 files changed, 31 insertions(+), 15 deletions(-)

diff --git a/src/components/Button.js b/src/components/Button.js
index 18fef644e..1c659612f 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -5,6 +5,13 @@ import ComponentFactory from './ComponentFactory';
 import Link from './Link';
 import { css, cx } from '@leafygreen-ui/emotion';
 
+// TODO: include mapping of colors to use against button 'variant' attributes
+const buttonStyling = css`
+  &.button {
+    color: #ffffff;
+  }
+`;
+
 const Button = ({
   nodeData: {
     argument,
@@ -19,16 +26,7 @@ const Button = ({
   }
 
   return (
-    <LeafyButton
-      className={cx(
-        css`
-          color: #ffffff !important;
-        `,
-        'button'
-      )}
-      variant="primary"
-      {...componentProps}
-    >
+    <LeafyButton className={cx(componentProps.as ? buttonStyling : '', 'button')} variant="primary" {...componentProps}>
       {argument.map((child, i) => (
         <ComponentFactory {...rest} nodeData={child} key={i} />
       ))}
diff --git a/tests/unit/Button.test.js b/tests/unit/Button.test.js
index f69a8f41f..06a915ba7 100644
--- a/tests/unit/Button.test.js
+++ b/tests/unit/Button.test.js
@@ -4,8 +4,23 @@ import Button from '../../src/components/Button';
 
 // data for this component
 import mockData from './data/Button.test.json';
+import Link from '../../src/components/Link';
 
-it('renders correctly', () => {
-  const tree = render(<Button nodeData={mockData} />);
-  expect(tree.asFragment()).toMatchSnapshot();
+jest.mock('../../src/components/Link');
+
+describe('button component', () => {
+  beforeEach(() => {
+    Link.mockImplementation(jest.requireActual('../../src/components/Link').default);
+  });
+
+  it('renders correctly', () => {
+    const tree = render(<Button nodeData={mockData} />);
+    expect(tree.asFragment()).toMatchSnapshot();
+  });
+
+  it('converts to a link when passed an uri', () => {
+    Link.mockImplementation(() => <div>this is a link</div>);
+    const tree = render(<Button nodeData={mockData} />);
+    expect(tree.getByText('this is a link')).toBeTruthy();
+  });
 });
diff --git a/tests/unit/__snapshots__/Button.test.js.snap b/tests/unit/__snapshots__/Button.test.js.snap
index 9a75bc968..4513f9ade 100644
--- a/tests/unit/__snapshots__/Button.test.js.snap
+++ b/tests/unit/__snapshots__/Button.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders correctly 1`] = `
+exports[`button component renders correctly 1`] = `
 <DocumentFragment>
   .emotion-0 {
   -webkit-appearance: none;
@@ -34,7 +34,6 @@ exports[`renders correctly 1`] = `
   font-size: 13px;
   font-weight: 500;
   height: 36px;
-  color: #ffffff!important;
 }
 
 .emotion-0:focus {
@@ -66,6 +65,10 @@ exports[`renders correctly 1`] = `
   box-shadow: 0 0 0 2px #FFFFFF,0 0 0 4px #0498EC;
 }
 
+.emotion-0.button {
+  color: #ffffff;
+}
+
 .emotion-1 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;