Refactor components tests

Change the expectations to test for
visibility instead of the internal props
this also removes some non needed code

app/assets/javascripts/monitoring/components/dashboard_panel.vue

@@ -266,9 +266,6 @@ export default {
         this.$delete(this.allAlerts, alertPath);
       }
     },
-    openActionsDropdown() {
-      this.$refs.actionsDropdown.show();
-    },
   },
   panelTypes,
 };
@@ -305,20 +302,14 @@ export default {
         ref="contextualMenu"
         data-qa-selector="prometheus_graph_widgets"
       >
-        <div
-          data-testid="actions-dropdown-container"
-          class="d-flex align-items-center"
-          @keyup.enter="openActionsDropdown"
-        >
+        <div class="d-flex align-items-center">
           <gl-dropdown
-            ref="actionsDropdown"
             v-gl-tooltip
             toggle-class="btn btn-transparent border-0"
             data-qa-selector="prometheus_widgets_dropdown"
             right
             no-caret
             :title="__('More actions')"
-            tabindex="0"
           >
             <template slot="button-content">
               <gl-icon name="ellipsis_v" class="text-secondary" />

changelogs/unreleased/jivanvl-make-chart-panels-focusable-keyboard.yml

 ---
-title: Make chart panels focusable via keyboard
+title: Focus and toggle metrics dashboard panels via keyboard
 merge_request: 28603
 author:
 type: added

spec/frontend/monitoring/components/dashboard_panel_spec.js

@@ -56,9 +56,6 @@ describe('Dashboard Panel', () => {
   const findTimeChart = () => wrapper.find({ ref: 'timeSeriesChart' });
   const findTitle = () => wrapper.find({ ref: 'graphTitle' });
   const findContextualMenu = () => wrapper.find({ ref: 'contextualMenu' });
-  const findActionsDropdown = () => wrapper.find({ ref: 'actionsDropdown' });
-  const findActionsDropdownContainer = () =>
-    wrapper.find('[data-testid="actions-dropdown-container"]');
 
   const createWrapper = (props, options) => {
     wrapper = shallowMount(DashboardPanel, {
@@ -201,21 +198,6 @@ describe('Dashboard Panel', () => {
       });
     });
 
-    it('should set a tabindex for the actions dropdown', () => {
-      const actionsDropdown = findActionsDropdown();
-
-      expect(actionsDropdown.contains('[tabindex]')).toBe(true);
-    });
-
-    it('should open the actions dropdown when enter is pressed', () => {
-      const openDropdownSpy = jest.spyOn(wrapper.vm, 'openActionsDropdown').mockImplementation();
-      const container = findActionsDropdownContainer();
-
-      container.trigger('keyup.enter');
-
-      expect(openDropdownSpy).toHaveBeenCalled();
-    });
-
     it('includes a default group id', () => {
       expect(wrapper.vm.groupId).toBe('dashboard-panel');
     });

spec/frontend/monitoring/components/graph_group_spec.js

@@ -81,13 +81,13 @@ describe('Graph group component', () => {
         expect(wrapper.vm.caretIcon).toBe('angle-down');
       });
 
-      it('should call the collapse function when the button listen to a keyup enter trigger', () => {
-        const collapseSpy = jest.spyOn(wrapper.vm, 'collapse');
+      it('should call collapse the graph group content when enter is pressed on the caret icon', () => {
+        const graphGroupContent = findContent();
         const button = findToggleButton();
 
         button.trigger('keyup.enter');
 
-        expect(collapseSpy).toHaveBeenCalled();
+        expect(graphGroupContent.isVisible()).toBe(false);
       });
     });