diff --git a/webapp/src/components/__snapshots__/blockIconSelector.test.tsx.snap b/webapp/src/components/__snapshots__/blockIconSelector.test.tsx.snap new file mode 100644 index 000000000..a9f2466ea --- /dev/null +++ b/webapp/src/components/__snapshots__/blockIconSelector.test.tsx.snap @@ -0,0 +1,177 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/blockIconSelector return an icon correctly 1`] = ` +
+
+
+
+ + 👍 + +
+
+
+
+`; + +exports[`components/blockIconSelector return menu on click 1`] = ` +
+
+
+
+ + 👍 + +
+
+
+
+
+ + + +
+ Random +
+
+
+ +
+ + + +
+ Remove icon +
+
+
+
+
+
+
+
+
+ Cancel +
+
+
+
+
+
+
+
+
+`; + +exports[`components/blockIconSelector return no element with no icon 1`] = `
`; + +exports[`components/blockIconSelector return no menu in readonly 1`] = ` +
+
+
+ + 👍 + +
+
+
+`; + + +exports[`components/blockIconSelector return no icon after click on remove menu 1`] = `
`; + diff --git a/webapp/src/components/blockIconSelector.test.tsx b/webapp/src/components/blockIconSelector.test.tsx new file mode 100644 index 000000000..2585a03d2 --- /dev/null +++ b/webapp/src/components/blockIconSelector.test.tsx @@ -0,0 +1,127 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React, {ReactElement} from 'react' +import {fireEvent, render, screen} from '@testing-library/react' + +import userEvent from '@testing-library/user-event' + +import '@testing-library/jest-dom' +import {IntlProvider} from 'react-intl' + +import {mocked} from 'ts-jest/utils' + +import mutator from '../mutator' + +import {TestBlockFactory} from '../test/testBlockFactory' + +import BlockIconSelector from './blockIconSelector' + +const wrapIntl = (children: ReactElement) => {children} +const board = TestBlockFactory.createBoard() +const icon = '👍' + +jest.mock('../mutator') +const mockedMutator = mocked(mutator, true) + +describe('components/blockIconSelector', () => { + beforeEach(() => { + board.fields.icon = icon + jest.clearAllMocks() + }) + test('return an icon correctly', () => { + const {container} = render(wrapIntl( + , + )) + expect(container).toMatchSnapshot() + }) + test('return no element with no icon', () => { + board.fields.icon = '' + const {container} = render(wrapIntl( + , + )) + expect(container).toMatchSnapshot() + }) + test('return menu on click', () => { + const {container} = render(wrapIntl( + , + )) + userEvent.click(screen.getByRole('button', {name: 'menuwrapper'})) + expect(container).toMatchSnapshot() + }) + test('return no menu in readonly', () => { + const {container} = render(wrapIntl( + , + )) + expect(container).toMatchSnapshot() + }) + + test('return a new icon after click on random menu', () => { + render(wrapIntl( + , + )) + userEvent.click(screen.getByRole('button', {name: 'menuwrapper'})) + const buttonRandom = screen.queryByRole('button', {name: 'Random'}) + expect(buttonRandom).not.toBeNull() + userEvent.click(buttonRandom!) + expect(mockedMutator.changeIcon).toBeCalledTimes(1) + }) + + test('return a new icon after click on EmojiPicker', async () => { + const {container} = render(wrapIntl( + , + )) + userEvent.click(screen.getByRole('button', {name: 'menuwrapper'})) + const menuPicker = container.querySelector('div#pick') + expect(menuPicker).not.toBeNull() + fireEvent.mouseEnter(menuPicker!) + + const allButtonThumbUp = await screen.findAllByRole('button', {name: /thumbsup/i}) + userEvent.click(allButtonThumbUp[0]) + expect(mockedMutator.changeIcon).toBeCalledTimes(1) + expect(mockedMutator.changeIcon).toBeCalledWith(board.id, board.fields.icon, '👍') + }) + + test('return no icon after click on remove menu', () => { + const {container, rerender} = render(wrapIntl( + , + )) + userEvent.click(screen.getByRole('button', {name: 'menuwrapper'})) + const buttonRemove = screen.queryByRole('button', {name: 'Remove icon'}) + expect(buttonRemove).not.toBeNull() + userEvent.click(buttonRemove!) + expect(mockedMutator.changeIcon).toBeCalledTimes(1) + expect(mockedMutator.changeIcon).toBeCalledWith(board.id, board.fields.icon, '', 'remove icon') + + //simulate reset icon + board.fields.icon = '' + + rerender(wrapIntl( + ), + ) + expect(container).toMatchSnapshot() + }) +}) diff --git a/webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap b/webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap index 36a5ed818..c8a9e5183 100644 --- a/webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap +++ b/webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap @@ -164,7 +164,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr class="octo-block-margin" >
{ return (