luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[GH-862] Add tests unit for newCardButton (#1424)

Browse source 
* chore[GH-#862]: add tests unit for newCardButton

* fix: views state

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
This commit is contained in:
Julien Fabre 2021-10-05 04:16:14 +02:00 committed by GitHub
parent 9618d0079d
commit f89f7d6e97
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 459 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

358
webapp/src/components/viewHeader/__snapshots__/newCardButton.test.tsx.snap Normal file
View file

@ -0,0 +1,358 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/viewHeader/newCardButton return NewCardButton 1`] = `
<div>
<div
class="ButtonWithMenu"
>
<div
class="button-text"
>
New
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<div
class="button-dropdown"
>
<i
class="CompassIcon icon-chevron-down DropdownIcon"
/>
</div>
<div
class="Menu noselect left"
>
<div
class="menu-contents"
>
<div
class="menu-options"
>
<div
aria-label="Empty card"
class="MenuOption TextOption menu-option bold-menu-text"
role="button"
>
<svg
class="CardIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="40"
rx="3"
ry="3"
width="60"
x="20"
y="30"
/>
</svg>
<div
class="menu-name"
>
Empty card
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</div>
</div>
<div
aria-label="New template"
class="MenuOption TextOption menu-option"
role="button"
>
<i
class="CompassIcon icon-plus AddIcon"
/>
<div
class="menu-name"
>
New template
</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>
</div>
`;
exports[`components/viewHeader/newCardButton return NewCardButton and addCard 1`] = `
<div>
<div
class="ButtonWithMenu"
>
<div
class="button-text"
>
New
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<div
class="button-dropdown"
>
<i
class="CompassIcon icon-chevron-down DropdownIcon"
/>
</div>
<div
class="Menu noselect left"
>
<div
class="menu-contents"
>
<div
class="menu-options"
>
<div
aria-label="Empty card"
class="MenuOption TextOption menu-option bold-menu-text"
role="button"
>
<svg
class="CardIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="40"
rx="3"
ry="3"
width="60"
x="20"
y="30"
/>
</svg>
<div
class="menu-name"
>
Empty card
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</div>
</div>
<div
aria-label="New template"
class="MenuOption TextOption menu-option"
role="button"
>
<i
class="CompassIcon icon-plus AddIcon"
/>
<div
class="menu-name"
>
New template
</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>
</div>
`;
exports[`components/viewHeader/newCardButton return NewCardButton and addCardTemplate 1`] = `
<div>
<div
class="ButtonWithMenu"
>
<div
class="button-text"
>
New
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<div
class="button-dropdown"
>
<i
class="CompassIcon icon-chevron-down DropdownIcon"
/>
</div>
<div
class="Menu noselect left"
>
<div
class="menu-contents"
>
<div
class="menu-options"
>
<div
aria-label="Empty card"
class="MenuOption TextOption menu-option bold-menu-text"
role="button"
>
<svg
class="CardIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<rect
height="40"
rx="3"
ry="3"
width="60"
x="20"
y="30"
/>
</svg>
<div
class="menu-name"
>
Empty card
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
/>
</div>
</div>
</div>
<div
aria-label="New template"
class="MenuOption TextOption menu-option"
role="button"
>
<i
class="CompassIcon icon-plus AddIcon"
/>
<div
class="menu-name"
>
New template
</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>
</div>
`;

101
webapp/src/components/viewHeader/newCardButton.test.tsx Normal file
View file

@ -0,0 +1,101 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {render, screen} from '@testing-library/react'
import {Provider as ReduxProvider} from 'react-redux'
import '@testing-library/jest-dom'
import userEvent from '@testing-library/user-event'
import {wrapIntl, mockStateStore} from '../../testUtils'
import {TestBlockFactory} from '../../test/testBlockFactory'
import NewCardButton from './newCardButton'
const board = TestBlockFactory.createBoard()
const activeView = TestBlockFactory.createBoardView(board)
describe('components/viewHeader/newCardButton', () => {
const state = {
users: {
me: {
id: 'user-id-1',
username: 'username_1'},
},
boards: {
current: board,
},
cards: {
templates: [],
},
views: {
current: 0,
views: [activeView],
},
}
const store = mockStateStore([], state)
const mockFunction = jest.fn()
beforeEach(() => {
jest.clearAllMocks()
})
test('return NewCardButton', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<NewCardButton
addCard={jest.fn()}
addCardTemplate={jest.fn()}
addCardFromTemplate={jest.fn()}
editCardTemplate={jest.fn()}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
})
test('return NewCardButton and addCard', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<NewCardButton
addCard={mockFunction}
addCardTemplate={jest.fn()}
addCardFromTemplate={jest.fn()}
editCardTemplate={jest.fn()}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
const buttonAdd = screen.getByRole('button', {name: 'Empty card'})
userEvent.click(buttonAdd)
expect(mockFunction).toBeCalledTimes(1)
})
test('return NewCardButton and addCardTemplate', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<NewCardButton
addCard={jest.fn()}
addCardTemplate={mockFunction}
addCardFromTemplate={jest.fn()}
editCardTemplate={jest.fn()}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
const buttonAddTemplate = screen.getByRole('button', {name: 'New template'})
userEvent.click(buttonAddTemplate)
expect(mockFunction).toBeCalledTimes(1)
})
})