Added fade animation and snapshot testing (#5)

BenLorantfy · Cédric Delpoux · commit 8131cdcd2139 · 2018-02-03T20:02:28.000+01:00
Added fade animation props and snapshot testing
diff --git a/jest.config.json b/jest.config.json
@@ -6,5 +6,6 @@
   },
   "moduleNameMapper": {
     "\\.(css)$": "<rootDir>/node_modules/jest-css-modules"
-  }
+  },
+  "snapshotSerializers": ["enzyme-to-json/serializer"]
 }
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "enzyme": "^2.9.1",
+    "enzyme-to-json": "^2.0.1",
     "eslint": "^4.5.0",
     "eslint-config-prettier": "^2.3.0",
     "eslint-loader": "^1.9.0",
@@ -49,6 +50,7 @@
     "husky": "^0.14.3",
     "jest": "^20.0.4",
     "jest-css-modules": "^1.1.0",
+    "jest-styled-components": "^4.10.0",
     "lint-staged": "^4.0.2",
     "markdown-loader": "^2.0.1",
     "nwb": "^0.18.0",
@@ -57,7 +59,8 @@
     "react": "^15.6.1",
     "react-demo-page": "^0.2.2",
     "react-dom": "^15.6.1",
-    "react-test-renderer": "^15.6.1"
+    "react-test-renderer": "^15.6.1",
+    "sinon": "^4.2.2"
   },
   "peerDependencies": {
     "react": "^15.0.0 || ^16.0.0",
diff --git a/src/components/Tooltip/__snapshots__/index.test.js.snap b/src/components/Tooltip/__snapshots__/index.test.js.snap
@@ -0,0 +1,176 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip renders 1`] = `
+.c0 {
+  position: absolute;
+  z-index: 8;
+  top: 100%;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  margin-top: 8px;
+}
+
+<Tooltip
+  offset={8}
+  open={true}
+  placement="bottom"
+  zIndex={8}
+>
+  <styled.div
+    offset={8}
+    open={true}
+    zIndex={8}
+  >
+    <div
+      className="c0"
+      offset={8}
+      open={true}
+    >
+      😎
+    </div>
+  </styled.div>
+</Tooltip>
+`;
+
+exports[`Tooltip renders 2`] = `
+.c0 {
+  position: absolute;
+  z-index: 8;
+  bottom: 100%;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+
+<Tooltip
+  offset={8}
+  open={true}
+  placement="top"
+  zIndex={8}
+>
+  <styled.div
+    offset={8}
+    open={true}
+    zIndex={8}
+  >
+    <div
+      className="c0"
+      offset={8}
+      open={true}
+    >
+      😎
+    </div>
+  </styled.div>
+</Tooltip>
+`;
+
+exports[`Tooltip renders 3`] = `
+.c0 {
+  position: absolute;
+  z-index: 8;
+  left: 100%;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  margin-left: 8px;
+}
+
+<Tooltip
+  offset={8}
+  open={true}
+  placement="right"
+  zIndex={8}
+>
+  <styled.div
+    offset={8}
+    open={true}
+    zIndex={8}
+  >
+    <div
+      className="c0"
+      offset={8}
+      open={true}
+    >
+      😎
+    </div>
+  </styled.div>
+</Tooltip>
+`;
+
+exports[`Tooltip renders 4`] = `
+.c0 {
+  position: absolute;
+  z-index: 8;
+  right: 100%;
+  top: 50%;
+  -webkit-transform: translateY(-50%);
+  -ms-transform: translateY(-50%);
+  transform: translateY(-50%);
+  margin-right: 8px;
+}
+
+<Tooltip
+  offset={8}
+  open={true}
+  placement="left"
+  zIndex={8}
+>
+  <styled.div
+    offset={8}
+    open={true}
+    zIndex={8}
+  >
+    <div
+      className="c0"
+      offset={8}
+      open={true}
+    >
+      😎
+    </div>
+  </styled.div>
+</Tooltip>
+`;
+
+exports[`Tooltip should create a Tooltip with an animation 1`] = `
+.c0 {
+  position: absolute;
+  -webkit-animation: 5s ease-out 0s 1 bcCCNc;
+  animation: 5s ease-out 0s 1 bcCCNc;
+  z-index: 8;
+  bottom: 100%;
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%);
+  margin-bottom: 8px;
+}
+
+<Tooltip
+  fadeDuration={5}
+  fadeEasing="ease-out"
+  offset={8}
+  open={true}
+  zIndex={8}
+>
+  <styled.div
+    fadeDuration={5}
+    fadeEasing="ease-out"
+    offset={8}
+    open={true}
+    zIndex={8}
+  >
+    <div
+      className="c0"
+      offset={8}
+      open={true}
+    >
+      😎
+    </div>
+  </styled.div>
+</Tooltip>
+`;
diff --git a/src/components/Tooltip/index.js b/src/components/Tooltip/index.js
@@ -1,9 +1,31 @@
 import React from "react"
 import PropTypes from "prop-types"
-import styled from "styled-components"
+import styled, {keyframes} from "styled-components"
+import {easingPropType} from "../../utils/propTypes"
 
+const fadeAnimation = keyframes`
+  0% {
+      opacity: 0;
+  }
+  100% {
+      opacity: 1;
+  }
+`
+
+const createAnimation = props => {
+  return `animation:
+    ${props.fadeDuration}s
+    ${props.fadeEasing}
+    0s
+    1
+    ${fadeAnimation}
+  `
+}
+
+// prettier-ignore
 const Base = styled.div`
   position: absolute;
+  ${props => props.fadeDuration && `${createAnimation(props)};`}
   ${props => props.zIndex && `z-index: ${props.zIndex};`};
 `
 
@@ -42,11 +64,25 @@ const tooltips = {
   bottom: Bottom,
 }
 
-const Tooltip = ({children, offset, open, placement, zIndex}) => {
+const Tooltip = ({
+  children,
+  offset,
+  open,
+  placement,
+  zIndex,
+  fadeDuration,
+  fadeEasing,
+}) => {
   const Component = tooltips[placement] || tooltips.top
   return (
     open && (
-      <Component offset={offset} open={open} zIndex={zIndex}>
+      <Component
+        offset={offset}
+        open={open}
+        zIndex={zIndex}
+        fadeDuration={fadeDuration}
+        fadeEasing={fadeEasing}
+      >
         {children}
       </Component>
     )
@@ -59,6 +95,8 @@ Tooltip.propTypes = {
   open: PropTypes.bool,
   placement: PropTypes.string,
   zIndex: PropTypes.number,
+  fadeEasing: easingPropType,
+  fadeDuration: PropTypes.number,
 }
 
 export default Tooltip
diff --git a/src/components/Tooltip/index.test.js b/src/components/Tooltip/index.test.js
@@ -1,6 +1,7 @@
 import {mount} from "enzyme"
 import React from "react"
 import Tooltip from "./index"
+import "jest-styled-components"
 
 const tooltipProps = {
   offset: 8,
@@ -16,13 +17,32 @@ const NoTooltipFixture = <Tooltip {...tooltipProps} open={false} />
 
 describe("Tooltip", () => {
   it("renders", () => {
-    mount(TooltipUpFixture)
-    mount(TooltipBottomFixture)
-    mount(TooltipLeftFixture)
-    mount(TooltipRightFixture)
+    const wrappers = [
+      mount(TooltipUpFixture),
+      mount(TooltipBottomFixture),
+      mount(TooltipLeftFixture),
+      mount(TooltipRightFixture),
+    ]
+
+    wrappers.forEach(wrapper => {
+      expect(wrapper).not.toHaveStyleRule("animation", /.*/)
+      expect(wrapper).toMatchSnapshot()
+    })
   })
 
   it("do not render", () => {
-    mount(NoTooltipFixture)
+    expect(
+      mount(NoTooltipFixture)
+        .children()
+        .get(0)
+    ).toBeFalsy()
+  })
+
+  it("should create a Tooltip with an animation", () => {
+    const wrapper = mount(
+      <Tooltip {...tooltipProps} fadeDuration={5} fadeEasing={"ease-out"} />
+    )
+    expect(wrapper).toHaveStyleRule("animation", /5s ease-out 0s 1 \w+/)
+    expect(wrapper).toMatchSnapshot()
   })
 })
diff --git a/src/index.js b/src/index.js
@@ -5,6 +5,7 @@ import styled from "styled-components"
 import Arrow from "./components/Arrow"
 import Tooltip from "./components/Tooltip"
 import Bubble from "./components/Bubble"
+import {easingPropType} from "./utils/propTypes"
 
 const Container = styled.div`
   position: relative;
@@ -47,6 +48,8 @@ class Wrapper extends React.Component {
       placement,
       radius,
       zIndex,
+      fadeEasing,
+      fadeDuration,
       ...props
     } = this.props
     const hasTrigger = children !== undefined && children !== null
@@ -56,6 +59,8 @@ class Wrapper extends React.Component {
         placement={placement}
         offset={arrow}
         zIndex={zIndex}
+        fadeEasing={fadeEasing}
+        fadeDuration={fadeDuration}
       >
         <Bubble
           background={background}
@@ -106,6 +111,8 @@ Wrapper.propTypes = {
   placement: PropTypes.oneOf(["left", "top", "right", "bottom"]),
   radius: PropTypes.number,
   zIndex: PropTypes.number,
+  fadeEasing: easingPropType,
+  fadeDuration: PropTypes.number,
 }
 
 Wrapper.defaultProps = {
@@ -121,6 +128,8 @@ Wrapper.defaultProps = {
   placement: "top",
   radius: 0,
   zIndex: 1,
+  fadeEasing: "linear",
+  fadeDuration: 0,
 }
 
 Wrapper.displayName = "Tooltip.Wrapper"
diff --git a/src/utils/propTypes.js b/src/utils/propTypes.js
diff --git a/src/utils/propTypes.test.js b/src/utils/propTypes.test.js

Original file line number	Diff line number	Diff line change
`@@ -6,5 +6,6 @@`
`6`	`6`	`},`
`7`	`7`	`"moduleNameMapper": {`
`8`	`8`	`"\\.(css)$": "<rootDir>/node_modules/jest-css-modules"`
`9`		`- }`
	`9`	`+ },`
	`10`	`+ "snapshotSerializers": ["enzyme-to-json/serializer"]`
`10`	`11`	`}`