Change error-tracking css classes naming convention

Changed the way the vuex store gets instantiated
including the initial state for the store.

Also added more computed props to make states more declarative

14 files changed, 210 insertions, 216 deletions

diff --git a/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue b/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue
index b59261086b5..51de7808152 100644
--- a/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue
+++ b/app/assets/javascripts/error_tracking_settings/components/error_tracking_form.vue
@@ -55,41 +55,41 @@ export default {
   <div>
     <div class="form-check form-group">
       <input
-        id="error_tracking_enabled"
+        id="error-tracking-enabled"
         v-model="enabled"
         class="form-check-input"
         type="checkbox"
       />
-      <label class="form-check-label" for="error_tracking_enabled">{{
+      <label class="form-check-label" for="error-tracking-enabled">{{
         s__('ErrorTracking|Active')
       }}</label>
     </div>
     <div class="form-group">
-      <label class="label-bold" for="error_tracking_api_host">{{
+      <label class="label-bold" for="error-tracking-api-host">{{
         s__('ErrorTracking|Sentry API URL')
       }}</label>
       <div class="row">
         <div class="col-8 col-md-9 gl-pr-0">
           <input
-            id="error_tracking_api_host"
+            id="error-tracking-api-host"
             v-model="apiHost"
             class="form-control"
-            :placeholder="__('https://mysentryserver.com')"
+            placeholder="https://mysentryserver.com"
           />
         </div>
       </div>
       <p class="form-text text-muted">
-        {{ __('Find your hostname in your Sentry account settings page') }}
+        {{ s__('ErrorTracking|Find your hostname in your Sentry account settings page') }}
       </p>
     </div>
-    <div class="form-group" :class="showError ? 'gl-show-field-errors' : ''">
-      <label class="label-bold" for="error_tracking_token">{{
+    <div class="form-group" :class="{ 'gl-show-field-errors': showError }">
+      <label class="label-bold" for="error-tracking-token">{{
         s__('ErrorTracking|Auth Token')
       }}</label>
       <div class="row">
         <div class="col-8 col-md-9 gl-pr-0">
           <input
-            id="error_tracking_token"
+            id="error-tracking-token"
             v-model="token"
             class="form-control form-control-inline gl-field-error-outline"
           />
@@ -97,7 +97,7 @@ export default {
         <div class="col-4 col-md-3 gl-pl-0">
           <button
             class="btn prepend-left-5"
-            data-qa-id="error_tracking_connect"
+            data-qa-id="error-tracking-connect"
             @click="handleConnectClick"
           >
             {{ s__('ErrorTracking|Connect') }}
@@ -105,14 +105,14 @@ export default {
           <icon
             v-show="showCheck"
             class="prepend-left-5 text-success align-middle"
-            data-qa-id="error_tracking_connect_success"
+            data-qa-id="error-tracking-connect-success"
             :aria-label="__('Projects Successfully Retrieved')"
             name="check-circle"
           />
         </div>
       </div>
       <p v-if="showError" class="gl-field-error">
-        {{ __('Connection has failed. Re-check Auth Token and try again.') }}
+        {{ s__('ErrorTracking|Connection has failed. Re-check Auth Token and try again.') }}
       </p>
       <p v-else class="form-text text-muted">
         {{ __("After adding your Auth Token, use the 'Connect' button to load projects") }}
diff --git a/app/assets/javascripts/error_tracking_settings/components/error_tracking_settings.vue b/app/assets/javascripts/error_tracking_settings/components/error_tracking_settings.vue
index ed372169e2c..22242fd9e3f 100644
--- a/app/assets/javascripts/error_tracking_settings/components/error_tracking_settings.vue
+++ b/app/assets/javascripts/error_tracking_settings/components/error_tracking_settings.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapActions } from 'vuex';
+import { mapActions, mapState } from 'vuex';
 import projectDropdown from './project_dropdown.vue';
 import errorTrackingForm from './error_tracking_form.vue';
 
@@ -15,6 +15,9 @@ export default {
       required: true,
     },
   },
+  computed: {
+    ...mapState(['settingsLoading']),
+  },
   methods: {
     ...mapActions(['updateSettings']),
     handleSubmit() {
@@ -33,9 +36,9 @@ export default {
       <project-dropdown />
     </div>
     <button
-      :disabled="$store.state.settingsLoading"
+      :disabled="settingsLoading"
       class="btn btn-success"
-      data-qa-id="error_tracking_button"
+      data-qa-id="error-tracking-button"
       @click="handleSubmit"
     >
       {{ __('Save changes') }}
diff --git a/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue b/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
index c5affb93c45..440c633b065 100644
--- a/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
+++ b/app/assets/javascripts/error_tracking_settings/components/project_dropdown.vue
@@ -1,5 +1,5 @@
 <script>
-import { __, s__ } from '~/locale';
+import { s__ } from '~/locale';
 import { mapActions, mapState } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -12,9 +12,9 @@ export default {
     GlDropdownItem,
     Icon,
   },
-  noAuthTokenText: __('To enable project selection, enter a valid Auth Token'),
-  noConnectionText: __(
-    "Click 'Connect' to re-establish the connection to Sentry and activate the dropdown.",
+  noAuthTokenText: s__('ErrorTracking|To enable project selection, enter a valid Auth Token'),
+  noConnectionText: s__(
+    "ErrorTracking|Click 'Connect' to re-establish the connection to Sentry and activate the dropdown.",
   ),
   noProjectsText: s__('ErrorTracking|No projects available'),
   selectProjectText: s__('ErrorTracking|Select project'),
@@ -38,7 +38,7 @@ export default {
     isProjectListEmpty() {
       return this.areProjectsLoaded && this.projects.length === 0;
     },
-    isProjectValid() {
+    isProjectInvalid() {
       return (
         this.selectedProject &&
         this.areProjectsLoaded &&
@@ -48,13 +48,19 @@ export default {
     areProjectsLoaded() {
       return this.projects !== null;
     },
+    isDropdownDisabled() {
+      return !this.areProjectsLoaded || this.isProjectListEmpty;
+    },
   },
   methods: {
     ...mapActions(['updateSelectedProject']),
     handleClick(event) {
-      this.updateSelectedProject({
-        ...this.projects.find(item => item.id === event.target.value),
-      });
+      const selectedProject = this.projects.find(item => item.id === event.target.value);
+
+      // Handle the case that the clicked project was not found in the store
+      if (selectedProject) {
+        this.updateSelectedProject({ ...selectedProject });
+      }
     },
     getDisplayName(project) {
       return `${project.organizationName} | ${project.name}`;
@@ -64,13 +70,13 @@ export default {
 </script>
 
 <template>
-  <div :class="[isProjectValid ? 'gl-show-field-errors' : '']">
-    <label class="label-bold" for="project_dropdown">{{ s__('ErrorTracking|Project') }}</label>
+  <div :class="{ 'gl-show-field-errors': isProjectInvalid }">
+    <label class="label-bold" for="project-dropdown">{{ s__('ErrorTracking|Project') }}</label>
     <div class="row">
       <gl-dropdown
-        id="project_dropdown"
+        id="project-dropdown"
         class="col-8 col-md-9 gl-pr-0"
-        :disabled="!areProjectsLoaded || isProjectListEmpty"
+        :disabled="isDropdownDisabled"
         menu-class="w-100 mw-100"
         toggle-class="dropdown-menu-toggle w-100 gl-field-error-outline"
         :text="dropdownText"
@@ -85,7 +91,7 @@ export default {
         >
       </gl-dropdown>
     </div>
-    <p v-if="isProjectValid" class="gl-field-error" data-qa-id="project_dropdown_error">
+    <p v-if="isProjectInvalid" class="gl-field-error" data-qa-id="project-dropdown-error">
       {{
         sprintf(
           __('Project "%{name}" is no longer available. Select another project to continue.'),
@@ -96,7 +102,7 @@ export default {
     <p
       v-else-if="!areProjectsLoaded"
       class="form-text text-muted"
-      data-qa-id="project_dropdown_label"
+      data-qa-id="project-dropdown-label"
     >
       {{ projectSelectionText }}
     </p>
diff --git a/app/assets/javascripts/error_tracking_settings/index.js b/app/assets/javascripts/error_tracking_settings/index.js
index db638084cf3..9da1d1be3aa 100644
--- a/app/assets/javascripts/error_tracking_settings/index.js
+++ b/app/assets/javascripts/error_tracking_settings/index.js
@@ -1,7 +1,9 @@
 import Vue from 'vue';
-import store from './store';
+import { createStore } from './store';
 import ErrorTrackingSettings from './components/error_tracking_settings.vue';
 
+const store = createStore();
+
 const getInitialProject = dataset => {
   const {
     projectName: name,
@@ -11,7 +13,7 @@ const getInitialProject = dataset => {
   } = dataset;
   if (slug) {
     return {
-      id: organizationSlug + slug,
+      id: `${organizationSlug}${slug}`,
       name,
       slug,
       organizationName,
@@ -30,10 +32,12 @@ export default () => {
   const initialProject = getInitialProject(formContainerEl.dataset);
 
   // Set up initial store state from DOM
-  store.dispatch('updateApiHost', apiHost);
-  store.dispatch('updateEnabled', enabled === 'false' ? false : Boolean(enabled));
-  store.dispatch('updateToken', token);
-  store.dispatch('updateSelectedProject', initialProject);
+  store.dispatch('setInitialState', {
+    apiHost,
+    enabled: enabled === 'false' ? false : Boolean(enabled),
+    token,
+    project: initialProject,
+  });
 
   return new Vue({
     el: formContainerEl,
diff --git a/app/assets/javascripts/error_tracking_settings/store/actions.js b/app/assets/javascripts/error_tracking_settings/store/actions.js
index f39821b56c1..cbc643a4ef7 100644
--- a/app/assets/javascripts/error_tracking_settings/store/actions.js
+++ b/app/assets/javascripts/error_tracking_settings/store/actions.js
@@ -7,10 +7,12 @@ import { __ } from '~/locale';
 export const requestProjects = ({ commit }) => {
   commit(types.RESET_CONNECT);
 };
+
 export const receiveProjectsSuccess = ({ commit }, projects) => {
   commit(types.UPDATE_CONNECT_SUCCESS);
   commit(types.RECEIVE_PROJECTS, projects);
 };
+
 export const receiveProjectsError = ({ commit }) => {
   commit(types.UPDATE_CONNECT_ERROR);
   commit(types.RECEIVE_PROJECTS, null);
@@ -36,14 +38,16 @@ export const fetchProjects = ({ dispatch, state }, data) => {
 export const requestSettings = ({ commit }) => {
   commit(types.UPDATE_SETTINGS_LOADING, true);
 };
+
 export const receiveSettingsSuccess = ({ commit }) => {
   createFlash(__('Your changes have been saved.'), 'notice');
   commit(types.UPDATE_SETTINGS_LOADING, false);
 };
-export const receiveSettingsError = (
-  { commit },
-  { response: { data: { message = '' } = {} } = {} } = {},
-) => {
+
+export const receiveSettingsError = ({ commit }, response) => {
+  const data = response.data || {};
+  const message = data.message || '';
+
   createFlash(`${__('There was an error saving your changes.')} ${message}`, 'alert');
   commit(types.UPDATE_SETTINGS_LOADING, false);
 };
@@ -62,7 +66,7 @@ export const updateSettings = ({ dispatch, state }, data) => {
       dispatch('receiveSettingsSuccess');
     })
     .catch(err => {
-      dispatch('receiveSettingsError', err);
+      dispatch('receiveSettingsError', err.response);
     });
 };
 
@@ -70,15 +74,25 @@ export const updateApiHost = ({ commit }, apiHost) => {
   commit(types.UPDATE_API_HOST, apiHost);
   commit(types.RESET_CONNECT);
 };
+
 export const updateEnabled = ({ commit }, enabled) => {
   commit(types.UPDATE_ENABLED, enabled);
 };
+
 export const updateToken = ({ commit }, token) => {
   commit(types.UPDATE_TOKEN, token);
   commit(types.RESET_CONNECT);
 };
+
 export const updateSelectedProject = ({ commit }, selectedProject) => {
   commit(types.UPDATE_SELECTED_PROJECT, selectedProject);
 };
 
+export const setInitialState = ({ dispatch }, { apiHost, enabled, token, project }) => {
+  dispatch('updateApiHost', apiHost);
+  dispatch('updateEnabled', enabled === 'false' ? false : Boolean(enabled));
+  dispatch('updateToken', token);
+  dispatch('updateSelectedProject', project);
+};
+
 export default () => {};
diff --git a/app/assets/javascripts/error_tracking_settings/store/index.js b/app/assets/javascripts/error_tracking_settings/store/index.js
index a5bfb2c6d8e..04916d133ef 100644
--- a/app/assets/javascripts/error_tracking_settings/store/index.js
+++ b/app/assets/javascripts/error_tracking_settings/store/index.js
@@ -6,8 +6,11 @@ import mutations from './mutations';
 
 Vue.use(Vuex);
 
-export default new Vuex.Store({
-  state: createState(),
-  actions,
-  mutations,
-});
+export const createStore = () =>
+  new Vuex.Store({
+    state: createState(),
+    actions,
+    mutations,
+  });
+
+export default createStore();
diff --git a/app/assets/javascripts/error_tracking_settings/store/utils.js b/app/assets/javascripts/error_tracking_settings/store/utils.js
index 09e4fa342a5..71accf0f554 100644
--- a/app/assets/javascripts/error_tracking_settings/store/utils.js
+++ b/app/assets/javascripts/error_tracking_settings/store/utils.js
@@ -4,23 +4,22 @@ export const transformBackendProject = ({
   organization_name: organizationName,
   organization_slug: organizationSlug,
 }) => ({
-  id: organizationSlug + slug,
+  id: `${organizationSlug}${slug}`,
   slug,
   name,
   organizationName,
   organizationSlug,
 });
 
-export const transformFrontendSettings = ({ apiHost, enabled, token, selectedProject }) => ({
-  api_host: apiHost || null,
-  enabled,
-  token: token || null,
-  project: selectedProject
+export const transformFrontendSettings = ({ apiHost, enabled, token, selectedProject }) => {
+  const project = selectedProject
     ? {
         slug: selectedProject.slug,
         name: selectedProject.name,
         organization_name: selectedProject.organizationName,
         organization_slug: selectedProject.organizationSlug,
       }
-    : null,
-});
+    : null;
+
+  return { api_host: apiHost || null, enabled, token: token || null, project };
+};
diff --git a/spec/javascripts/error_tracking_settings/components/error_tracking_form_spec.js b/spec/javascripts/error_tracking_settings/components/error_tracking_form_spec.js
index 6d32c54f966..b1408f22a5f 100644
--- a/spec/javascripts/error_tracking_settings/components/error_tracking_form_spec.js
+++ b/spec/javascripts/error_tracking_settings/components/error_tracking_form_spec.js
@@ -1,14 +1,15 @@
 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import ErrorTrackingForm from '~/error_tracking_settings/components/error_tracking_form.vue';
+import { createStore } from '~/error_tracking_settings/store';
 import { TEST_HOST } from 'spec/test_constants';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-describe('ErrorTrackingSettings', () => {
-  let store;
+describe('error tracking settings form', () => {
   let wrapper;
+  let store;
 
   function mountComponent() {
     wrapper = shallowMount(ErrorTrackingForm, {
@@ -21,20 +22,7 @@ describe('ErrorTrackingSettings', () => {
   }
 
   beforeEach(() => {
-    const actions = {};
-
-    const state = {
-      token: '',
-      apiHost: '',
-      connectSuccessful: false,
-      connectError: false,
-    };
-
-    store = new Vuex.Store({
-      actions,
-      state,
-    });
-
+    store = createStore();
     mountComponent();
   });
 
@@ -44,12 +32,12 @@ describe('ErrorTrackingSettings', () => {
     }
   });
 
-  describe('Empty form', () => {
+  describe('empty form', () => {
     it('renders the form', () => {
-      expect(wrapper.find('#error_tracking_enabled').exists()).toBeTruthy();
-      expect(wrapper.find('#error_tracking_api_host').exists()).toBeTruthy();
-      expect(wrapper.find('#error_tracking_token').exists()).toBeTruthy();
-      expect(wrapper.find('[data-qa-id=error_tracking_connect]').exists()).toBeTruthy();
+      expect(wrapper.find('#error-tracking-enabled').exists()).toBeTruthy();
+      expect(wrapper.find('#error-tracking-api-host').exists()).toBeTruthy();
+      expect(wrapper.find('#error-tracking-token').exists()).toBeTruthy();
+      expect(wrapper.find('[data-qa-id=error-tracking-connect]').exists()).toBeTruthy();
     });
 
     it('renders labels', () => {
@@ -62,20 +50,20 @@ describe('ErrorTrackingSettings', () => {
       );
 
       expect(pageText).not.toContain('Connection has failed. Re-check Auth Token and try again');
-      expect(wrapper.find('#error_tracking_api_host').attributes('placeholder')).toContain(
+      expect(wrapper.find('#error-tracking-api-host').attributes('placeholder')).toContain(
         'https://mysentryserver.com',
       );
     });
   });
 
-  describe('After a successful connection', () => {
+  describe('after a successful connection', () => {
     beforeEach(() => {
       store.state.connectSuccessful = true;
       store.state.connectError = false;
     });
 
     it('shows the success checkmark', () => {
-      expect(wrapper.find('[data-qa-id=error_tracking_connect_success]').isVisible()).toBeTruthy();
+      expect(wrapper.find('[data-qa-id=error-tracking-connect-success]').isVisible()).toBeTruthy();
     });
 
     it('does not show an error', () => {
@@ -85,14 +73,14 @@ describe('ErrorTrackingSettings', () => {
     });
   });
 
-  describe('After an unsuccessful connection', () => {
+  describe('after an unsuccessful connection', () => {
     beforeEach(() => {
       store.state.connectSuccessful = false;
       store.state.connectError = true;
     });
 
     it('does not show the check mark', () => {
-      expect(wrapper.find('[data-qa-id=error_tracking_connect_success]').isVisible()).toBeFalsy();
+      expect(wrapper.find('[data-qa-id=error-tracking-connect-success]').isVisible()).toBeFalsy();
     });
 
     it('shows an error', () => {
diff --git a/spec/javascripts/error_tracking_settings/components/error_tracking_page_spec.js b/spec/javascripts/error_tracking_settings/components/error_tracking_page_spec.js
index a777a8c2edd..97615bbade0 100644
--- a/spec/javascripts/error_tracking_settings/components/error_tracking_page_spec.js
+++ b/spec/javascripts/error_tracking_settings/components/error_tracking_page_spec.js
@@ -3,12 +3,13 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
 import ErrorTrackingSettings from '~/error_tracking_settings/components/error_tracking_settings.vue';
 import ErrorTrackingForm from '~/error_tracking_settings/components/error_tracking_form.vue';
 import ProjectDropdown from '~/error_tracking_settings/components/project_dropdown.vue';
+import { createStore } from '~/error_tracking_settings/store';
 import { TEST_HOST } from 'spec/test_constants';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-describe('ErrorTrackingSettings', () => {
+describe('error tracking settings page', () => {
   let store;
   let wrapper;
 
@@ -24,15 +25,7 @@ describe('ErrorTrackingSettings', () => {
   }
 
   beforeEach(() => {
-    const actions = {};
-    const state = {
-      settingsLoading: false,
-    };
-
-    store = new Vuex.Store({
-      actions,
-      state,
-    });
+    store = createStore();
 
     mountComponent();
   });
@@ -43,24 +36,24 @@ describe('ErrorTrackingSettings', () => {
     }
   });
 
-  describe('Section', () => {
+  describe('section', () => {
     it('renders the form and dropdown', () => {
       expect(wrapper.find(ErrorTrackingForm).exists()).toBeTruthy();
       expect(wrapper.find(ProjectDropdown).exists()).toBeTruthy();
     });
 
     it('renders the Save Changes button', () => {
-      expect(wrapper.find('[data-qa-id=error_tracking_button').exists()).toBeTruthy();
+      expect(wrapper.find('[data-qa-id=error-tracking-button').exists()).toBeTruthy();
     });
 
     it('enables the button by default', () => {
-      expect(wrapper.find('[data-qa-id=error_tracking_button').attributes('disabled')).toBeFalsy();
+      expect(wrapper.find('[data-qa-id=error-tracking-button').attributes('disabled')).toBeFalsy();
     });
 
     it('disables the button when saving', () => {
       store.state.settingsLoading = true;
 
-      expect(wrapper.find('[data-qa-id=error_tracking_button').attributes('disabled')).toBeTruthy();
+      expect(wrapper.find('[data-qa-id=error-tracking-button').attributes('disabled')).toBeTruthy();
     });
   });
 });
diff --git a/spec/javascripts/error_tracking_settings/components/project_dropdown_spec.js b/spec/javascripts/error_tracking_settings/components/project_dropdown_spec.js
index da960ccabac..70502023c9b 100644
--- a/spec/javascripts/error_tracking_settings/components/project_dropdown_spec.js
+++ b/spec/javascripts/error_tracking_settings/components/project_dropdown_spec.js
@@ -2,37 +2,14 @@ import _ from 'underscore';
 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import ProjectDropdown from '~/error_tracking_settings/components/project_dropdown.vue';
+import { createStore } from '~/error_tracking_settings/store';
 import { GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { projectList, staleProject } from '../mock';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-const testProjects = [
-  {
-    id: 1,
-    name: 'name',
-    slug: 'slug',
-    organizationName: 'organizationName',
-    organizationSlug: 'organizationSlug',
-  },
-  {
-    id: 2,
-    name: 'name2',
-    slug: 'slug2',
-    organizationName: 'organizationName2',
-    organizationSlug: 'organizationSlug2',
-  },
-];
-
-const staleProject = {
-  id: 3,
-  name: 'staleName',
-  slug: 'staleSlug',
-  organizationName: 'staleOrganizationName',
-  organizationSlug: 'staleOrganizationSlug',
-};
-
-describe('ErrorTrackingSettings', () => {
+describe('error tracking settings project dropdown', () => {
   let store;
   let wrapper;
 
@@ -44,18 +21,7 @@ describe('ErrorTrackingSettings', () => {
   }
 
   beforeEach(() => {
-    const actions = {};
-
-    const state = {
-      token: '',
-      projects: null,
-      selectedProject: null,
-    };
-
-    store = new Vuex.Store({
-      actions,
-      state,
-    });
+    store = createStore();
 
     mountComponent();
   });
@@ -66,36 +32,36 @@ describe('ErrorTrackingSettings', () => {
     }
   });
 
-  describe('Empty project list', () => {
-    it('Renders the dropdown', () => {
-      expect(wrapper.find('#project_dropdown').exists()).toBeTruthy();
+  describe('empty project list', () => {
+    it('renders the dropdown', () => {
+      expect(wrapper.find('#project-dropdown').exists()).toBeTruthy();
       expect(wrapper.find(GlDropdown).exists()).toBeTruthy();
     });
 
     it('shows helper text', () => {
-      expect(wrapper.find('[data-qa-id=project_dropdown_label]').exists()).toBeTruthy();
-      expect(wrapper.find('[data-qa-id="project_dropdown_label"]').text()).toContain(
+      expect(wrapper.find('[data-qa-id=project-dropdown-label]').exists()).toBeTruthy();
+      expect(wrapper.find('[data-qa-id="project-dropdown-label"]').text()).toContain(
         'To enable project selection',
       );
     });
 
     it('does not show an error', () => {
-      expect(wrapper.find('[data-qa-id="project_dropdown_error"]').exists()).toBeFalsy();
+      expect(wrapper.find('[data-qa-id="project-dropdown-error"]').exists()).toBeFalsy();
     });
 
     it('does not contain any dropdown items', () => {
       expect(wrapper.find(GlDropdownItem).exists()).toBeFalsy();
-      // expect(wrapper.find('#project_dropdown > button').text()).toBe('No projects available');
+      expect(wrapper.find(GlDropdown).props('text')).toBe('No projects available');
     });
   });
 
-  describe('Populated project list', () => {
+  describe('populated project list', () => {
     beforeEach(() => {
-      store.state.projects = _.clone(testProjects);
+      store.state.projects = _.clone(projectList);
     });
 
-    it('Renders the dropdown', () => {
-      expect(wrapper.find('#project_dropdown').exists()).toBeTruthy();
+    it('renders the dropdown', () => {
+      expect(wrapper.find('#project-dropdown').exists()).toBeTruthy();
       expect(wrapper.find(GlDropdown).exists()).toBeTruthy();
       expect(wrapper.find(GlDropdown).props('text')).toContain('Select project');
     });
@@ -106,45 +72,41 @@ describe('ErrorTrackingSettings', () => {
     });
   });
 
-  describe('Selected project', () => {
-    const selectedProject = _.clone(testProjects[0]);
+  describe('selected project', () => {
+    const selectedProject = _.clone(projectList[0]);
 
     beforeEach(() => {
-      store.state.projects = _.clone(testProjects);
+      store.state.projects = _.clone(projectList);
       store.state.selectedProject = selectedProject;
     });
 
     it('displays the selected project', () => {
-      expect(wrapper.find('#project_dropdown').props('text')).toContain(
-        selectedProject.organizationName,
-      );
+      expect(wrapper.find(GlDropdown).props('text')).toContain(selectedProject.organizationName);
 
-      expect(wrapper.find('#project_dropdown').props('text')).toContain(selectedProject.name);
+      expect(wrapper.find(GlDropdown).props('text')).toContain(selectedProject.name);
     });
 
     it('does not show helper text', () => {
-      expect(wrapper.find('[data-qa-id=project_dropdown_label]').exists()).toBeFalsy();
-      expect(wrapper.find('[data-qa-id=project_dropdown_error]').exists()).toBeFalsy();
+      expect(wrapper.find('[data-qa-id=project-dropdown-label]').exists()).toBeFalsy();
+      expect(wrapper.find('[data-qa-id=project-dropdown-error]').exists()).toBeFalsy();
     });
   });
 
-  describe('Invalid project selected', () => {
+  describe('invalid project selected', () => {
     beforeEach(() => {
-      store.state.projects = _.clone(testProjects);
+      store.state.projects = _.clone(projectList);
       store.state.selectedProject = staleProject;
     });
 
     it('displays the selected project', () => {
-      expect(wrapper.find('#project_dropdown').props('text')).toContain(
-        staleProject.organizationName,
-      );
+      expect(wrapper.find(GlDropdown).props('text')).toContain(staleProject.organizationName);
 
-      expect(wrapper.find('#project_dropdown').props('text')).toContain(staleProject.name);
+      expect(wrapper.find(GlDropdown).props('text')).toContain(staleProject.name);
     });
 
     it('displays a error', () => {
-      expect(wrapper.find('[data-qa-id=project_dropdown_label]').exists()).toBeFalsy();
-      expect(wrapper.find('[data-qa-id=project_dropdown_error]').exists()).toBeTruthy();
+      expect(wrapper.find('[data-qa-id=project-dropdown-label]').exists()).toBeFalsy();
+      expect(wrapper.find('[data-qa-id=project-dropdown-error]').exists()).toBeTruthy();
     });
   });
 });
diff --git a/spec/javascripts/error_tracking_settings/mock.js b/spec/javascripts/error_tracking_settings/mock.js
new file mode 100644
index 00000000000..133a3c7d72d
--- /dev/null
+++ b/spec/javascripts/error_tracking_settings/mock.js
@@ -0,0 +1,63 @@
+export const projectList = [
+  {
+    id: 1,
+    name: 'name',
+    slug: 'slug',
+    organizationName: 'organizationName',
+    organizationSlug: 'organizationSlug',
+  },
+  {
+    id: 2,
+    name: 'name2',
+    slug: 'slug2',
+    organizationName: 'organizationName2',
+    organizationSlug: 'organizationSlug2',
+  },
+];
+
+export const staleProject = {
+  id: 3,
+  name: 'staleName',
+  slug: 'staleSlug',
+  organizationName: 'staleOrganizationName',
+  organizationSlug: 'staleOrganizationSlug',
+};
+
+export const normalizedProject = {
+  id: 'organization_slugslug',
+  name: 'name',
+  slug: 'slug',
+  organizationName: 'organization_name',
+  organizationSlug: 'organization_slug',
+};
+
+export const sampleBackendProject = {
+  name: normalizedProject.name,
+  slug: normalizedProject.slug,
+  organization_name: normalizedProject.organizationName,
+  organization_slug: normalizedProject.organizationSlug,
+};
+
+export const sampleFrontendSettings = {
+  apiHost: 'apiHost',
+  enabled: true,
+  token: 'token',
+  selectedProject: {
+    slug: normalizedProject.slug,
+    name: normalizedProject.name,
+    organizationName: normalizedProject.organizationName,
+    organizationSlug: normalizedProject.organizationSlug,
+  },
+};
+
+export const transformedSettings = {
+  api_host: 'apiHost',
+  enabled: true,
+  token: 'token',
+  project: {
+    slug: normalizedProject.slug,
+    name: normalizedProject.name,
+    organization_name: normalizedProject.organizationName,
+    organization_slug: normalizedProject.organizationSlug,
+  },
+};
diff --git a/spec/javascripts/error_tracking_settings/store/actions_spec.js b/spec/javascripts/error_tracking_settings/store/actions_spec.js
index 5e1263eb543..34699bef84a 100644
--- a/spec/javascripts/error_tracking_settings/store/actions_spec.js
+++ b/spec/javascripts/error_tracking_settings/store/actions_spec.js
@@ -5,20 +5,12 @@ import * as types from '~/error_tracking_settings/store/mutation_types';
 import axios from '~/lib/utils/axios_utils';
 import { TEST_HOST } from 'spec/test_constants';
 import { transformBackendProject } from '~/error_tracking_settings/store/utils';
+import { projectList } from '../mock';
 
-const projects = [
-  {
-    name: 'name',
-    slug: 'slug',
-    organization_name: 'organizationName',
-    organization_slug: 'organizationSlug',
-  },
-];
-
-describe('ErrorTrackingActions', () => {
+describe('error tracking settings actions', () => {
   let state;
 
-  describe('Project list actions', () => {
+  describe('project list actions', () => {
     let mock;
 
     beforeEach(() => {
@@ -34,7 +26,7 @@ describe('ErrorTrackingActions', () => {
     });
 
     it('should request and transform the project list', done => {
-      mock.onPost(`${TEST_HOST}.json`).reply(() => [200, { projects }]);
+      mock.onPost(`${TEST_HOST}.json`).reply(() => [200, { projects: projectList }]);
       testAction(
         actions.fetchProjects,
         { listProjectsEndpoint: TEST_HOST },
@@ -44,7 +36,7 @@ describe('ErrorTrackingActions', () => {
           { type: 'requestProjects' },
           {
             type: 'receiveProjectsSuccess',
-            payload: projects.map(transformBackendProject),
+            payload: projectList.map(transformBackendProject),
           },
         ],
         () => {
@@ -106,7 +98,7 @@ describe('ErrorTrackingActions', () => {
     });
   });
 
-  describe('Save changes actions', () => {
+  describe('save changes actions', () => {
     let mock;
 
     beforeEach(() => {
@@ -191,7 +183,7 @@ describe('ErrorTrackingActions', () => {
     });
   });
 
-  describe('Generic actions to update the store', () => {
+  describe('generic actions to update the store', () => {
     const testData = 'test';
     it('should reset the `connect success` flag when updating the api host', done => {
       testAction(
diff --git a/spec/javascripts/error_tracking_settings/store/mutation_spec.js b/spec/javascripts/error_tracking_settings/store/mutation_spec.js
index 1d237d5ae45..991c40ffe82 100644
--- a/spec/javascripts/error_tracking_settings/store/mutation_spec.js
+++ b/spec/javascripts/error_tracking_settings/store/mutation_spec.js
@@ -1,8 +1,8 @@
 import mutations from '~/error_tracking_settings/store/mutations';
 import * as types from '~/error_tracking_settings/store/mutation_types';
 
-describe('ErrorTrackingSettings', () => {
-  describe('Mutations', () => {
+describe('error tracking settings mutations', () => {
+  describe('mutations', () => {
     let state;
 
     beforeEach(() => {
diff --git a/spec/javascripts/error_tracking_settings/store/utils_spec.js b/spec/javascripts/error_tracking_settings/store/utils_spec.js
index bbd6374b549..de6335c8256 100644
--- a/spec/javascripts/error_tracking_settings/store/utils_spec.js
+++ b/spec/javascripts/error_tracking_settings/store/utils_spec.js
@@ -2,47 +2,14 @@ import {
   transformBackendProject,
   transformFrontendSettings,
 } from '~/error_tracking_settings/store/utils';
+import {
+  sampleBackendProject,
+  normalizedProject,
+  sampleFrontendSettings,
+  transformedSettings,
+} from '../mock';
 
-const normalizedProject = {
-  id: 'organization_slugslug',
-  name: 'name',
-  slug: 'slug',
-  organizationName: 'organization_name',
-  organizationSlug: 'organization_slug',
-};
-
-const sampleBackendProject = {
-  name: normalizedProject.name,
-  slug: normalizedProject.slug,
-  organization_name: normalizedProject.organizationName,
-  organization_slug: normalizedProject.organizationSlug,
-};
-
-const sampleFrontendSettings = {
-  apiHost: 'apiHost',
-  enabled: true,
-  token: 'token',
-  selectedProject: {
-    slug: normalizedProject.slug,
-    name: normalizedProject.name,
-    organizationName: normalizedProject.organizationName,
-    organizationSlug: normalizedProject.organizationSlug,
-  },
-};
-
-const transformedSettings = {
-  api_host: 'apiHost',
-  enabled: true,
-  token: 'token',
-  project: {
-    slug: normalizedProject.slug,
-    name: normalizedProject.name,
-    organization_name: normalizedProject.organizationName,
-    organization_slug: normalizedProject.organizationSlug,
-  },
-};
-
-describe('ErrorTrackingSettings', () => {
+describe('error tracking settings utils', () => {
   describe('data transform functions', () => {
     it('should transform a backend project successfully', () => {
       expect(transformBackendProject(sampleBackendProject)).toEqual(normalizedProject);