self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2025-03-26 20:53:55 +02:00
Code Issues Releases Activity

test: add snapshot tests to CommentsList (#3795)

Browse Source 
Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Paul Esch-Laurent 2022-09-13 13:57:44 -05:00 committed by GitHub
parent 5853303bda
commit 0ef683f209
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 207 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

202
webapp/src/components/cardDetail/__snapshots__/commentsList.test.tsx.snap Normal file
View File

@ -0,0 +1,202 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/cardDetail/CommentsList comments show up 1`] = `
<div>
<div
class="CommentsList"
>
<div
class="CommentsList__new"
>
<img
class="comment-avatar"
src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
/>
<div
class="MarkdownEditor octo-editor newcomment "
>
<div
class="octo-editor-preview octo-placeholder"
data-testid="preview-element"
>
<p>
Add a comment...
</p>
</div>
</div>
</div>
<div
class="Comment comment"
>
<div
class="comment-header"
>
<img
class="comment-avatar"
src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
/>
<div
class="comment-username"
/>
<div
class="octo-tooltip tooltip-top"
data-tooltip="a long time ago"
>
<div
class="comment-date"
>
a long time ago
</div>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="IconButton"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
</div>
<div
class="comment-text"
>
<p>
Comment 2
</p>
</div>
</div>
<div
class="Comment comment"
>
<div
class="comment-header"
>
<img
class="comment-avatar"
src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
/>
<div
class="comment-username"
/>
<div
class="octo-tooltip tooltip-top"
data-tooltip="a long time ago"
>
<div
class="comment-date"
>
a long time ago
</div>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="IconButton"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
</div>
<div
class="comment-text"
>
<p>
Comment 1
</p>
</div>
</div>
<hr
class="CommentsList__divider"
/>
</div>
</div>
`;
exports[`components/cardDetail/CommentsList comments show up in readonly mode 1`] = `
<div>
<div
class="CommentsList"
>
<div
class="Comment comment"
>
<div
class="comment-header"
>
<img
class="comment-avatar"
src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
/>
<div
class="comment-username"
/>
<div
class="octo-tooltip tooltip-top"
data-tooltip="a long time ago"
>
<div
class="comment-date"
>
a long time ago
</div>
</div>
</div>
<div
class="comment-text"
>
<p>
Comment 2
</p>
</div>
</div>
<div
class="Comment comment"
>
<div
class="comment-header"
>
<img
class="comment-avatar"
src="data:image/svg+xml,<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 100 100\\" style=\\"fill: rgb(192, 192, 192);\\"><rect width=\\"100\\" height=\\"100\\" /></svg>"
/>
<div
class="comment-username"
/>
<div
class="octo-tooltip tooltip-top"
data-tooltip="a long time ago"
>
<div
class="comment-date"
>
a long time ago
</div>
</div>
</div>
<div
class="comment-text"
>
<p>
Comment 1
</p>
</div>
</div>
<hr
class="CommentsList__divider"
/>
</div>
</div>
`;

6
webapp/src/components/cardDetail/commentsList.test.tsx
View File

@ -4,7 +4,6 @@ import React from 'react'
import 'isomorphic-fetch'
import {render} from '@testing-library/react'
import {act} from 'react-dom/test-utils'
import {Provider as ReduxProvider} from 'react-redux'
@ -13,12 +12,15 @@ import configureStore from 'redux-mock-store'
import {CommentBlock} from '../../blocks/commentBlock'
import {mockDOM, wrapIntl} from '../../testUtils'
import {Utils} from '../../utils'
import {FetchMock} from '../../test/fetchMock'
import CommentsList from './commentsList'
global.fetch = FetchMock.fn
jest.spyOn(Utils, 'displayDateTime').mockReturnValue('a long time ago')
jest.spyOn(Utils, 'relativeDisplayDateTime').mockReturnValue('a long time ago')
beforeEach(() => {
FetchMock.fn.mockReset()
@ -97,6 +99,7 @@ describe('components/cardDetail/CommentsList', () => {
})
expect(container).toBeDefined()
expect(container).toMatchSnapshot()
// Comments show up
const comments = container!.querySelectorAll('.comment-text')
@ -149,6 +152,7 @@ describe('components/cardDetail/CommentsList', () => {
})
expect(container).toBeDefined()
expect(container).toMatchSnapshot()
// Comments show up
const comments = container!.querySelectorAll('.comment-text')