chore[GH-#854]: Add unit tests for kanbanCard (#1698)

This commit is contained in:
Julien Fabre 2021-11-01 14:08:37 +01:00 committed by GitHub
parent 2bbac9d1a1
commit ac3533e0e3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 675 additions and 0 deletions

View file

@ -0,0 +1,509 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`src/components/kanban/kanbanCard return kanbanCard and click on copy link menu 1`] = `
<div>
<div
class="KanbanCard"
draggable="true"
style="opacity: 1;"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
class="Button IconButton"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
<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
aria-label="Duplicate"
class="MenuOption TextOption menu-option"
role="button"
>
<svg
class="DuplicateIcon Icon"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z"
/>
</svg>
<div
class="menu-name"
>
Duplicate
</div>
<div
class="noicon"
/>
</div>
<div
aria-label="Copy link"
class="MenuOption TextOption menu-option"
role="button"
>
<i
class="CompassIcon icon-link-variant LinkIcon"
/>
<div
class="menu-name"
>
Copy link
</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
class="octo-icontitle"
>
<div
class="octo-icon"
>
i
</div>
<div>
title
</div>
</div>
<div
class="octo-tooltip tooltip-top"
data-tooltip="name"
>
<div
class="octo-propertyvalue"
/>
</div>
</div>
</div>
`;
exports[`src/components/kanban/kanbanCard return kanbanCard and click on delete menu 1`] = `
<div>
<div
class="KanbanCard"
draggable="true"
style="opacity: 1;"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
class="Button IconButton"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
<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
aria-label="Duplicate"
class="MenuOption TextOption menu-option"
role="button"
>
<svg
class="DuplicateIcon Icon"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z"
/>
</svg>
<div
class="menu-name"
>
Duplicate
</div>
<div
class="noicon"
/>
</div>
<div
aria-label="Copy link"
class="MenuOption TextOption menu-option"
role="button"
>
<i
class="CompassIcon icon-link-variant LinkIcon"
/>
<div
class="menu-name"
>
Copy link
</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
class="octo-icontitle"
>
<div
class="octo-icon"
>
i
</div>
<div>
title
</div>
</div>
<div
class="octo-tooltip tooltip-top"
data-tooltip="name"
>
<div
class="octo-propertyvalue"
/>
</div>
</div>
</div>
`;
exports[`src/components/kanban/kanbanCard return kanbanCard and click on duplicate menu 1`] = `
<div>
<div
class="KanbanCard"
draggable="true"
style="opacity: 1;"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
class="Button IconButton"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
<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
aria-label="Duplicate"
class="MenuOption TextOption menu-option"
role="button"
>
<svg
class="DuplicateIcon Icon"
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M464 0H144c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h320c26.51 0 48-21.49 48-48v-48h48c26.51 0 48-21.49 48-48V48c0-26.51-21.49-48-48-48zM362 464H54a6 6 0 0 1-6-6V150a6 6 0 0 1 6-6h42v224c0 26.51 21.49 48 48 48h224v42a6 6 0 0 1-6 6zm96-96H150a6 6 0 0 1-6-6V54a6 6 0 0 1 6-6h308a6 6 0 0 1 6 6v308a6 6 0 0 1-6 6z"
/>
</svg>
<div
class="menu-name"
>
Duplicate
</div>
<div
class="noicon"
/>
</div>
<div
aria-label="Copy link"
class="MenuOption TextOption menu-option"
role="button"
>
<i
class="CompassIcon icon-link-variant LinkIcon"
/>
<div
class="menu-name"
>
Copy link
</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
class="octo-icontitle"
>
<div
class="octo-icon"
>
i
</div>
<div>
title
</div>
</div>
<div
class="octo-tooltip tooltip-top"
data-tooltip="name"
>
<div
class="octo-propertyvalue"
/>
</div>
</div>
</div>
`;
exports[`src/components/kanban/kanbanCard should match snapshot 1`] = `
<div>
<div
class="KanbanCard"
draggable="true"
style="opacity: 1;"
>
<div
aria-label="menuwrapper"
class="MenuWrapper optionsMenu"
role="button"
>
<button
class="Button IconButton"
type="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</button>
</div>
<div
class="octo-icontitle"
>
<div
class="octo-icon"
>
i
</div>
<div>
title
</div>
</div>
<div
class="octo-tooltip tooltip-top"
data-tooltip="name"
>
<div
class="octo-propertyvalue"
/>
</div>
</div>
</div>
`;
exports[`src/components/kanban/kanbanCard should match snapshot with readonly 1`] = `
<div>
<div
class="KanbanCard"
draggable="false"
style="opacity: 1;"
>
<div
class="octo-icontitle"
>
<div
class="octo-icon"
>
i
</div>
<div>
title
</div>
</div>
<div
class="octo-tooltip tooltip-top"
data-tooltip="name"
>
<div
class="octo-propertyvalue"
/>
</div>
</div>
</div>
`;

View file

@ -0,0 +1,166 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {render, screen, within} from '@testing-library/react'
import '@testing-library/jest-dom'
import {Provider as ReduxProvider} from 'react-redux'
import userEvent from '@testing-library/user-event'
import {mocked} from 'ts-jest/utils'
import Mutator from '../../mutator'
import {Utils} from '../../utils'
import {TestBlockFactory} from '../../test/testBlockFactory'
import {IPropertyTemplate} from '../../blocks/board'
import {mockStateStore, wrapDNDIntl} from '../../testUtils'
import KanbanCard from './kanbanCard'
jest.mock('../../mutator')
jest.mock('../../utils')
jest.mock('../../telemetry/telemetryClient')
const mockedUtils = mocked(Utils, true)
const mockedMutator = mocked(Mutator, true)
describe('src/components/kanban/kanbanCard', () => {
const board = TestBlockFactory.createBoard()
const card = TestBlockFactory.createCard(board)
const propertyTemplate: IPropertyTemplate = {
id: 'id',
name: 'name',
type: 'text',
options: [
{
color: 'propColorOrange',
id: 'property_value_id_1',
value: 'Q1',
},
{
color: 'propColorBlue',
id: 'property_value_id_2',
value: 'Q2',
},
],
}
const state = {
cards: {
cards: [card],
},
contents: {},
comments: {
comments: {},
},
}
const store = mockStateStore([], state)
beforeEach(jest.clearAllMocks)
test('should match snapshot', () => {
const {container} = render(wrapDNDIntl(
<ReduxProvider store={store}>
<KanbanCard
card={card}
board={board}
visiblePropertyTemplates={[propertyTemplate]}
isSelected={false}
readonly={false}
onDrop={jest.fn()}
showCard={jest.fn()}
isManualSort={false}
/>
</ReduxProvider>,
))
expect(container).toMatchSnapshot()
})
test('should match snapshot with readonly', () => {
const {container} = render(wrapDNDIntl(
<ReduxProvider store={store}>
<KanbanCard
card={card}
board={board}
visiblePropertyTemplates={[propertyTemplate]}
isSelected={false}
readonly={true}
onDrop={jest.fn()}
showCard={jest.fn()}
isManualSort={false}
/>
</ReduxProvider>,
))
expect(container).toMatchSnapshot()
})
test('return kanbanCard and click on delete menu ', () => {
const {container} = render(wrapDNDIntl(
<ReduxProvider store={store}>
<KanbanCard
card={card}
board={board}
visiblePropertyTemplates={[propertyTemplate]}
isSelected={false}
readonly={false}
onDrop={jest.fn()}
showCard={jest.fn()}
isManualSort={false}
/>
</ReduxProvider>,
))
const elementMenuWrapper = screen.getByRole('button', {name: 'menuwrapper'})
expect(elementMenuWrapper).not.toBeNull()
userEvent.click(elementMenuWrapper)
expect(container).toMatchSnapshot()
const elementButtonDelete = within(elementMenuWrapper).getByRole('button', {name: 'Delete'})
expect(elementButtonDelete).not.toBeNull()
userEvent.click(elementButtonDelete)
expect(mockedMutator.deleteBlock).toBeCalledWith(card, 'delete card')
})
test('return kanbanCard and click on duplicate menu ', () => {
const {container} = render(wrapDNDIntl(
<ReduxProvider store={store}>
<KanbanCard
card={card}
board={board}
visiblePropertyTemplates={[propertyTemplate]}
isSelected={false}
readonly={false}
onDrop={jest.fn()}
showCard={jest.fn()}
isManualSort={false}
/>
</ReduxProvider>,
))
const elementMenuWrapper = screen.getByRole('button', {name: 'menuwrapper'})
expect(elementMenuWrapper).not.toBeNull()
userEvent.click(elementMenuWrapper)
expect(container).toMatchSnapshot()
const elementButtonDuplicate = within(elementMenuWrapper).getByRole('button', {name: 'Duplicate'})
expect(elementButtonDuplicate).not.toBeNull()
userEvent.click(elementButtonDuplicate)
expect(mockedMutator.duplicateCard).toBeCalledTimes(1)
})
test('return kanbanCard and click on copy link menu ', () => {
const {container} = render(wrapDNDIntl(
<ReduxProvider store={store}>
<KanbanCard
card={card}
board={board}
visiblePropertyTemplates={[propertyTemplate]}
isSelected={false}
readonly={false}
onDrop={jest.fn()}
showCard={jest.fn()}
isManualSort={false}
/>
</ReduxProvider>,
))
const elementMenuWrapper = screen.getByRole('button', {name: 'menuwrapper'})
expect(elementMenuWrapper).not.toBeNull()
userEvent.click(elementMenuWrapper)
expect(container).toMatchSnapshot()
const elementButtonCopyLink = within(elementMenuWrapper).getByRole('button', {name: 'Copy link'})
expect(elementButtonCopyLink).not.toBeNull()
userEvent.click(elementButtonCopyLink)
expect(mockedUtils.copyTextToClipboard).toBeCalledTimes(1)
})
})