From 712c18efce5c45f34a0386cb7c133115cd18154e Mon Sep 17 00:00:00 2001 From: Shahzaib Date: Mon, 16 Aug 2021 21:03:33 +0500 Subject: [PATCH] [GH-858] Add test cases for the multi-select component (#906) * test(multiSelect): Add test cases for multi-select * Remove `creatable-selector-parent` test id * test(multiSelect): Make elements more accessible * Update all snapshots that renders the `multiSelect`, `iconButton`, and `textOption` components * Add the internationalized messages for the `aria-label` attributes * cleanup(multiSelect.test.tsx): Remove the `DndProvider` from the `Wrapper` component * Change the `ids` of `intl.formatMessage` arg Co-authored-by: Shahzaib --- webapp/i18n/en.json | 4 +- .../cardDetailContents.test.tsx.snap | 11 + .../cardDetailProperties.test.tsx.snap | 2 + .../globalHeaderSettingsMenu.test.tsx.snap | 36 +++ .../__snapshots__/multiSelect.test.tsx.snap | 22 ++ .../properties/multiSelect.test.tsx | 248 ++++++++++++++++++ .../src/components/properties/multiSelect.tsx | 3 +- .../sidebarSettingsMenu.test.tsx.snap | 52 ++++ .../table/__snapshots__/table.test.tsx.snap | 21 ++ .../tableGroupHeaderRow.test.tsx.snap | 16 ++ .../tableHeaderMenu.test.tsx.snap | 26 ++ .../__snapshots__/tableRow.test.tsx.snap | 4 + .../__snapshots__/propertyMenu.test.tsx.snap | 34 +++ webapp/src/widgets/buttons/iconButton.tsx | 2 + webapp/src/widgets/menu/colorOption.tsx | 4 + webapp/src/widgets/menu/textOption.tsx | 2 + webapp/src/widgets/valueSelector.tsx | 7 +- 17 files changed, 491 insertions(+), 3 deletions(-) create mode 100644 webapp/src/components/properties/__snapshots__/multiSelect.test.tsx.snap create mode 100644 webapp/src/components/properties/multiSelect.test.tsx diff --git a/webapp/i18n/en.json b/webapp/i18n/en.json index 54421adfe..037b41e6a 100644 --- a/webapp/i18n/en.json +++ b/webapp/i18n/en.json @@ -7,7 +7,6 @@ "BoardComponent.no-property": "No {property}", "BoardComponent.no-property-title": "Items with an empty {property} property will go here. This column cannot be removed.", "BoardComponent.show": "Show", - "BoardPage.syncFailed": "Board may be deleted or access revoked.", "CardDetail.add-content": "Add content", "CardDetail.add-icon": "Add icon", "CardDetail.add-property": "+ Add a property", @@ -16,6 +15,7 @@ "CardDetail.new-comment-placeholder": "Add a comment...", "CardDialog.editing-template": "You're editing a template", "CardDialog.nocard": "This card doesn't exist or is inaccessible", + "ColorOption.selectColor": "Select {color} Color", "Comment.delete": "Delete", "CommentsList.send": "Send", "ContentBlock.Delete": "Delete", @@ -121,6 +121,8 @@ "TableHeaderMenu.sort-ascending": "Sort ascending", "TableHeaderMenu.sort-descending": "Sort descending", "TableRow.open": "Open", + "ValueSelector.valueSelector": "Value selector", + "ValueSelectorLabel.openMenu": "Open Menu", "View.AddView": "Add View", "View.Board": "Board", "View.DeleteView": "Delete View", diff --git a/webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap b/webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap index f142263c9..36a5ed818 100644 --- a/webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap +++ b/webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap @@ -168,6 +168,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr >
+
+ + a + + + b + +
+
+`; diff --git a/webapp/src/components/properties/multiSelect.test.tsx b/webapp/src/components/properties/multiSelect.test.tsx new file mode 100644 index 000000000..a3cb4d5e3 --- /dev/null +++ b/webapp/src/components/properties/multiSelect.test.tsx @@ -0,0 +1,248 @@ +// 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 userEvent from '@testing-library/user-event' +import '@testing-library/jest-dom' +import {IntlProvider} from 'react-intl' + +import {IPropertyOption, IPropertyTemplate} from '../../blocks/board' + +import MultiSelect from './multiSelect' + +function buildMultiSelectPropertyTemplate(options: IPropertyOption[] = []) : IPropertyTemplate { + return { + id: 'multiselect-template-1', + name: 'Multi', + options: [ + { + color: 'propColorDefault', + id: 'multi-option-1', + value: 'a', + }, + { + color: '', + id: 'multi-option-2', + value: 'b', + }, + { + color: 'propColorDefault', + id: 'multi-option-3', + value: 'c', + }, + ...options, + ], + type: 'multiSelect', + } +} + +type WrapperProps = { + children?: React.ReactNode; +} + +const Wrapper = ({children}: WrapperProps) => { + return {children} +} + +describe('components/properties/multiSelect', () => { + const nonEditableMultiSelectTestId = 'multiselect-non-editable' + + it('shows only the selected options when menu is not opened', () => { + const propertyTemplate = buildMultiSelectPropertyTemplate() + const propertyValue = ['multi-option-1', 'multi-option-2'] + + const {container} = render( + , + {wrapper: Wrapper}, + ) + + const multiSelectParent = screen.getByTestId(nonEditableMultiSelectTestId) + + expect(multiSelectParent.children.length).toBe(propertyValue.length) + + expect(container).toMatchSnapshot() + }) + + it('opens editable multi value selector menu when the button/label is clicked', () => { + const propertyTemplate = buildMultiSelectPropertyTemplate() + + render( + , + {wrapper: Wrapper}, + ) + + userEvent.click(screen.getByTestId(nonEditableMultiSelectTestId)) + + expect(screen.getByRole('textbox', {name: /value selector/i})).toBeInTheDocument() + }) + + it('can select a option', async () => { + const propertyTemplate = buildMultiSelectPropertyTemplate() + const propertyValue = ['multi-option-1'] + const onChange = jest.fn() + + render( + , + {wrapper: Wrapper}, + ) + + userEvent.click(screen.getByTestId(nonEditableMultiSelectTestId)) + + userEvent.type(screen.getByRole('textbox', {name: /value selector/i}), 'b{enter}') + + expect(onChange).toHaveBeenCalledWith(['multi-option-1', 'multi-option-2']) + }) + + it('can unselect a option', async () => { + const propertyTemplate = buildMultiSelectPropertyTemplate() + const propertyValue = ['multi-option-1'] + const onDeleteValue = jest.fn() + + render( + , + {wrapper: Wrapper}, + ) + + userEvent.click(screen.getByTestId(nonEditableMultiSelectTestId)) + + userEvent.click(screen.getAllByRole('button', {name: /clear/i})[0]) + + const valueToRemove = propertyTemplate.options.find((option: IPropertyOption) => option.id === propertyValue[0]) + const selectedValues = propertyTemplate.options.filter((option: IPropertyOption) => propertyValue.includes(option.id)) + + expect(onDeleteValue).toHaveBeenCalledWith(valueToRemove, selectedValues) + }) + + it('can create a new option', async () => { + const propertyTemplate = buildMultiSelectPropertyTemplate() + const propertyValue = ['multi-option-1', 'multi-option-2'] + const onCreate = jest.fn() + + render( + , + {wrapper: Wrapper}, + ) + + userEvent.click(screen.getByTestId(nonEditableMultiSelectTestId)) + + userEvent.type(screen.getByRole('textbox', {name: /value selector/i}), 'new-value{enter}') + + const selectedValues = propertyTemplate.options.filter((option: IPropertyOption) => propertyValue.includes(option.id)) + + expect(onCreate).toHaveBeenCalledWith('new-value', selectedValues) + }) + + it('can delete a option', () => { + const propertyTemplate = buildMultiSelectPropertyTemplate() + const propertyValue = ['multi-option-1', 'multi-option-2'] + + const onDeleteOption = jest.fn() + render( + , + {wrapper: Wrapper}, + ) + + userEvent.click(screen.getByTestId(nonEditableMultiSelectTestId)) + + userEvent.click(screen.getAllByRole('button', {name: /open menu/i})[0]) + + userEvent.click(screen.getByRole('button', {name: /delete/i})) + + const optionToDelete = propertyTemplate.options.find((option: IPropertyOption) => option.id === propertyValue[0]) + + expect(onDeleteOption).toHaveBeenCalledWith(optionToDelete) + }) + + it('can change color for any option', () => { + const propertyTemplate = buildMultiSelectPropertyTemplate() + const propertyValue = ['multi-option-1', 'multi-option-2'] + const newColorKey = 'propColorYellow' + const newColorValue = 'yellow' + + const onChangeColor = jest.fn() + render( + , + {wrapper: Wrapper}, + ) + + userEvent.click(screen.getByTestId(nonEditableMultiSelectTestId)) + + userEvent.click(screen.getAllByRole('button', {name: /open menu/i})[0]) + + userEvent.click(screen.getByRole('button', {name: new RegExp(newColorValue, 'i')})) + + const selectedOption = propertyTemplate.options.find((option: IPropertyOption) => option.id === propertyValue[0]) + + expect(onChangeColor).toHaveBeenCalledWith(selectedOption, newColorKey) + }) +}) diff --git a/webapp/src/components/properties/multiSelect.tsx b/webapp/src/components/properties/multiSelect.tsx index c32da6ec0..5579014f7 100644 --- a/webapp/src/components/properties/multiSelect.tsx +++ b/webapp/src/components/properties/multiSelect.tsx @@ -32,12 +32,13 @@ const MultiSelectProperty = (props: Props): JSX.Element => {
setOpen(true)} > {values.map((v) => ( diff --git a/webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap b/webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap index 64a9aa4e5..33a74c7bf 100644 --- a/webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap +++ b/webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap @@ -23,7 +23,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match class="menu-options" >
{props.icon}
diff --git a/webapp/src/widgets/menu/colorOption.tsx b/webapp/src/widgets/menu/colorOption.tsx index 11093af12..2a667bba0 100644 --- a/webapp/src/widgets/menu/colorOption.tsx +++ b/webapp/src/widgets/menu/colorOption.tsx @@ -1,6 +1,7 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React from 'react' +import {useIntl} from 'react-intl' import {MenuOptionProps} from './menuItem' @@ -12,8 +13,11 @@ type ColorOptionProps = MenuOptionProps & { function ColorOption(props: ColorOptionProps): JSX.Element { const {id, name, icon} = props + const intl = useIntl() return (
{ e.target.dispatchEvent(new Event('menuItemClicked')) diff --git a/webapp/src/widgets/menu/textOption.tsx b/webapp/src/widgets/menu/textOption.tsx index 834cfa509..58ee658e3 100644 --- a/webapp/src/widgets/menu/textOption.tsx +++ b/webapp/src/widgets/menu/textOption.tsx @@ -18,6 +18,8 @@ function TextOption(props:TextOptionProps): JSX.Element { } return (
{ e.target.dispatchEvent(new Event('menuItemClicked')) diff --git a/webapp/src/widgets/valueSelector.tsx b/webapp/src/widgets/valueSelector.tsx index e2e5c1614..7ffdc16be 100644 --- a/webapp/src/widgets/valueSelector.tsx +++ b/webapp/src/widgets/valueSelector.tsx @@ -70,7 +70,10 @@ const ValueSelectorLabel = React.memo((props: LabelProps): JSX.Element => {
- }/> + } + />