diff --git a/components/array-object-table/src/__snapshots__/test.js.snap b/components/array-object-table/src/__snapshots__/test.js.snap new file mode 100644 index 0000000..f482bf6 --- /dev/null +++ b/components/array-object-table/src/__snapshots__/test.js.snap @@ -0,0 +1,214 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ArrayObjectTable matches snapshot 1`] = ` +.emotion-14 { + margin-bottom: 15px; +} + +@media only screen and (min-width:641px) { + .emotion-14 { + margin-bottom: 15px; + } +} + +.emotion-12 { + display: table; + font-family: "nta",Arial,sans-serif; + width: 100%; + table-layout: fixed; + margin-bottom: 15px; +} + +@media only screen and (min-width:641px) { + .emotion-12 { + margin-bottom: 15px; + } +} + +.emotion-0 { + border-bottom: 1px solid #bfc1c3; + display: table-cell; + font-size: 14px; + padding: 15px 4px; + vertical-align: top; + font-weight: bold; + text-align: left; +} + +.emotion-0:first-child { + padding: 15px 4px 15px 0; +} + +.emotion-0:last-child { + padding: 15px 0 15px 4px; +} + +.emotion-6 { + border-bottom: 1px solid #bfc1c3; + display: table-cell; + font-size: 14px; + padding: 15px 4px; + vertical-align: top; +} + +.emotion-6:first-child { + padding: 15px 4px 15px 0; +} + +.emotion-6:last-child { + padding: 15px 0 15px 4px; +} + + + + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + + +
+ One + + Two + + Three +
+ test + + two + + - +
+ + + + +`; diff --git a/components/array-object-table/src/index.js b/components/array-object-table/src/index.js index e47dc5b..b2880c0 100644 --- a/components/array-object-table/src/index.js +++ b/components/array-object-table/src/index.js @@ -73,16 +73,14 @@ ArrayObjectTable.propTypes = { key: PropTypes.string.isRequired, heading: PropTypes.string.isRequired, transform: PropTypes.func, - })), - array: PropTypes.arrayOf(PropTypes.object), + })).isRequired, + array: PropTypes.arrayOf(PropTypes.object).isRequired, hideWithNoValues: PropTypes.bool, skipEmptyRows: PropTypes.bool, title: PropTypes.node, }; ArrayObjectTable.defaultProps = { - fields: [], - array: [], hideWithNoValues: false, skipEmptyRows: false, title: null, diff --git a/components/array-object-table/src/test.js b/components/array-object-table/src/test.js index e22f2d0..b9aa6ae 100644 --- a/components/array-object-table/src/test.js +++ b/components/array-object-table/src/test.js @@ -1,75 +1,66 @@ import React from 'react'; -import { mount } from 'enzyme'; +import { mount, shallow } from 'enzyme'; -import Component from '.'; +import ArrayObjectTable from '.'; -describe('ArrayObjectTable', () => { - let fields = [ - { key: 'one', heading: 'One' }, - { key: 'two', heading: 'Two', transform: () => 'two' }, - { key: 'three', heading: 'Three' }, - ]; - let array = [ - {}, // empty record to be automatically omitted - { one: 'test', two: 'test' }, - ]; - const title = 'Heading'; - let wrapper; +const fields = [ + { key: 'one', heading: 'One' }, + { key: 'two', heading: 'Two', transform: () => 'two' }, + { key: 'three', heading: 'Three' }, +]; - it('renders with defaults', () => { - wrapper = mount(); - expect(wrapper.exists()).toBe(true); - }); +const array = [ + {}, + { one: 'test', two: 'test' }, +]; - it('renders with basic props', () => { - wrapper = mount(); - - expect(wrapper.exists()).toBe(true); - }); +const getRows = wrapper => wrapper.find('Table').prop('rows'); - it('renders a table of data based on props passed', () => { - const table = wrapper.find('Table'); - const rows = table.prop('rows'); - const titles = table.prop('titles'); - - expect(rows).toEqual([['-', 'two', '-'], ['test', 'two', '-']]); - expect(titles).toEqual(['One', 'Two', 'Three']); +describe('ArrayObjectTable', () => { + it('renders with required props', () => { + const wrapper = shallow(); + expect(wrapper.exists()).toBe(true); }); - it('skips empty rows when skipEmptyRows prop is passed', () => { - wrapper.setProps({ skipEmptyRows: true }); - const table = wrapper.find('Table'); - const rows = table.prop('rows'); + describe('renders table data', () => { + it('renders expected table heading cells ', () => { + const wrapper = mount(); + const titles = wrapper.find('Table').prop('titles'); + expect(titles).toEqual(['One', 'Two', 'Three']); + }); - expect(rows).toEqual([['test', 'two', '-']]); + it('renders expected table data cells', () => { + const wrapper = mount(); + expect(getRows(wrapper)).toEqual([['-', 'two', '-'], ['test', 'two', '-']]); + }); }); - it('optionally renders a heading for a table', () => { - wrapper.setProps({ title }); + describe('responds as expected to additional props', () => { + it('renders a table heading if provided', () => { + const wrapper = shallow(); + expect(wrapper.contains('Heading')).toBe(true); + }); - expect(wrapper.contains('Heading')).toBe(true); - }); + it('skips empty rows if skipEmptyRows is true', () => { + const wrapper = mount(); + expect(getRows(wrapper)).toEqual([['test', 'two', '-']]); + }); + + it('renders nothing if no rows are returned and hideWithNoValues is true', () => { + const emptyArray = [{}, {}, {}]; + const wrapper = shallow(); + expect(wrapper.html()).toBe(null); + }); - it('renders one tbody row when no rows are returned if hideWithNoValues is not true', () => { - fields = [ - { key: 'one', heading: 'One' }, - { key: 'two', heading: 'Two' }, - ]; - array = [ - {}, - {}, - ]; - wrapper = mount(); - const table = wrapper.find('Table'); - const rows = table.prop('rows'); - expect(rows).toEqual([['-', '-']]); - expect(wrapper.find('tbody tr').length).toBe(1); + it('renders one tbody row if no rows are returned and hideWithNoValues is not true', () => { + const emptyArray = [{}, {}, {}]; + const wrapper = mount(); + expect(wrapper.find('tbody tr').length).toBe(1); + }); }); - it('renders nothing when no rows are returned and hideWithNoValues is true', () => { - wrapper = mount(); - - expect(wrapper.html()).toBe(null); + it('matches snapshot', () => { + const wrapper = mount(); + expect(wrapper).toMatchSnapshot(); }); }); - diff --git a/components/arrow-left/src/__snapshots__/test.js.snap b/components/arrow-left/src/__snapshots__/test.js.snap index ef191a6..5d944cb 100644 --- a/components/arrow-left/src/__snapshots__/test.js.snap +++ b/components/arrow-left/src/__snapshots__/test.js.snap @@ -1,19 +1,68 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ArrowLeft matches snapshot 1`] = ` - - - - - - + + + + Title + + + + + <span + className="emotion-0 emotion-1" + > + Title + </span> + + + + `; diff --git a/components/arrow-left/src/test.js b/components/arrow-left/src/test.js index 5e44abe..e0150dd 100644 --- a/components/arrow-left/src/test.js +++ b/components/arrow-left/src/test.js @@ -1,39 +1,40 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; import { createMatchers } from 'jest-emotion'; import * as emotion from 'emotion'; -import Component from '.'; +import ArrowLeft from '.'; expect.extend(createMatchers(emotion)); -describe('ArrowLeft', () => { - let wrapper; - +describe('ArrowLeft', () => { it('renders without crashing', () => { - wrapper = shallow(); + const wrapper = shallow(); + expect(wrapper.exists()).toBe(true); }); it('renders with a title', () => { - wrapper = shallow(Example title); - expect(wrapper.find('title').text()).toBe('Example title'); + const wrapper = shallow(Title); + expect(wrapper.find('title').text()).toBe('Title'); }); it('renders with a colour fill', () => { - wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find('svg[fill="red"]').length).toBe(1); }); - it('supports setting of no color', () => { - expect(wrapper).not.toHaveStyleRule('color', 'purple'); - }); - it('supports setting of color', () => { - wrapper = shallow(); + const wrapper = shallow(); expect(wrapper).toHaveStyleRule('color', 'purple'); }); + it('supports no setting of color', () => { + const wrapper = shallow(); + expect(wrapper).not.toHaveStyleRule('color', 'purple'); + }); + it('matches snapshot', () => { + const wrapper = mount(Title); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/components/arrow/src/__snapshots__/test.js.snap b/components/arrow/src/__snapshots__/test.js.snap index b78e616..71b0651 100644 --- a/components/arrow/src/__snapshots__/test.js.snap +++ b/components/arrow/src/__snapshots__/test.js.snap @@ -1,14 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Arrow matches snapshot 1`] = ` - - - + + + + `; diff --git a/components/arrow/src/test.js b/components/arrow/src/test.js index f3dd27b..2956390 100644 --- a/components/arrow/src/test.js +++ b/components/arrow/src/test.js @@ -1,21 +1,21 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; -import Component from '.'; +import Arrow from '.'; describe('Arrow', () => { - let wrapper; - it('renders without crashing', () => { - wrapper = shallow(); + const wrapper = shallow(); + expect(wrapper.exists()).toBe(true); }); it('sets fill color on polygon', () => { - wrapper = shallow(); + const wrapper = shallow(); expect(wrapper.find('polygon[fill="red"]').length).toBe(1); }); it('matches snapshot', () => { + const wrapper = mount(); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/components/compact-table-accordion-group/src/__snapshots__/test.js.snap b/components/compact-table-accordion-group/src/__snapshots__/test.js.snap index 6d848dc..3d7bbc8 100644 --- a/components/compact-table-accordion-group/src/__snapshots__/test.js.snap +++ b/components/compact-table-accordion-group/src/__snapshots__/test.js.snap @@ -61,34 +61,14 @@ exports[`CompactTableAccordionGroup matches snapshot 1`] = ` { - let wrapper; - const changeHandler = jest.fn(); - - it('renders with only required properties', () => { - wrapper = mount(); - }); - - it('renders style rules', () => { - expect(wrapper).toHaveStyleRule('font-family', '"nta",Arial,sans-serif'); + it('renders with only required props', () => { + const wrapper = shallow(); + expect(wrapper.exists()).toBe(true); }); it('renders title when passed', () => { - wrapper.setProps({ title: 'Example title' }); + const wrapper = mount(); expect( wrapper .find('Title') .childAt(0) .text(), - ).toBe('Example title'); + ).toBe('Title'); }); it('triggers onChange when open button is clicked', () => { - wrapper = mount( - + const changeHandler = jest.fn(); + const wrapper = mount( + Test - , + , ); wrapper.find('OpenButton').simulate('click'); expect(changeHandler).toHaveBeenCalledTimes(1); }); it('does not trigger onChange when title is clicked and changeOnTitleClick is false', () => { - changeHandler.mockReset(); + const changeHandler = jest.fn(); + const wrapper = mount( + + Test + , + ); wrapper.find('Title').simulate('click'); - expect(changeHandler).not.toHaveBeenCalled(); + expect(changeHandler).not.toHaveBeenCalledTimes(1); }); it('triggers onChange when title is clicked and changeOnTitleClick is true', () => { - changeHandler.mockReset(); - wrapper.setProps({ changeOnTitleClick: true }); + const changeHandler = jest.fn(); + const wrapper = mount( + + Test + , + ); wrapper.find('Title').simulate('click'); expect(changeHandler).toHaveBeenCalledTimes(1); }); - + it('matches snapshot', () => { + const changeHandler = jest.fn(); + const wrapper = mount( + + Test + , + ); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/components/count/src/__snapshots__/test.js.snap b/components/count/src/__snapshots__/test.js.snap index 68fe6e1..8dca842 100644 --- a/components/count/src/__snapshots__/test.js.snap +++ b/components/count/src/__snapshots__/test.js.snap @@ -1,9 +1,21 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Count matches snapshot 1`] = ` - - - 4 - - +.emotion-0 { + font-family: "nta",Arial,sans-serif; +} + + + +
+ + 6 + +
+ + `; diff --git a/components/count/src/test.js b/components/count/src/test.js index 30691af..31960a5 100644 --- a/components/count/src/test.js +++ b/components/count/src/test.js @@ -1,20 +1,21 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; -import Component from '.'; +import Count from '.'; describe('Count', () => { - let wrapper; - - it('renders without crashing', () => { - wrapper = shallow(); + it('renders with only required props', () => { + const wrapper = shallow(); + expect(wrapper.exists()).toBe(true); }); it('displays number passed in correctly', () => { + const wrapper = shallow(); expect(wrapper.find('span').text()).toBe('4'); }); it('matches snapshot', () => { + const wrapper = mount(); expect(wrapper).toMatchSnapshot(); }); }); diff --git a/components/countdown-text-area/src/__snapshots__/test.js.snap b/components/countdown-text-area/src/__snapshots__/test.js.snap index 7322194..0631a75 100644 --- a/components/countdown-text-area/src/__snapshots__/test.js.snap +++ b/components/countdown-text-area/src/__snapshots__/test.js.snap @@ -1,14 +1,109 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`CountdownTextarea matches snapshot 1`] = ` - - - + > +
+ +