focalboard/webapp/src/testUtils.tsx
kamre 342c8df39d
[GH-1754] Feature: card badges (#2025)
* First shot implementation of badges for the card.

* Showing and hiding card badges in board/gallery views via header menu action added.

* Counting of checkboxes in markdown supported.

* Use Intl.formatMessage for badge titles.

* Unit tests for `CardBadges` component added. Some other unit tests fixed.

* Unit test for 'Show card badges' action in the view header menu added.

* Cypress test for card badges added:
 - card with comments, description and checkboxes added for testing
 - card badges are shown and hidden via view menu
 - new Cypress command `uiAddNewCard` added
 - label property added to `MenuWrapper` and used in `ViewHeaderActionsMenu`

* Unit tests fixed after change of the label for view menu.

* Fix stylelint issues.

* Class name for `CardBadges` component fixed.

* Show and hide for card badges moved to `Properties` menu:
 - field `cardBadgesVisible` removed from `BoardViewFields`
 - new constant `badgesColumnId` introduced and used as an element in `visiblePropertyIds`
 - card badges added to calendar view
 - added `role` and `aria-label` for menu component `SwitchOption`
 - unit and Cypress tests updated

* Fix Cypress test: use `blur` after typing text.

Co-authored-by: Mattermod <mattermod@users.noreply.github.com>
2022-01-13 09:26:27 -07:00

65 lines
2.0 KiB
TypeScript

// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {IntlProvider} from 'react-intl'
import React from 'react'
import {DndProvider} from 'react-dnd'
import {HTML5Backend} from 'react-dnd-html5-backend'
import configureStore, {MockStoreEnhanced} from 'redux-mock-store'
import {Middleware} from 'redux'
import {Block} from './blocks/block'
export const wrapIntl = (children?: React.ReactNode): JSX.Element => <IntlProvider locale='en'>{children}</IntlProvider>
export const wrapDNDIntl = (children?: React.ReactNode): JSX.Element => {
return (
<DndProvider backend={HTML5Backend}>
{wrapIntl(children)}
</DndProvider>
)
}
export function mockDOM(): void {
window.focus = jest.fn()
document.createRange = () => {
const range = new Range()
range.getBoundingClientRect = jest.fn()
range.getClientRects = () => {
return {
item: () => null,
length: 0,
[Symbol.iterator]: jest.fn(),
}
}
return range
}
}
export function mockMatchMedia(result: {matches: boolean}): void {
// We check if system preference is dark or light theme.
// This is required to provide it's definition since
// window.matchMedia doesn't exist in Jest.
Object.defineProperty(window, 'matchMedia', {
writable: true,
value: jest.fn().mockImplementation(() => {
return result
// return ({
// matches: true,
// })
}),
})
}
export function mockStateStore(middleware:Middleware[], state:unknown): MockStoreEnhanced<unknown, unknown> {
const mockStore = configureStore(middleware)
return mockStore(state)
}
export type BlocksById<BlockType> = {[key: string]: BlockType}
export function blocksById<BlockType extends Block>(blocks: Array<BlockType>): BlocksById<BlockType> {
return blocks.reduce((res, block) => {
res[block.id] = block
return res
}, {} as BlocksById<BlockType>)
}