[GH-832] Add unit test for flashMessage component (#1522)

* test: add unit test for flashMessage component

* Address concerns

Co-authored-by: Hossein Ahmadian-Yazdi <hyazdi1997@gmail.com>

webapp/src/components/__snapshots__/flashMessages.test.tsx.snap

@@ -0,0 +1,55 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`components/flashMessages renders a flash message with high severity 1`] = `
+<div>
+  <div
+    class="FlashMessages high flashIn"
+  >
+    Mock Content
+  </div>
+</div>
+`;
+
+exports[`components/flashMessages renders a flash message with low severity 1`] = `
+<div>
+  <div
+    class="FlashMessages low flashIn"
+  >
+    Mock Content
+  </div>
+</div>
+`;
+
+exports[`components/flashMessages renders a flash message with low severity and check onClick on flash works 1`] = `
+<div>
+  <div
+    class="FlashMessages low flashOut"
+  >
+    Mock Content
+  </div>
+</div>
+`;
+
+exports[`components/flashMessages renders a flash message with low severity and custom HTML in flash message 1`] = `
+<div>
+  <div
+    class="FlashMessages low flashIn"
+  >
+    <div
+      data-testid="mock-test-id"
+    >
+      Mock Content
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/flashMessages renders a flash message with normal severity 1`] = `
+<div>
+  <div
+    class="FlashMessages normal flashIn"
+  >
+    Mock Content
+  </div>
+</div>
+`;

webapp/src/components/flashMessages.test.tsx

@@ -0,0 +1,128 @@
+// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
+// See LICENSE.txt for license information.
+
+import React from 'react'
+
+import {render, act, screen} from '@testing-library/react'
+
+import '@testing-library/jest-dom'
+
+import userEvent from '@testing-library/user-event'
+
+import {wrapIntl} from '../testUtils'
+
+import {FlashMessages, sendFlashMessage} from './flashMessages'
+
+jest.mock('../mutator')
+
+beforeEach(() => {
+    jest.useFakeTimers()
+})
+
+afterEach(() => {
+    jest.clearAllTimers()
+})
+
+describe('components/flashMessages', () => {
+    test('renders a flash message with high severity', () => {
+        const {container} = render(
+            wrapIntl(<FlashMessages milliseconds={200}/>),
+        )
+
+        /**
+         * Check for high severity
+         */
+
+        act(() => {
+            sendFlashMessage({content: 'Mock Content', severity: 'high'})
+        })
+
+        expect(container).toMatchSnapshot()
+
+        act(() => {
+            jest.advanceTimersByTime(200)
+        })
+
+        expect(screen.queryByText('Mock Content')).toBeNull()
+    })
+
+    test('renders a flash message with normal severity', () => {
+        const {container} = render(
+            wrapIntl(<FlashMessages milliseconds={200}/>),
+        )
+
+        act(() => {
+            sendFlashMessage({content: 'Mock Content', severity: 'normal'})
+        })
+
+        expect(screen.getByText('Mock Content')).toHaveClass('normal')
+
+        expect(container).toMatchSnapshot()
+
+        act(() => {
+            jest.advanceTimersByTime(200)
+        })
+
+        expect(screen.queryByText('Mock Content')).toBeNull()
+    })
+
+    test('renders a flash message with low severity', () => {
+        const {container} = render(
+            wrapIntl(<FlashMessages milliseconds={200}/>),
+        )
+
+        act(() => {
+            sendFlashMessage({content: 'Mock Content', severity: 'low'})
+        })
+
+        expect(screen.getByText('Mock Content')).toHaveClass('low')
+
+        expect(container).toMatchSnapshot()
+
+        act(() => {
+            jest.advanceTimersByTime(200)
+        })
+
+        expect(screen.queryByText('Mock Content')).toBeNull()
+    })
+
+    test('renders a flash message with low severity and custom HTML in flash message', () => {
+        const {container} = render(
+            wrapIntl(<FlashMessages milliseconds={200}/>),
+        )
+
+        act(() => {
+            sendFlashMessage({content: <div data-testid='mock-test-id'>{'Mock Content'}</div>, severity: 'low'})
+        })
+
+        expect(screen.getByTestId('mock-test-id')).toBeVisible()
+
+        expect(container).toMatchSnapshot()
+
+        act(() => {
+            jest.advanceTimersByTime(200)
+        })
+
+        expect(screen.queryByText('Mock Content')).toBeNull()
+    })
+
+    test('renders a flash message with low severity and check onClick on flash works', () => {
+        const {container} = render(
+            wrapIntl(<FlashMessages milliseconds={200}/>),
+        )
+
+        act(() => {
+            sendFlashMessage({content: 'Mock Content', severity: 'low'})
+        })
+
+        userEvent.click(screen.getByText('Mock Content'))
+
+        expect(container).toMatchSnapshot()
+
+        act(() => {
+            jest.advanceTimersByTime(200)
+        })
+
+        expect(screen.queryByText('Mock Content')).toBeNull()
+    })
+})

webapp/src/components/flashMessages.tsx

@@ -26,14 +26,20 @@ export const FlashMessages = React.memo((props: Props) => {
     const [timeoutId, setTimeoutId] = useState<ReturnType<typeof setTimeout>|null>(null)
 
     useEffect(() => {
+        let isSubscribed = true
         emitter.on('message', (newMessage: FlashMessage) => {
-            if (timeoutId) {
-                clearTimeout(timeoutId)
-                setTimeoutId(null)
+            if (isSubscribed) {
+                if (timeoutId) {
+                    clearTimeout(timeoutId)
+                    setTimeoutId(null)
+                }
+                setTimeoutId(setTimeout(handleFadeOut, props.milliseconds - 200))
+                setMessage(newMessage)
             }
-            setTimeoutId(setTimeout(handleFadeOut, props.milliseconds - 200))
-            setMessage(newMessage)
         })
+        return () => {
+            isSubscribed = false
+        }
     }, [])
 
     const handleFadeOut = (): void => {