test: added Heading visual tests (#785)

Author: makhnatkin

src/bundle/toolbar/ToolbarButtonWithPopupMenu.tsx

@@ -41,6 +41,7 @@ export type ToolbarButtonWithPopupMenuProps = Omit<
             menuItems: MenuItem[];
             /** @default 'classic' */
             _selectionType?: 'classic' | 'light';
+            qaMenu?: string;
         },
     'editor'
 >;
@@ -57,6 +58,7 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
     menuItems,
     _selectionType,
     qa,
+    qaMenu,
     ...props
 }) => {
     const [anchorElement, setAnchorElement] = useElementState();
@@ -126,7 +128,7 @@ export const ToolbarButtonWithPopupMenu: React.FC<ToolbarButtonWithPopupMenuProp
                     if (!open) hide();
                 }}
             >
-                <Menu size="l">
+                <Menu size="l" qa={qaMenu} data-toolbar-menu-for={textTitle}>
                     {Object.entries(groups).map(([label, items], key) => {
                         return (
                             <Menu.Group label={label} key={key} className={b('menu-group')}>

src/bundle/toolbar/ToolbarSelect.tsx

@@ -29,12 +29,14 @@ export const ToolbarSelect: React.FC<ToolbarSelectProps> = ({
     focus,
     onClick,
     items,
+    qa,
 }) => {
     const activeItem = items.find((item) => item.isActive(editor));
 
     return (
         <>
             <Select
+                qa={qa}
                 size="m"
                 view="clear"
                 className={className}

src/bundle/toolbar/custom/ToolbarColors.tsx

@@ -77,6 +77,7 @@ export const ToolbarColors: React.FC<ToolbarColorsProps> = (props) => {
     return (
         <ToolbarButtonWithPopupMenu
             {...props}
+            qaMenu="g-md-toolbar-menu"
             title={i18n('colorify')}
             menuItems={items}
             icon={textColorIcon}

src/bundle/toolbar/wysiwyg/WToolbarTextSelect.tsx

@@ -13,6 +13,7 @@ export const WToolbarTextSelect: React.FC<WToolbarTextSelectProps> = ({
 }) => {
     return (
         <ToolbarSelect
+            qa="g-md-toolbar-text-select"
             items={wHeadingListConfig.data}
             focus={focus}
             editor={editor}

src/toolbar/ToolbarGroup.tsx

@@ -57,6 +57,7 @@ export function ToolbarButtonGroup<E>({
                     return (
                         <ToolbarListButton
                             {...item}
+                            qaMenu="g-md-toolbar-menu"
                             key={item.id}
                             editor={editor}
                             focus={focus}

src/toolbar/ToolbarListButton.tsx

@@ -72,6 +72,7 @@ export function ToolbarListButton<E>({
         buttonContent.push(<Fragment key={2}>{''}</Fragment>);
         buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);
     }
+    const titleText: string = isFunction(title) ? title() : title;
 
     return (
         <>
@@ -90,7 +91,7 @@ export function ToolbarListButton<E>({
                 {buttonContent}
             </ToolbarButtonView>
             <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>
-                <Menu size="l" className={b('menu')} qa={qaMenu}>
+                <Menu size="l" className={b('menu')} qa={qaMenu} data-toolbar-menu-for={titleText}>
                     {data
                         .map((data) => {
                             const {

tests/playwright/core/actions.ts

@@ -7,8 +7,11 @@ export class PlaywrightActions {
         this.page = page;
     }
 
-    async pressFocused(pressFocused: string) {
-        await this.page.locator(':focus').press(pressFocused);
+    async pressFocused(pressFocused: string, times = 1) {
+        while (times > 0) {
+            await this.page.locator(':focus').press(pressFocused);
+            times--;
+        }
     }
 
     async fillFocused(text: string) {