[GH-867]: add unit tests for viewHeaderPropertiesMenu (#1404)

* chore[#867]: add test for viewHeaderPropertiesMenu

* fix: name test

* fix: snapshot on test viewHeaderPropertiesMenu

* fix: rollback cardDetailContents snap

* fix: comments from krame
This commit is contained in:
Julien Fabre 2021-10-04 06:27:12 +02:00 committed by GitHub
parent cd261224c4
commit d0eefe8c85
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 347 additions and 0 deletions

View file

@ -0,0 +1,282 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/viewHeader/viewHeaderPropertiesMenu return properties menu 1`] = `
<div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button "
type="button"
>
<span>
Properties
</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"
>
<div
class="octo-switch-inner"
/>
</div>
</div>
<div
class="MenuOption SwitchOption menu-option"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Property 1
</div>
<div
class="Switch"
>
<div
class="octo-switch-inner"
/>
</div>
</div>
<div
class="MenuOption SwitchOption menu-option"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Property 2
</div>
<div
class="Switch"
>
<div
class="octo-switch-inner"
/>
</div>
</div>
<div
class="MenuOption SwitchOption menu-option"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Property 3
</div>
<div
class="Switch"
>
<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/viewHeaderPropertiesMenu return properties menu with gallery typeview 1`] = `
<div>
<div
aria-label="menuwrapper"
class="MenuWrapper"
role="button"
>
<button
class="Button "
type="button"
>
<span>
Properties
</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"
>
Title
</div>
<div
class="Switch"
>
<div
class="octo-switch-inner"
/>
</div>
</div>
<div
class="MenuOption SwitchOption menu-option"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Status
</div>
<div
class="Switch"
>
<div
class="octo-switch-inner"
/>
</div>
</div>
<div
class="MenuOption SwitchOption menu-option"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Property 1
</div>
<div
class="Switch"
>
<div
class="octo-switch-inner"
/>
</div>
</div>
<div
class="MenuOption SwitchOption menu-option"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Property 2
</div>
<div
class="Switch"
>
<div
class="octo-switch-inner"
/>
</div>
</div>
<div
class="MenuOption SwitchOption menu-option"
>
<div
class="noicon"
/>
<div
class="menu-name"
>
Property 3
</div>
<div
class="Switch"
>
<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>
`;

View file

@ -0,0 +1,65 @@
// 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 {BoardView} from '../../blocks/boardView'
import {TestBlockFactory} from '../../test/testBlockFactory'
import {mockStateStore, wrapIntl} from '../../testUtils'
import ViewHeaderPropertiesMenu from './viewHeaderPropertiesMenu'
const board = TestBlockFactory.createBoard()
let activeView:BoardView
describe('components/viewHeader/viewHeaderPropertiesMenu', () => {
const state = {
users: {
me: {
id: 'user-id-1',
username: 'username_1'},
},
}
const store = mockStateStore([], state)
beforeEach(() => {
jest.clearAllMocks()
activeView = TestBlockFactory.createBoardView(board)
})
test('return properties menu', () => {
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<ViewHeaderPropertiesMenu
activeView={activeView}
properties={board.fields.cardProperties}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
})
test('return properties menu with gallery typeview', () => {
activeView.fields.viewType = 'gallery'
const {container} = render(
wrapIntl(
<ReduxProvider store={store}>
<ViewHeaderPropertiesMenu
activeView={activeView}
properties={board.fields.cardProperties}
/>
</ReduxProvider>,
),
)
const buttonElement = screen.getByRole('button', {name: 'menuwrapper'})
userEvent.click(buttonElement)
expect(container).toMatchSnapshot()
})
})