[GH-826] Add unit test for blockIconSelector (#1063)

* [chore #826]: add unit test for blockIconSelector

* refacto: review mutator mock

* refacto: add data-testid on menuwrapper and change query

* fix: snapshot on table and data-testid

* fix: add snapshot on test

Co-authored-by: Harshil Sharma <harshilsharma63@gmail.com>
Co-authored-by: Scott Bishel <scott.bishel@mattermost.com>

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`] = `
+<div>
+  <div
+    class="BlockIconSelector"
+  >
+    <div
+      aria-label="menuwrapper"
+      class="MenuWrapper"
+      role="button"
+    >
+      <div
+        class="octo-icon size-l"
+      >
+        <span>
+          👍
+        </span>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`components/blockIconSelector return menu on click 1`] = `
+<div>
+  <div
+    class="BlockIconSelector"
+  >
+    <div
+      aria-label="menuwrapper"
+      class="MenuWrapper"
+      role="button"
+    >
+      <div
+        class="octo-icon size-l"
+      >
+        <span>
+          👍
+        </span>
+      </div>
+      <div
+        class="Menu noselect bottom"
+      >
+        <div
+          class="menu-contents"
+        >
+          <div
+            class="menu-options"
+          >
+            <div
+              aria-label="Random"
+              class="MenuOption TextOption menu-option"
+              role="button"
+            >
+              <svg
+                class="EmojiIcon Icon"
+                viewBox="0 0 496 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"
+                />
+              </svg>
+              <div
+                class="menu-name"
+              >
+                Random
+              </div>
+              <div
+                class="noicon"
+              />
+            </div>
+            <div
+              class="MenuOption SubMenuOption menu-option"
+              id="pick"
+            >
+              <svg
+                class="EmojiIcon Icon"
+                viewBox="0 0 496 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"
+                />
+              </svg>
+              <div
+                class="menu-name"
+              >
+                Pick icon
+              </div>
+              <svg
+                class="SubmenuTriangleIcon Icon"
+                viewBox="0 0 100 100"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <polygon
+                  points="50,35 75,50 50,65"
+                />
+              </svg>
+            </div>
+            <div
+              aria-label="Remove icon"
+              class="MenuOption TextOption menu-option"
+              role="button"
+            >
+              <svg
+                class="DeleteIcon Icon"
+                viewBox="0 0 448 512"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M268 416h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12zM432 80h-82.41l-34-56.7A48 48 0 0 0 274.41 0H173.59a48 48 0 0 0-41.16 23.3L98.41 80H16A16 16 0 0 0 0 96v16a16 16 0 0 0 16 16h16v336a48 48 0 0 0 48 48h288a48 48 0 0 0 48-48V128h16a16 16 0 0 0 16-16V96a16 16 0 0 0-16-16zM171.84 50.91A6 6 0 0 1 177 48h94a6 6 0 0 1 5.15 2.91L293.61 80H154.39zM368 464H80V128h288zm-212-48h24a12 12 0 0 0 12-12V188a12 12 0 0 0-12-12h-24a12 12 0 0 0-12 12v216a12 12 0 0 0 12 12z"
+                />
+              </svg>
+              <div
+                class="menu-name"
+              >
+                Remove icon
+              </div>
+              <div
+                class="noicon"
+              />
+            </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>
+</div>
+`;
+
+exports[`components/blockIconSelector return no element with no icon 1`] = `<div />`;
+
+exports[`components/blockIconSelector return no menu in readonly 1`] = `
+<div>
+  <div
+    class="BlockIconSelector"
+  >
+    <div
+      class="octo-icon size-m readonly"
+    >
+      <span>
+        👍
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+
+exports[`components/blockIconSelector return no icon after click on remove menu 1`] = `<div />`;
+

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) => <IntlProvider locale='en'>{children}</IntlProvider>
+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(
+            <BlockIconSelector
+                block={board}
+                size='l'
+            />,
+        ))
+        expect(container).toMatchSnapshot()
+    })
+    test('return no element with no icon', () => {
+        board.fields.icon = ''
+        const {container} = render(wrapIntl(
+            <BlockIconSelector
+                block={board}
+                size='l'
+            />,
+        ))
+        expect(container).toMatchSnapshot()
+    })
+    test('return menu on click', () => {
+        const {container} = render(wrapIntl(
+            <BlockIconSelector
+                block={board}
+                size='l'
+            />,
+        ))
+        userEvent.click(screen.getByRole('button', {name: 'menuwrapper'}))
+        expect(container).toMatchSnapshot()
+    })
+    test('return no menu in readonly', () => {
+        const {container} = render(wrapIntl(
+            <BlockIconSelector
+                block={board}
+                readonly={true}
+            />,
+        ))
+        expect(container).toMatchSnapshot()
+    })
+
+    test('return a new icon after click on random menu', () => {
+        render(wrapIntl(
+            <BlockIconSelector
+                block={board}
+                size='l'
+            />,
+        ))
+        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(
+            <BlockIconSelector
+                block={board}
+                size='l'
+            />,
+        ))
+        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(
+            <BlockIconSelector
+                block={board}
+                size='l'
+            />,
+        ))
+        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(
+            <BlockIconSelector
+                block={board}
+            />),
+        )
+        expect(container).toMatchSnapshot()
+    })
+})

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"
           >
             <div
+              aria-label="menuwrapper"
               class="MenuWrapper"
+              role="button"
             >
               <div
                 class="Button IconButton"
@@ -226,7 +228,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
               class="octo-block-margin"
             >
               <div
+                aria-label="menuwrapper"
                 class="MenuWrapper"
+                role="button"
               >
                 <div
                   class="Button IconButton"
@@ -279,7 +283,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
               class="octo-block-margin"
             >
               <div
+                aria-label="menuwrapper"
                 class="MenuWrapper"
+                role="button"
               >
                 <div
                   class="Button IconButton"
@@ -347,7 +353,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
             class="octo-block-margin"
           >
             <div
+              aria-label="menuwrapper"
               class="MenuWrapper"
+              role="button"
             >
               <div
                 class="Button IconButton"
@@ -405,7 +413,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
             class="octo-block-margin"
           >
             <div
+              aria-label="menuwrapper"
               class="MenuWrapper"
+              role="button"
             >
               <div
                 class="Button IconButton"
@@ -476,7 +486,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
             class="octo-block-margin"
           >
             <div
+              aria-label="menuwrapper"
               class="MenuWrapper"
+              role="button"
             >
               <div
                 class="Button IconButton"
@@ -534,7 +546,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot after dr
             class="octo-block-margin"
           >
             <div
+              aria-label="menuwrapper"
               class="MenuWrapper"
+              role="button"
             >
               <div
                 class="Button IconButton"
@@ -755,7 +769,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
             class="octo-block-margin"
           >
             <div
+              aria-label="menuwrapper"
               class="MenuWrapper"
+              role="button"
             >
               <div
                 class="Button IconButton"
@@ -826,7 +842,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
             class="octo-block-margin"
           >
             <div
+              aria-label="menuwrapper"
               class="MenuWrapper"
+              role="button"
             >
               <div
                 class="Button IconButton"
@@ -888,7 +906,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
               class="octo-block-margin"
             >
               <div
+                aria-label="menuwrapper"
                 class="MenuWrapper"
+                role="button"
               >
                 <div
                   class="Button IconButton"
@@ -941,7 +961,9 @@ exports[`components/cardDetail/cardDetailContents should match snapshot with con
               class="octo-block-margin"
             >
               <div
+                aria-label="menuwrapper"
                 class="MenuWrapper"
+                role="button"
               >
                 <div
                   class="Button IconButton"

webapp/src/components/cardDetail/__snapshots__/cardDetailProperties.test.tsx.snap

@@ -9,7 +9,9 @@ exports[`components/cardDetail/CardDetailProperties should match snapshot 1`] =
       class="octo-propertyrow"
     >
       <div
+        aria-label="menuwrapper"
         class="MenuWrapper"
+        role="button"
       >
         <div
           class="octo-propertyname"

webapp/src/components/globalHeader/__snapshots__/globalHeader.test.tsx.snap

@@ -22,7 +22,9 @@ exports[`components/sidebar/GlobalHeader header menu should match snapshot 1`] =
       class="GlobalHeaderSettingsMenu"
     >
       <div
+        aria-label="menuwrapper"
         class="MenuWrapper"
+        role="button"
       >
         <div
           class="GlobalHeaderComponent__button menu-entry"

webapp/src/components/globalHeader/__snapshots__/globalHeaderSettingsMenu.test.tsx.snap

@@ -6,7 +6,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu languages menu open should
     class="GlobalHeaderSettingsMenu"
   >
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="GlobalHeaderComponent__button menu-entry"
@@ -366,7 +368,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu closed should
     class="GlobalHeaderSettingsMenu"
   >
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="GlobalHeaderComponent__button menu-entry"
@@ -386,7 +390,9 @@ exports[`components/sidebar/GlobalHeaderSettingsMenu settings menu open should m
     class="GlobalHeaderSettingsMenu"
   >
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="GlobalHeaderComponent__button menu-entry"

webapp/src/components/sidebar/__snapshots__/sidebarSettingsMenu.test.tsx.snap

@@ -6,7 +6,9 @@ exports[`components/sidebar/SidebarSettingsMenu languages menu open should match
     class="SidebarSettingsMenu"
   >
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="menu-entry"
@@ -386,7 +388,9 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu closed should matc
     class="SidebarSettingsMenu"
   >
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="menu-entry"
@@ -404,7 +408,9 @@ exports[`components/sidebar/SidebarSettingsMenu settings menu open should match
     class="SidebarSettingsMenu"
   >
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="menu-entry"
@@ -555,7 +561,9 @@ exports[`components/sidebar/SidebarSettingsMenu theme menu open should match sna
     class="SidebarSettingsMenu"
   >
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="menu-entry"

webapp/src/components/table/__snapshots__/table.test.tsx.snap

@@ -17,7 +17,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -39,7 +41,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -73,7 +77,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -107,7 +113,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -413,7 +421,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -435,7 +445,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -469,7 +481,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -503,7 +517,9 @@ exports[`components/table/Table extended should match snapshot with CreatedBy 2`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -809,7 +825,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -831,7 +849,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -865,7 +885,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -899,7 +921,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedAt 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1205,7 +1229,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1227,7 +1253,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1261,7 +1289,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1295,7 +1325,9 @@ exports[`components/table/Table extended should match snapshot with UpdatedBy 1`
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1601,7 +1633,9 @@ exports[`components/table/Table should match snapshot 1`] = `
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1623,7 +1657,9 @@ exports[`components/table/Table should match snapshot 1`] = `
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1657,7 +1693,9 @@ exports[`components/table/Table should match snapshot 1`] = `
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1855,7 +1893,9 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1877,7 +1917,9 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1911,7 +1953,9 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper"
+            role="button"
           >
             <span
               class="Label empty "
@@ -1986,7 +2030,9 @@ exports[`components/table/Table should match snapshot with GroupBy 1`] = `
               </span>
             </button>
             <div
+              aria-label="menuwrapper"
               class="MenuWrapper"
+              role="button"
             >
               <div
                 class="Button IconButton"
@@ -2081,7 +2127,9 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper disabled"
+            role="button"
           >
             <span
               class="Label empty "
@@ -2099,7 +2147,9 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper disabled"
+            role="button"
           >
             <span
               class="Label empty "
@@ -2129,7 +2179,9 @@ exports[`components/table/Table should match snapshot, read-only 1`] = `
           style="overflow: unset; width: 100px; opacity: 1;"
         >
           <div
+            aria-label="menuwrapper"
             class="MenuWrapper disabled"
+            role="button"
           >
             <span
               class="Label empty "

webapp/src/components/table/__snapshots__/tableGroupHeaderRow.test.tsx.snap

@@ -96,7 +96,9 @@ exports[`should match snapshot with Group 1`] = `
       </span>
     </button>
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="Button IconButton"
@@ -165,7 +167,9 @@ exports[`should match snapshot, add new 1`] = `
       </span>
     </button>
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="Button IconButton"
@@ -234,7 +238,9 @@ exports[`should match snapshot, edit title 1`] = `
       </span>
     </button>
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="Button IconButton"
@@ -303,7 +309,9 @@ exports[`should match snapshot, hide group 1`] = `
       </span>
     </button>
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="Button IconButton"
@@ -368,7 +376,9 @@ exports[`should match snapshot, no groups 1`] = `
       </span>
     </button>
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <div
         class="Button IconButton"

webapp/src/components/table/__snapshots__/tableHeader.test.tsx.snap

@@ -8,7 +8,9 @@ exports[`components/table/TableHeaderMenu should match snapshot, title column 1`
     style="overflow: unset; width: 100px; opacity: 1;"
   >
     <div
+      aria-label="menuwrapper"
       class="MenuWrapper"
+      role="button"
     >
       <span
         class="Label empty "

webapp/src/widgets/menuWrapper.tsx

@@ -82,6 +82,8 @@ const MenuWrapper = React.memo((props: Props) => {
 
     return (
         <div
+            role='button'
+            aria-label='menuwrapper'
             className={className}
             onClick={toggle}
             ref={node}