self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-27 13:48:52 +02:00
Code Issues Releases Activity

[GH - 869] add unit test for viewHeaderSortMenu (#1402)

Browse Source 
* chore[#869]: add unit test for viewHeaderSortMenu

* fix: name button in test...

* fix: review test and add testUtils
This commit is contained in:
Julien Fabre 2021-10-04 06:29:04 +02:00 committed by GitHub
parent d0eefe8c85
commit edc89e04ce
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 358 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

244
webapp/src/components/viewHeader/__snapshots__/viewHeaderSortMenu.test.tsx.snap Normal file
View File

@ -0,0 +1,244 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/viewHeader/viewHeaderSortMenu return sort menu 1`] = `
<div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button active "
type="button"
>
<span>
Sort
</span>
</button>
<div
class="Menu noselect bottom"
>
<div
class="menu-contents"
>
<div
class="menu-options"
>
<div
aria-label="Manual"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Manual
</div>
<div
class="noicon"
/>
</div>
<div
aria-label="Revert"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Revert
</div>
<div
class="noicon"
/>
</div>
<div
class="MenuOption MenuSeparator menu-separator"
/>
<div
aria-label="Name"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Name
</div>
<div
class="noicon"
/>
</div>
<div
aria-label="Status"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Status
</div>
<div
class="noicon"
/>
</div>
<div
aria-label="Property 1"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Property 1
</div>
<svg
class="SortDownIcon Icon"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<polyline
points="50,20 50,80"
/>
<polyline
points="30,60 50,80 70,60"
/>
</svg>
</div>
<div
aria-label="Property 2"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Property 2
</div>
<div
class="noicon"
/>
</div>
<div
aria-label="Property 3"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Property 3
</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>
`;
exports[`components/viewHeader/viewHeaderSortMenu return sort menu and do Name sort 1`] = `
<div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button active "
type="button"
>
<span>
Sort
</span>
</button>
</div>
</div>
`;
exports[`components/viewHeader/viewHeaderSortMenu return sort menu and do manual 1`] = `
<div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button active "
type="button"
>
<span>
Sort
</span>
</button>
</div>
</div>
`;
exports[`components/viewHeader/viewHeaderSortMenu return sort menu and do revert 1`] = `
<div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button active "
type="button"
>
<span>
Sort
</span>
</button>
</div>
</div>
`;

114
webapp/src/components/viewHeader/viewHeaderSortMenu.test.tsx Normal file
View File

@ -0,0 +1,114 @@
// 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 {mocked} from 'ts-jest/utils'
import {wrapIntl, mockStateStore} from '../../testUtils'
import {TestBlockFactory} from '../../test/testBlockFactory'
import mutator from '../../mutator'
import ViewHeaderSortMenu from './viewHeaderSortMenu'
jest.mock('../../mutator')
const mockedMutator = mocked(mutator, true)
const board = TestBlockFactory.createBoard()
const activeView = TestBlockFactory.createBoardView(board)
const cards = [TestBlockFactory.createCard(board), TestBlockFactory.createCard(board)]
describe('components/viewHeader/viewHeaderSortMenu', () => {
const state = {
users: {
me: {
id: 'user-id-1',
username: 'username_1'},
},
}
const store = mockStateStore([], state)
beforeEach(() => {
jest.clearAllMocks()
})
test('return sort menu', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<ViewHeaderSortMenu
activeView={activeView}
orderedCards={cards}
properties={board.fields.cardProperties}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
})
test('return sort menu and do manual', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<ViewHeaderSortMenu
activeView={activeView}
orderedCards={cards}
properties={board.fields.cardProperties}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
const buttonManual = screen.getByRole('button', {name: 'Manual'})
userEvent.click(buttonManual)
expect(container).toMatchSnapshot()
expect(mockedMutator.updateBlock).toBeCalledTimes(1)
})
test('return sort menu and do revert', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<ViewHeaderSortMenu
activeView={activeView}
orderedCards={cards}
properties={board.fields.cardProperties}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
const buttonRevert = screen.getByRole('button', {name: 'Revert'})
userEvent.click(buttonRevert)
expect(container).toMatchSnapshot()
expect(mockedMutator.changeViewSortOptions).toBeCalledTimes(1)
expect(mockedMutator.changeViewSortOptions).toBeCalledWith(activeView.id, activeView.fields.sortOptions, [])
})
test('return sort menu and do Name sort', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<ViewHeaderSortMenu
activeView={activeView}
orderedCards={cards}
properties={board.fields.cardProperties}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
const buttonName = screen.getByRole('button', {name: 'Name'})
userEvent.click(buttonName)
expect(container).toMatchSnapshot()
expect(mockedMutator.changeViewSortOptions).toBeCalledTimes(1)
expect(mockedMutator.changeViewSortOptions).toBeCalledWith(activeView.id, activeView.fields.sortOptions, [{propertyId: '__title', reversed: false}])
})
})