[GH-824] Add unit test for addContentMenuItem (#1073)
* chore #824: add test unit addContentMenuItem * fix: format test correctly * fix: add snapshot test Co-authored-by: Scott Bishel <scott.bishel@mattermost.com>
This commit is contained in:
Julien Fabre
GitHub
parent
5715bc8374
commit
e34d6c1b7d
2 changed files with 226 additions and 0 deletions
|
|
@ -0,0 +1,115 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`components/addContentMenuItem return a checkbox menu item 1`] = `
|
||||
<div>
|
||||
<div
|
||||
aria-label="checkbox"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="CheckIcon Icon"
|
||||
viewBox="0 0 100 100"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<polyline
|
||||
points="20,60 40,80 80,40"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
checkbox
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/addContentMenuItem return a divider menu item 1`] = `
|
||||
<div>
|
||||
<div
|
||||
aria-label="divider"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="DividerIcon Icon"
|
||||
viewBox="0 0 448 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M 432,224 H 16 c -8.836556,0 -16,7.16344 -16,16 v 32 c 0,8.83656 7.163444,16 16,16 h 416 c 8.83656,0 16,-7.16344 16,-16 v -32 c 0,-8.83656 -7.16344,-16 -16,-16 z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
divider
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/addContentMenuItem return a text menu item 1`] = `
|
||||
<div>
|
||||
<div
|
||||
aria-label="text"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="TextIcon Icon"
|
||||
viewBox="0 0 448 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M432 416H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-128H16A16 16 0 0 0 0 48v32a16 16 0 0 0 16 16h416a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
text
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`components/addContentMenuItem return an error and empty element from unknow type 1`] = `<div />`;
|
||||
|
||||
exports[`components/addContentMenuItem return an image menu item 1`] = `
|
||||
<div>
|
||||
<div
|
||||
aria-label="image"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="ImageIcon Icon"
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M464 64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V112c0-26.51-21.49-48-48-48zm-6 336H54a6 6 0 0 1-6-6V118a6 6 0 0 1 6-6h404a6 6 0 0 1 6 6v276a6 6 0 0 1-6 6zM128 152c-22.091 0-40 17.909-40 40s17.909 40 40 40 40-17.909 40-40-17.909-40-40-40zM96 352h320v-80l-87.515-87.515c-4.686-4.686-12.284-4.686-16.971 0L192 304l-39.515-39.515c-4.686-4.686-12.284-4.686-16.971 0L96 304v48z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
image
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
111
webapp/src/components/addContentMenuItem.test.tsx
Normal file
111
webapp/src/components/addContentMenuItem.test.tsx
Normal file
|
|
@ -0,0 +1,111 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
|
||||
import React, {ReactElement} from 'react'
|
||||
import {render, screen, waitFor} from '@testing-library/react'
|
||||
|
||||
import '@testing-library/jest-dom'
|
||||
import {IntlProvider} from 'react-intl'
|
||||
|
||||
import {mocked} from 'ts-jest/utils'
|
||||
|
||||
import userEvent from '@testing-library/user-event'
|
||||
|
||||
import mutator from '../mutator'
|
||||
|
||||
import {TestBlockFactory} from '../test/testBlockFactory'
|
||||
|
||||
import AddContentMenuItem from './addContentMenuItem'
|
||||
|
||||
import './content/textElement'
|
||||
import './content/imageElement'
|
||||
import './content/dividerElement'
|
||||
import './content/checkboxElement'
|
||||
|
||||
const wrapIntl = (children: ReactElement) => (
|
||||
<IntlProvider locale='en'>{children}</IntlProvider>
|
||||
)
|
||||
const board = TestBlockFactory.createBoard()
|
||||
const card = TestBlockFactory.createCard(board)
|
||||
|
||||
jest.mock('../mutator')
|
||||
const mockedMutator = mocked(mutator, true)
|
||||
|
||||
describe('components/addContentMenuItem', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
})
|
||||
test('return an image menu item', () => {
|
||||
const {container} = render(
|
||||
wrapIntl(
|
||||
<AddContentMenuItem
|
||||
type={'image'}
|
||||
card={card}
|
||||
cords={{x: 0}}
|
||||
/>,
|
||||
),
|
||||
)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
|
||||
test('return a text menu item', async () => {
|
||||
const {container} = render(
|
||||
wrapIntl(
|
||||
<AddContentMenuItem
|
||||
type={'text'}
|
||||
card={card}
|
||||
cords={{x: 0}}
|
||||
/>,
|
||||
),
|
||||
)
|
||||
expect(container).toMatchSnapshot()
|
||||
const buttonElement = screen.getByRole('button', {name: 'text'})
|
||||
userEvent.click(buttonElement)
|
||||
await waitFor(() => expect(mockedMutator.performAsUndoGroup).toBeCalled())
|
||||
})
|
||||
|
||||
test('return a checkbox menu item', async () => {
|
||||
const {container} = render(
|
||||
wrapIntl(
|
||||
<AddContentMenuItem
|
||||
type={'checkbox'}
|
||||
card={card}
|
||||
cords={{x: 0}}
|
||||
/>,
|
||||
),
|
||||
)
|
||||
expect(container).toMatchSnapshot()
|
||||
const buttonElement = screen.getByRole('button', {name: 'checkbox'})
|
||||
userEvent.click(buttonElement)
|
||||
await waitFor(() => expect(mockedMutator.performAsUndoGroup).toBeCalled())
|
||||
})
|
||||
|
||||
test('return a divider menu item', async () => {
|
||||
const {container} = render(
|
||||
wrapIntl(
|
||||
<AddContentMenuItem
|
||||
type={'divider'}
|
||||
card={card}
|
||||
cords={{x: 0}}
|
||||
/>,
|
||||
),
|
||||
)
|
||||
expect(container).toMatchSnapshot()
|
||||
const buttonElement = screen.getByRole('button', {name: 'divider'})
|
||||
userEvent.click(buttonElement)
|
||||
await waitFor(() => expect(mockedMutator.performAsUndoGroup).toBeCalled())
|
||||
})
|
||||
|
||||
test('return an error and empty element from unknow type', () => {
|
||||
const {container} = render(
|
||||
wrapIntl(
|
||||
<AddContentMenuItem
|
||||
type={'unknown'}
|
||||
card={card}
|
||||
cords={{x: 0}}
|
||||
/>,
|
||||
),
|
||||
)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue