Move common initialization to beforeEach

Split tests for bad input

Updated description for formatTimezone tests

1 files changed, 83 insertions, 65 deletions

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 353774985a2..d132eb4e859 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
@@ -14,85 +14,86 @@ describe('Timezone Dropdown', function() {
   const tzListSel = '.dropdown-content ul li a.is-active';
 
   describe('Initialize', () => {
-    beforeEach(() => {
-      loadFixtures('pipeline_schedules/edit.html.raw');
-      $wrapper = $('.dropdown');
-      $inputEl = $('#schedule_cron_timezone');
-      $dropdownEl = $('.js-timezone-dropdown');
-    });
-
-    it('can take an $inputEl in the constructor', () => {
-      const tzStr = '[UTC + 5.5] Sri Jayawardenepura';
-      const tzValue = 'Asia/Colombo';
-
-      expect($inputEl.val()).toBe('UTC');
-
-      // eslint-disable-next-line no-new
-      new TimezoneDropdown({ $inputEl, $dropdownEl });
+    describe('with dropdown already loaded', () => {
+      beforeEach(() => {
+        loadFixtures('pipeline_schedules/edit.html.raw');
+        $wrapper = $('.dropdown');
+        $inputEl = $('#schedule_cron_timezone');
+        $dropdownEl = $('.js-timezone-dropdown');
+
+        // eslint-disable-next-line no-new
+        new TimezoneDropdown({
+          $inputEl,
+          $dropdownEl,
+        });
+      });
 
-      $(`${tzListSel}:contains('${tzStr}')`, $wrapper).trigger('click');
+      it('can take an $inputEl in the constructor', () => {
+        const tzStr = '[UTC + 5.5] Sri Jayawardenepura';
+        const tzValue = 'Asia/Colombo';
 
-      const val = $inputEl.val();
+        expect($inputEl.val()).toBe('UTC');
 
-      expect(val).toBe(tzValue);
-      expect(val).not.toBe('UTC');
-    });
+        $(`${tzListSel}:contains('${tzStr}')`, $wrapper).trigger('click');
 
-    it('will populate the list of UTC offsets', () => {
-      expect($wrapper.find(tzListSel).length).toEqual(0);
+        const val = $inputEl.val();
 
-      // eslint-disable-next-line no-new
-      new TimezoneDropdown({
-        $inputEl,
-        $dropdownEl,
+        expect(val).toBe(tzValue);
+        expect(val).not.toBe('UTC');
       });
 
-      expect($wrapper.find(tzListSel).length).toEqual($($dropdownEl).data('data').length);
-    });
+      it('will format data array of timezones into a list of offsets', () => {
+        const data = $dropdownEl.data('data');
+        const formatted = $wrapper.find(tzListSel).text();
 
-    it('will format data array of timezones into a list of offsets', () => {
-      // eslint-disable-next-line no-new
-      new TimezoneDropdown({
-        $inputEl,
-        $dropdownEl,
+        data.forEach(item => {
+          expect(formatted).toContain(formatTimezone(item));
+        });
       });
 
-      const data = $dropdownEl.data('data');
-      const formatted = $wrapper.find(tzListSel).text();
+      it('will default the timezone to UTC', () => {
+        const tz = $inputEl.val();
 
-      data.forEach(item => {
-        expect(formatted).toContain(formatTimezone(item));
+        expect(tz).toBe('UTC');
       });
     });
 
-    it('will call a provided handler when a new timezone is selected', () => {
-      const onSelectTimezone = jasmine.createSpy('onSelectTimezoneMock');
-
-      // eslint-disable-next-line no-new
-      new TimezoneDropdown({
-        $inputEl,
-        $dropdownEl,
-        onSelectTimezone,
+    describe('without dropdown loaded', () => {
+      beforeEach(() => {
+        loadFixtures('pipeline_schedules/edit.html.raw');
+        $wrapper = $('.dropdown');
+        $inputEl = $('#schedule_cron_timezone');
+        $dropdownEl = $('.js-timezone-dropdown');
       });
 
-      $wrapper
-        .find(tzListSel)
-        .first()
-        .trigger('click');
+      it('will populate the list of UTC offsets after the dropdown is loaded', () => {
+        expect($wrapper.find(tzListSel).length).toEqual(0);
 
-      expect(onSelectTimezone).toHaveBeenCalled();
-    });
+        // eslint-disable-next-line no-new
+        new TimezoneDropdown({
+          $inputEl,
+          $dropdownEl,
+        });
 
-    it('will default the timezone to UTC', () => {
-      // eslint-disable-next-line no-new
-      new TimezoneDropdown({
-        $inputEl,
-        $dropdownEl,
+        expect($wrapper.find(tzListSel).length).toEqual($($dropdownEl).data('data').length);
       });
 
-      const tz = $inputEl.val();
-
-      expect(tz).toBe('UTC');
+      it('will call a provided handler when a new timezone is selected', () => {
+        const onSelectTimezone = jasmine.createSpy('onSelectTimezoneMock');
+        // eslint-disable-next-line no-new
+        new TimezoneDropdown({
+          $inputEl,
+          $dropdownEl,
+          onSelectTimezone,
+        });
+
+        $wrapper
+          .find(tzListSel)
+          .first()
+          .trigger('click');
+
+        expect(onSelectTimezone).toHaveBeenCalled();
+      });
     });
   });
 
@@ -106,19 +107,34 @@ describe('Timezone Dropdown', function() {
       expect(formatUtcOffset(49500)).toEqual('+ 13.75');
     });
 
-    it('will return 0 for bad input', () => {
-      ['BLAH', '$%$%', ['an', 'array'], { some: '', object: '' }].forEach(inp => {
-        expect(formatUtcOffset(inp)).toEqual(' 0');
-      });
+    it('will return 0 when given a string', () => {
+      expect(formatUtcOffset('BLAH')).toEqual(' 0');
+      expect(formatUtcOffset('$%$%')).toEqual(' 0');
+    });
+
+    it('will return 0 when given an array', () => {
+      expect(formatUtcOffset(['an', 'array'])).toEqual(' 0');
+    });
+
+    it('will return 0 when given an object', () => {
+      expect(formatUtcOffset({ some: '', object: '' })).toEqual(' 0');
     });
 
-    it('will return 0 for empty input', () => {
+    it('will return 0 when given null', () => {
+      expect(formatUtcOffset(null)).toEqual(' 0');
+    });
+
+    it('will return 0 when given undefined', () => {
+      expect(formatUtcOffset(undefined)).toEqual(' 0');
+    });
+
+    it('will return 0 when given empty input', () => {
       expect(formatUtcOffset('')).toEqual(' 0');
     });
   });
 
   describe('formatTimezone', () => {
-    it('will format a given timezone and offset for display', () => {
+    it('given name: "Chatham Is.", offset: "49500", will format for display as "[UTC + 13.75] Chatham Is."', () => {
       expect(
         formatTimezone({
           name: 'Chatham Is.',
@@ -126,7 +142,9 @@ describe('Timezone Dropdown', function() {
           identifier: 'Pacific/Chatham',
         }),
       ).toEqual('[UTC + 13.75] Chatham Is.');
+    });
 
+    it('given name: "Saskatchewan", offset: "-21600", will format for display as "[UTC - 6] Saskatchewan"', () => {
       expect(
         formatTimezone({
           name: 'Saskatchewan',