Fix karma specs

app/views/ci/variables/_index.html.haml

@@ -2,7 +2,7 @@
 .row
   .col-lg-12.js-ci-variable-list-section{ data: { save_endpoint: save_endpoint } }
-    .d-none.alert.alert-danger.js-ci-variable-error-box
+    .hidden.alert.alert-danger.js-ci-variable-error-box
     %ul.ci-variable-list
       - @variables.each.each do |variable|
@@ -10,7 +10,7 @@
       = render 'ci/variables/variable_row', form_field: 'variables'
     .prepend-top-20
       %button.btn.btn-success.js-secret-variables-save-button{ type: 'button' }
-        %span.d-none.js-secret-variables-save-loading-icon
+        %span.hidden.js-secret-variables-save-loading-icon
           = icon('spinner spin')
         = _('Save variables')
       %button.btn.btn-info.btn-inverted.prepend-left-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: "#{@variables.size == 0}" } }

app/views/ci/variables/_variable_row.html.haml

@@ -22,9 +22,9 @@
       value: key,
       placeholder: s_('CiVariables|Input variable key') }
     .ci-variable-body-item
-      .form-control.js-secret-value-placeholder{ class: ('hide' unless id) }
+      .form-control.js-secret-value-placeholder{ class: ('hidden' unless id) }
         = '*' * 20
-      %textarea.js-ci-variable-input-value.js-secret-value.form-control{ class: ('hide' if id),
+      %textarea.js-ci-variable-input-value.js-secret-value.form-control{ class: ('hidden' if id),
         rows: 1,
         name: value_input_name,
         placeholder: s_('CiVariables|Input variable value') }

app/views/projects/settings/ci_cd/_form.html.haml

@@ -45,7 +45,7 @@
           = f.label :runners_token, "Runner token", class: 'label-light'
           .form-control.js-secret-value-placeholder
             = '*' * 20
-          = f.text_field :runners_token, class: "form-control hide js-secret-value", placeholder: 'xEeFCaDAB89'
+          = f.text_field :runners_token, class: "form-control hidden js-secret-value", placeholder: 'xEeFCaDAB89'
           %p.form-text.text-muted The secure token used by the Runner to checkout the project
           %button.btn.btn-info.prepend-top-10.js-secret-value-reveal-button{ type: 'button', data: { secret_reveal_status: 'false' } }
             = _('Reveal value')

spec/javascripts/behaviors/secret_values_spec.js

@@ -9,7 +9,7 @@ function generateValueMarkup(
     <div class="${placeholderClass}">
       ***
     </div>
-    <div class="hide ${valueClass}">
+    <div class="hidden ${valueClass}">
       ${secret}
     </div>
   `;
@@ -77,9 +77,9 @@ describe('setupSecretValues', () => {
       const placeholders = wrapper.querySelectorAll('.js-secret-value-placeholder');
       expect(values.length).toEqual(1);
-      expect(values[0].classList.contains('hide')).toEqual(true);
+      expect(values[0].classList.contains('hidden')).toEqual(true);
       expect(placeholders.length).toEqual(1);
-      expect(placeholders[0].classList.contains('hide')).toEqual(false);
+      expect(placeholders[0].classList.contains('hidden')).toEqual(false);
     });
     it('should toggle value and placeholder', () => {
@@ -91,16 +91,16 @@ describe('setupSecretValues', () => {
       revealButton.click();
       expect(values.length).toEqual(1);
-      expect(values[0].classList.contains('hide')).toEqual(false);
+      expect(values[0].classList.contains('hidden')).toEqual(false);
       expect(placeholders.length).toEqual(1);
-      expect(placeholders[0].classList.contains('hide')).toEqual(true);
+      expect(placeholders[0].classList.contains('hidden')).toEqual(true);
       revealButton.click();
       expect(values.length).toEqual(1);
-      expect(values[0].classList.contains('hide')).toEqual(true);
+      expect(values[0].classList.contains('hidden')).toEqual(true);
       expect(placeholders.length).toEqual(1);
-      expect(placeholders[0].classList.contains('hide')).toEqual(false);
+      expect(placeholders[0].classList.contains('hidden')).toEqual(false);
     });
   });
@@ -128,11 +128,11 @@ describe('setupSecretValues', () => {
       expect(values.length).toEqual(3);
       values.forEach((value) => {
-        expect(value.classList.contains('hide')).toEqual(true);
+        expect(value.classList.contains('hidden')).toEqual(true);
       });
       expect(placeholders.length).toEqual(3);
       placeholders.forEach((placeholder) => {
-        expect(placeholder.classList.contains('hide')).toEqual(false);
+        expect(placeholder.classList.contains('hidden')).toEqual(false);
       });
     });
@@ -146,22 +146,22 @@ describe('setupSecretValues', () => {
       expect(values.length).toEqual(3);
       values.forEach((value) => {
-        expect(value.classList.contains('hide')).toEqual(false);
+        expect(value.classList.contains('hidden')).toEqual(false);
       });
       expect(placeholders.length).toEqual(3);
       placeholders.forEach((placeholder) => {
-        expect(placeholder.classList.contains('hide')).toEqual(true);
+        expect(placeholder.classList.contains('hidden')).toEqual(true);
       });
       revealButton.click();
       expect(values.length).toEqual(3);
       values.forEach((value) => {
-        expect(value.classList.contains('hide')).toEqual(true);
+        expect(value.classList.contains('hidden')).toEqual(true);
       });
       expect(placeholders.length).toEqual(3);
       placeholders.forEach((placeholder) => {
-        expect(placeholder.classList.contains('hide')).toEqual(false);
+        expect(placeholder.classList.contains('hidden')).toEqual(false);
       });
     });
   });
@@ -182,22 +182,22 @@ describe('setupSecretValues', () => {
       expect(values.length).toEqual(4);
       values.forEach((value) => {
-        expect(value.classList.contains('hide')).toEqual(false);
+        expect(value.classList.contains('hidden')).toEqual(false);
       });
       expect(placeholders.length).toEqual(4);
       placeholders.forEach((placeholder) => {
-        expect(placeholder.classList.contains('hide')).toEqual(true);
+        expect(placeholder.classList.contains('hidden')).toEqual(true);
       });
       revealButton.click();
       expect(values.length).toEqual(4);
       values.forEach((value) => {
-        expect(value.classList.contains('hide')).toEqual(true);
+        expect(value.classList.contains('hidden')).toEqual(true);
       });
       expect(placeholders.length).toEqual(4);
       placeholders.forEach((placeholder) => {
-        expect(placeholder.classList.contains('hide')).toEqual(false);
+        expect(placeholder.classList.contains('hidden')).toEqual(false);
       });
     });
   });
@@ -220,9 +220,9 @@ describe('setupSecretValues', () => {
       revealButton.click();
       expect(values.length).toEqual(1);
-      expect(values[0].classList.contains('hide')).toEqual(false);
+      expect(values[0].classList.contains('hidden')).toEqual(false);
       expect(placeholders.length).toEqual(1);
-      expect(placeholders[0].classList.contains('hide')).toEqual(true);
+      expect(placeholders[0].classList.contains('hidden')).toEqual(true);
     });
   });
 });

spec/javascripts/boards/board_new_issue_spec.js

@@ -93,7 +93,7 @@ describe('Issue boards new issue form', () => {
   });
   it('clears title after clicking cancel', (done) => {
-    vm.$el.querySelector('.btn-default').click();
+    vm.$el.querySelector('.btn-secondary').click();
     Vue.nextTick()
       .then(() => {

spec/javascripts/ci_variable_list/ajax_variable_list_spec.js

@@ -4,7 +4,7 @@ import axios from '~/lib/utils/axios_utils';
 import AjaxFormVariableList from '~/ci_variable_list/ajax_variable_list';
 const VARIABLE_PATCH_ENDPOINT = 'http://test.host/frontend-fixtures/builds-project/variables';
-const HIDE_CLASS = 'hide';
+const HIDE_CLASS = 'hidden';
 describe('AjaxFormVariableList', () => {
   preloadFixtures('projects/ci_cd_settings.html.raw');

spec/javascripts/ci_variable_list/ci_variable_list_spec.js

@@ -2,7 +2,7 @@ import $ from 'jquery';
 import VariableList from '~/ci_variable_list/ci_variable_list';
 import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
-const HIDE_CLASS = 'hide';
+const HIDE_CLASS = 'hidden';
 describe('VariableList', () => {
   preloadFixtures('pipeline_schedules/edit.html.raw');

spec/javascripts/ide/components/commit_sidebar/radio_group_spec.js

@@ -73,7 +73,7 @@ describe('IDE commit sidebar radio group', () => {
     vm.helpText = 'help text';
     Vue.nextTick(() => {
-      const help = vm.$el.querySelector('.form-text.text-muted');
+      const help = vm.$el.querySelector('.help-block');
       expect(help).not.toBeNull();
       expect(help.getAttribute('data-original-title')).toBe('help text');

spec/javascripts/ide/components/repo_commit_section_spec.js

@@ -128,7 +128,7 @@ describe('RepoCommitSection', () => {
   describe('discard draft button', () => {
     it('hidden when commitMessage is empty', () => {
       expect(
-        vm.$el.querySelector('.multi-file-commit-form .btn-default'),
+        vm.$el.querySelector('.multi-file-commit-form .btn-secondary'),
       ).toBeNull();
     });
@@ -137,7 +137,7 @@ describe('RepoCommitSection', () => {
       getSetTimeoutPromise()
         .then(() => {
-          vm.$el.querySelector('.multi-file-commit-form .btn-default').click();
+          vm.$el.querySelector('.multi-file-commit-form .btn-secondary').click();
         })
         .then(Vue.nextTick)
         .then(() => {

spec/javascripts/issue_show/components/edit_actions_spec.js

@@ -106,7 +106,7 @@ describe('Edit Actions components', () => {
   describe('closeForm', () => {
     it('emits close.form when clicking cancel', () => {
-      vm.$el.querySelector('.btn-default').click();
+      vm.$el.querySelector('.btn-secondary').click();
       expect(
         eventHub.$emit,

spec/javascripts/projects_dropdown/components/search_spec.js

@@ -92,7 +92,6 @@ describe('SearchComponent', () => {
       const inputEl = vm.$el.querySelector('input.form-control');
       expect(vm.$el.classList.contains('search-input-container')).toBeTruthy();
-      expect(vm.$el.classList.contains('d-none d-sm-block')).toBeTruthy();
       expect(inputEl).not.toBe(null);
       expect(inputEl.getAttribute('placeholder')).toBe('Search your projects');
       expect(vm.$el.querySelector('.search-icon')).toBeDefined();