luisgulo/focalboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

[GH-858] Add test cases for the multi-select component (#906)

Browse source 
* 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 <shahzaib@placemarktechnologies.com>
This commit is contained in:
Shahzaib 2021-08-16 21:03:33 +05:00 committed by GitHub
parent 2cecf640b2
commit 712c18efce
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
17 changed files with 491 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
webapp/i18n/en.json
View file

@ -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",

11
webapp/src/components/cardDetail/__snapshots__/cardDetailContents.test.tsx.snap
View file

@ -168,6 +168,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -229,6 +230,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -281,6 +283,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -348,6 +351,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -405,6 +409,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -475,6 +480,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -532,6 +538,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -752,6 +759,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -822,6 +830,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -883,6 +892,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -935,6 +945,7 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"

2
webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap
View file

@ -37,7 +37,9 @@ exports[`components/cardDetail/CardDetailProperties should match snapshot 1`] =
Jean-Luc Picard
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i

36
webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap
View file

@ -25,7 +25,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
class="menu-options"
>
<div
aria-label="Import archive"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -40,7 +42,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
aria-label="Export archive"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -85,7 +89,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
class="menu-options"
>
<div
aria-label="English"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -106,7 +112,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
</svg>
</div>
<div
aria-label="Español"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -121,7 +129,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
aria-label="Deutsch"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -136,7 +146,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
aria-label="日本語"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -151,7 +163,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
aria-label="Français"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -166,7 +180,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
aria-label="Nederlands"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -181,7 +197,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
aria-label="Pусский"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -196,7 +214,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
aria-label="中文 (繁體)"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -211,7 +231,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
aria-label="中文 (简体)"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -226,7 +248,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
aria-label="Türkçe"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -241,7 +265,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
/>
</div>
<div
aria-label="Occitan"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -263,7 +289,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"
@ -308,7 +336,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"
@ -375,7 +405,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
class="menu-options"
>
<div
aria-label="Import archive"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -390,7 +422,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
/>
</div>
<div
aria-label="Export archive"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -453,7 +487,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"

22
webapp/src/components/properties/__snapshots__/multiSelect.test.tsx.snap Normal file
View file

@ -0,0 +1,22 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`components/properties/multiSelect shows only the selected options when menu is not opened 1`] = `
<div>
<div
class="octo-propertyvalue"
data-testid="multiselect-non-editable"
tabindex="0"
>
<span
class="Label propColorDefault "
>
a
</span>
<span
class="Label empty "
>
b
</span>
</div>
</div>
`;

248
webapp/src/components/properties/multiSelect.test.tsx Normal file
View file

@ -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 <IntlProvider locale='en'>{children}</IntlProvider>
}
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(
<MultiSelect
isEditable={false}
emptyValue={''}
propertyTemplate={propertyTemplate}
propertyValue={propertyValue}
onChange={jest.fn()}
onChangeColor={jest.fn()}
onDeleteOption={jest.fn()}
onCreate={jest.fn()}
onDeleteValue={jest.fn()}
/>,
{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(
<MultiSelect
isEditable={true}
emptyValue={''}
propertyTemplate={propertyTemplate}
propertyValue={[]}
onChange={jest.fn()}
onChangeColor={jest.fn()}
onDeleteOption={jest.fn()}
onCreate={jest.fn()}
onDeleteValue={jest.fn()}
/>,
{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(
<MultiSelect
isEditable={true}
emptyValue={''}
propertyTemplate={propertyTemplate}
propertyValue={propertyValue}
onChange={onChange}
onChangeColor={jest.fn()}
onDeleteOption={jest.fn()}
onCreate={jest.fn()}
onDeleteValue={jest.fn()}
/>,
{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(
<MultiSelect
isEditable={true}
emptyValue={''}
propertyTemplate={propertyTemplate}
propertyValue={propertyValue}
onChange={jest.fn()}
onChangeColor={jest.fn()}
onDeleteOption={jest.fn()}
onCreate={jest.fn()}
onDeleteValue={onDeleteValue}
/>,
{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(
<MultiSelect
isEditable={true}
emptyValue={''}
propertyTemplate={propertyTemplate}
propertyValue={propertyValue}
onChange={jest.fn()}
onChangeColor={jest.fn()}
onDeleteOption={jest.fn()}
onCreate={onCreate}
onDeleteValue={jest.fn()}
/>,
{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(
<MultiSelect
isEditable={true}
emptyValue={''}
propertyTemplate={propertyTemplate}
propertyValue={propertyValue}
onChange={jest.fn()}
onChangeColor={jest.fn()}
onDeleteOption={onDeleteOption}
onCreate={jest.fn()}
onDeleteValue={jest.fn()}
/>,
{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(
<MultiSelect
isEditable={true}
emptyValue={''}
propertyTemplate={propertyTemplate}
propertyValue={propertyValue}
onChange={jest.fn()}
onChangeColor={onChangeColor}
onDeleteOption={jest.fn()}
onCreate={jest.fn()}
onDeleteValue={jest.fn()}
/>,
{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)
})
})

3
webapp/src/components/properties/multiSelect.tsx
View file

@ -32,12 +32,13 @@ const MultiSelectProperty = (props: Props): JSX.Element => {
<div
className='octo-propertyvalue'
tabIndex={0}
data-testid='multiselect-non-editable'
onClick={() => setOpen(true)}
>
{values.map((v) => (
<Label
key={v.id}
color={v ? v.color : 'empty'}
color={v.color}
>
{v.value}
</Label>

52
webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap
View file

@ -23,7 +23,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
class="menu-options"
>
<div
aria-label="Import archive"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -38,7 +40,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
/>
</div>
<div
aria-label="Export archive"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -83,7 +87,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
class="menu-options"
>
<div
aria-label="English"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -104,7 +110,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
</svg>
</div>
<div
aria-label="Español"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -119,7 +127,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
/>
</div>
<div
aria-label="Deutsch"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -134,7 +144,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
/>
</div>
<div
aria-label="日本語"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -149,7 +161,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
/>
</div>
<div
aria-label="Français"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -164,7 +178,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
/>
</div>
<div
aria-label="Nederlands"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -179,7 +195,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
/>
</div>
<div
aria-label="Pусский"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -194,7 +212,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
/>
</div>
<div
aria-label="中文 (繁體)"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -209,7 +229,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
/>
</div>
<div
aria-label="中文 (简体)"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -224,7 +246,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
/>
</div>
<div
aria-label="Türkçe"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -239,7 +263,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
/>
</div>
<div
aria-label="Occitan"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -261,7 +287,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"
@ -328,7 +356,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"
@ -391,7 +421,9 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
class="menu-options"
>
<div
aria-label="Import archive"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -406,7 +438,9 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
/>
</div>
<div
aria-label="Export archive"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -491,7 +525,9 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"
@ -536,7 +572,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
class="menu-options"
>
<div
aria-label="Import archive"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -551,7 +589,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
/>
</div>
<div
aria-label="Export archive"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -618,7 +658,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
class="menu-options"
>
<div
aria-label="Default theme"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -639,7 +681,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
</svg>
</div>
<div
aria-label="Dark theme"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -654,7 +698,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
/>
</div>
<div
aria-label="Light theme"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -669,7 +715,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
/>
</div>
<div
aria-label="System theme"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -691,7 +739,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"
@ -736,7 +786,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"

21
webapp/src/components/table/__snapshots__/table.test.tsx.snap
View file

@ -180,7 +180,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i
@ -274,7 +276,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i
@ -566,7 +570,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i
@ -660,7 +666,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i
@ -952,7 +960,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i
@ -1046,7 +1056,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i
@ -1338,7 +1350,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i
@ -1432,7 +1446,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i
@ -1702,7 +1718,9 @@ exports[`components/table/Table should match snapshot 1`] = `
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i
@ -1906,6 +1924,7 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -1938,6 +1957,7 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -1946,6 +1966,7 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
</div>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-plus AddIcon"

16
webapp/src/components/table/__snapshots__/tableGroupHeaderRow.test.tsx.snap
View file

@ -13,6 +13,7 @@ exports[`should match snapshot on read only 1`] = `
>
<div
class="Button IconButton readonly"
role="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -62,6 +63,7 @@ exports[`should match snapshot with Group 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -98,6 +100,7 @@ exports[`should match snapshot with Group 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -106,6 +109,7 @@ exports[`should match snapshot with Group 1`] = `
</div>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-plus AddIcon"
@ -128,6 +132,7 @@ exports[`should match snapshot, add new 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -164,6 +169,7 @@ exports[`should match snapshot, add new 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -172,6 +178,7 @@ exports[`should match snapshot, add new 1`] = `
</div>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-plus AddIcon"
@ -194,6 +201,7 @@ exports[`should match snapshot, edit title 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -230,6 +238,7 @@ exports[`should match snapshot, edit title 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -238,6 +247,7 @@ exports[`should match snapshot, edit title 1`] = `
</div>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-plus AddIcon"
@ -260,6 +270,7 @@ exports[`should match snapshot, hide group 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -296,6 +307,7 @@ exports[`should match snapshot, hide group 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -304,6 +316,7 @@ exports[`should match snapshot, hide group 1`] = `
</div>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-plus AddIcon"
@ -326,6 +339,7 @@ exports[`should match snapshot, no groups 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<svg
class="DisclosureTriangleIcon Icon"
@ -358,6 +372,7 @@ exports[`should match snapshot, no groups 1`] = `
>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-dots-horizontal OptionsIcon"
@ -366,6 +381,7 @@ exports[`should match snapshot, no groups 1`] = `
</div>
<div
class="Button IconButton"
role="button"
>
<i
class="CompassIcon icon-plus AddIcon"

26
webapp/src/components/table/__snapshots__/tableHeaderMenu.test.tsx.snap
View file

@ -12,7 +12,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
class="menu-options"
>
<div
aria-label="Sort ascending"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -27,7 +29,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
/>
</div>
<div
aria-label="Sort descending"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -42,7 +46,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
/>
</div>
<div
aria-label="Insert left"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -57,7 +63,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
/>
</div>
<div
aria-label="Insert right"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -72,7 +80,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
/>
</div>
<div
aria-label="Hide"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -87,7 +97,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
/>
</div>
<div
aria-label="Duplicate"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -102,7 +114,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
/>
</div>
<div
aria-label="Delete"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -124,7 +138,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, other column 1`
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"
@ -156,7 +172,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
class="menu-options"
>
<div
aria-label="Sort ascending"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -171,7 +189,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
/>
</div>
<div
aria-label="Sort descending"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -186,7 +206,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
/>
</div>
<div
aria-label="Insert left"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -201,7 +223,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
/>
</div>
<div
aria-label="Insert right"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -223,7 +247,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"

4
webapp/src/components/table/__snapshots__/tableRow.test.tsx.snap
View file

@ -148,7 +148,9 @@ exports[`components/table/TableRow should match snapshot, display properties 1`]
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i
@ -328,7 +330,9 @@ exports[`components/table/TableRow should match snapshot, resizing column 1`] =
value 1
</span>
<div
aria-label="Clear"
class="Button IconButton margin-left delete-value"
role="button"
title="Clear"
>
<i

34
webapp/src/widgets/__snapshots__/propertyMenu.test.tsx.snap
View file

@ -68,7 +68,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
class="MenuOption MenuSeparator menu-separator"
/>
<div
aria-label="Text"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -83,7 +85,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Number"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -98,7 +102,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Email"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -113,7 +119,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Phone"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -128,7 +136,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="URL"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -143,7 +153,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Select"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -158,7 +170,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Multi Select"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -173,7 +187,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Date"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -188,7 +204,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Person"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -203,7 +221,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Checkbox"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -218,7 +238,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Created Time"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -233,7 +255,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Created By"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -248,7 +272,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Last Updated Time"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -263,7 +289,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
/>
</div>
<div
aria-label="Last Updated By"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -285,7 +313,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"
@ -304,7 +334,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
</div>
</div>
<div
aria-label="Delete"
class="MenuOption TextOption menu-option"
role="button"
>
<div
class="noicon"
@ -326,7 +358,9 @@ exports[`widgets/PropertyMenu should match snapshot 1`] = `
class="menu-options hideOnWidescreen"
>
<div
aria-label="Cancel"
class="MenuOption TextOption menu-option menu-cancel"
role="button"
>
<div
class="noicon"

2
webapp/src/widgets/buttons/iconButton.tsx
View file

@ -19,10 +19,12 @@ function IconButton(props: Props): JSX.Element {
}
return (
<div
role='button'
onClick={props.onClick}
onMouseDown={props.onMouseDown}
className={className}
title={props.title}
aria-label={props.title}
>
{props.icon}
</div>

4
webapp/src/widgets/menu/colorOption.tsx
View file

@ -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 (
<div
role='button'
aria-label={intl.formatMessage({id: 'ColorOption.selectColor', defaultMessage: 'Select {color} Color'}, {color: name})}
className='MenuOption ColorOption menu-option'
onClick={(e: React.MouseEvent): void => {
e.target.dispatchEvent(new Event('menuItemClicked'))

2
webapp/src/widgets/menu/textOption.tsx
View file

@ -18,6 +18,8 @@ function TextOption(props:TextOptionProps): JSX.Element {
}
return (
<div
role='button'
aria-label={name}
className={className}
onClick={(e: React.MouseEvent) => {
e.target.dispatchEvent(new Event('menuItemClicked'))

7
webapp/src/widgets/valueSelector.tsx
View file

@ -70,7 +70,10 @@ const ValueSelectorLabel = React.memo((props: LabelProps): JSX.Element => {
<Label color={option.color}>{option.value}</Label>
</div>
<MenuWrapper stopPropagationOnToggle={true}>
<IconButton icon={<OptionsIcon/>}/>
<IconButton
title={intl.formatMessage({id: 'ValueSelectorLabel.openMenu', defaultMessage: 'Open Menu'})}
icon={<OptionsIcon/>}
/>
<Menu position='left'>
<Menu.Text
id='delete'
@ -135,8 +138,10 @@ const valueSelectorStyle = {
}
function ValueSelector(props: Props): JSX.Element {
const intl = useIntl()
return (
<CreatableSelect
aria-label={intl.formatMessage({id: 'ValueSelector.valueSelector', defaultMessage: 'Value selector'})}
captureMenuScroll={true}
maxMenuHeight={1200}
isMulti={props.isMulti}