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

chore[GH-#861]: add unit test for filterValue" (#1428)

Browse source
This commit is contained in:
Julien Fabre 2021-10-04 19:08:00 +02:00 committed by GitHub
parent 711da0409f
commit 20933183b7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 218 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

113
webapp/src/components/viewHeader/__snapshots__/filterValue.test.tsx.snap Normal file
View file

@ -0,0 +1,113 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/viewHeader/filterValue return filterValue 1`] = `
<div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button "
type="button"
>
<span>
Status
</span>
</button>
<div
class="Menu noselect bottom"
>
<div
class="menu-contents"
>
<div
class="menu-options"
>
<div
class="MenuOption SwitchOption menu-option"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Status
</div>
<div
class="Switch on"
>
<div
class="octo-switch-inner"
/>
</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="noicon"
/>
<div
class="menu-name"
>
Cancel
</div>
<div
class="noicon"
/>
</div>
</div>
</div>
</div>
</div>
</div>
`;
exports[`components/viewHeader/filterValue return filterValue and click Status 1`] = `
<div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button "
type="button"
>
<span>
Status
</span>
</button>
</div>
</div>
`;
exports[`components/viewHeader/filterValue return filterValue and click Status with Status not in filter 1`] = `
<div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button "
type="button"
>
<span>
(Unknown)
</span>
</button>
</div>
</div>
`;

105
webapp/src/components/viewHeader/filterValue.test.tsx Normal file
View file

@ -0,0 +1,105 @@
// 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 {FilterClause} from '../../blocks/filterClause'
import {TestBlockFactory} from '../../test/testBlockFactory'
import {wrapIntl, mockStateStore} from '../../testUtils'
import mutator from '../../mutator'
import FilterValue from './filterValue'
jest.mock('../../mutator')
const mockedMutator = mocked(mutator, true)
const board = TestBlockFactory.createBoard()
const activeView = TestBlockFactory.createBoardView(board)
const state = {
users: {
me: {
id: 'user-id-1',
username: 'username_1',
},
},
}
const store = mockStateStore([], state)
const filter: FilterClause = {
propertyId: '1',
condition: 'includes',
values: ['Status'],
}
describe('components/viewHeader/filterValue', () => {
beforeEach(() => {
jest.clearAllMocks()
board.fields.cardProperties[0].options = [{id: 'Status', value: 'Status', color: ''}]
activeView.fields.filter.filters = [filter]
})
test('return filterValue', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<FilterValue
view={activeView}
filter={filter}
template={board.fields.cardProperties[0]}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
})
test('return filterValue and click Status', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<FilterValue
view={activeView}
filter={filter}
template={board.fields.cardProperties[0]}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
const switchStatus = screen.getAllByText('Status')[1]
userEvent.click(switchStatus)
expect(mockedMutator.changeViewFilter).toBeCalledTimes(1)
expect(container).toMatchSnapshot()
})
test('return filterValue and click Status with Status not in filter', () => {
filter.values = ['test']
activeView.fields.filter.filters = [filter]
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<FilterValue
view={activeView}
filter={filter}
template={board.fields.cardProperties[0]}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
const switchStatus = screen.getAllByText('Status')[0]
userEvent.click(switchStatus)
expect(mockedMutator.changeViewFilter).toBeCalledTimes(1)
expect(container).toMatchSnapshot()
})
})

4
webapp/src/testUtils.tsx
View file

@ -11,9 +11,7 @@ export function mockDOM(): void {
window.focus = jest.fn()
document.createRange = () => {
const range = new Range()
range.getBoundingClientRect = jest.fn()
range.getClientRects = () => {
return {
item: () => null,
@ -21,11 +19,9 @@ export function mockDOM(): void {
[Symbol.iterator]: jest.fn(),
}
}
return range
}
}
export function mockMatchMedia(result: any): void {
// We check if system preference is dark or light theme.
// This is required to provide it's definition since