1 files changed, 154 insertions, 0 deletions
diff --git a/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js b/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
new file mode 100644
index 00000000000..9cc1d6eeb5a
--- /dev/null
+++ b/spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
@@ -0,0 +1,154 @@
+import { shallowMount } from '@vue/test-utils';
+import IntervalPatternInput from '~/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue';
+
+describe('Interval Pattern Input Component', () => {
+  let oldWindowGl;
+  let wrapper;
+
+  const mockHour = 4;
+  const mockWeekDayIndex = 1;
+  const mockDay = 1;
+
+  const cronIntervalPresets = {
+    everyDay: `0 ${mockHour} * * *`,
+    everyWeek: `0 ${mockHour} * * ${mockWeekDayIndex}`,
+    everyMonth: `0 ${mockHour} ${mockDay} * *`,
+  };
+
+  const findEveryDayRadio = () => wrapper.find('#every-day');
+  const findEveryWeekRadio = () => wrapper.find('#every-week');
+  const findEveryMonthRadio = () => wrapper.find('#every-month');
+  const findCustomRadio = () => wrapper.find('#custom');
+  const findCustomInput = () => wrapper.find('#schedule_cron');
+  const selectEveryDayRadio = () => findEveryDayRadio().setChecked();
+  const selectEveryWeekRadio = () => findEveryWeekRadio().setChecked();
+  const selectEveryMonthRadio = () => findEveryMonthRadio().setChecked();
+  const selectCustomRadio = () => findCustomRadio().trigger('click');
+
+  const createWrapper = (props = {}, data = {}) => {
+    if (wrapper) {
+      throw new Error('A wrapper already exists');
+    }
+
+    wrapper = shallowMount(IntervalPatternInput, {
+      propsData: { ...props },
+      data() {
+        return {
+          randomHour: data?.hour || mockHour,
+          randomWeekDayIndex: mockWeekDayIndex,
+          randomDay: mockDay,
+        };
+      },
+    });
+  };
+
+  beforeEach(() => {
+    oldWindowGl = window.gl;
+    window.gl = {
+      ...(window.gl || {}),
+      pipelineScheduleFieldErrors: {
+        updateFormValidityState: jest.fn(),
+      },
+    };
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    window.gl = oldWindowGl;
+  });
+
+  describe('the input field defaults', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('to a non empty string when no initial value is not passed', () => {
+      expect(findCustomInput()).not.toBe('');
+    });
+  });
+
+  describe('the input field', () => {
+    const initialCron = '0 * * * *';
+
+    beforeEach(() => {
+      createWrapper({ initialCronInterval: initialCron });
+    });
+
+    it('is equal to the prop `initialCronInterval` when passed', () => {
+      expect(findCustomInput().element.value).toBe(initialCron);
+    });
+  });
+
+  describe('The input field is enabled', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('when a default option is selected', () => {
+      selectEveryDayRadio();
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findCustomInput().attributes('disabled')).toBeUndefined();
+      });
+    });
+
+    it('when the custom option is selected', () => {
+      selectCustomRadio();
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findCustomInput().attributes('disabled')).toBeUndefined();
+      });
+    });
+  });
+
+  describe('formattedTime computed property', () => {
+    it.each`
+      desc                                                                                 | hour  | expectedValue
+      ${'returns a time in the afternoon if the value of `random time` is higher than 12'} | ${13} | ${'1:00pm'}
+      ${'returns a time in the morning if the value of `random time` is lower than 12'}    | ${11} | ${'11:00am'}
+      ${'returns "12:00pm" if the value of `random time` is exactly 12'}                   | ${12} | ${'12:00pm'}
+    `('$desc', ({ hour, expectedValue }) => {
+      createWrapper({}, { hour });
+
+      expect(wrapper.vm.formattedTime).toBe(expectedValue);
+    });
+  });
+
+  describe('User Actions with radio buttons', () => {
+    it.each`
+      desc                                             | initialCronInterval               | act                      | expectedValue
+      ${'when everyday is selected, update value'}     | ${'1 2 3 4 5'}                    | ${selectEveryDayRadio}   | ${cronIntervalPresets.everyDay}
+      ${'when everyweek is selected, update value'}    | ${'1 2 3 4 5'}                    | ${selectEveryWeekRadio}  | ${cronIntervalPresets.everyWeek}
+      ${'when everymonth is selected, update value'}   | ${'1 2 3 4 5'}                    | ${selectEveryMonthRadio} | ${cronIntervalPresets.everyMonth}
+      ${'when custom is selected, add space to value'} | ${cronIntervalPresets.everyMonth} | ${selectCustomRadio}     | ${`${cronIntervalPresets.everyMonth} `}
+    `('$desc', ({ initialCronInterval, act, expectedValue }) => {
+      createWrapper({ initialCronInterval });
+
+      act();
+
+      return wrapper.vm.$nextTick().then(() => {
+        expect(findCustomInput().element.value).toBe(expectedValue);
+      });
+    });
+  });
+  describe('User actions with input field for Cron syntax', () => {
+    beforeEach(() => {
+      createWrapper();
+    });
+
+    it('when editing the cron input it selects the custom radio button', () => {
+      const newValue = '0 * * * *';
+
+      findCustomInput().setValue(newValue);
+
+      expect(wrapper.vm.cronInterval).toBe(newValue);
+    });
+
+    it('when value of input is one of the defaults, it selects the corresponding radio button', () => {
+      findCustomInput().setValue(cronIntervalPresets.everyWeek);
+
+      expect(wrapper.vm.cronInterval).toBe(cronIntervalPresets.everyWeek);
+    });
+  });
+});