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
mongodb · Sep 16, 2022 · c302e3e · c302e3e
1 parent 690752f
commit c302e3e
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 15 deletions.
diff --git 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
@@ -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
@@ -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;