[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>
This commit is contained in:
parent
264de5c3e7
commit
d8a4d197ed
|
@ -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>
|
||||
`;
|
128
webapp/src/components/flashMessages.test.tsx
Normal file
128
webapp/src/components/flashMessages.test.tsx
Normal file
|
@ -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()
|
||||
})
|
||||
})
|
|
@ -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 => {
|
||||
|
|
Loading…
Reference in New Issue
Block a user