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

[GH-864]: add tests unit for viewHeader (#1413)

Browse source 
* chore[GH-#864]: add test unit for viewHeader

* fix: eslint import useless
This commit is contained in:
Julien Fabre 2021-10-04 06:22:30 +02:00 committed by GitHub
parent f1508df6c1
commit b02708173a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 272 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -0,0 +1,183 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/viewHeader/viewHeader return viewHeader 1`] = `
<div>
<div
class="ViewHeader"
>
<input
class="Editable undefined"
placeholder="Untitled View"
spellcheck="true"
title="view title"
value="view title"
/>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-chevron-down DropdownIcon"
/>
</div>
</div>
<div
class="octo-spacer"
/>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button "
type="button"
>
<span>
Properties
</span>
</button>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button "
type="button"
>
<span>
Group by:
<span
id="groupByLabel"
>
Status
</span>
</span>
</button>
</div>
<div
class="ModalWrapper"
>
<button
class="Button active "
type="button"
>
<span>
Filter
</span>
</button>
</div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button active "
type="button"
>
<span>
Sort
</span>
</button>
</div>
<button
class="Button "
type="button"
>
<span>
Search
</span>
</button>
<div
class="ModalWrapper"
>
<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
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>
</div>
</div>
</div>
`;
exports[`components/viewHeader/viewHeader return viewHeader readonly 1`] = `
<div>
<div
class="ViewHeader"
>
<input
class="Editable readonly undefined"
placeholder="Untitled View"
readonly=""
spellcheck="true"
title="view title"
value="view title"
/>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-chevron-down DropdownIcon"
/>
</div>
</div>
<div
class="octo-spacer"
/>
<button
class="Button "
type="button"
>
<span>
Search
</span>
</button>
</div>
</div>
`;

82
webapp/src/components/viewHeader/viewHeader.test.tsx Normal file
View file

@ -0,0 +1,82 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import React from 'react'
import {render} from '@testing-library/react'
import {Provider as ReduxProvider} from 'react-redux'
import '@testing-library/jest-dom'
import {TestBlockFactory} from '../../test/testBlockFactory'
import {wrapIntl, mockStateStore} from '../../testUtils'
import ViewHeader from './viewHeader'
const board = TestBlockFactory.createBoard()
const activeView = TestBlockFactory.createBoardView(board)
const card = TestBlockFactory.createCard(board)
describe('components/viewHeader/viewHeader', () => {
const state = {
users: {
me: {
id: 'user-id-1',
username: 'username_1',
},
},
searchText: {
},
boards: {
current: board,
},
cards: {
templates: [card],
},
}
const store = mockStateStore([], state)
test('return viewHeader', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<ViewHeader
board={board}
activeView={activeView}
views={[activeView]}
cards={[card]}
groupByProperty={board.fields.cardProperties[0]}
addCard={jest.fn()}
addCardFromTemplate={jest.fn()}
addCardTemplate={jest.fn()}
editCardTemplate={jest.fn()}
readonly={false}
showShared={false}
/>
</ReduxProvider>,
),
)
expect(container).toMatchSnapshot()
})
test('return viewHeader readonly', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<ViewHeader
board={board}
activeView={activeView}
views={[activeView]}
cards={[card]}
groupByProperty={board.fields.cardProperties[0]}
addCard={jest.fn()}
addCardFromTemplate={jest.fn()}
addCardTemplate={jest.fn()}
editCardTemplate={jest.fn()}
readonly={true}
showShared={false}
/>
</ReduxProvider>,
),
)
expect(container).toMatchSnapshot()
})
})

7
webapp/src/testUtils.tsx
View file

@ -2,6 +2,8 @@
// See LICENSE.txt for license information.
import {IntlProvider} from 'react-intl'
import React from 'react'
import configureStore, {MockStoreEnhanced} from 'redux-mock-store'
import {Middleware} from 'redux'
export const wrapIntl = (children?: React.ReactNode): JSX.Element => <IntlProvider locale='en'>{children}</IntlProvider>
@ -39,3 +41,8 @@ export function mockMatchMedia(result: any): void {
}),
})
}
export function mockStateStore(middleware:Middleware[], state:unknown): MockStoreEnhanced<unknown, unknown> {
const mockStore = configureStore(middleware)
return mockStore(state)
}