Fixes hardcoded timezone offset

Moves the formatUtcOffset method to a shared
utility and ensures we use the offset value from
the fixture in the timezone_dropdown_spec

app/assets/javascripts/lib/utils/datetime_utility.js

@@ -657,6 +657,24 @@ export const secondsToMilliseconds = seconds => seconds * 1000;
  */
 export const secondsToDays = seconds => Math.round(seconds / 86400);
 
+/**
+ * Converts a numeric utc offset in seconds to +/- hours
+ * ie -32400 => -9 hours
+ * ie -12600 => -3.5 hours
+ *
+ * @param {Number} offset UTC offset in seconds as a integer
+ *
+ * @return {String} the + or - offset in hours
+ */
+export const secondsToHours = offset => {
+  const parsed = parseInt(offset, 10);
+  if (Number.isNaN(parsed) || parsed === 0) {
+    return `0`;
+  }
+  const num = offset / 3600;
+  return parseInt(num, 10) !== num ? num.toFixed(1) : num;
+};
+
 /**
  * Returns the date n days after the date provided
  *

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

@@ -2,6 +2,7 @@
 import { GlDropdown, GlDropdownItem, GlSearchBoxByType } from '@gitlab/ui';
 import { __ } from '~/locale';
 import autofocusonshow from '~/vue_shared/directives/autofocusonshow';
+import { secondsToHours } from '~/lib/utils/datetime_utility';
 
 export default {
   name: 'TimezoneDropdown',
@@ -58,16 +59,8 @@ export default {
     isSelected(timezone) {
       return this.value === timezone.formattedTimezone;
     },
-    formatUtcOffset(offset) {
-      const parsed = parseInt(offset, 10);
-      if (Number.isNaN(parsed) || parsed === 0) {
-        return `0`;
-      }
-      const prefix = offset > 0 ? '+' : '-';
-      return `${prefix}${Math.abs(offset / 3600)}`;
-    },
     formatTimezone(item) {
-      return `[UTC ${this.formatUtcOffset(item.offset)}] ${item.name}`;
+      return `[UTC ${secondsToHours(item.offset)}] ${item.name}`;
     },
   },
 };

spec/frontend/deploy_freeze/components/timezone_dropdown_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import { GlDropdownItem, GlDropdown } from '@gitlab/ui';
+import { secondsToHours } from '~/lib/utils/datetime_utility';
 import TimezoneDropdown from '~/vue_shared/components/timezone_dropdown.vue';
 import createStore from '~/deploy_freeze/store';
 
@@ -12,6 +13,11 @@ describe('Deploy freeze timezone dropdown', () => {
   let store;
   const timezoneDataFixture = getJSONFixture('/api/freeze-periods/timezone_data.json');
 
+  const findTzByName = (identifier = '') =>
+    timezoneDataFixture.find(({ name }) => name.toLowerCase() === identifier.toLowerCase());
+
+  const formatTz = ({ offset, name }) => `[UTC ${secondsToHours(offset)}] ${name}`;
+
   const createComponent = (searchTerm, selectedTimezone) => {
     store = createStore({
       projectId: '8',
@@ -63,8 +69,9 @@ describe('Deploy freeze timezone dropdown', () => {
     });
 
     it('renders only the time zone searched for', () => {
+      const selectedTz = findTzByName('Alaska');
       expect(findAllDropdownItems()).toHaveLength(1);
-      expect(findDropdownItemByIndex(0).text()).toBe('[UTC -8] Alaska');
+      expect(findDropdownItemByIndex(0).text()).toBe(formatTz(selectedTz));
     });
 
     it('should not display empty results message', () => {
@@ -72,13 +79,15 @@ describe('Deploy freeze timezone dropdown', () => {
     });
 
     describe('Custom events', () => {
+      const selectedTz = findTzByName('Alaska');
+
       it('should emit input if a time zone is clicked', () => {
         findDropdownItemByIndex(0).vm.$emit('click');
         expect(wrapper.emitted('input')).toEqual([
           [
             {
-              formattedTimezone: '[UTC -8] Alaska',
-              identifier: 'America/Juneau',
+              formattedTimezone: formatTz(selectedTz),
+              identifier: selectedTz.identifier,
             },
           ],
         ]);