[CLD-589] Add displayDuration prop to ToastMessage (#206)

* [CLD-589] Set dismiss duration to prop * bump version
reapit · Jan 3, 2020 · 1ad0525 · 1ad0525
1 parent 1096807
commit 1ad0525
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 9 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@reapit/elements",
-  "version": "0.5.24",
+  "version": "0.5.25",
   "description": "A collection of React components and utilities for building apps for Reapit Marketplace",
   "main": "dist/index.js",
   "umd:main": "dist/elements.umd.production.js",

diff --git a/src/components/ToastMessage/__tests__/__snapshots__/index.tsx.snap b/src/components/ToastMessage/__tests__/__snapshots__/index.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ToastMessage should match a snapshot 1`] = `
+exports[`ToastMessage should match a snapshot when pass different props 1`] = `
 <div
   className="toast visible"
   data-test="toast-wrapper"
@@ -15,3 +15,19 @@ exports[`ToastMessage should match a snapshot 1`] = `
   </Component>
 </div>
 `;
+
+exports[`ToastMessage should match a snapshot with default baseProps 1`] = `
+<div
+  className="toast "
+  data-test="toast-wrapper"
+  onClick={[MockFunction]}
+>
+  <Component
+    fullWidth={true}
+    type="reset"
+    variant="primary"
+  >
+    Toast message
+  </Component>
+</div>
+`;
diff --git a/src/components/ToastMessage/__tests__/index.tsx b/src/components/ToastMessage/__tests__/index.tsx
@@ -3,20 +3,28 @@ import { shallow } from 'enzyme'
 import toJson from 'enzyme-to-json'
 import { ToastMessage, ToastMessageProps, ToastVariant } from '..'
 
-const defaultProps: ToastMessageProps = {
-  visible: true,
+const baseProps: ToastMessageProps = {
   message: 'Toast message',
   variant: 'primary',
   onCloseToast: jest.fn()
 }
+const defaultProps: ToastMessageProps = {
+  ...baseProps,
+  visible: true,
+  displayDuration: 5000
+}
 
 describe('ToastMessage', () => {
-  it('should match a snapshot', () => {
+  it('should match a snapshot with default baseProps', () => {
+    expect(toJson(shallow(<ToastMessage {...baseProps} />))).toMatchSnapshot()
+  })
+
+  it('should match a snapshot when pass different props', () => {
     expect(toJson(shallow(<ToastMessage {...defaultProps} />))).toMatchSnapshot()
   })
 
   it('should dismiss toast when click', () => {
-    shallow(<ToastMessage {...defaultProps} />)
+    shallow(<ToastMessage {...defaultProps} visible={true} />)
       .find('[data-test="toast-wrapper"]')
       .first()
       .simulate('click')

diff --git a/src/components/ToastMessage/index.tsx b/src/components/ToastMessage/index.tsx
@@ -4,15 +4,22 @@ import { Button } from '../Button'
 export type ToastVariant = 'primary' | 'secondary' | 'danger' | 'info'
 
 export interface ToastMessageProps {
-  visible: boolean
+  visible?: boolean
+  displayDuration?: number
   message: string
   variant: ToastVariant
   onCloseToast: () => void
 }
 
-export const ToastMessage: React.FC<ToastMessageProps> = ({ visible = false, message, onCloseToast, variant }) => {
+export const ToastMessage: React.FC<ToastMessageProps> = ({
+  visible = false,
+  displayDuration = 3000,
+  message,
+  onCloseToast,
+  variant
+}) => {
   if (visible) {
-    setTimeout(onCloseToast, 3000)
+    setTimeout(onCloseToast, displayDuration)
   }
 
   return (