New disabled prop, new tests. (#14)

instacart · Aug 9, 2017 · f6d36d1 · f6d36d1
1 parent e18621f
commit f6d36d1
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 2 deletions.
diff --git a/src/components/Buttons/CircleButton.js b/src/components/Buttons/CircleButton.js
@@ -55,6 +55,7 @@ const CircleButton = props => {
         styles.default,
         props.styles
       ]}
+      disabled={props.disabled}
     >
       { props.children }
     </button>
@@ -64,6 +65,8 @@ const CircleButton = props => {
 CircleButton.propTypes = {
   /** Label to be used by screen readers */
   ariaLabel: PropTypes.string,
+  /** Bool to disable click/touch listeners */
+  disabled: PropTypes.bool,
   /** Callback function called after button click */
   onClick: PropTypes.func,
   /** Optional style overrides */

diff --git a/src/components/Buttons/__tests__/CircleButton.spec.js b/src/components/Buttons/__tests__/CircleButton.spec.js
@@ -66,6 +66,21 @@ it('renders CircleButton with passed ariaLabel correctly', () => {
   expect(tree).toMatchSnapshot()
 })
 
+it('renders CircleButton with passed disabled prop correctly', () => {
+  const tree = renderer.create(
+    <StyleRoot>
+      <div>
+        <CircleButton
+          disabled={true}
+        >
+          1
+        </CircleButton>
+      </div>
+    </StyleRoot>
+  ).toJSON()
+  expect(tree).toMatchSnapshot()
+})
+
 it('calls onClick callback correctly', () => {
   const onClick = spy()
   const CButton = mount(
@@ -85,11 +100,15 @@ it('calls onClick callback correctly', () => {
   expect(onClick.calledOnce).toBeTruthy()
 })
 
-it('does not call onClick when not passed one', () => {
+it('does not call onClick when disabled prop is true', () => {
+  const onClick = spy()
   const CButton = mount(
     <StyleRoot>
       <div>
-        <CircleButton>
+        <CircleButton
+          onClick={onClick}
+          disabled={true}
+        >
           1
         </CircleButton>
       </div>
@@ -98,4 +117,5 @@ it('does not call onClick when not passed one', () => {
 
   const button = CButton.find('button').first()
   button.simulate('click')
+  expect(onClick.calledOnce).toBeFalsy()
 })
diff --git a/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap b/src/components/Buttons/__tests__/__snapshots__/CircleButton.spec.js.snap
@@ -9,6 +9,7 @@ exports[`renders CircleButton with Icon correctly 1`] = `
       aria-label={undefined}
       className="rmq-4534e6b"
       data-radium={true}
+      disabled={undefined}
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -76,6 +77,54 @@ exports[`renders CircleButton with passed ariaLabel correctly 1`] = `
       aria-label="this is a button test"
       className="rmq-4534e6b"
       data-radium={true}
+      disabled={undefined}
+      onBlur={[Function]}
+      onClick={[Function]}
+      onFocus={[Function]}
+      onKeyDown={[Function]}
+      onKeyUp={[Function]}
+      onMouseDown={[Function]}
+      onMouseEnter={[Function]}
+      onMouseLeave={[Function]}
+      style={
+        Object {
+          "backgroundColor": "#FFFFFF",
+          "border": "0",
+          "borderRadius": "50%",
+          "boxShadow": "0 1px 2px 0 rgba(0, 0, 0, 0.26), 0 1px 4px 0 rgba(0, 0, 0, 0.16)",
+          "color": "#43B02A",
+          "height": "40px",
+          "lineHeight": "1",
+          "textAlign": "center",
+          "transition": "background-color 150ms ease-in-out",
+          "width": "40px",
+          "zIndex": 100,
+        }
+      }
+    >
+      1
+    </button>
+  </div>
+  <style
+    dangerouslySetInnerHTML={
+      Object {
+        "__html": "@media (max-width: 767px){ .rmq-4534e6b{display: none !important;}}",
+      }
+    }
+  />
+</div>
+`;
+
+exports[`renders CircleButton with passed disabled prop correctly 1`] = `
+<div
+  data-radium={true}
+>
+  <div>
+    <button
+      aria-label={undefined}
+      className="rmq-4534e6b"
+      data-radium={true}
+      disabled={true}
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -122,6 +171,7 @@ exports[`renders CircleButton with passed styles correctly 1`] = `
       aria-label={undefined}
       className="rmq-4534e6b"
       data-radium={true}
+      disabled={undefined}
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}
@@ -171,6 +221,7 @@ exports[`renders basic CircleButton correctly 1`] = `
       aria-label={undefined}
       className="rmq-4534e6b"
       data-radium={true}
+      disabled={undefined}
       onBlur={[Function]}
       onClick={[Function]}
       onFocus={[Function]}

diff --git a/src/index.js b/src/index.js
@@ -1,4 +1,5 @@
 import colors from './styles/colors/index'
+import CircleButton from './components/Buttons/CircleButton'
 import Column from './components/Grid/Column'
 import GlobalTheme from './styles/GlobalTheme'
 import Grid from './components/Grid/Grid'
@@ -11,6 +12,7 @@ import SetStyles from './styles/SetStyles'
 
 export {
   colors,
+  CircleButton,
   Column,
   GlobalTheme,
   Grid,