From 010a76e97d3aa938afaeb4b2e696689f58c0075b Mon Sep 17 00:00:00 2001
From: Aanand Prasad <aanand.prasad@gmail.com>
Date: Wed, 31 Jan 2018 14:25:54 +0000
Subject: [PATCH] test(ui): fix test failures
---
packages/ui/src/atoms/AlignmentBox.js | 14 +++++----
packages/ui/test/AlignmentBox.test.js | 30 +++++++++----------
.../__snapshots__/AlignmentBox.test.js.snap | 20 ++++++++++++-
.../AlignmentBoxWithLabel.test.js.snap | 2 +-
.../__snapshots__/AlignmentTool.test.js.snap | 4 +--
5 files changed, 45 insertions(+), 25 deletions(-)
diff --git a/packages/ui/src/atoms/AlignmentBox.js b/packages/ui/src/atoms/AlignmentBox.js
index a14108e69..f9481d510 100644
--- a/packages/ui/src/atoms/AlignmentBox.js
+++ b/packages/ui/src/atoms/AlignmentBox.js
@@ -6,6 +6,10 @@ const lightGrey = '#b3b3b3'
const mainGrey = '#666'
const whiteRGBA = 'rgba(255, 255, 255, 1)'
+const borderRule = position => props => `
+ border-${position}-width: ${props.noBorder[position] ? '0' : '1px'};
+ `
+
const Root = styled.div.attrs({
role: 'presentation',
})`
@@ -16,12 +20,10 @@ const Root = styled.div.attrs({
border-style: solid;
border-color: ${mainGrey};
- border-top-width: ${props => (props.noBorder.top ? 0 : 1)}px;
- border-right-width: ${props => (props.noBorder.right ? 0 : 1)}px;
- border-bottom-width: ${props => (props.noBorder.bottom ? 0 : 1)}px;
- border-left-width: ${props => (props.noBorder.left ? 0 : 1)}px;
-
- background-color: ${props => (props.active ? mainGrey : 'transparent')};
+ ${borderRule('top')} ${borderRule('right')} ${borderRule(
+ 'bottom',
+ )} ${borderRule('left')} background-color: ${props =>
+ props.active ? mainGrey : 'transparent'};
&:hover {
background-color: ${lightGrey};
diff --git a/packages/ui/test/AlignmentBox.test.js b/packages/ui/test/AlignmentBox.test.js
index dacaab237..df262ea93 100644
--- a/packages/ui/test/AlignmentBox.test.js
+++ b/packages/ui/test/AlignmentBox.test.js
@@ -1,6 +1,7 @@
import React from 'react'
import { shallow, mount } from 'enzyme'
import renderer from 'react-test-renderer'
+import 'jest-styled-components'
import AlignmentBox from '../src/atoms/AlignmentBox'
@@ -22,9 +23,6 @@ const requiredProps = {
id: 'left',
}
-const wrapper = shallow(<AlignmentBox {...requiredProps} />)
-const wrapperMounted = mount(<AlignmentBox {...requiredProps} />)
-
describe('AlignmentBox', () => {
test('is rendered correctly', () => {
const tree = renderer.create(<AlignmentBox {...requiredProps} />).toJSON()
@@ -32,6 +30,8 @@ describe('AlignmentBox', () => {
})
test('gets the correct props', () => {
+ const wrapperMounted = mount(<AlignmentBox {...requiredProps} />)
+
const noBorderDefaults = {
top: false,
bottom: false,
@@ -45,21 +45,21 @@ describe('AlignmentBox', () => {
})
test('with default props has borders and has not active indicator', () => {
- expect(wrapper.is('.active')).toBe(false)
- expect(wrapper.is('.noBorderTop')).toBe(false)
- expect(wrapper.is('.noBorderRight')).toBe(false)
- expect(wrapper.is('.noBorderBottom')).toBe(false)
- expect(wrapper.is('.noBorderLeft')).toBe(false)
+ const tree = renderer.create(<AlignmentBox {...requiredProps} />).toJSON()
+ expect(tree).toHaveStyleRule('background-color', 'transparent')
+ expect(tree).toHaveStyleRule('border-top-width', '1px')
+ expect(tree).toHaveStyleRule('border-right-width', '1px')
+ expect(tree).toHaveStyleRule('border-bottom-width', '1px')
+ expect(tree).toHaveStyleRule('border-left-width', '1px')
})
test('with given props has the correct classes', () => {
- const newWrapper = shallow(<AlignmentBox {...props} />)
-
- expect(newWrapper.is('.active')).toBe(true)
- expect(newWrapper.is('.noBorderTop')).toBe(true)
- expect(newWrapper.is('.noBorderRight')).toBe(true)
- expect(newWrapper.is('.noBorderBottom')).toBe(true)
- expect(newWrapper.is('.noBorderLeft')).toBe(true)
+ const tree = renderer.create(<AlignmentBox {...props} />).toJSON()
+ expect(tree).toHaveStyleRule('background-color', '#666')
+ expect(tree).toHaveStyleRule('border-top-width', '0')
+ expect(tree).toHaveStyleRule('border-right-width', '0')
+ expect(tree).toHaveStyleRule('border-bottom-width', '0')
+ expect(tree).toHaveStyleRule('border-left-width', '0')
})
test('on click the corresponding method is triggered', () => {
diff --git a/packages/ui/test/__snapshots__/AlignmentBox.test.js.snap b/packages/ui/test/__snapshots__/AlignmentBox.test.js.snap
index f7f271185..86696b1d2 100644
--- a/packages/ui/test/__snapshots__/AlignmentBox.test.js.snap
+++ b/packages/ui/test/__snapshots__/AlignmentBox.test.js.snap
@@ -1,8 +1,26 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AlignmentBox is rendered correctly 1`] = `
+.c0 {
+ box-shadow: inset 0 0 0 2px rgba(255,255,255,1);
+ cursor: pointer;
+ height: 26px;
+ width: 17px;
+ border-style: solid;
+ border-color: #666;
+ border-top-width: 1px;
+ border-right-width: 1px;
+ border-bottom-width: 1px;
+ border-left-width: 1px;
+ background-color: transparent;
+}
+
+.c0:hover {
+ background-color: #b3b3b3;
+}
+
<div
- className="root"
+ className="c0"
id="left"
onClick={[Function]}
role="presentation"
diff --git a/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap b/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
index 8379b0f9e..187ac4791 100644
--- a/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
+++ b/packages/ui/test/__snapshots__/AlignmentBoxWithLabel.test.js.snap
@@ -10,7 +10,7 @@ exports[`AlignmentBoxWithLabel is rendered correctly 1`] = `
Left
</span>
<div
- className="root"
+ className="sc-bdVaJa iAeTlR"
id="left"
onClick={[Function]}
role="presentation"
diff --git a/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap b/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
index 09d63818e..a16d41103 100644
--- a/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
+++ b/packages/ui/test/__snapshots__/AlignmentTool.test.js.snap
@@ -13,7 +13,7 @@ exports[`AlignmentTool is rendered correctly 1`] = `
Left
</span>
<div
- className="root noBorderRight"
+ className="sc-bdVaJa ieYRgr"
id="left"
onClick={[Function]}
role="presentation"
@@ -31,7 +31,7 @@ exports[`AlignmentTool is rendered correctly 1`] = `
right
</span>
<div
- className="root noBorderLeft"
+ className="sc-bdVaJa fCBdDA"
id="right"
onClick={[Function]}
role="presentation"
--
GitLab