From 1ad052570141e7359b714bf50d1a2baa94b8d225 Mon Sep 17 00:00:00 2001
From: Cuong Vu <vuhuucuong1310@gmail.com>
Date: Fri, 3 Jan 2020 10:29:55 +0700
Subject: [PATCH] [CLD-589] Add displayDuration prop to ToastMessage (#206)

* [CLD-589] Set dismiss duration to prop

* bump version
---
 package.json                                   |  2 +-
 .../__tests__/__snapshots__/index.tsx.snap     | 18 +++++++++++++++++-
 .../ToastMessage/__tests__/index.tsx           | 16 ++++++++++++----
 src/components/ToastMessage/index.tsx          | 13 ++++++++++---
 4 files changed, 40 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 672bb3ead9..83cdaa6cf4 100644
--- 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
index aa1ccdfcce..fed05b9e5a 100644
--- 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
index 21b5437773..22891be12a 100644
--- 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
index b9780a0dc0..5fff450a33 100644
--- 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 (