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

Use absolute paths for SCSS imports

See merge request gitlab-org/gitlab-ce!30161

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';

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 => {
-        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', done => {
+      findDeleteBtn().click();
+      spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
 
-      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 => {
-        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', done => {
+      findDeleteBtn().click();
+      spyOn(vm, 'deleteItem').and.returnValue(Promise.resolve());
 
-      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;