From 8d9bad696d8da7360c27a3b2a249a6e9c5b76be9 Mon Sep 17 00:00:00 2001 From: Daniel Campbell Date: Thu, 2 Aug 2018 08:42:43 -0700 Subject: [PATCH] css tweaks, update tests --- .../card_select/CardSelectCard.scss | 23 ++---- .../components/card_select/CardSelectCard.tsx | 12 +++- .../card_select/CardSelectList.scss | 3 - .../components/card_select/CardSelectList.tsx | 3 +- .../card_select/test/CardSelectCard.test.tsx | 70 ++++++++++++++++--- .../card_select/test/CardSelectList.test.tsx | 28 +++++--- .../CardSelectCard.test.tsx.snap | 67 ++++++++++++++++++ .../CardSelectList.test.tsx.snap | 67 ++++++++++++++++++ 8 files changed, 232 insertions(+), 41 deletions(-) create mode 100644 ui/src/reusable_ui/components/card_select/test/__snapshots__/CardSelectCard.test.tsx.snap create mode 100644 ui/src/reusable_ui/components/card_select/test/__snapshots__/CardSelectList.test.tsx.snap diff --git a/ui/src/reusable_ui/components/card_select/CardSelectCard.scss b/ui/src/reusable_ui/components/card_select/CardSelectCard.scss index 9e389a4b0..5a3b9d5fc 100644 --- a/ui/src/reusable_ui/components/card_select/CardSelectCard.scss +++ b/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 { diff --git a/ui/src/reusable_ui/components/card_select/CardSelectCard.tsx b/ui/src/reusable_ui/components/card_select/CardSelectCard.tsx index 71405180e..01af95b44 100644 --- a/ui/src/reusable_ui/components/card_select/CardSelectCard.tsx +++ b/ui/src/reusable_ui/components/card_select/CardSelectCard.tsx @@ -19,10 +19,15 @@ interface State { @ErrorHandling class CardSelectCard extends PureComponent { + public static defaultProps: Partial = { + checked: false, + disabled: false, + } + constructor(props) { super(props) this.state = { - checked: false, + checked: this.props.checked, } } @@ -32,7 +37,8 @@ class CardSelectCard extends PureComponent { return (
{ ) } - private handleClick = e => { + private toggleChecked = e => { const {disabled} = this.props if (!disabled) { diff --git a/ui/src/reusable_ui/components/card_select/CardSelectList.scss b/ui/src/reusable_ui/components/card_select/CardSelectList.scss index 6c81f5d70..4f68bdb4b 100644 --- a/ui/src/reusable_ui/components/card_select/CardSelectList.scss +++ b/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 { diff --git a/ui/src/reusable_ui/components/card_select/CardSelectList.tsx b/ui/src/reusable_ui/components/card_select/CardSelectList.tsx index 71810fad6..b659116da 100644 --- a/ui/src/reusable_ui/components/card_select/CardSelectList.tsx +++ b/ui/src/reusable_ui/components/card_select/CardSelectList.tsx @@ -13,10 +13,11 @@ interface Props { @ErrorHandling class CardSelectList extends PureComponent { public render() { - const {children} = this.props + const {children, legend} = this.props return (
+ {legend}
{children}
) diff --git a/ui/src/reusable_ui/components/card_select/test/CardSelectCard.test.tsx b/ui/src/reusable_ui/components/card_select/test/CardSelectCard.test.tsx index 07ab8c012..1211c8b19 100644 --- a/ui/src/reusable_ui/components/card_select/test/CardSelectCard.test.tsx +++ b/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() + }) + }) }) diff --git a/ui/src/reusable_ui/components/card_select/test/CardSelectList.test.tsx b/ui/src/reusable_ui/components/card_select/test/CardSelectList.test.tsx index ef0401791..dd38a0f5a 100644 --- a/ui/src/reusable_ui/components/card_select/test/CardSelectList.test.tsx +++ b/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() + }) }) diff --git a/ui/src/reusable_ui/components/card_select/test/__snapshots__/CardSelectCard.test.tsx.snap b/ui/src/reusable_ui/components/card_select/test/__snapshots__/CardSelectCard.test.tsx.snap new file mode 100644 index 000000000..86c999a26 --- /dev/null +++ b/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`] = ` +
+ +
+`; + +exports[`Card Select Card with image matches snapshot when provided image source 1`] = ` +
+ +
+`; diff --git a/ui/src/reusable_ui/components/card_select/test/__snapshots__/CardSelectList.test.tsx.snap b/ui/src/reusable_ui/components/card_select/test/__snapshots__/CardSelectList.test.tsx.snap new file mode 100644 index 000000000..e852b97d5 --- /dev/null +++ b/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`] = ` +
+ + legend + +
+
+ +
+
+ +
+
+
+`;