Remove .querySelector from dashboard specs

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

@@ -370,7 +370,9 @@ export default {
           >
             <gl-dropdown
               id="monitor-environments-dropdown"
-              class="mb-0 d-flex js-environments-dropdown"
+              ref="monitorEnvironmentsDropdown"
+              data-qa-selector="environments_dropdown"
+              class="mb-0 d-flex"
               toggle-class="dropdown-menu-toggle"
               :text="currentEnvironmentName"
               :disabled="environments.length === 0"

spec/features/projects/environments/environment_metrics_spec.rb

@@ -30,9 +30,9 @@ describe 'Environment > Metrics' do
       click_link('See metrics')
 
       expect(page).to have_metrics_path(environment)
-      expect(page).to have_css('div.js-environments-dropdown')
+      expect(page).to have_css('[data-qa-selector="environments_dropdown"]')
 
-      within('div.js-environments-dropdown') do
+      within('[data-qa-selector="environments_dropdown"]') do
         # Click on the dropdown
         click_on(environment.name)
 

spec/frontend/monitoring/components/dashboard_spec.js

@@ -52,6 +52,9 @@ describe('Dashboard', () => {
     });
   };
 
+  const findEnvironmentsDropdown = () => wrapper.find({ ref: 'monitorEnvironmentsDropdown' });
+  const findAllEnvironmentsDropdownItems = () => findEnvironmentsDropdown().findAll(GlDropdownItem);
+
   beforeEach(() => {
     store = createStore();
     mock = new MockAdapter(axios);
@@ -71,7 +74,7 @@ describe('Dashboard', () => {
     });
 
     it('shows the environment selector', () => {
-      expect(wrapper.vm.$el.querySelector('.js-environments-dropdown')).toBeTruthy();
+      expect(findEnvironmentsDropdown().exists()).toBe(true);
     });
   });
 
@@ -83,7 +86,7 @@ describe('Dashboard', () => {
     });
 
     it('shows the environment selector dropdown', () => {
-      expect(wrapper.vm.$el.querySelector('.js-environments-dropdown')).toBeTruthy();
+      expect(findEnvironmentsDropdown().exists()).toBe(true);
     });
   });
 
@@ -113,7 +116,7 @@ describe('Dashboard', () => {
         .$nextTick()
         .then(() => {
           expect(wrapper.vm.showEmptyState).toEqual(false);
-          expect(wrapper.vm.$el.querySelector('.prometheus-panel')).toEqual(null);
+          expect(wrapper.findAll('.prometheus-panel')).toHaveLength(0);
 
           done();
         })
@@ -152,9 +155,7 @@ describe('Dashboard', () => {
       wrapper.vm
         .$nextTick()
         .then(() => {
-          const environmentDropdownItems = wrapper
-            .find('.js-environments-dropdown')
-            .findAll(GlDropdownItem);
+          const environmentDropdownItems = findAllEnvironmentsDropdownItems();
 
           expect(wrapper.vm.environments.length).toEqual(environmentData.length);
           expect(environmentDropdownItems.length).toEqual(wrapper.vm.environments.length);
@@ -176,10 +177,7 @@ describe('Dashboard', () => {
       wrapper.vm
         .$nextTick()
         .then(() => {
-          const environmentDropdownItems = wrapper
-            .find('.js-environments-dropdown')
-            .findAll(GlDropdownItem);
-          const activeItem = environmentDropdownItems.wrappers.filter(itemWrapper =>
+          const activeItem = findAllEnvironmentsDropdownItems().wrappers.filter(itemWrapper =>
             itemWrapper.find('.active').exists(),
           );
 
@@ -205,11 +203,7 @@ describe('Dashboard', () => {
     wrapper.vm
       .$nextTick()
       .then(() => {
-        const environmentDropdownItems = wrapper
-          .find('.js-environments-dropdown')
-          .findAll(GlDropdownItem);
-
-        expect(environmentDropdownItems.length).toEqual(0);
+        expect(findAllEnvironmentsDropdownItems()).toHaveLength(0);
         done();
       })
       .catch(done.fail);