Converted pipeline_schedules bundles into automatic webpack entriespipeline-schedule-webpack

#41341

2 files changed, 284 insertions, 0 deletions

diff --git a/spec/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js b/spec/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
new file mode 100644
index 00000000000..4655e29eed0
--- /dev/null
+++ b/spec/javascripts/pages/projects/pipeline_schedules/shared/components/interval_pattern_input_spec.js
@@ -0,0 +1,178 @@
+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import IntervalPatternInput from '~/pages/projects/pipeline_schedules/shared/components/interval_pattern_input.vue';
+
+Vue.use(Translate);
+
+const IntervalPatternInputComponent = Vue.extend(IntervalPatternInput);
+const inputNameAttribute = 'schedule[cron]';
+
+const cronIntervalPresets = {
+  everyDay: '0 4 * * *',
+  everyWeek: '0 4 * * 0',
+  everyMonth: '0 4 1 * *',
+};
+
+window.gl = window.gl || {};
+
+window.gl.pipelineScheduleFieldErrors = {
+  updateFormValidityState: () => {},
+};
+
+describe('Interval Pattern Input Component', function () {
+  describe('when prop initialCronInterval is passed (edit)', function () {
+    describe('when prop initialCronInterval is custom', function () {
+      beforeEach(function () {
+        this.initialCronInterval = '1 2 3 4 5';
+        this.intervalPatternComponent = new IntervalPatternInputComponent({
+          propsData: {
+            initialCronInterval: this.initialCronInterval,
+          },
+        }).$mount();
+      });
+
+      it('is initialized as a Vue component', function () {
+        expect(this.intervalPatternComponent).toBeDefined();
+      });
+
+      it('prop initialCronInterval is set', function () {
+        expect(this.intervalPatternComponent.initialCronInterval).toBe(this.initialCronInterval);
+      });
+
+      it('sets isEditable to true', function (done) {
+        Vue.nextTick(() => {
+          expect(this.intervalPatternComponent.isEditable).toBe(true);
+          done();
+        });
+      });
+    });
+
+    describe('when prop initialCronInterval is preset', function () {
+      beforeEach(function () {
+        this.intervalPatternComponent = new IntervalPatternInputComponent({
+          propsData: {
+            inputNameAttribute,
+            initialCronInterval: '0 4 * * *',
+          },
+        }).$mount();
+      });
+
+      it('is initialized as a Vue component', function () {
+        expect(this.intervalPatternComponent).toBeDefined();
+      });
+
+      it('sets isEditable to false', function (done) {
+        Vue.nextTick(() => {
+          expect(this.intervalPatternComponent.isEditable).toBe(false);
+          done();
+        });
+      });
+    });
+  });
+
+  describe('when prop initialCronInterval is not passed (new)', function () {
+    beforeEach(function () {
+      this.intervalPatternComponent = new IntervalPatternInputComponent({
+        propsData: {
+          inputNameAttribute,
+        },
+      }).$mount();
+    });
+
+    it('is initialized as a Vue component', function () {
+      expect(this.intervalPatternComponent).toBeDefined();
+    });
+
+    it('prop initialCronInterval is set', function () {
+      const defaultInitialCronInterval = '';
+      expect(this.intervalPatternComponent.initialCronInterval).toBe(defaultInitialCronInterval);
+    });
+
+    it('sets isEditable to true', function (done) {
+      Vue.nextTick(() => {
+        expect(this.intervalPatternComponent.isEditable).toBe(true);
+        done();
+      });
+    });
+  });
+
+  describe('User Actions', function () {
+    beforeEach(function () {
+      // For an unknown reason, some browsers do not propagate click events
+      // on radio buttons in a way Vue can register. So, we have to mount
+      // to a fixture.
+      setFixtures('<div id="my-mount"></div>');
+
+      this.initialCronInterval = '1 2 3 4 5';
+      this.intervalPatternComponent = new IntervalPatternInputComponent({
+        propsData: {
+          initialCronInterval: this.initialCronInterval,
+        },
+      }).$mount('#my-mount');
+    });
+
+    it('cronInterval is updated when everyday preset interval is selected', function (done) {
+      this.intervalPatternComponent.$el.querySelector('#every-day').click();
+
+      Vue.nextTick(() => {
+        expect(this.intervalPatternComponent.cronInterval).toBe(cronIntervalPresets.everyDay);
+        expect(this.intervalPatternComponent.$el.querySelector('.cron-interval-input').value).toBe(cronIntervalPresets.everyDay);
+        done();
+      });
+    });
+
+    it('cronInterval is updated when everyweek preset interval is selected', function (done) {
+      this.intervalPatternComponent.$el.querySelector('#every-week').click();
+
+      Vue.nextTick(() => {
+        expect(this.intervalPatternComponent.cronInterval).toBe(cronIntervalPresets.everyWeek);
+        expect(this.intervalPatternComponent.$el.querySelector('.cron-interval-input').value).toBe(cronIntervalPresets.everyWeek);
+
+        done();
+      });
+    });
+
+    it('cronInterval is updated when everymonth preset interval is selected', function (done) {
+      this.intervalPatternComponent.$el.querySelector('#every-month').click();
+
+      Vue.nextTick(() => {
+        expect(this.intervalPatternComponent.cronInterval).toBe(cronIntervalPresets.everyMonth);
+        expect(this.intervalPatternComponent.$el.querySelector('.cron-interval-input').value).toBe(cronIntervalPresets.everyMonth);
+        done();
+      });
+    });
+
+    it('only a space is added to cronInterval (trimmed later) when custom radio is selected', function (done) {
+      this.intervalPatternComponent.$el.querySelector('#every-month').click();
+      this.intervalPatternComponent.$el.querySelector('#custom').click();
+
+      Vue.nextTick(() => {
+        const intervalWithSpaceAppended = `${cronIntervalPresets.everyMonth} `;
+        expect(this.intervalPatternComponent.cronInterval).toBe(intervalWithSpaceAppended);
+        expect(this.intervalPatternComponent.$el.querySelector('.cron-interval-input').value).toBe(intervalWithSpaceAppended);
+        done();
+      });
+    });
+
+    it('text input is disabled when preset interval is selected', function (done) {
+      this.intervalPatternComponent.$el.querySelector('#every-month').click();
+
+      Vue.nextTick(() => {
+        expect(this.intervalPatternComponent.isEditable).toBe(false);
+        expect(this.intervalPatternComponent.$el.querySelector('.cron-interval-input').disabled).toBe(true);
+        done();
+      });
+    });
+
+    it('text input is enabled when custom is selected', function (done) {
+      this.intervalPatternComponent.$el.querySelector('#every-month').click();
+      this.intervalPatternComponent.$el.querySelector('#custom').click();
+
+      Vue.nextTick(() => {
+        expect(this.intervalPatternComponent.isEditable).toBe(true);
+        expect(this.intervalPatternComponent.$el.querySelector('.cron-interval-input').disabled).toBe(false);
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js b/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
new file mode 100644
index 00000000000..f95a7cef18a
--- /dev/null
+++ b/spec/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js
@@ -0,0 +1,106 @@
+import Vue from 'vue';
+import Cookies from 'js-cookie';
+import PipelineSchedulesCallout from '~/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue';
+
+const PipelineSchedulesCalloutComponent = Vue.extend(PipelineSchedulesCallout);
+const cookieKey = 'pipeline_schedules_callout_dismissed';
+const docsUrl = 'help/ci/scheduled_pipelines';
+
+describe('Pipeline Schedule Callout', () => {
+  beforeEach(() => {
+    setFixtures(`
+      <div id='pipeline-schedules-callout' data-docs-url=${docsUrl}></div>
+    `);
+  });
+
+  describe('independent of cookies', () => {
+    beforeEach(() => {
+      this.calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
+    });
+
+    it('the component can be initialized', () => {
+      expect(this.calloutComponent).toBeDefined();
+    });
+
+    it('correctly sets illustrationSvg', () => {
+      expect(this.calloutComponent.illustrationSvg).toContain('<svg');
+    });
+
+    it('correctly sets docsUrl', () => {
+      expect(this.calloutComponent.docsUrl).toContain(docsUrl);
+    });
+  });
+
+  describe(`when ${cookieKey} cookie is set`, () => {
+    beforeEach(() => {
+      Cookies.set(cookieKey, true);
+      this.calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
+    });
+
+    it('correctly sets calloutDismissed to true', () => {
+      expect(this.calloutComponent.calloutDismissed).toBe(true);
+    });
+
+    it('does not render the callout', () => {
+      expect(this.calloutComponent.$el.childNodes.length).toBe(0);
+    });
+  });
+
+  describe('when cookie is not set', () => {
+    beforeEach(() => {
+      Cookies.remove(cookieKey);
+      this.calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
+    });
+
+    it('correctly sets calloutDismissed to false', () => {
+      expect(this.calloutComponent.calloutDismissed).toBe(false);
+    });
+
+    it('renders the callout container', () => {
+      expect(this.calloutComponent.$el.querySelector('.bordered-box')).not.toBeNull();
+    });
+
+    it('renders the callout svg', () => {
+      expect(this.calloutComponent.$el.outerHTML).toContain('<svg');
+    });
+
+    it('renders the callout title', () => {
+      expect(this.calloutComponent.$el.outerHTML).toContain('Scheduling Pipelines');
+    });
+
+    it('renders the callout text', () => {
+      expect(this.calloutComponent.$el.outerHTML).toContain('runs pipelines in the future');
+    });
+
+    it('renders the documentation url', () => {
+      expect(this.calloutComponent.$el.outerHTML).toContain(docsUrl);
+    });
+
+    it('updates calloutDismissed when close button is clicked', (done) => {
+      this.calloutComponent.$el.querySelector('#dismiss-callout-btn').click();
+
+      Vue.nextTick(() => {
+        expect(this.calloutComponent.calloutDismissed).toBe(true);
+        done();
+      });
+    });
+
+    it('#dismissCallout updates calloutDismissed', (done) => {
+      this.calloutComponent.dismissCallout();
+
+      Vue.nextTick(() => {
+        expect(this.calloutComponent.calloutDismissed).toBe(true);
+        done();
+      });
+    });
+
+    it('is hidden when close button is clicked', (done) => {
+      this.calloutComponent.$el.querySelector('#dismiss-callout-btn').click();
+
+      Vue.nextTick(() => {
+        expect(this.calloutComponent.$el.childNodes.length).toBe(0);
+        done();
+      });
+    });
+  });
+});