[GH-864]: add tests unit for viewHeader (#1413)
* chore[GH-#864]: add test unit for viewHeader * fix: eslint import useless
This commit is contained in:
Julien Fabre
GitHub
parent
f1508df6c1
commit
b02708173a
3 changed files with 272 additions and 0 deletions
|
|
@ -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
82
webapp/src/components/viewHeader/viewHeader.test.tsx
Normal 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()
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
@ -2,6 +2,8 @@
|
||||||
// See LICENSE.txt for license information.
|
// See LICENSE.txt for license information.
|
||||||
import {IntlProvider} from 'react-intl'
|
import {IntlProvider} from 'react-intl'
|
||||||
import React from 'react'
|
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>
|
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)
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue