FIX Hoverbar ID made uniq

client/src/components/ElementEditor/HoverBar.js

@@ -25,23 +25,23 @@ function StatelessHoverBar({
     onClick: onToggle,
     'aria-label': label,
     title: label,
-    id: `AddBlockHoverBarArea_${elementId}`
+    id: `AddBlockHoverBarArea_${areaId}_${elementId}`
   };
 
   return (
-    <div className={classNames('')} id={`AddBlockHoverBar_${elementId}`}>
+    <div className={classNames('')} id={`AddBlockHoverBar_${areaId}_${elementId}`}>
       <button {...btnProps}>
         <span className={classNames('-area-inner')}>
           <span className={lineClasses} />
         </span>
       </button>
       <AddElementPopoverComponent
         placement="bottom"
-        target={`AddBlockHoverBarArea_${elementId}`}
+        target={`AddBlockHoverBarArea_${areaId}_${elementId}`}
         isOpen={popoverOpen}
         elementTypes={elementTypes}
         toggle={onToggle}
-        container={`#AddBlockHoverBar_${elementId}`}
+        container={`#AddBlockHoverBar_${areaId}_${elementId}`}
         areaId={areaId}
         insertAfterElement={elementId}
       />

client/src/components/ElementEditor/tests/HoverBar-test.js

@@ -0,0 +1,46 @@
+/* eslint-disable import/no-extraneous-dependencies */
+/* global jest, describe, it, expect */
+
+import React from 'react';
+import { Component as HoverBar } from '../HoverBar';
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+describe('HoverBar', () => {
+  const elementTypes = [
+    {
+      name: 'Main',
+      title: 'Content',
+      icon: '',
+      tabs: ['', '']
+    }
+  ];
+  const AddElementPopoverComponent = () => <div />;
+  const hoverBarName = 'AddBlockHoverBar';
+  const hoverBarAreaName = 'AddBlockHoverBarArea';
+
+  describe('render()', () => {
+    it.each([
+      { areaId: 1, elementId: 0 },
+      { areaId: 2, elementId: 3 },
+    ])('renders top HoverBarComponent', ({ areaId, elementId }) => {
+      const wrapper = mount(
+        <HoverBar
+          key={elementId}
+          areaId={areaId}
+          elementId={elementId}
+          elementTypes={elementTypes}
+          AddElementPopoverComponent={AddElementPopoverComponent}
+        />
+      );
+
+      expect(wrapper.name()).toBe('HoverBar');
+      expect(wrapper.find('div.element-editor__hover-bar').prop('id')).toBe(`${hoverBarName}_${areaId}_${elementId}`);
+      expect(wrapper.find('button').prop('id')).toBe(`${hoverBarAreaName}_${areaId}_${elementId}`);
+      expect(wrapper.find('AddElementPopoverComponent').prop('target')).toBe(`${hoverBarAreaName}_${areaId}_${elementId}`);
+      expect(wrapper.find('AddElementPopoverComponent').prop('container')).toBe(`#${hoverBarName}_${areaId}_${elementId}`);
+    });
+  });
+});

tests/Behat/Context/FeatureContext.php

@@ -286,6 +286,15 @@ public function iClickOnTheReport($reportName)
         $this->getSession()->wait(5000, 'window.jQuery(".all-reports-gridfield").length === 0');
     }
 
+    /**
+     * @When I click on the add block button in hover bar area for block :position
+     */
+    public function iClickOnHoverBarButton($position)
+    {
+        $hoverBarButton = $this->getSpecificHoverBar($position);
+        $hoverBarButton->click();
+    }
+
     /**
      * Returns the blocks from the element editor
      *
@@ -414,4 +423,22 @@ protected function findFieldInBlock($block, $name)
 
         return $field;
     }
+
+    /**
+     * Returns the selected hover bar element
+     *
+     * @param int $position
+     * @return NodeElement
+     */
+    protected function getSpecificHoverBar($position)
+    {
+        $hoverBarAreas = $this->getSession()
+            ->getPage()
+            ->findAll('css', '.element-editor__hover-bar-area');
+
+        /** @var NodeElement $hoverBarAreas */
+        if ($hoverBarAreas[$position] !== false) {
+            return $hoverBarAreas[$position];
+        }
+    }
 }

tests/Behat/features/element-editor.feature

@@ -65,7 +65,7 @@ Feature: View types of elements in an area on a page
     When I click on the caret button for block 1
       Then I should see the edit form for block 1
       And the "Content" field should contain "<p>New sample content</p>"
-
+      
   Scenario: I can operate blocks with a mouse
     Given a "virtual page" "Virtual Page"
 
@@ -90,7 +90,7 @@ Feature: View types of elements in an area on a page
     When I go to "/admin/pages"
     And I follow "Blocks Page"
     Then I should not see "Untitled Content Block"
-    And I click on the "#AddBlockHoverBarArea_2" element
+    When I click on the add block button in hover bar area for block 1
     And I wait for 1 seconds
     And I click on the ".popover .font-icon-block-content" element
     And I wait for 5 seconds