Move constant values to props

Constant values like URLs and image URLs does not
need to be reactive. For performance reasons we should
move them to props.

app/assets/javascripts/pages/projects/pipeline_schedules/index/index.js

 import Vue from 'vue';
 import PipelineSchedulesCallout from '../shared/components/pipeline_schedules_callout.vue';
 
-document.addEventListener(
-  'DOMContentLoaded',
-  () =>
-    new Vue({
-      el: '#pipeline-schedules-callout',
-      components: {
-        'pipeline-schedules-callout': PipelineSchedulesCallout,
-      },
-      render(createElement) {
-        return createElement('pipeline-schedules-callout');
-      },
-    }),
-);
+document.addEventListener('DOMContentLoaded', () => {
+  const el = document.getElementById('pipeline-schedules-callout');
+
+  if (!el) {
+    return;
+  }
+
+  const { docsUrl, illustrationUrl } = el.dataset;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    render(createElement) {
+      return createElement(PipelineSchedulesCallout);
+    },
+    provide: {
+      docsUrl,
+      illustrationUrl,
+    },
+  });
+});

app/assets/javascripts/pages/projects/pipeline_schedules/shared/components/pipeline_schedules_callout.vue

@@ -14,10 +14,9 @@ export default {
   components: {
     GlButton,
   },
+  inject: ['docsUrl', 'illustrationUrl'],
   data() {
     return {
-      docsUrl: document.getElementById('pipeline-schedules-callout').dataset.docsUrl,
-      imageUrl: document.getElementById('pipeline-schedules-callout').dataset.imageUrl,
       calloutDismissed: parseBoolean(Cookies.get(cookieKey)),
     };
   },
@@ -31,7 +30,7 @@ export default {
 </script>
 <template>
   <div v-if="!calloutDismissed" class="pipeline-schedules-user-callout user-callout">
-    <div class="bordered-box landing content-block">
+    <div class="bordered-box landing content-block" data-testid="innerContent">
       <gl-button
         category="tertiary"
         icon="close"
@@ -39,8 +38,8 @@ export default {
         class="gl-absolute gl-top-2 gl-right-2"
         @click="dismissCallout"
       />
-      <div class="svg-container">
-        <img :src="imageUrl" />
+      <div class="svg-content">
+        <img :src="illustrationUrl" />
       </div>
       <div class="user-callout-copy">
         <h4>{{ __('Scheduling Pipelines') }}</h4>

app/views/projects/pipeline_schedules/index.html.haml

@@ -2,7 +2,7 @@
 - page_title _("Pipeline Schedules")
 - add_page_specific_style 'page_bundles/pipeline_schedules'
 
-#pipeline-schedules-callout{ data: { docs_url: help_page_path('ci/pipelines/schedules'), image_url: image_path('illustrations/pipeline_schedule_callout.svg') } }
+#pipeline-schedules-callout{ data: { docs_url: help_page_path('ci/pipelines/schedules'), illustration_url: image_path('illustrations/pipeline_schedule_callout.svg') } }
 .top-area
   - schedule_path_proc = ->(scope) { pipeline_schedules_path(@project, scope: scope) }
   = render "tabs", schedule_path_proc: schedule_path_proc, all_schedules: @all_schedules, scope: @scope

spec/frontend/pages/projects/pipeline_schedules/shared/components/pipeline_schedule_callout_spec.js

-import Vue from 'vue';
+import { shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import Cookies from 'js-cookie';
-import { getByRole } from '@testing-library/dom';
 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';
-const imageUrl = 'pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg';
+const illustrationUrl = 'pages/projects/pipeline_schedules/shared/icons/intro_illustration.svg';
 
 describe('Pipeline Schedule Callout', () => {
-  let calloutComponent;
+  let wrapper;
 
-  beforeEach(() => {
-    setFixtures(`
-      <div id='pipeline-schedules-callout' data-docs-url=${docsUrl} data-image-url=${imageUrl}></div>
-    `);
-  });
-
-  describe('independent of cookies', () => {
-    beforeEach(() => {
-      calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
-    });
-
-    it('the component can be initialized', () => {
-      expect(calloutComponent).toBeDefined();
+  const createComponent = () => {
+    wrapper = shallowMount(PipelineSchedulesCallout, {
+      provide: {
+        docsUrl,
+        illustrationUrl,
+      },
     });
+  };
 
-    it('correctly sets docsUrl', () => {
-      expect(calloutComponent.docsUrl).toContain(docsUrl);
-    });
-
-    it('correctly sets imageUrl', () => {
-      expect(calloutComponent.imageUrl).toContain(imageUrl);
-    });
-  });
+  const findInnerContentOfCallout = () => wrapper.find('[data-testid="innerContent"]');
+  const findDismissCalloutBtn = () => wrapper.find(GlButton);
 
   describe(`when ${cookieKey} cookie is set`, () => {
-    beforeEach(() => {
+    beforeEach(async () => {
       Cookies.set(cookieKey, true);
-      calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
+      createComponent();
+
+      await wrapper.vm.$nextTick();
     });
 
-    it('correctly sets calloutDismissed to true', () => {
-      expect(calloutComponent.calloutDismissed).toBe(true);
+    afterEach(() => {
+      wrapper.destroy();
     });
 
     it('does not render the callout', () => {
-      expect(calloutComponent.$el.childNodes.length).toBe(0);
+      expect(findInnerContentOfCallout().exists()).toBe(false);
     });
   });
 
   describe('when cookie is not set', () => {
     beforeEach(() => {
       Cookies.remove(cookieKey);
-      calloutComponent = new PipelineSchedulesCalloutComponent().$mount();
+      createComponent();
     });
 
-    it('correctly sets calloutDismissed to false', () => {
-      expect(calloutComponent.calloutDismissed).toBe(false);
+    afterEach(() => {
+      wrapper.destroy();
     });
 
     it('renders the callout container', () => {
-      expect(calloutComponent.$el.querySelector('.bordered-box')).not.toBeNull();
-    });
-
-    it('renders the callout img', () => {
-      expect(calloutComponent.$el.outerHTML).toContain('<img');
+      expect(findInnerContentOfCallout().exists()).toBe(true);
     });
 
     it('renders the callout title', () => {
-      expect(calloutComponent.$el.outerHTML).toContain('Scheduling Pipelines');
+      expect(wrapper.find('h4').text()).toBe('Scheduling Pipelines');
     });
 
     it('renders the callout text', () => {
-      expect(calloutComponent.$el.outerHTML).toContain('runs pipelines in the future');
+      expect(wrapper.find('p').text()).toContain('runs pipelines in the future');
     });
 
     it('renders the documentation url', () => {
-      expect(calloutComponent.$el.outerHTML).toContain(docsUrl);
+      expect(wrapper.find('a').attributes('href')).toBe(docsUrl);
     });
 
-    it('updates calloutDismissed when close button is clicked', done => {
-      getByRole(calloutComponent.$el, 'button', /dismiss/i).click();
+    describe('methods', () => {
+      it('#dismissCallout sets calloutDismissed to true', async () => {
+        expect(wrapper.vm.calloutDismissed).toBe(false);
+
+        findDismissCalloutBtn().vm.$emit('click');
+
+        await wrapper.vm.$nextTick();
 
-      Vue.nextTick(() => {
-        expect(calloutComponent.calloutDismissed).toBe(true);
-        done();
+        expect(findInnerContentOfCallout().exists()).toBe(false);
       });
-    });
 
-    it('#dismissCallout updates calloutDismissed', done => {
-      calloutComponent.dismissCallout();
+      it('sets cookie on dismiss', () => {
+        const setCookiesSpy = jest.spyOn(Cookies, 'set');
+
+        findDismissCalloutBtn().vm.$emit('click');
 
-      Vue.nextTick(() => {
-        expect(calloutComponent.calloutDismissed).toBe(true);
-        done();
+        expect(setCookiesSpy).toHaveBeenCalledWith('pipeline_schedules_callout_dismissed', true, {
+          expires: 365,
+        });
       });
     });
 
-    it('is hidden when close button is clicked', done => {
-      getByRole(calloutComponent.$el, 'button', /dismiss/i).click();
+    it('is hidden when close button is clicked', async () => {
+      findDismissCalloutBtn().vm.$emit('click');
 
-      Vue.nextTick(() => {
-        expect(calloutComponent.$el.childNodes.length).toBe(0);
-        done();
-      });
+      await wrapper.vm.$nextTick();
+
+      expect(findInnerContentOfCallout().exists()).toBe(false);
     });
   });
 });