mirror of
https://github.com/mattermost/focalboard.git
synced 2024-11-27 08:31:20 +02:00
chore[GH-#845]: add tests unit for comment (#1493)
This commit is contained in:
Julien Fabre
GitHub
parent
598c404779
commit
3faa053bc6
@ -0,0 +1,243 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/cardDetail/comment return comment 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Comment comment"
|
||||
>
|
||||
<div
|
||||
class="comment-header"
|
||||
>
|
||||
<img
|
||||
class="comment-avatar"
|
||||
src="data:image/svg+xml"
|
||||
/>
|
||||
<div
|
||||
class="comment-username"
|
||||
/>
|
||||
<div
|
||||
class="comment-date"
|
||||
>
|
||||
October 01, 2020, 12:00 AM
|
||||
</div>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="Menu noselect left"
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<div
|
||||
aria-label="Delete"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="DeleteIcon Icon"
|
||||
viewBox="0 0 448 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-spacer hideOnWidescreen"
|
||||
/>
|
||||
<div
|
||||
class="menu-options hideOnWidescreen"
|
||||
>
|
||||
<div
|
||||
aria-label="Cancel"
|
||||
class="MenuOption TextOption menu-option menu-cancel"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="comment-text"
|
||||
>
|
||||
<p>
|
||||
Test comment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/cardDetail/comment return comment and delete comment 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Comment comment"
|
||||
>
|
||||
<div
|
||||
class="comment-header"
|
||||
>
|
||||
<img
|
||||
class="comment-avatar"
|
||||
src="data:image/svg+xml"
|
||||
/>
|
||||
<div
|
||||
class="comment-username"
|
||||
/>
|
||||
<div
|
||||
class="comment-date"
|
||||
>
|
||||
October 01, 2020, 12:00 AM
|
||||
</div>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="Button IconButton"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="Menu noselect left"
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<div
|
||||
aria-label="Delete"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="DeleteIcon Icon"
|
||||
viewBox="0 0 448 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-spacer hideOnWidescreen"
|
||||
/>
|
||||
<div
|
||||
class="menu-options hideOnWidescreen"
|
||||
>
|
||||
<div
|
||||
aria-label="Cancel"
|
||||
class="MenuOption TextOption menu-option menu-cancel"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="comment-text"
|
||||
>
|
||||
<p>
|
||||
Test comment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/cardDetail/comment return comment readonly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="Comment comment"
|
||||
>
|
||||
<div
|
||||
class="comment-header"
|
||||
>
|
||||
<img
|
||||
class="comment-avatar"
|
||||
src="data:image/svg+xml"
|
||||
/>
|
||||
<div
|
||||
class="comment-username"
|
||||
/>
|
||||
<div
|
||||
class="comment-date"
|
||||
>
|
||||
October 01, 2020, 12:00 AM
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="comment-text"
|
||||
>
|
||||
<p>
|
||||
Test comment
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
92
webapp/src/components/cardDetail/comment.test.tsx
Normal file
92
webapp/src/components/cardDetail/comment.test.tsx
Normal file
@ -0,0 +1,92 @@
|
||||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
import {render, screen} from '@testing-library/react'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import React from 'react'
|
||||
import {Provider as ReduxProvider} from 'react-redux'
|
||||
|
||||
import {mocked} from 'ts-jest/utils'
|
||||
|
||||
import {wrapIntl, mockStateStore} from '../../testUtils'
|
||||
|
||||
import {TestBlockFactory} from '../../test/testBlockFactory'
|
||||
|
||||
import mutator from '../../mutator'
|
||||
|
||||
import Comment from './comment'
|
||||
|
||||
jest.mock('../../mutator')
|
||||
const mockedMutator = mocked(mutator, true)
|
||||
|
||||
const board = TestBlockFactory.createBoard()
|
||||
const card = TestBlockFactory.createCard(board)
|
||||
const comment = TestBlockFactory.createComment(card)
|
||||
const dateFixed = Date.parse('01 Oct 2020')
|
||||
comment.createAt = dateFixed
|
||||
comment.updateAt = dateFixed
|
||||
comment.title = 'Test comment'
|
||||
|
||||
const userImageUrl = 'data:image/svg+xml'
|
||||
|
||||
describe('components/cardDetail/comment', () => {
|
||||
const state = {
|
||||
users: {
|
||||
workspaceUsers: [
|
||||
{username: 'username_1'},
|
||||
],
|
||||
},
|
||||
}
|
||||
const store = mockStateStore([], state)
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
test('return comment', () => {
|
||||
const {container} = render(wrapIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<Comment
|
||||
comment={comment}
|
||||
userId={comment.modifiedBy}
|
||||
userImageUrl={userImageUrl}
|
||||
readonly={false}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('return comment readonly', () => {
|
||||
const {container} = render(wrapIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<Comment
|
||||
comment={comment}
|
||||
userId={comment.modifiedBy}
|
||||
userImageUrl={userImageUrl}
|
||||
readonly={true}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('return comment and delete comment', () => {
|
||||
const {container} = render(wrapIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<Comment
|
||||
comment={comment}
|
||||
userId={comment.modifiedBy}
|
||||
userImageUrl={userImageUrl}
|
||||
readonly={false}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
))
|
||||
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
userEvent.click(buttonElement)
|
||||
expect(container).toMatchSnapshot()
|
||||
const buttonDelete = screen.getByRole('button', {name: 'Delete'})
|
||||
userEvent.click(buttonDelete)
|
||||
expect(mockedMutator.deleteBlock).toBeCalledTimes(1)
|
||||
expect(mockedMutator.deleteBlock).toBeCalledWith(comment)
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user