mirror of
https://github.com/mattermost/focalboard.git
synced 2025-01-02 14:47:55 +02:00
added unit tests for FullCalendarCard component
This commit is contained in:
Jesus Murguia
parent
4d14413bda
commit
13d8859070
@ -0,0 +1,616 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`src/components/calendar/fullCalendarCard return FullCalendarCard and click on copy link menu 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="EventContent"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper override menuOpened optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="Menu noselect left "
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-label="Delete"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
class="menu-option__icon"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-trash-can-outline DeleteIcon trash-can-outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Duplicate"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
class="menu-option__icon"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-content-copy content-copy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Duplicate
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
aria-label="Copy link"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
class="menu-option__icon"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-link-variant LinkIcon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Copy link
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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="d-flex"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-icontitle"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div
|
||||
class="fc-event-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="name"
|
||||
>
|
||||
<div
|
||||
class="octo-propertyvalue octo-propertyvalue--readonly"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/calendar/fullCalendarCard return FullCalendarCard and click on delete menu 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="EventContent"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper override menuOpened optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="Menu noselect left "
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-label="Delete"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
class="menu-option__icon"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-trash-can-outline DeleteIcon trash-can-outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Duplicate"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
class="menu-option__icon"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-content-copy content-copy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Duplicate
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
aria-label="Copy link"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
class="menu-option__icon"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-link-variant LinkIcon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Copy link
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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="d-flex"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-icontitle"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div
|
||||
class="fc-event-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="name"
|
||||
>
|
||||
<div
|
||||
class="octo-propertyvalue octo-propertyvalue--readonly"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/calendar/fullCalendarCard return FullCalendarCard and click on duplicate menu 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="EventContent"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper override menuOpened optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</button>
|
||||
<div
|
||||
class="Menu noselect left "
|
||||
>
|
||||
<div
|
||||
class="menu-contents"
|
||||
>
|
||||
<div
|
||||
class="menu-options"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
aria-label="Delete"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
class="menu-option__icon"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-trash-can-outline DeleteIcon trash-can-outline"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Delete
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
aria-label="Duplicate"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
class="menu-option__icon"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-content-copy content-copy"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Duplicate
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
aria-label="Copy link"
|
||||
class="MenuOption TextOption menu-option"
|
||||
role="button"
|
||||
>
|
||||
<div
|
||||
class="d-flex"
|
||||
>
|
||||
<div
|
||||
class="menu-option__icon"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-link-variant LinkIcon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Copy link
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<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="d-flex"
|
||||
>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="menu-option__content"
|
||||
>
|
||||
<div
|
||||
class="menu-name"
|
||||
>
|
||||
Cancel
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="noicon"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-icontitle"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div
|
||||
class="fc-event-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="name"
|
||||
>
|
||||
<div
|
||||
class="octo-propertyvalue octo-propertyvalue--readonly"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/calendar/fullCalendarCard should match snapshot 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="EventContent"
|
||||
>
|
||||
<div
|
||||
aria-label="menuwrapper"
|
||||
class="MenuWrapper optionsMenu"
|
||||
role="button"
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
>
|
||||
<i
|
||||
class="CompassIcon icon-dots-horizontal OptionsIcon"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="octo-icontitle"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div
|
||||
class="fc-event-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="name"
|
||||
>
|
||||
<div
|
||||
class="octo-propertyvalue octo-propertyvalue--readonly"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
exports[`src/components/calendar/fullCalendarCard should match snapshot with readonly 1`] = `
|
||||
<div>
|
||||
<div
|
||||
class="EventContent"
|
||||
>
|
||||
<div
|
||||
class="octo-icontitle"
|
||||
>
|
||||
<div
|
||||
class="octo-icon"
|
||||
>
|
||||
i
|
||||
</div>
|
||||
<div
|
||||
class="fc-event-title"
|
||||
>
|
||||
title
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="octo-tooltip tooltip-top"
|
||||
data-tooltip="name"
|
||||
>
|
||||
<div
|
||||
class="octo-propertyvalue octo-propertyvalue--readonly"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
186
webapp/src/components/calendar/fullCalendarCard.test.tsx
Normal file
186
webapp/src/components/calendar/fullCalendarCard.test.tsx
Normal file
@ -0,0 +1,186 @@
|
||||
// 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 {MemoryRouter} from 'react-router-dom'
|
||||
|
||||
import {Provider as ReduxProvider} from 'react-redux'
|
||||
|
||||
import userEvent from '@testing-library/user-event'
|
||||
|
||||
import {mocked} from 'jest-mock'
|
||||
|
||||
import Mutator from '../../mutator'
|
||||
import {Utils} from '../../utils'
|
||||
|
||||
import {TestBlockFactory} from '../../test/testBlockFactory'
|
||||
import {IPropertyTemplate} from '../../blocks/board'
|
||||
import {mockStateStore, wrapDNDIntl} from '../../testUtils'
|
||||
|
||||
import FullCalendarCard from './fullCalendarCard'
|
||||
|
||||
jest.mock('../../mutator')
|
||||
jest.mock('../../utils')
|
||||
jest.mock('../../telemetry/telemetryClient')
|
||||
const mockedUtils = mocked(Utils, true)
|
||||
const mockedMutator = mocked(Mutator, true)
|
||||
|
||||
describe('src/components/calendar/fullCalendarCard', () => {
|
||||
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],
|
||||
},
|
||||
teams: {
|
||||
current: {id: 'team-id'},
|
||||
},
|
||||
boards: {
|
||||
current: 'board_id_1',
|
||||
boards: {
|
||||
board_id_1: {id: 'board_id_1'},
|
||||
},
|
||||
myBoardMemberships: {
|
||||
board_id_1: {userId: 'user_id_1', schemeAdmin: true},
|
||||
},
|
||||
},
|
||||
contents: {},
|
||||
comments: {
|
||||
comments: {},
|
||||
},
|
||||
users: {
|
||||
me: {
|
||||
id: 'user_id_1',
|
||||
props: {},
|
||||
},
|
||||
},
|
||||
}
|
||||
const store = mockStateStore([], state)
|
||||
beforeEach(jest.clearAllMocks)
|
||||
test('should match snapshot', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<FullCalendarCard
|
||||
card={card}
|
||||
board={board}
|
||||
visiblePropertyTemplates={[propertyTemplate]}
|
||||
visibleBadges={false}
|
||||
readonly={false}
|
||||
showCard={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
), {wrapper: MemoryRouter})
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('should match snapshot with readonly', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<FullCalendarCard
|
||||
card={card}
|
||||
board={board}
|
||||
visiblePropertyTemplates={[propertyTemplate]}
|
||||
visibleBadges={false}
|
||||
readonly={true}
|
||||
showCard={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
), {wrapper: MemoryRouter})
|
||||
expect(container).toMatchSnapshot()
|
||||
})
|
||||
test('return FullCalendarCard and click on delete menu ', () => {
|
||||
const result = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<FullCalendarCard
|
||||
card={card}
|
||||
board={board}
|
||||
visiblePropertyTemplates={[propertyTemplate]}
|
||||
visibleBadges={false}
|
||||
readonly={false}
|
||||
showCard={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
), {wrapper: MemoryRouter})
|
||||
|
||||
const {container} = result
|
||||
|
||||
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)
|
||||
|
||||
const confirmDialog = screen.getByTitle('Confirmation Dialog Box')
|
||||
expect(confirmDialog).toBeDefined()
|
||||
const confirmButton = within(confirmDialog).getByRole('button', {name: 'Delete'})
|
||||
expect(confirmButton).toBeDefined()
|
||||
userEvent.click(confirmButton)
|
||||
|
||||
expect(mockedMutator.deleteBlock).toBeCalledWith(card, 'delete card')
|
||||
})
|
||||
|
||||
test('return FullCalendarCard and click on duplicate menu ', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<FullCalendarCard
|
||||
card={card}
|
||||
board={board}
|
||||
visiblePropertyTemplates={[propertyTemplate]}
|
||||
visibleBadges={false}
|
||||
readonly={false}
|
||||
showCard={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
), {wrapper: MemoryRouter})
|
||||
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 FullCalendarCard and click on copy link menu ', () => {
|
||||
const {container} = render(wrapDNDIntl(
|
||||
<ReduxProvider store={store}>
|
||||
<FullCalendarCard
|
||||
card={card}
|
||||
board={board}
|
||||
visiblePropertyTemplates={[propertyTemplate]}
|
||||
visibleBadges={false}
|
||||
readonly={false}
|
||||
showCard={jest.fn()}
|
||||
/>
|
||||
</ReduxProvider>,
|
||||
), {wrapper: MemoryRouter})
|
||||
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)
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue
Block a user