css tweaks, update tests

ui/src/reusable_ui/components/card_select/CardSelectCard.scss

@@ -5,12 +5,11 @@
 .card-select--card {
     background-color: $g1-raven;
     border-radius: $radius;
+    border: 3px solid transparent;
     height: 197px;
     width: 197px;
     margin: $ix-marg-b;
-    border: 3px solid transparent;
-    transition: border 0.2s ease;
-    transition: background-color 0.2s ease;
+    transition: border-color .2s ease, background-color .2s ease;
     box-sizing: content-box;
 }
 
@@ -39,12 +38,8 @@
     }
 }
 
-.card-select--active:hover {
-    border: 3px solid $c-rainforest-disabled;
-}
-
 .card-select--active.card-select--checked {
-    border: 3px solid $c-rainforest;
+    border-color: $c-rainforest;
 }
 
 .card-select--disabled {
@@ -63,7 +58,9 @@
     width: 100%;
     height: 100%;
     input {
-      background: white;
+        position: absolute;
+        opacity: 0;
+        cursor: pointer;
     }
 }
 
@@ -79,12 +76,6 @@
   font-weight: 600;
 }
 
-.card-select--container input {
-    position: absolute;
-    opacity: 0;
-    cursor: pointer;
-}
-
 .card-select--checkmark {
     position: absolute;
     left: $ix-marg-c;
@@ -93,7 +84,7 @@
     width: 22px;
     color: $c-rainforest;
     opacity: 0;
-    transition: opacity .2s;
+    transition: opacity .2s ease;
 }
 
 .card-select--checkmark.card-select--checked {

ui/src/reusable_ui/components/card_select/CardSelectCard.tsx

@@ -19,10 +19,15 @@ interface State {
 
 @ErrorHandling
 class CardSelectCard extends PureComponent<Props, State> {
+  public static defaultProps: Partial<Props> = {
+    checked: false,
+    disabled: false,
+  }
+
   constructor(props) {
     super(props)
     this.state = {
-      checked: false,
+      checked: this.props.checked,
     }
   }
 
@@ -32,7 +37,8 @@ class CardSelectCard extends PureComponent<Props, State> {
 
     return (
       <div
-        onClick={this.handleClick}
+        data-toggle="card_toggle"
+        onClick={this.toggleChecked}
         className={classnames('card-select--card', {
           'card-select--checked': checked,
           'card-select--disabled': disabled,
@@ -65,7 +71,7 @@ class CardSelectCard extends PureComponent<Props, State> {
     )
   }
 
-  private handleClick = e => {
+  private toggleChecked = e => {
     const {disabled} = this.props
 
     if (!disabled) {

ui/src/reusable_ui/components/card_select/CardSelectList.scss

@@ -1,11 +1,8 @@
 @import 'src/style/modules/influx-colors';
 
 .card-select--wrapper {
-  background-color: $g3-castle;
-  width: 100%;
   border: none;
   box-sizing: border-box;
-  padding: 20px;
 }
 
 .card-select--cards {

ui/src/reusable_ui/components/card_select/CardSelectList.tsx

@@ -13,10 +13,11 @@ interface Props {
 @ErrorHandling
 class CardSelectList extends PureComponent<Props> {
   public render() {
-    const {children} = this.props
+    const {children, legend} = this.props
 
     return (
       <fieldset className="card-select--wrapper">
+        <legend>{legend}</legend>
         <div className="card-select--cards">{children}</div>
       </fieldset>
     )

ui/src/reusable_ui/components/card_select/test/CardSelectCard.test.tsx

@@ -8,11 +8,11 @@ describe('Card Select Card', () => {
 
   const wrapperSetup = (override = {}) => {
     const props = {
-      id: null,
-      label: null,
-      image: null,
-      checked: null,
-      disabled: null,
+      id: 'card_id',
+      label: 'Card Label',
+      image: undefined,
+      checked: undefined,
+      disabled: undefined,
       ...override,
     }
 
@@ -28,7 +28,61 @@ describe('Card Select Card', () => {
     expect(wrapper).toHaveLength(1)
   })
 
-  // it('matches snapshot with minimal props', () => {
-  //   expect(wrapper).toMatchSnapshot()
-  // })
+  it('renders a div with data-toggle attribute', () => {
+    const toggle = wrapper
+      .find('div')
+      .filterWhere(div => div.prop('data-toggle'))
+    expect(toggle).toHaveLength(1)
+    expect(toggle.prop('data-toggle')).toBe('card_toggle')
+  })
+
+  it('renders one label', () => {
+    expect(wrapper.find('label')).toHaveLength(1)
+  })
+
+  it('renders one input field of type checkbox', () => {
+    const field = wrapper.find('input')
+    expect(field).toHaveLength(1)
+    expect(field.prop('type')).toBe('checkbox')
+  })
+
+  describe('toggleChecked method', () => {
+    it('sets checked to true if false', () => {
+      expect(wrapper.find('input').prop('checked')).toBe(false)
+      wrapper
+        .find('div')
+        .filterWhere(div => div.prop('data-toggle'))
+        .simulate('click', {preventDefault() {}})
+      expect(wrapper.find('input').prop('checked')).toBe(true)
+    })
+
+    it('sets checked to false if true', () => {
+      wrapper = wrapperSetup({checked: true})
+      expect(wrapper.find('input').prop('checked')).toBe(true)
+      wrapper
+        .find('div')
+        .filterWhere(div => div.prop('data-toggle'))
+        .simulate('click', {preventDefault() {}})
+      expect(wrapper.find('input').prop('checked')).toBe(false)
+    })
+  })
+
+  it('matches snapshot with minimal props', () => {
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  describe('with image', () => {
+    beforeEach(() => {
+      jest.resetAllMocks()
+      wrapper = wrapperSetup({image: 'URL'})
+    })
+
+    it('renders an image tag if passed an image source', () => {
+      expect(wrapper.find('img')).toHaveLength(1)
+    })
+
+    it('matches snapshot when provided image source', () => {
+      expect(wrapper).toMatchSnapshot()
+    })
+  })
 })

ui/src/reusable_ui/components/card_select/test/CardSelectList.test.tsx

@@ -9,8 +9,8 @@ describe('Card Select Card', () => {
 
   const wrapperSetup = (override = {}) => {
     const props = {
-      children: null,
-      legend: null,
+      children: undefined,
+      legend: 'legend',
       ...override,
     }
 
@@ -19,10 +19,11 @@ describe('Card Select Card', () => {
 
   const childSetup = (override = {}) => {
     const props = {
-      id: null,
-      label: null,
-      image: null,
-      checked: null,
+      id: 'card_id',
+      label: 'Card Label',
+      image: undefined,
+      checked: undefined,
+      disabled: undefined,
       ...override,
     }
 
@@ -32,7 +33,6 @@ describe('Card Select Card', () => {
   const cardChildren = [childSetup(), childSetup()]
 
   beforeEach(() => {
-    jest.resetAllMocks()
     wrapper = wrapperSetup({children: cardChildren})
   })
 
@@ -40,7 +40,15 @@ describe('Card Select Card', () => {
     expect(wrapper).toHaveLength(1)
   })
 
-  // it('matches snapshot with minimal props', () => {
-  //   expect(wrapper).toMatchSnapshot()
-  // })
+  it('renders one fieldset', () => {
+    expect(wrapper.find('fieldset')).toHaveLength(1)
+  })
+
+  it('renders one legend', () => {
+    expect(wrapper.find('legend')).toHaveLength(1)
+  })
+
+  it('matches snapshot with two children', () => {
+    expect(wrapper).toMatchSnapshot()
+  })
 })

ui/src/reusable_ui/components/card_select/test/__snapshots__/CardSelectCard.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card Select Card matches snapshot with minimal props 1`] = `
+<div
+  className="card-select--card card-select--active"
+  data-toggle="card_toggle"
+  onClick={[Function]}
+>
+  <label
+    className="card-select--container"
+  >
+    <span
+      className="card-select--label"
+    >
+      Card Label
+    </span>
+    <input
+      checked={false}
+      disabled={false}
+      id="card_select_card_id"
+      name="card_select_card_id"
+      type="checkbox"
+      value="card_id"
+    />
+    <span
+      className="card-select--checkmark icon checkmark"
+    />
+  </label>
+</div>
+`;
+
+exports[`Card Select Card with image matches snapshot when provided image source 1`] = `
+<div
+  className="card-select--card card-select--active"
+  data-toggle="card_toggle"
+  onClick={[Function]}
+>
+  <label
+    className="card-select--container"
+  >
+    <span
+      className="card-select--label"
+    >
+      Card Label
+    </span>
+    <input
+      checked={false}
+      disabled={false}
+      id="card_select_card_id"
+      name="card_select_card_id"
+      type="checkbox"
+      value="card_id"
+    />
+    <span
+      className="card-select--checkmark icon checkmark"
+    />
+    <div
+      className="card-select--image"
+    >
+      <img
+        alt="Card Label icon"
+        src="URL"
+      />
+    </div>
+  </label>
+</div>
+`;

ui/src/reusable_ui/components/card_select/test/__snapshots__/CardSelectList.test.tsx.snap

@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card Select Card matches snapshot with two children 1`] = `
+<fieldset
+  className="card-select--wrapper"
+>
+  <legend>
+    legend
+  </legend>
+  <div
+    className="card-select--cards"
+  >
+    <div
+      className="card-select--card card-select--active"
+      data-toggle="card_toggle"
+      onClick={[Function]}
+    >
+      <label
+        className="card-select--container"
+      >
+        <span
+          className="card-select--label"
+        >
+          Card Label
+        </span>
+        <input
+          checked={false}
+          disabled={false}
+          id="card_select_card_id"
+          name="card_select_card_id"
+          type="checkbox"
+          value="card_id"
+        />
+        <span
+          className="card-select--checkmark icon checkmark"
+        />
+      </label>
+    </div>
+    <div
+      className="card-select--card card-select--active"
+      data-toggle="card_toggle"
+      onClick={[Function]}
+    >
+      <label
+        className="card-select--container"
+      >
+        <span
+          className="card-select--label"
+        >
+          Card Label
+        </span>
+        <input
+          checked={false}
+          disabled={false}
+          id="card_select_card_id"
+          name="card_select_card_id"
+          type="checkbox"
+          value="card_id"
+        />
+        <span
+          className="card-select--checkmark icon checkmark"
+        />
+      </label>
+    </div>
+  </div>
+</fieldset>
+`;