Merge branch 'leipert-absolute-scss-paths-ee' into 'master'

EE-Port of https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/30161

See merge request gitlab-org/gitlab-ee!14454

app/assets/stylesheets/application.scss

@@ -11,10 +11,10 @@
 // like a table or typography then make changes in the framework/ directory.
 // If you need to add unique style that should affect only one page - use pages/
 // directory.
-@import "../../../node_modules/at.js/dist/css/jquery.atwho";
-@import "../../../node_modules/pikaday/scss/pikaday";
-@import "../../../node_modules/dropzone/dist/basic";
-@import "../../../node_modules/select2/select2";
+@import "at.js/dist/css/jquery.atwho";
+@import "pikaday/scss/pikaday";
+@import "dropzone/dist/basic";
+@import "select2/select2";
 
 // GitLab UI framework
 @import "framework";

app/assets/stylesheets/csslab.scss

-@import "../../../node_modules/@gitlab/csslab/dist/css/csslab-slim";
+@import "@gitlab/csslab/dist/css/csslab-slim";

app/assets/stylesheets/errors.scss

@@ -2,12 +2,12 @@
  * This is a minimal stylesheet, meant to be used for error pages.
  */
 @import 'framework/variables';
-@import '../../../node_modules/bootstrap/scss/functions';
-@import '../../../node_modules/bootstrap/scss/variables';
-@import '../../../node_modules/bootstrap/scss/mixins';
-@import '../../../node_modules/bootstrap/scss/reboot';
-@import '../../../node_modules/bootstrap/scss/buttons';
-@import '../../../node_modules/bootstrap/scss/forms';
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
+@import 'bootstrap/scss/mixins';
+@import 'bootstrap/scss/reboot';
+@import 'bootstrap/scss/buttons';
+@import 'bootstrap/scss/forms';
 
 $body-color: #666;
 $header-color: #456;

app/assets/stylesheets/framework.scss

@@ -2,7 +2,7 @@
 @import 'framework/variables_overrides';
 @import 'framework/mixins';
 
-@import '../../../node_modules/@gitlab/ui/scss/gitlab_ui';
+@import '@gitlab/ui/scss/gitlab_ui';
 
 @import 'bootstrap_migration';
 @import 'framework/layout';

ee/app/assets/javascripts/security_dashboard/components/filter.vue

@@ -48,8 +48,8 @@ export default {
     isSelected(option) {
       return this.selection.has(option.id);
     },
-    closeDropdown(event) {
-      this.$root.$emit('clicked::link', event);
+    closeDropdown() {
+      this.$refs.dropdown.$children[0].hide(true);
     },
   },
 };
@@ -58,7 +58,7 @@ export default {
 <template>
   <div class="dashboard-filter">
     <strong class="js-name">{{ filter.name }}</strong>
-    <gl-dropdown class="d-block mt-1" menu-class="dropdown-extended-height">
+    <gl-dropdown ref="dropdown" class="d-block mt-1" menu-class="dropdown-extended-height">
       <template slot="button-content">
         <span class="text-truncate">
           {{ selectedOptionText.firstOption }}

ee/spec/frontend/custom_metrics/components/custom_metrics_form_fields_spec.js

@@ -12,6 +12,7 @@ describe('custom metrics form fields component', () => {
   const validQueryResponse = { data: { success: true, query: { valid: true, error: '' } } };
   const csrfToken = 'mockToken';
   const formOperation = 'post';
+  const debouncedValidateQueryMock = jest.fn();
   const makeFormData = (data = {}) => ({
     formData: {
       title: '',
@@ -32,6 +33,9 @@ describe('custom metrics form fields component', () => {
       },
       csrfToken,
       sync: false,
+      methods: {
+        debouncedValidateQuery: debouncedValidateQueryMock,
+      },
     });
   };
 
@@ -120,18 +124,14 @@ describe('custom metrics form fields component', () => {
       jest.runAllTimers();
     });
 
-    it('checks validity on user input', done => {
+    it('checks validity on user input', () => {
       const query = 'changedQuery';
       mountComponent();
-      const spy = jest.spyOn(component.vm, 'debouncedValidateQuery');
-      const queryInput = getNamedInput(name);
-      queryInput.value = query;
-      queryInput.dispatchEvent(new Event('input'));
+      const queryInput = component.find(`input[name="${name}"]`);
+      queryInput.setValue(query);
+      queryInput.trigger('input');
 
-      component.vm.$nextTick(() => {
-        expect(spy).toHaveBeenCalledWith(query);
-        done();
-      });
+      expect(debouncedValidateQueryMock).toHaveBeenCalledWith(query);
     });
 
     describe('when query is invalid', () => {

ee/spec/javascripts/batch_comments/components/review_bar_spec.js

@@ -42,7 +42,9 @@ describe('Batch comments review bar component', () => {
       vm.$el.querySelector('.btn.btn-align-content').click();
 
       vm.$nextTick(() => {
-        vm.$el.querySelector('.modal .btn-danger').click();
+        const modal = document.querySelector('#discard-draft-review');
+
+        modal.querySelector('.btn-danger').click();
 
         expect(vm.$store.dispatch).toHaveBeenCalled();
 

ee/spec/javascripts/license_management/components/license_management_row_spec.js

@@ -17,6 +17,9 @@ describe('LicenseManagementRow', () => {
   let store;
   let actions;
 
+  const findNthDropdown = num => [...vm.$el.querySelectorAll('.dropdown-item')][num];
+  const findNthDropdownIcon = num => findNthDropdown(num).querySelector('svg');
+
   beforeEach(() => {
     actions = {
       setLicenseInModal: jasmine.createSpy('setLicenseInModal'),
@@ -60,13 +63,13 @@ describe('LicenseManagementRow', () => {
 
     describe('template', () => {
       it('first dropdown element should have a visible icon', () => {
-        const firstOption = vm.$el.querySelector('.dropdown-item:nth-child(1) svg');
+        const firstOption = findNthDropdownIcon(0);
 
         expect(firstOption.classList).toContain(visibleClass);
       });
 
       it('second dropdown element should have no visible icon', () => {
-        const secondOption = vm.$el.querySelector('.dropdown-item:nth-child(2) svg');
+        const secondOption = findNthDropdownIcon(1);
 
         expect(secondOption.classList).toContain(invisibleClass);
       });
@@ -95,13 +98,13 @@ describe('LicenseManagementRow', () => {
 
     describe('template', () => {
       it('first dropdown element should have no visible icon', () => {
-        const firstOption = vm.$el.querySelector('.dropdown-item:nth-child(1) svg');
+        const firstOption = findNthDropdownIcon(0);
 
         expect(firstOption.classList).toContain(invisibleClass);
       });
 
       it('second dropdown element should have a visible icon', () => {
-        const secondOption = vm.$el.querySelector('.dropdown-item:nth-child(2) svg');
+        const secondOption = findNthDropdownIcon(1);
 
         expect(secondOption.classList).toContain(visibleClass);
       });
@@ -117,14 +120,14 @@ describe('LicenseManagementRow', () => {
     });
 
     it('triggering approveLicense by clicking the first dropdown option', () => {
-      const linkEl = vm.$el.querySelector('.dropdown-item:nth-child(1)');
+      const linkEl = findNthDropdown(0);
       linkEl.click();
 
       expect(actions.approveLicense).toHaveBeenCalled();
     });
 
     it('triggering approveLicense blacklistLicense by clicking the second dropdown option', () => {
-      const linkEl = vm.$el.querySelector('.dropdown-item:nth-child(2)');
+      const linkEl = findNthDropdown(1);
       linkEl.click();
 
       expect(actions.blacklistLicense).toHaveBeenCalled();
@@ -166,12 +169,12 @@ describe('LicenseManagementRow', () => {
 
       expect(dropdownEl).not.toBeNull();
 
-      const firstOption = dropdownEl.querySelector('.dropdown-item:nth-child(1)');
+      const firstOption = findNthDropdown(0);
 
       expect(firstOption).not.toBeNull();
       expect(firstOption.innerText.trim()).toBe('Approved');
 
-      const secondOption = dropdownEl.querySelector('.dropdown-item:nth-child(2)');
+      const secondOption = findNthDropdown(1);
 
       expect(secondOption).not.toBeNull();
       expect(secondOption.innerText.trim()).toBe('Blacklisted');

ee/spec/javascripts/monitoring/alert_widget_spec.js

@@ -2,6 +2,7 @@ import Vue from 'vue';
 import AlertWidget from 'ee/monitoring/components/alert_widget.vue';
 import AlertsService from 'ee/monitoring/services/alerts_service';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import waitForPromises from 'spec/helpers/wait_for_promises';
 
 describe('AlertWidget', () => {
   let AlertWidgetComponent;
@@ -184,10 +185,13 @@ describe('AlertWidget', () => {
     vm.$refs.widgetForm.$emit('create', alertParams);
 
     expect(AlertsService.prototype.createAlert).toHaveBeenCalledWith(alertParams);
-    Vue.nextTick(() => {
+
+    waitForPromises()
+      .then(() => {
         expect(vm.isLoading).toEqual(false);
         done();
-    });
+      })
+      .catch(done.fail);
   });
 
   it('updates an alert with an appropriate handler', done => {
@@ -195,7 +199,9 @@ describe('AlertWidget', () => {
     const newAlertParams = { operator: '=', threshold: 12 };
 
     spyOn(AlertsService.prototype, 'readAlert').and.returnValue(Promise.resolve(alertParams));
-    spyOn(AlertsService.prototype, 'updateAlert').and.returnValue(Promise.resolve({}));
+    spyOn(AlertsService.prototype, 'updateAlert').and.returnValue(
+      Promise.resolve({ ...alertParams, ...newAlertParams }),
+    );
 
     vm = mountComponent(AlertWidgetComponent, propsWithAlertData);
     vm.$on('setAlerts', mockSetAlerts);
@@ -207,10 +213,12 @@ describe('AlertWidget', () => {
     });
 
     expect(AlertsService.prototype.updateAlert).toHaveBeenCalledWith(alertPath, newAlertParams);
-    Vue.nextTick(() => {
+    waitForPromises()
+      .then(() => {
         expect(vm.isLoading).toEqual(false);
         done();
-    });
+      })
+      .catch(done.fail);
   });
 
   it('deletes an alert with an appropriate handler', done => {
@@ -225,10 +233,12 @@ describe('AlertWidget', () => {
     vm.$refs.widgetForm.$emit('delete', { alert: alertPath });
 
     expect(AlertsService.prototype.deleteAlert).toHaveBeenCalledWith(alertPath);
-    Vue.nextTick(() => {
+    waitForPromises()
+      .then(() => {
         expect(vm.isLoading).toEqual(false);
         expect(vm.alertSummary).toBeFalsy();
         done();
-    });
+      })
+      .catch(done.fail);
   });
 });

package.json

@@ -38,7 +38,7 @@
     "@babel/preset-env": "^7.4.4",
     "@gitlab/csslab": "^1.9.0",
     "@gitlab/svgs": "^1.65.0",
-    "@gitlab/ui": "^4.3.0",
+    "@gitlab/ui": "^5.1.0",
     "apollo-cache-inmemory": "^1.5.1",
     "apollo-client": "^2.5.1",
     "apollo-link": "^1.2.11",

spec/frontend/test_setup.js

@@ -3,6 +3,7 @@ import * as jqueryMatchers from 'custom-jquery-matchers';
 import $ from 'jquery';
 import Translate from '~/vue_shared/translate';
 import axios from '~/lib/utils/axios_utils';
+import { config as testUtilsConfig } from '@vue/test-utils';
 import { initializeTestTimeout } from './helpers/timeout';
 import { loadHTMLFixture, setHTMLFixture } from './helpers/fixtures';
 
@@ -60,9 +61,21 @@ Object.assign(global, {
   preloadFixtures() {},
 });
 
+Object.assign(global, {
+  MutationObserver() {
+    return {
+      disconnect() {},
+      observe() {},
+    };
+  },
+});
+
 // custom-jquery-matchers was written for an old Jest version, we need to make it compatible
 Object.entries(jqueryMatchers).forEach(([matcherName, matcherFactory]) => {
   expect.extend({
     [matcherName]: matcherFactory().compare,
   });
 });
+
+// Tech debt issue TBD
+testUtilsConfig.logModifiedComponents = false;

spec/javascripts/monitoring/dashboard_spec.js

@@ -241,7 +241,7 @@ describe('Dashboard', () => {
       Vue.nextTick()
         .then(() => {
           const dropdownItems = component.$el.querySelectorAll(
-            '.js-environments-dropdown .dropdown-item.is-active',
+            '.js-environments-dropdown .dropdown-item.active',
           );
 
           expect(dropdownItems.length).toEqual(1);

spec/javascripts/registry/components/collapsible_container_spec.js

@@ -72,21 +72,15 @@ describe('collapsible registry container', () => {
       expect(findDeleteBtn()).not.toBeNull();
     });
 
-    describe('clicked on delete', () => {
-      beforeEach(done => {
+    it('should call deleteItem when confirming deletion', done => {
       findDeleteBtn().click();
-        Vue.nextTick(done);
-      });
-
-      it('should open confirmation modal', () => {
-        expect(vm.$el.querySelector('#confirm-repo-deletion-modal')).not.toBeNull();
-      });
-
-      it('should call deleteItem when confirming deletion', () => {
       spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
-        vm.$el.querySelector('#confirm-repo-deletion-modal .btn-danger').click();
+
+      Vue.nextTick(() => {
+        document.querySelector('#confirm-repo-deletion-modal .btn-danger').click();
 
         expect(vm.deleteItem).toHaveBeenCalledWith(vm.repo);
+        done();
       });
     });
   });

spec/javascripts/registry/components/table_registry_spec.js

@@ -46,23 +46,16 @@ describe('table registry', () => {
       expect(findDeleteBtn()).toBeDefined();
     });
 
-    describe('clicked on delete', () => {
-      beforeEach(done => {
+    it('should call deleteItem and reset itemToBeDeleted when confirming deletion', done => {
       findDeleteBtn().click();
-        Vue.nextTick(done);
-      });
-
-      it('should open confirmation modal and set itemToBeDeleted properly', () => {
-        expect(vm.itemToBeDeleted).toEqual(firstImage);
-        expect(vm.$el.querySelector('#confirm-image-deletion-modal')).not.toBeNull();
-      });
-
-      it('should call deleteItem and reset itemToBeDeleted when confirming deletion', () => {
       spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
-        vm.$el.querySelector('#confirm-image-deletion-modal .btn-danger').click();
+
+      Vue.nextTick(() => {
+        document.querySelector('#confirm-image-deletion-modal .btn-danger').click();
 
         expect(vm.deleteItem).toHaveBeenCalledWith(firstImage);
         expect(vm.itemToBeDeleted).toBeNull();
+        done();
       });
     });
   });

spec/javascripts/test_bundle.js

@@ -10,12 +10,16 @@ import VueResource from 'vue-resource';
 import Translate from '~/vue_shared/translate';
 import CheckEE from '~/vue_shared/mixins/is_ee';
 import jasmineDiff from 'jasmine-diff';
+import { config as testUtilsConfig } from '@vue/test-utils';
 
 import { getDefaultAdapter } from '~/lib/utils/axios_utils';
 import { FIXTURES_PATH, TEST_HOST } from './test_constants';
 
 import customMatchers from './matchers';
 
+// Tech debt issue TBD
+testUtilsConfig.logModifiedComponents = false;
+
 const isHeadlessChrome = /\bHeadlessChrome\//.test(navigator.userAgent);
 Vue.config.devtools = !isHeadlessChrome;
 Vue.config.productionTip = false;