1 files changed, 111 insertions, 0 deletions
diff --git a/spec/frontend/pipelines/pipelines_ci_templates_spec.js b/spec/frontend/pipelines/pipelines_ci_templates_spec.js
new file mode 100644
index 00000000000..d4cf6027ff7
--- /dev/null
+++ b/spec/frontend/pipelines/pipelines_ci_templates_spec.js
@@ -0,0 +1,111 @@
+import { shallowMount } from '@vue/test-utils';
+import ExperimentTracking from '~/experimentation/experiment_tracking';
+import PipelinesCiTemplate from '~/pipelines/components/pipelines_list/pipelines_ci_templates.vue';
+
+const addCiYmlPath = "/-/new/master?commit_message='Add%20.gitlab-ci.yml'";
+const suggestedCiTemplates = [
+  { name: 'Android', logo: '/assets/illustrations/logos/android.svg' },
+  { name: 'Bash', logo: '/assets/illustrations/logos/bash.svg' },
+  { name: 'C++', logo: '/assets/illustrations/logos/c_plus_plus.svg' },
+];
+
+jest.mock('~/experimentation/experiment_tracking');
+
+describe('Pipelines CI Templates', () => {
+  let wrapper;
+
+  const GlEmoji = { template: '<img/>' };
+
+  const createWrapper = () => {
+    return shallowMount(PipelinesCiTemplate, {
+      provide: {
+        addCiYmlPath,
+        suggestedCiTemplates,
+      },
+      stubs: {
+        GlEmoji,
+      },
+    });
+  };
+
+  const findTestTemplateLinks = () => wrapper.findAll('[data-testid="test-template-link"]');
+  const findTemplateDescriptions = () => wrapper.findAll('[data-testid="template-description"]');
+  const findTemplateLinks = () => wrapper.findAll('[data-testid="template-link"]');
+  const findTemplateNames = () => wrapper.findAll('[data-testid="template-name"]');
+  const findTemplateLogos = () => wrapper.findAll('[data-testid="template-logo"]');
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('renders test template', () => {
+    beforeEach(() => {
+      wrapper = createWrapper();
+    });
+
+    it('links to the hello world template', () => {
+      expect(findTestTemplateLinks().at(0).attributes('href')).toBe(
+        addCiYmlPath.concat('&template=Hello-World'),
+      );
+    });
+  });
+
+  describe('renders template list', () => {
+    beforeEach(() => {
+      wrapper = createWrapper();
+    });
+
+    it('renders all suggested templates', () => {
+      const content = wrapper.text();
+
+      expect(content).toContain('Android', 'Bash', 'C++');
+    });
+
+    it('has the correct template name', () => {
+      expect(findTemplateNames().at(0).text()).toBe('Android');
+    });
+
+    it('links to the correct template', () => {
+      expect(findTemplateLinks().at(0).attributes('href')).toBe(
+        addCiYmlPath.concat('&template=Android'),
+      );
+    });
+
+    it('has the description of the template', () => {
+      expect(findTemplateDescriptions().at(0).text()).toBe(
+        'CI/CD template to test and deploy your Android project.',
+      );
+    });
+
+    it('has the right logo of the template', () => {
+      expect(findTemplateLogos().at(0).attributes('src')).toBe(
+        '/assets/illustrations/logos/android.svg',
+      );
+    });
+  });
+
+  describe('tracking', () => {
+    beforeEach(() => {
+      wrapper = createWrapper();
+    });
+
+    it('sends an event when template is clicked', () => {
+      findTemplateLinks().at(0).vm.$emit('click');
+
+      expect(ExperimentTracking).toHaveBeenCalledWith('pipeline_empty_state_templates', {
+        label: 'Android',
+      });
+      expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith('template_clicked');
+    });
+
+    it('sends an event when Hello-World template is clicked', () => {
+      findTestTemplateLinks().at(0).vm.$emit('click');
+
+      expect(ExperimentTracking).toHaveBeenCalledWith('pipeline_empty_state_templates', {
+        label: 'Hello-World',
+      });
+      expect(ExperimentTracking.prototype.event).toHaveBeenCalledWith('template_clicked');
+    });
+  });
+});