Commit 8ceba26a authored by Peter East's avatar Peter East

fix: tests for TwoColumnLayout

parent fdc71012
Pipeline #12642 passed with stages
in 13 minutes and 12 seconds
......@@ -3,6 +3,20 @@ import PropTypes from 'prop-types'
import styled from 'styled-components'
import { th, media } from '@pubsweet/ui-toolkit'
const InternalBoxWrapper = ({ marginBottom, paddingX, width, children }) => {
const Wrapper = styled.div`
box-sizing: border-box;
padding-bottom: ${th(`space.${marginBottom}`)};
padding-left: ${th(`space.${paddingX}`)};
padding-right: ${th(`space.${paddingX}`)};
${media.tabletLandscapeUp`
width: 50%;
`};
width: ${width};
`
return <Wrapper>{children}</Wrapper>
}
const TwoColumnLayout = ({
customWidth = '100%',
paddingX = 2,
......@@ -18,23 +32,15 @@ const TwoColumnLayout = ({
margin-right: calc(0px - ${th('space.2')});
`
const InternalBoxWrapper = styled.div`
box-sizing: border-box;
margin-bottom: ${bottomSpacing ? th('space.3') : 0};
padding-left: ${th(`space.${paddingX}`)};
padding-right: ${th(`space.${paddingX}`)};
${media.tabletLandscapeUp`
width: 50%;
`};
width: ${customWidth};
`
return (
<FlexWrapper {...props}>
{React.Children.map(children, (item, index) => (
<InternalBoxWrapper
// try to use the key property of the React element
key={item.key || index}
marginBottom={bottomSpacing ? 3 : 0}
paddingX={paddingX}
width={customWidth}
>
{item}
</InternalBoxWrapper>
......@@ -48,7 +54,6 @@ TwoColumnLayout.propTypes = {
* Set to false to disable bottom spacing on items.
*/
bottomSpacing: PropTypes.bool,
customWitdh: PropTypes.arrayOf(PropTypes.number),
}
TwoColumnLayout.defaultProps = {
......
......@@ -17,13 +17,19 @@ describe('TwoColumnLayout', () => {
</TwoColumnLayout>,
)
it('returns no Box components when there are no children passed', () => {
expect(makeWrapperWithChildren(0).find('Box')).toHaveLength(0)
expect(makeWrapperWithChildren(0).find('InternalBoxWrapper')).toHaveLength(
0,
)
})
it('returns one Box component when one child element is passed', () => {
expect(makeWrapperWithChildren(1).find('Box')).toHaveLength(1)
it('returns one InternalBoxWrapper component when one child element is passed', () => {
expect(makeWrapperWithChildren(1).find('InternalBoxWrapper')).toHaveLength(
1,
)
})
it('returns many Box component when many childen are passed', () => {
expect(makeWrapperWithChildren(10).find('Box')).toHaveLength(10)
it('returns many InternalBoxWrapper component when many childen are passed', () => {
expect(makeWrapperWithChildren(10).find('InternalBoxWrapper')).toHaveLength(
10,
)
})
it('uses index of child as a key when no keys passed', () => {
expect(
......@@ -47,7 +53,7 @@ describe('TwoColumnLayout', () => {
<div />
</TwoColumnLayout>,
)
expect(wrapper.find('Box').prop('mb')).toEqual(3)
expect(wrapper.find('InternalBoxWrapper').prop('marginBottom')).toEqual(3)
})
it('maps paddingX to the px prop of the child Box components', () => {
const wrapper = shallow(
......@@ -55,7 +61,7 @@ describe('TwoColumnLayout', () => {
<div />
</TwoColumnLayout>,
)
expect(wrapper.find('Box').prop('px')).toEqual(1)
expect(wrapper.find('InternalBoxWrapper').prop('paddingX')).toEqual(1)
})
it('maps customWidth to the width prop of the child Box components', () => {
const wrapper = shallow(
......@@ -63,6 +69,6 @@ describe('TwoColumnLayout', () => {
<div />
</TwoColumnLayout>,
)
expect(wrapper.find('Box').prop('width')).toEqual('100px')
expect(wrapper.find('InternalBoxWrapper').prop('width')).toEqual('100px')
})
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment