Merge branch 'sh-headless-chrome-support' into 'master'

Replace PhantomJS with Headless Chrome for GitLab Integration Tests

Closes #30876

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

8 files changed, 25 insertions, 22 deletions

diff --git a/app/assets/javascripts/droplab/plugins/filter.js b/app/assets/javascripts/droplab/plugins/filter.js
index d6a1aadd49c..404d707cf7a 100644
--- a/app/assets/javascripts/droplab/plugins/filter.js
+++ b/app/assets/javascripts/droplab/plugins/filter.js
@@ -79,8 +79,6 @@ const Filter = {
 
     this.hook.trigger.addEventListener('keydown.dl', this.eventWrapper.debounceKeydown);
     this.hook.trigger.addEventListener('mousedown.dl', this.eventWrapper.debounceKeydown);
-
-    this.debounceKeydown({ detail: { hook: this.hook } });
   },
 
   destroy: function destroy() {
diff --git a/app/assets/javascripts/test_utils/index.js b/app/assets/javascripts/test_utils/index.js
index 8875590f0f2..a55a338eea8 100644
--- a/app/assets/javascripts/test_utils/index.js
+++ b/app/assets/javascripts/test_utils/index.js
@@ -1,6 +1,8 @@
 import 'core-js/es6/map';
 import 'core-js/es6/set';
 import simulateDrag from './simulate_drag';
+import simulateInput from './simulate_input';
 
 // Export to global space for rspec to use
 window.simulateDrag = simulateDrag;
+window.simulateInput = simulateInput;
diff --git a/app/assets/javascripts/test_utils/simulate_input.js b/app/assets/javascripts/test_utils/simulate_input.js
new file mode 100644
index 00000000000..90c1b7cb57e
--- /dev/null
+++ b/app/assets/javascripts/test_utils/simulate_input.js
@@ -0,0 +1,23 @@
+function triggerEvents(input) {
+  input.dispatchEvent(new Event('keydown'));
+  input.dispatchEvent(new Event('keypress'));
+  input.dispatchEvent(new Event('input'));
+  input.dispatchEvent(new Event('keyup'));
+}
+
+export default function simulateInput(target, text) {
+  const input = document.querySelector(target);
+  if (!input || !input.matches('textarea, input')) {
+    return false;
+  }
+
+  if (text.length > 0) {
+    Array.prototype.forEach.call(text, (char) => {
+      input.value += char;
+      triggerEvents(input);
+    });
+  } else {
+    triggerEvents(input);
+  }
+  return true;
+}
diff --git a/app/assets/stylesheets/framework/contextual-sidebar.scss b/app/assets/stylesheets/framework/contextual-sidebar.scss
index 94a39baa4a6..320f458630a 100644
--- a/app/assets/stylesheets/framework/contextual-sidebar.scss
+++ b/app/assets/stylesheets/framework/contextual-sidebar.scss
@@ -484,10 +484,7 @@
   height: calc(100vh - #{$header-height});
 
   @media (min-width: $screen-sm-min) {
-    height: 475px; // Needed for PhantomJS
-    // scss-lint:disable DuplicateProperty
     height: calc(100vh - 180px);
-    // scss-lint:enable DuplicateProperty
   }
 }
 
diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss
index dbe5067fcf5..a7333925f80 100644
--- a/app/assets/stylesheets/framework/filters.scss
+++ b/app/assets/stylesheets/framework/filters.scss
@@ -268,12 +268,6 @@
 .filtered-search-box-input-container {
   flex: 1;
   position: relative;
-  // Fix PhantomJS not supporting `flex: 1;` properly.
-  // This is important because it can change the expected `e.target` when clicking things in tests.
-  // See https://gitlab.com/gitlab-org/gitlab-ce/blob/b54acba8b732688c59fe2f38510c469dc86ee499/spec/features/issues/filtered_search/visual_tokens_spec.rb#L61
-  // - With `width: 100%`: `e.target` = `.tokens-container`, https://i.imgur.com/jGq7wbx.png
-  // - Without `width: 100%`: `e.target` = `.filtered-search`, https://i.imgur.com/cNI2CyT.png
-  width: 100%;
   min-width: 0;
 }
 
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 278ec16bcd9..3683afa07de 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -86,10 +86,7 @@
   }
 
   @media (min-width: $screen-md-min) {
-    height: 475px; // Needed for PhantomJS
-    // scss-lint:disable DuplicateProperty
     height: calc(100vh - 160px);
-    // scss-lint:enable DuplicateProperty
     min-height: 475px;
   }
 }
diff --git a/app/assets/stylesheets/pages/notes.scss b/app/assets/stylesheets/pages/notes.scss
index 0918dc56dcc..ca363c6eac4 100644
--- a/app/assets/stylesheets/pages/notes.scss
+++ b/app/assets/stylesheets/pages/notes.scss
@@ -485,8 +485,6 @@ ul.notes {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
-  // For PhantomJS that does not support flex
-  float: right;
   margin-left: 10px;
   color: $gray-darkest;
 
@@ -497,7 +495,6 @@ ul.notes {
 }
 
 .more-actions {
-  float: right; // phantomjs fallback
   display: flex;
   align-items: flex-end;
 
diff --git a/app/assets/stylesheets/test.scss b/app/assets/stylesheets/test.scss
index 06733b7f1a9..e65b49c36f3 100644
--- a/app/assets/stylesheets/test.scss
+++ b/app/assets/stylesheets/test.scss
@@ -4,11 +4,6 @@
   -ms-transition: none !important;
   -webkit-transition: none !important;
   transition: none !important;
-  -o-transform: none !important;
-  -moz-transform: none !important;
-  -ms-transform: none !important;
-  -webkit-transform: none !important;
-  transform: none !important;
   -webkit-animation: none !important;
   -moz-animation: none !important;
   -o-animation: none !important;