diff options
Diffstat (limited to 'spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js')
-rw-r--r-- | spec/frontend/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js | 154 |
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); + }); + }); +}); |