From 5071ff10e16752689e4f961003854e67917e997f Mon Sep 17 00:00:00 2001 From: Ezekiel Kigbo Date: Thu, 16 May 2019 02:11:13 -0500 Subject: Search for the previously set timezone by name --- .../shared/components/timezone_dropdown.js | 13 +++--- .../shared/components/timezone_dropdown_spec.js | 47 +++++++++++++++------- 2 files changed, 40 insertions(+), 20 deletions(-) diff --git a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js index a20a0526f12..b861c3a276c 100644 --- a/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js +++ b/app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown.js @@ -17,9 +17,12 @@ export const formatUtcOffset = offset => { export const formatTimezone = item => `[UTC ${formatUtcOffset(item.offset)}] ${item.name}`; -export const findTimezoneByIdentifier = (tzList = [], identifier = null) => { - if (tzList && tzList.length && identifier && identifier.length) { - return tzList.find(tz => tz.identifier === identifier) || null; +const normalizeString = str => str.toLowerCase().trim(); + +export const findTimezoneByName = (tzList = [], name = null) => { + if (tzList && tzList.length && name && name.length) { + const n = normalizeString(name); + return tzList.find(tz => normalizeString(tz.name) === n) || null; } return null; }; @@ -35,7 +38,7 @@ export default class TimezoneDropdown { this.displayFormat = displayFormat || defaults.displayFormat; this.initialTimezone = - findTimezoneByIdentifier(this.timezoneData, this.$input.val()) || defaultTimezone; + findTimezoneByName(this.timezoneData, this.$input.val()) || defaultTimezone; this.initDefaultTimezone(); this.initDropdown(); @@ -69,7 +72,7 @@ export default class TimezoneDropdown { updateInputValue({ selectedObj, e }) { e.preventDefault(); - this.$input.val(selectedObj.identifier); + this.$input.val(selectedObj.name); if (this.onSelectTimezone) { this.onSelectTimezone({ selectedObj, e }); } diff --git a/spec/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js b/spec/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js index 5f4dba5ecb9..64bbd0d89e6 100644 --- a/spec/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js +++ b/spec/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js @@ -3,7 +3,7 @@ import GLDropdown from '~/gl_dropdown'; // eslint-disable-line no-unused-vars import TimezoneDropdown, { formatUtcOffset, formatTimezone, - findTimezoneByIdentifier, + findTimezoneByName, } from '~/pages/projects/pipeline_schedules/shared/components/timezone_dropdown'; describe('Timezone Dropdown', function() { @@ -32,7 +32,7 @@ describe('Timezone Dropdown', function() { it('can take an $inputEl in the constructor', () => { const tzStr = '[UTC + 5.5] Sri Jayawardenepura'; - const tzValue = 'Asia/Colombo'; + const tzValue = 'Sri Jayawardenepura'; expect($inputEl.val()).toBe('UTC'); @@ -97,8 +97,8 @@ describe('Timezone Dropdown', function() { expect(onSelectTimezone).toHaveBeenCalled(); }); - it('will correctly set the dropdown label if a timezone identifier is set on the inputEl', () => { - $inputEl.val('America/St_Johns'); + it('will correctly set the dropdown label if a timezone name is set on the inputEl', () => { + $inputEl.val('Newfoundland'); // eslint-disable-next-line no-new new TimezoneDropdown({ @@ -110,6 +110,23 @@ describe('Timezone Dropdown', function() { expect($wrapper.find(tzDropdownToggleText).html()).toEqual('[UTC - 2.5] Newfoundland'); }); + it('will correctly set the dropdown label by name when the identifiers are the same', () => { + $inputEl.val('Midway Island'); + + // eslint-disable-next-line no-new + new TimezoneDropdown({ + $inputEl, + $dropdownEl, + displayFormat: selectedItem => formatTimezone(selectedItem), + }); + + // Both timezones use Pacific/Midway as their identifier, + expect($wrapper.find(tzDropdownToggleText).html()).toEqual('[UTC - 11] Midway Island'); + expect($wrapper.find(tzDropdownToggleText).html()).not.toEqual( + '[UTC - 11] International Date Line', + ); + }); + it('will call a provided `displayFormat` handler to format the dropdown value', () => { const displayFormat = jasmine.createSpy('displayFormat'); // eslint-disable-next-line no-new @@ -197,7 +214,7 @@ describe('Timezone Dropdown', function() { }); }); - describe('findTimezoneByIdentifier', () => { + describe('findTimezoneByName', () => { const tzList = [ { identifier: 'Asia/Tokyo', @@ -216,29 +233,29 @@ describe('Timezone Dropdown', function() { }, ]; - const identifier = 'Asia/Dhaka'; + const name = 'Dhaka'; it('returns the correct object if the identifier exists', () => { - const res = findTimezoneByIdentifier(tzList, identifier); + const res = findTimezoneByName(tzList, name); expect(res).toBeTruthy(); expect(res).toBe(tzList[2]); }); - it('returns null if it doesnt find the identifier', () => { - const res = findTimezoneByIdentifier(tzList, 'Australia/Melbourne'); + it('returns null if it doesnt find the name', () => { + const res = findTimezoneByName(tzList, 'Melbourne'); expect(res).toBeNull(); }); - it('returns null if there is no identifier given', () => { - expect(findTimezoneByIdentifier(tzList)).toBeNull(); - expect(findTimezoneByIdentifier(tzList, '')).toBeNull(); + it('returns null if there is no name given', () => { + expect(findTimezoneByName(tzList)).toBeNull(); + expect(findTimezoneByName(tzList, '')).toBeNull(); }); it('returns null if there is an empty or invalid array given', () => { - expect(findTimezoneByIdentifier([], identifier)).toBeNull(); - expect(findTimezoneByIdentifier(null, identifier)).toBeNull(); - expect(findTimezoneByIdentifier(undefined, identifier)).toBeNull(); + expect(findTimezoneByName([], name)).toBeNull(); + expect(findTimezoneByName(null, name)).toBeNull(); + expect(findTimezoneByName(undefined, name)).toBeNull(); }); }); }); -- cgit v1.2.1