Merge branch 'vs/migrate-dasboard-resize-to-feature-test' into 'master'

Migrate dashboard_resize_browser_spec to feature test

See merge request gitlab-org/gitlab!67868

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

@@ -404,21 +404,16 @@ export default {
            -->
           <gl-dropdown
             v-gl-tooltip
+            icon="ellipsis_v"
+            :text="__('More actions')"
+            :text-sr-only="true"
             toggle-class="gl-px-3!"
             no-caret
             data-qa-selector="prometheus_widgets_dropdown"
             right
             :title="__('More actions')"
           >
-            <template #button-content>
-              <gl-icon class="gl-mr-0!" name="ellipsis_v" />
-            </template>
-            <gl-dropdown-item
-              v-if="expandBtnAvailable"
-              ref="expandBtn"
-              :href="clipboardText"
-              @click.prevent="onExpand"
-            >
+            <gl-dropdown-item v-if="expandBtnAvailable" ref="expandBtn" @click.prevent="onExpand">
               {{ s__('Metrics|Expand panel') }}
             </gl-dropdown-item>
             <gl-dropdown-item

spec/features/clusters/cluster_health_dashboard_spec.rb

@@ -63,21 +63,33 @@ RSpec.describe 'Cluster Health board', :js, :kubeclient, :use_clean_rails_memory
     context 'connected, prometheus returns data' do
       before do
         stub_connected
-      end
 
-      it 'renders charts' do
         visit cluster_path
 
         click_link 'Health'
 
         wait_for_requests
+      end
 
+      it 'renders charts' do
         expect(page).to have_css('.prometheus-graphs')
         expect(page).to have_css('.prometheus-graph')
         expect(page).to have_css('.prometheus-graph-title')
         expect(page).to have_css('[_echarts_instance_]')
+        expect(page).to have_css('.prometheus-graph', count: 2)
         expect(page).to have_content('Avg')
       end
+
+      it 'focuses the single panel on toggle' do
+        click_button('More actions')
+        click_button('Expand panel')
+
+        expect(page).to have_css('.prometheus-graph', count: 1)
+
+        click_button('Collapse panel')
+
+        expect(page).to have_css('.prometheus-graph', count: 2)
+      end
     end
 
     def stub_empty_response

spec/javascripts/monitoring/components/dashboard_resize_browser_spec.js

-/**
- * This file should only contain browser specific specs.
- * If you need to add or update a spec, please see spec/frontend/monitoring/components/*.js
- * https://gitlab.com/gitlab-org/gitlab/-/issues/194244#note_343427737
- * https://gitlab.com/groups/gitlab-org/-/epics/895#what-if-theres-a-karma-spec-which-is-simply-unmovable-to-jest-ie-it-is-dependent-on-a-running-browser-environment
- */
-
-import { createLocalVue } from '@vue/test-utils';
-import MockAdapter from 'axios-mock-adapter';
-import Vue from 'vue';
-import axios from '~/lib/utils/axios_utils';
-import Dashboard from '~/monitoring/components/dashboard.vue';
-import { createStore } from '~/monitoring/stores';
-import { metricsDashboardPayload, dashboardProps } from '../fixture_data';
-import { mockApiEndpoint } from '../mock_data';
-import { setupStoreWithData } from '../store_utils';
-
-const localVue = createLocalVue();
-
-describe('Dashboard', () => {
-  let DashboardComponent;
-  let mock;
-  let store;
-  let component;
-  let wrapper;
-
-  beforeEach(() => {
-    setFixtures(`
-      <div class="prometheus-graphs"></div>
-      <div class="layout-page"></div>
-    `);
-
-    store = createStore();
-    mock = new MockAdapter(axios);
-    DashboardComponent = localVue.extend(Dashboard);
-  });
-
-  afterEach(() => {
-    if (component) {
-      component.$destroy();
-    }
-    if (wrapper) {
-      wrapper.destroy();
-    }
-    mock.restore();
-  });
-
-  describe('responds to window resizes', () => {
-    let promPanel;
-    let promGroup;
-    let panelToggle;
-    let chart;
-    beforeEach(() => {
-      mock.onGet(mockApiEndpoint).reply(200, metricsDashboardPayload);
-
-      component = new DashboardComponent({
-        el: document.querySelector('.prometheus-graphs'),
-        propsData: {
-          ...dashboardProps,
-          hasMetrics: true,
-          showPanels: true,
-        },
-        store,
-        provide: { hasManagedPrometheus: false },
-      });
-
-      setupStoreWithData(component.$store);
-
-      return Vue.nextTick().then(() => {
-        [promPanel] = component.$el.querySelectorAll('.prometheus-panel');
-        promGroup = promPanel.querySelector('.prometheus-graph-group');
-        panelToggle = promPanel.querySelector('.js-graph-group-toggle');
-        chart = promGroup.querySelector('.position-relative svg');
-      });
-    });
-
-    it('setting chart size to zero when panel group is hidden', () => {
-      expect(promGroup.style.display).toBe('');
-      expect(chart.clientWidth).toBeGreaterThan(0);
-
-      panelToggle.click();
-      return Vue.nextTick().then(() => {
-        expect(promGroup.style.display).toBe('none');
-        expect(chart.clientWidth).toBe(0);
-        promPanel.style.width = '500px';
-      });
-    });
-
-    it('expanding chart panel group after resize displays chart', () => {
-      panelToggle.click();
-
-      expect(chart.clientWidth).toBeGreaterThan(0);
-    });
-  });
-});

spec/javascripts/monitoring/fixture_data.js

-export * from '../../frontend/monitoring/fixture_data';

spec/javascripts/monitoring/mock_data.js

-// No new code should be added to this file. Instead, modify the
-// file this one re-exports from. For more detail about why, see:
-// https://gitlab.com/gitlab-org/gitlab-foss/merge_requests/31349
-
-export * from '../../frontend/monitoring/mock_data';

spec/javascripts/monitoring/store_utils.js

-export * from '../../frontend/monitoring/store_utils';