[GH-830]: Add unit tests for dialog (#1637)
* chore[GH-#830]: Add unit tests for dialog * fix: snapshot Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Julien Fabre
GitHub
parent
a498149a76
commit
238e1d5f0a
2 changed files with 199 additions and 0 deletions
83
webapp/src/components/__snapshots__/dialog.test.tsx.snap
Normal file
83
webapp/src/components/__snapshots__/dialog.test.tsx.snap
Normal file
|
|
@ -0,0 +1,83 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/dialog should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Dialog dialog-back undefined"
|
||||
>
|
||||
<div
|
||||
class="wrapper"
|
||||
>
|
||||
<div
|
||||
class="dialog"
|
||||
>
|
||||
<div
|
||||
class="toolbar"
|
||||
>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
class="Button IconButton IconButton--large"
|
||||
title="Close dialog"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-close CloseIcon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
id="test"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/dialog should return dialog and click on cancel button 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Dialog dialog-back undefined"
|
||||
>
|
||||
<div
|
||||
class="wrapper"
|
||||
>
|
||||
<div
|
||||
class="dialog"
|
||||
>
|
||||
<div
|
||||
class="toolbar"
|
||||
>
|
||||
<button
|
||||
aria-label="Close dialog"
|
||||
class="Button IconButton IconButton--large"
|
||||
title="Close dialog"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-close CloseIcon"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton IconButton--large"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="test"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
116
webapp/src/components/dialog.test.tsx
Normal file
116
webapp/src/components/dialog.test.tsx
Normal file
|
|
@ -0,0 +1,116 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import '@testing-library/jest-dom'
|
||||
import {render, screen} from '@testing-library/react'
|
||||
|
||||
import React from 'react'
|
||||
|
||||
import userEvent from '@testing-library/user-event'
|
||||
|
||||
import {wrapDNDIntl} from '../testUtils'
|
||||
|
||||
import Menu from '../widgets/menu'
|
||||
|
||||
import OptionsIcon from '../widgets/icons/options'
|
||||
|
||||
import Dialog from './dialog'
|
||||
|
||||
describe('components/dialog', () => {
|
||||
beforeEach(jest.clearAllMocks)
|
||||
test('should match snapshot', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<Dialog
|
||||
onClose={jest.fn()}
|
||||
>
|
||||
<div id='test'/>
|
||||
</Dialog>,
|
||||
))
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('should return dialog and click onClose button', () => {
|
||||
const onCloseMethod = jest.fn()
|
||||
render(wrapDNDIntl(
|
||||
<Dialog
|
||||
onClose={onCloseMethod}
|
||||
>
|
||||
<div id='test'/>
|
||||
</Dialog>,
|
||||
))
|
||||
const buttonClose = screen.getByRole('button', {name: 'Close dialog'})
|
||||
userEvent.click(buttonClose)
|
||||
expect(onCloseMethod).toBeCalledTimes(1)
|
||||
})
|
||||
test('should return dialog and click to close on wrapper', () => {
|
||||
const onCloseMethod = jest.fn()
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<Dialog
|
||||
onClose={onCloseMethod}
|
||||
>
|
||||
<Menu position='left'>
|
||||
<Menu.Text
|
||||
id='test'
|
||||
icon={<OptionsIcon/>}
|
||||
name='Test'
|
||||
onClick={async () => {
|
||||
jest.fn()
|
||||
}}
|
||||
/>
|
||||
</Menu>
|
||||
</Dialog>,
|
||||
))
|
||||
const buttonClose = container.querySelector('.wrapper')!
|
||||
userEvent.click(buttonClose)
|
||||
expect(onCloseMethod).toBeCalledTimes(1)
|
||||
})
|
||||
|
||||
test('should return dialog and click on test button', () => {
|
||||
const onTest = jest.fn()
|
||||
render(wrapDNDIntl(
|
||||
<Dialog
|
||||
onClose={jest.fn()}
|
||||
toolsMenu={<Menu position='left'>
|
||||
<Menu.Text
|
||||
id='test'
|
||||
icon={<OptionsIcon/>}
|
||||
name='Test'
|
||||
onClick={async () => {
|
||||
onTest()
|
||||
}}
|
||||
/>
|
||||
</Menu>}
|
||||
>
|
||||
<div id='test'/>
|
||||
</Dialog>,
|
||||
))
|
||||
const buttonMenu = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonMenu)
|
||||
const buttonTest = screen.getByRole('button', {name: 'Test'})
|
||||
userEvent.click(buttonTest)
|
||||
expect(onTest).toBeCalledTimes(1)
|
||||
})
|
||||
test('should return dialog and click on cancel button', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<Dialog
|
||||
onClose={jest.fn()}
|
||||
toolsMenu={<Menu position='left'>
|
||||
<Menu.Text
|
||||
id='test'
|
||||
icon={<OptionsIcon/>}
|
||||
name='Test'
|
||||
onClick={async () => {
|
||||
jest.fn()
|
||||
}}
|
||||
/>
|
||||
</Menu>}
|
||||
>
|
||||
<div id='test'/>
|
||||
</Dialog>,
|
||||
))
|
||||
const buttonMenu = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonMenu)
|
||||
const buttonTest = screen.getByRole('button', {name: 'Cancel'})
|
||||
userEvent.click(buttonTest)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue