[GH-856]: Add unit tests for kanbanColumnHeader (#1703)
* chore[GH-#856]: Add unit tests for kanbanColumnHeader * fix: update snapshot * fix: snapshot and logplayground
This commit is contained in:
Julien Fabre
GitHub
parent
e9e86d8457
commit
66a12d190b
2 changed files with 766 additions and 0 deletions
|
|
@ -0,0 +1,469 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`src/components/kanban/kanbanColumnHeader return kanbanColumnHeader and click on menuwrapper 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="octo-board-header-cell KanbanColumnHeader"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<span
|
||||
class="Label propColorDefault "
|
||||
>
|
||||
<input
|
||||
class="Editable undefined"
|
||||
placeholder="New Select"
|
||||
spellcheck="true"
|
||||
title="Title"
|
||||
value="Title"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="KanbanCalculation"
|
||||
>
|
||||
<button
|
||||
class="Button"
|
||||
title="0"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
0
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="octo-spacer"
|
||||
/>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="Menu noselect bottom"
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<div
|
||||
aria-label="Hide"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<svg
|
||||
class="HideIcon Icon"
|
||||
viewBox="0 0 640 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M634 471L36 3.51A16 16 0 0 0 13.51 6l-10 12.49A16 16 0 0 0 6 41l598 467.49a16 16 0 0 0 22.49-2.49l10-12.49A16 16 0 0 0 634 471zM296.79 146.47l134.79 105.38C429.36 191.91 380.48 144 320 144a112.26 112.26 0 0 0-23.21 2.47zm46.42 219.07L208.42 260.16C210.65 320.09 259.53 368 320 368a113 113 0 0 0 23.21-2.46zM320 112c98.65 0 189.09 55 237.93 144a285.53 285.53 0 0 1-44 60.2l37.74 29.5a333.7 333.7 0 0 0 52.9-75.11 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64c-36.7 0-71.71 7-104.63 18.81l46.41 36.29c18.94-4.3 38.34-7.1 58.22-7.1zm0 288c-98.65 0-189.08-55-237.93-144a285.47 285.47 0 0 1 44.05-60.19l-37.74-29.5a333.6 333.6 0 0 0-52.89 75.1 32.35 32.35 0 0 0 0 29.19C89.72 376.41 197.08 448 320 448c36.7 0 71.71-7.05 104.63-18.81l-46.41-36.28C359.28 397.2 339.89 400 320 400z"
|
||||
/>
|
||||
</svg>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Hide
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Delete"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-trash-can-outline trash-can-outline"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="MenuOption MenuSeparator menu-separator"
|
||||
/>
|
||||
<div
|
||||
aria-label="Select Default Color"
|
||||
class="MenuOption ColorOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Default
|
||||
</div>
|
||||
<div
|
||||
class="menu-colorbox propColorDefault"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Select Gray Color"
|
||||
class="MenuOption ColorOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Gray
|
||||
</div>
|
||||
<div
|
||||
class="menu-colorbox propColorGray"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Select Brown Color"
|
||||
class="MenuOption ColorOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Brown
|
||||
</div>
|
||||
<div
|
||||
class="menu-colorbox propColorBrown"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Select Orange Color"
|
||||
class="MenuOption ColorOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Orange
|
||||
</div>
|
||||
<div
|
||||
class="menu-colorbox propColorOrange"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Select Yellow Color"
|
||||
class="MenuOption ColorOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Yellow
|
||||
</div>
|
||||
<div
|
||||
class="menu-colorbox propColorYellow"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Select Green Color"
|
||||
class="MenuOption ColorOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Green
|
||||
</div>
|
||||
<div
|
||||
class="menu-colorbox propColorGreen"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Select Blue Color"
|
||||
class="MenuOption ColorOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Blue
|
||||
</div>
|
||||
<div
|
||||
class="menu-colorbox propColorBlue"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Select Purple Color"
|
||||
class="MenuOption ColorOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Purple
|
||||
</div>
|
||||
<div
|
||||
class="menu-colorbox propColorPurple"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Select Pink Color"
|
||||
class="MenuOption ColorOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Pink
|
||||
</div>
|
||||
<div
|
||||
class="menu-colorbox propColorPink"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Select Red Color"
|
||||
class="MenuOption ColorOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Red
|
||||
</div>
|
||||
<div
|
||||
class="menu-colorbox propColorRed"
|
||||
/>
|
||||
</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>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-plus AddIcon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/kanban/kanbanColumnHeader return kanbanColumnHeader and edit title 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="octo-board-header-cell KanbanColumnHeader"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<span
|
||||
class="Label propColorDefault "
|
||||
>
|
||||
<input
|
||||
class="Editable undefined"
|
||||
placeholder="New Select"
|
||||
spellcheck="true"
|
||||
title="New Title"
|
||||
value="New Title"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="KanbanCalculation"
|
||||
>
|
||||
<button
|
||||
class="Button"
|
||||
title="0"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
0
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="octo-spacer"
|
||||
/>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-plus AddIcon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/kanban/kanbanColumnHeader should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="octo-board-header-cell KanbanColumnHeader"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<span
|
||||
class="Label propColorDefault "
|
||||
>
|
||||
<input
|
||||
class="Editable undefined"
|
||||
placeholder="New Select"
|
||||
spellcheck="true"
|
||||
title="Title"
|
||||
value="Title"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="KanbanCalculation"
|
||||
>
|
||||
<button
|
||||
class="Button"
|
||||
title="0"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
0
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="octo-spacer"
|
||||
/>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper"
|
||||
role="button"
|
||||
>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
class="Button IconButton"
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-plus AddIcon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/kanban/kanbanColumnHeader should match snapshot readonly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="octo-board-header-cell KanbanColumnHeader"
|
||||
draggable="true"
|
||||
style="opacity: 1;"
|
||||
>
|
||||
<span
|
||||
class="Label propColorDefault "
|
||||
>
|
||||
<input
|
||||
class="Editable readonly undefined"
|
||||
placeholder="New Select"
|
||||
readonly=""
|
||||
spellcheck="true"
|
||||
title="Title"
|
||||
value="Title"
|
||||
/>
|
||||
</span>
|
||||
<div
|
||||
class="KanbanCalculation"
|
||||
>
|
||||
<button
|
||||
class="Button"
|
||||
title="0"
|
||||
type="button"
|
||||
>
|
||||
<span>
|
||||
0
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="octo-spacer"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
297
webapp/src/components/kanban/kanbanColumnHeader.test.tsx
Normal file
297
webapp/src/components/kanban/kanbanColumnHeader.test.tsx
Normal file
|
|
@ -0,0 +1,297 @@
|
|||
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
|
||||
// See LICENSE.txt for license information.
|
||||
import React from 'react'
|
||||
import {fireEvent, render, screen, within} from '@testing-library/react'
|
||||
import {createIntl} from 'react-intl'
|
||||
import userEvent from '@testing-library/user-event'
|
||||
import {mocked} from 'ts-jest/utils'
|
||||
|
||||
import Mutator from '../../mutator'
|
||||
import {wrapDNDIntl} from '../../testUtils'
|
||||
import {TestBlockFactory} from '../../test/testBlockFactory'
|
||||
import {IPropertyOption} from '../../blocks/board'
|
||||
|
||||
import KanbanColumnHeader from './kanbanColumnHeader'
|
||||
jest.mock('../../mutator')
|
||||
const mockedMutator = mocked(Mutator, true)
|
||||
describe('src/components/kanban/kanbanColumnHeader', () => {
|
||||
const intl = createIntl({locale: 'en-us'})
|
||||
const board = TestBlockFactory.createBoard()
|
||||
const activeView = TestBlockFactory.createBoardView(board)
|
||||
const card = TestBlockFactory.createCard(board)
|
||||
card.id = 'id1'
|
||||
activeView.fields.kanbanCalculations = {
|
||||
id1: {
|
||||
calculation: 'countEmpty',
|
||||
propertyId: '1',
|
||||
|
||||
},
|
||||
}
|
||||
const option:IPropertyOption = {
|
||||
id: 'id1',
|
||||
value: 'Title',
|
||||
color: 'propColorDefault',
|
||||
}
|
||||
beforeAll(() => {
|
||||
console.error = jest.fn()
|
||||
})
|
||||
beforeEach(jest.resetAllMocks)
|
||||
test('should match snapshot', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<KanbanColumnHeader
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
group={{
|
||||
option,
|
||||
cards: [card],
|
||||
}}
|
||||
intl={intl}
|
||||
readonly={false}
|
||||
addCard={jest.fn()}
|
||||
propertyNameChanged={jest.fn()}
|
||||
onDropToColumn={jest.fn()}
|
||||
calculationMenuOpen={false}
|
||||
onCalculationMenuOpen={jest.fn()}
|
||||
onCalculationMenuClose={jest.fn()}
|
||||
/>,
|
||||
|
||||
))
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('should match snapshot readonly', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<KanbanColumnHeader
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
group={{
|
||||
option,
|
||||
cards: [card],
|
||||
}}
|
||||
intl={intl}
|
||||
readonly={true}
|
||||
addCard={jest.fn()}
|
||||
propertyNameChanged={jest.fn()}
|
||||
onDropToColumn={jest.fn()}
|
||||
calculationMenuOpen={false}
|
||||
onCalculationMenuOpen={jest.fn()}
|
||||
onCalculationMenuClose={jest.fn()}
|
||||
/>,
|
||||
|
||||
))
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('return kanbanColumnHeader and edit title', () => {
|
||||
const mockedPropertyNameChanged = jest.fn()
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<KanbanColumnHeader
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
group={{
|
||||
option,
|
||||
cards: [card],
|
||||
}}
|
||||
intl={intl}
|
||||
readonly={false}
|
||||
addCard={jest.fn()}
|
||||
propertyNameChanged={mockedPropertyNameChanged}
|
||||
onDropToColumn={jest.fn()}
|
||||
calculationMenuOpen={false}
|
||||
onCalculationMenuOpen={jest.fn()}
|
||||
onCalculationMenuClose={jest.fn()}
|
||||
/>,
|
||||
|
||||
))
|
||||
const inputTitle = screen.getByRole('textbox', {name: option.value})
|
||||
expect(inputTitle).toBeDefined()
|
||||
fireEvent.change(inputTitle, {target: {value: ''}})
|
||||
userEvent.type(inputTitle, 'New Title')
|
||||
fireEvent.blur(inputTitle)
|
||||
expect(mockedPropertyNameChanged).toBeCalledWith(option, 'New Title')
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('return kanbanColumnHeader and click on menuwrapper', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<KanbanColumnHeader
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
group={{
|
||||
option,
|
||||
cards: [card],
|
||||
}}
|
||||
intl={intl}
|
||||
readonly={false}
|
||||
addCard={jest.fn()}
|
||||
propertyNameChanged={jest.fn()}
|
||||
onDropToColumn={jest.fn()}
|
||||
calculationMenuOpen={false}
|
||||
onCalculationMenuOpen={jest.fn()}
|
||||
onCalculationMenuClose={jest.fn()}
|
||||
/>,
|
||||
|
||||
))
|
||||
const buttonMenuWrapper = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
expect(buttonMenuWrapper).toBeDefined()
|
||||
userEvent.click(buttonMenuWrapper)
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('return kanbanColumnHeader, click on menuwrapper and click on hide menu', () => {
|
||||
render(wrapDNDIntl(
|
||||
<KanbanColumnHeader
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
group={{
|
||||
option,
|
||||
cards: [card],
|
||||
}}
|
||||
intl={intl}
|
||||
readonly={false}
|
||||
addCard={jest.fn()}
|
||||
propertyNameChanged={jest.fn()}
|
||||
onDropToColumn={jest.fn()}
|
||||
calculationMenuOpen={false}
|
||||
onCalculationMenuOpen={jest.fn()}
|
||||
onCalculationMenuClose={jest.fn()}
|
||||
/>,
|
||||
|
||||
))
|
||||
const buttonMenuWrapper = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
expect(buttonMenuWrapper).toBeDefined()
|
||||
userEvent.click(buttonMenuWrapper)
|
||||
const buttonHide = within(buttonMenuWrapper).getByRole('button', {name: 'Hide'})
|
||||
expect(buttonHide).toBeDefined()
|
||||
userEvent.click(buttonHide)
|
||||
expect(mockedMutator.hideViewColumn).toBeCalledTimes(1)
|
||||
})
|
||||
test('return kanbanColumnHeader, click on menuwrapper and click on delete menu', () => {
|
||||
render(wrapDNDIntl(
|
||||
<KanbanColumnHeader
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
group={{
|
||||
option,
|
||||
cards: [card],
|
||||
}}
|
||||
intl={intl}
|
||||
readonly={false}
|
||||
addCard={jest.fn()}
|
||||
propertyNameChanged={jest.fn()}
|
||||
onDropToColumn={jest.fn()}
|
||||
calculationMenuOpen={false}
|
||||
onCalculationMenuOpen={jest.fn()}
|
||||
onCalculationMenuClose={jest.fn()}
|
||||
/>,
|
||||
|
||||
))
|
||||
const buttonMenuWrapper = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
expect(buttonMenuWrapper).toBeDefined()
|
||||
userEvent.click(buttonMenuWrapper)
|
||||
const buttonDelete = within(buttonMenuWrapper).getByRole('button', {name: 'Delete'})
|
||||
expect(buttonDelete).toBeDefined()
|
||||
userEvent.click(buttonDelete)
|
||||
expect(mockedMutator.deletePropertyOption).toBeCalledTimes(1)
|
||||
})
|
||||
test('return kanbanColumnHeader, click on menuwrapper and click on blue color menu', () => {
|
||||
render(wrapDNDIntl(
|
||||
<KanbanColumnHeader
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
group={{
|
||||
option,
|
||||
cards: [card],
|
||||
}}
|
||||
intl={intl}
|
||||
readonly={false}
|
||||
addCard={jest.fn()}
|
||||
propertyNameChanged={jest.fn()}
|
||||
onDropToColumn={jest.fn()}
|
||||
calculationMenuOpen={false}
|
||||
onCalculationMenuOpen={jest.fn()}
|
||||
onCalculationMenuClose={jest.fn()}
|
||||
/>,
|
||||
|
||||
))
|
||||
const buttonMenuWrapper = screen.getByRole('button', {name: 'menuwrapper'})
|
||||
expect(buttonMenuWrapper).toBeDefined()
|
||||
userEvent.click(buttonMenuWrapper)
|
||||
const buttonBlueColor = within(buttonMenuWrapper).getByRole('button', {name: 'Select Blue Color'})
|
||||
expect(buttonBlueColor).toBeDefined()
|
||||
userEvent.click(buttonBlueColor)
|
||||
expect(mockedMutator.changePropertyOptionColor).toBeCalledTimes(1)
|
||||
})
|
||||
|
||||
test('return kanbanColumnHeader and click to add card', () => {
|
||||
const mockedAddCard = jest.fn()
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<KanbanColumnHeader
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
group={{
|
||||
option,
|
||||
cards: [card],
|
||||
}}
|
||||
intl={intl}
|
||||
readonly={false}
|
||||
addCard={mockedAddCard}
|
||||
propertyNameChanged={jest.fn()}
|
||||
onDropToColumn={jest.fn()}
|
||||
calculationMenuOpen={false}
|
||||
onCalculationMenuOpen={jest.fn()}
|
||||
onCalculationMenuClose={jest.fn()}
|
||||
/>,
|
||||
|
||||
))
|
||||
const buttonAddCard = container.querySelector('.AddIcon')?.parentElement
|
||||
expect(buttonAddCard).toBeDefined()
|
||||
userEvent.click(buttonAddCard!)
|
||||
expect(mockedAddCard).toBeCalledTimes(1)
|
||||
})
|
||||
test('return kanbanColumnHeader and click KanbanCalculationMenu', () => {
|
||||
const mockedCalculationMenuOpen = jest.fn()
|
||||
render(wrapDNDIntl(
|
||||
<KanbanColumnHeader
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
group={{
|
||||
option,
|
||||
cards: [card],
|
||||
}}
|
||||
intl={intl}
|
||||
readonly={false}
|
||||
addCard={jest.fn()}
|
||||
propertyNameChanged={jest.fn()}
|
||||
onDropToColumn={jest.fn()}
|
||||
calculationMenuOpen={false}
|
||||
onCalculationMenuOpen={mockedCalculationMenuOpen}
|
||||
onCalculationMenuClose={jest.fn()}
|
||||
/>,
|
||||
))
|
||||
const buttonKanbanCalculation = screen.getByText(/0/i).parentElement
|
||||
expect(buttonKanbanCalculation).toBeDefined()
|
||||
userEvent.click(buttonKanbanCalculation!)
|
||||
expect(mockedCalculationMenuOpen).toBeCalledTimes(1)
|
||||
})
|
||||
test('return kanbanColumnHeader and click count on KanbanCalculationMenu', () => {
|
||||
render(wrapDNDIntl(
|
||||
<KanbanColumnHeader
|
||||
board={board}
|
||||
activeView={activeView}
|
||||
group={{
|
||||
option,
|
||||
cards: [card],
|
||||
}}
|
||||
intl={intl}
|
||||
readonly={false}
|
||||
addCard={jest.fn()}
|
||||
propertyNameChanged={jest.fn()}
|
||||
onDropToColumn={jest.fn()}
|
||||
calculationMenuOpen={true}
|
||||
onCalculationMenuOpen={jest.fn()}
|
||||
onCalculationMenuClose={jest.fn()}
|
||||
/>,
|
||||
))
|
||||
const menuCountEmpty = screen.getByText('Count')
|
||||
expect(menuCountEmpty).toBeDefined()
|
||||
userEvent.click(menuCountEmpty)
|
||||
expect(mockedMutator.changeViewKanbanCalculations).toBeCalledTimes(1)
|
||||
})
|
||||
})
|
||||
Loading…
Reference in a new issue