Fix broken specs

.eslintrc

@@ -16,8 +16,7 @@
     "localStorage": false
   },
   "parserOptions": {
-    "parser": "babel-eslint",
-    "ecmaVersion": 2017
+    "parser": "babel-eslint"
   },
   "plugins": [
     "filenames",

app/assets/javascripts/clusters/components/application_row.vue

 <script>
+  /* eslint-disable vue/require-default-prop */
   import { s__, sprintf } from '../../locale';
   import eventHub from '../event_hub';
   import loadingButton from '../../vue_shared/components/loading_button.vue';
@@ -30,7 +31,6 @@
       titleLink: {
         type: String,
         required: false,
-        default: null,
       },
       description: {
         type: String,
@@ -39,22 +39,18 @@
       status: {
         type: String,
         required: false,
-        default: null,
       },
       statusReason: {
         type: String,
         required: false,
-        default: null,
       },
       requestStatus: {
         type: String,
         required: false,
-        default: '',
       },
       requestReason: {
         type: String,
         required: false,
-        default: null,
       },
     },
     computed: {
@@ -62,7 +58,7 @@
         return `js-cluster-application-row-${this.id}`;
       },
       installButtonLoading() {
-        return this.status ||
+        return !this.status ||
           this.status === APPLICATION_SCHEDULED ||
           this.status === APPLICATION_INSTALLING ||
           this.requestStatus === REQUEST_LOADING;
@@ -180,7 +176,7 @@
               {{ statusReason }}
             </li>
             <li
-              v-if="requestReaso"
+              v-if="requestReason"
               class="js-cluster-application-request-error-message"
             >
               {{ requestReason }}

app/assets/javascripts/projects_dropdown/components/projects_list_item.vue

 <script>
+  /* eslint-disable vue/require-default-prop, vue/require-prop-types */
   import identicon from '../../vue_shared/components/identicon.vue';
 
   export default {
@@ -9,7 +10,6 @@
       matcher: {
         type: String,
         required: false,
-        default: '',
       },
       projectId: {
         type: Number,
@@ -28,7 +28,6 @@
         required: true,
       },
       avatarUrl: {
-        type: [String, Object],
         required: true,
         validator(value) {
           return value === null || typeof value === 'string';
@@ -40,7 +39,7 @@
         return this.avatarUrl !== null;
       },
       highlightedProjectName() {
-        if (this.matcher !== '') {
+        if (this.matcher) {
           const matcherRegEx = new RegExp(this.matcher, 'gi');
           const matches = this.projectName.match(matcherRegEx);
 

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

 <script>
+  /* eslint-disable vue/require-default-prop */
   import { __ } from '../../../locale';
   import eventHub from '../../event_hub';
   import loadingButton from '../../../vue_shared/components/loading_button.vue';
@@ -16,12 +17,10 @@
       subscribed: {
         type: Boolean,
         required: false,
-        default: false,
       },
       id: {
         type: Number,
         required: false,
-        default: 0,
       },
     },
     computed: {

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline.vue

 <script>
+  /* eslint-disable vue/require-default-prop */
   import pipelineStage from '../../pipelines/components/stage.vue';
   import ciIcon from '../../vue_shared/components/ci_icon.vue';
   import icon from '../../vue_shared/components/icon.vue';
@@ -20,12 +21,10 @@
       hasCi: {
         type: Boolean,
         required: false,
-        default: false,
       },
       ciStatus: {
         type: String,
         required: false,
-        default: '',
       },
     },
     computed: {
@@ -33,7 +32,7 @@
         return this.pipeline && Object.keys(this.pipeline).length > 0;
       },
       hasCIError() {
-        return this.hasCi && this.ciStatus !== '';
+        return this.hasCi && !this.ciStatus;
       },
       status() {
         return this.pipeline.details &&

app/assets/javascripts/vue_shared/components/loading_button.vue

 <script>
+  /* eslint-disable vue/require-default-prop */
 
   /* This is a re-usable vue component for rendering a button
     that will probably be sending off ajax requests and need
@@ -37,7 +38,6 @@
       label: {
         type: String,
         required: false,
-        default: '',
       },
       containerClass: {
         type: String,
@@ -45,11 +45,6 @@
         default: 'btn btn-align-content',
       },
     },
-    computed: {
-      hasLabel() {
-        return this.label !== '';
-      },
-    },
     methods: {
       onClick(e) {
         this.$emit('click', e);
@@ -77,7 +72,7 @@
     </transition>
     <transition name="fade">
       <span
-        v-if="hasLabel"
+        v-if="label"
         class="js-loading-button-label"
       >
         {{ label }}

doc/development/fe_guide/style_guide_js.md

@@ -364,6 +364,10 @@ Please check this [rules][eslint-plugin-vue-rules] for more documentation.
           <component
             bar="bar"
             />
+
+        // bad
+         <component
+            bar="bar" />
       ```
 
 #### Quotes
@@ -513,25 +517,7 @@ On those a default key should not be provided.
     ```
 
 1. Properties in a Vue Component:
-  1. `name`
-  1. `props`
-  1. `mixins`
-  1. `directives`
-  1. `components`
-  1. `data`
-  1. `computedProps`
-  1. `methods`
-  1. `beforeCreate`
-  1. `created`
-  1. `beforeMount`
-  1. `mounted`
-  1. `beforeUpdate`
-  1. `updated`
-  1. `activated`
-  1. `deactivated`
-  1. `beforeDestroy`
-  1. `destroyed`
-
+  Check [order of properties in components rule][vue-order].
 
 #### Vue and Bootstrap
 
@@ -588,3 +574,4 @@ The goal of this accord is to make sure we are all on the same page.
 [eslint-new]: http://eslint.org/docs/rules/no-new
 [eslint-plugin-vue]: https://github.com/vuejs/eslint-plugin-vue
 [eslint-plugin-vue-rules]: https://github.com/vuejs/eslint-plugin-vue#bulb-rules
+[vue-order]: https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/order-in-components.md

spec/javascripts/cycle_analytics/banner_spec.js

@@ -20,8 +20,9 @@ describe('Cycle analytics banner', () => {
     expect(
       vm.$el.querySelector('h4').textContent.trim(),
     ).toEqual('Introducing Cycle Analytics');
+
     expect(
-      vm.$el.querySelector('p').textContent.trim(),
+      vm.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '),
     ).toContain('Cycle Analytics gives an overview of how much time it takes to go from idea to production in your project.');
     expect(
       vm.$el.querySelector('a').textContent.trim(),

spec/javascripts/cycle_analytics/total_time_component_spec.js

@@ -23,7 +23,7 @@ describe('Total time component', () => {
         },
       });
 
-      expect(vm.$el.textContent.trim()).toEqual('3 days 4 hrs');
+      expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('3 days 4 hrs');
     });
 
     it('should render information for hours and minutes', () => {
@@ -34,7 +34,7 @@ describe('Total time component', () => {
         },
       });
 
-      expect(vm.$el.textContent.trim()).toEqual('4 hrs 35 mins');
+      expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('4 hrs 35 mins');
     });
 
     it('should render information for seconds', () => {
@@ -44,7 +44,7 @@ describe('Total time component', () => {
         },
       });
 
-      expect(vm.$el.textContent.trim()).toEqual('45 s');
+      expect(vm.$el.textContent.trim().replace(/\s\s+/g, ' ')).toEqual('45 s');
     });
   });
 

spec/javascripts/pipelines/empty_state_spec.js

@@ -24,11 +24,11 @@ describe('Pipelines Empty State', () => {
     expect(component.$el.querySelector('h4').textContent).toContain('Build with confidence');
 
     expect(
-      component.$el.querySelector('p').textContent,
+      component.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '),
     ).toContain('Continous Integration can help catch bugs by running your tests automatically');
 
     expect(
-      component.$el.querySelector('p').textContent,
+      component.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '),
     ).toContain('Continuous Deployment can help you deliver code to your product environment');
   });
 

spec/javascripts/registry/components/app_spec.js

@@ -89,7 +89,7 @@ describe('Registry List', () => {
     it('should render empty message', (done) => {
       setTimeout(() => {
         expect(
-          vm.$el.querySelector('p').textContent.trim(),
+          vm.$el.querySelector('p').textContent.trim().replace(/[\r\n]+/g, ' '),
         ).toEqual('No container images stored for this project. Add one by following the instructions above.');
         done();
       }, 0);