1 files changed, 25 insertions, 38 deletions

diff --git a/spec/frontend/ci/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js b/spec/frontend/ci/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
index e636a89c6d9..4bb6a60a141 100644
--- a/spec/frontend/ci/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
+++ b/spec/frontend/ci/pipeline_editor/components/ui/pipeline_editor_empty_state_spec.js
@@ -1,27 +1,27 @@
-import { GlButton, GlSprintf } from '@gitlab/ui';
+import { GlButton, GlSprintf, GlEmptyState } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import PipelineEditorFileNav from '~/ci/pipeline_editor/components/file_nav/pipeline_editor_file_nav.vue';
 import PipelineEditorEmptyState from '~/ci/pipeline_editor/components/ui/pipeline_editor_empty_state.vue';
 
+const emptyStateIllustrationPath = 'illustrations/empty-state/empty-pipeline-md.svg';
+
 describe('Pipeline editor empty state', () => {
   let wrapper;
   const defaultProvide = {
-    emptyStateIllustrationPath: 'my/svg/path',
+    emptyStateIllustrationPath,
     usesExternalConfig: false,
   };
 
   const createComponent = ({ provide } = {}) => {
     wrapper = shallowMount(PipelineEditorEmptyState, {
       provide: { ...defaultProvide, ...provide },
+      stubs: { GlSprintf },
     });
   };
 
   const findFileNav = () => wrapper.findComponent(PipelineEditorFileNav);
-  const findSvgImage = () => wrapper.find('img');
-  const findTitle = () => wrapper.find('h1');
-  const findExternalCiInstructions = () => wrapper.find('p');
-  const findConfirmButton = () => wrapper.findComponent(GlButton);
-  const findDescription = () => wrapper.findComponent(GlSprintf);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
+  const findConfirmButton = () => findEmptyState().findComponent(GlButton);
 
   describe('when project uses an external CI config', () => {
     beforeEach(() => {
@@ -30,22 +30,13 @@ describe('Pipeline editor empty state', () => {
       });
     });
 
-    it('renders an svg image', () => {
-      expect(findSvgImage().exists()).toBe(true);
-    });
-
-    it('renders the correct title and instructions', () => {
-      expect(findTitle().exists()).toBe(true);
-      expect(findExternalCiInstructions().exists()).toBe(true);
-
-      expect(findExternalCiInstructions().html()).toContain(
-        wrapper.vm.$options.i18n.externalCiInstructions,
-      );
-      expect(findTitle().text()).toBe(wrapper.vm.$options.i18n.externalCiNote);
-    });
-
-    it('does not render the CTA button', () => {
-      expect(findConfirmButton().exists()).toBe(false);
+    it('renders an empty state', () => {
+      expect(findEmptyState().props()).toMatchObject({
+        description: wrapper.vm.$options.i18n.externalCiInstructions,
+        primaryButtonText: null,
+        svgPath: emptyStateIllustrationPath,
+        title: "This project's pipeline configuration is located outside this repository",
+      });
     });
   });
 
@@ -54,27 +45,23 @@ describe('Pipeline editor empty state', () => {
       createComponent();
     });
 
-    it('renders an svg image', () => {
-      expect(findSvgImage().exists()).toBe(true);
+    it('renders the file nav', () => {
+      expect(findFileNav().exists()).toBe(true);
     });
 
-    it('renders a title', () => {
-      expect(findTitle().exists()).toBe(true);
-      expect(findTitle().text()).toBe(wrapper.vm.$options.i18n.title);
+    it('renders an empty state', () => {
+      expect(findEmptyState().exists()).toBe(true);
     });
 
-    it('renders a description', () => {
-      expect(findDescription().exists()).toBe(true);
-      expect(findDescription().html()).toContain(wrapper.vm.$options.i18n.body);
+    it('renders correct title and illustration', () => {
+      expect(findEmptyState().props('svgPath')).toBe(emptyStateIllustrationPath);
+      expect(findEmptyState().props('title')).toBe('Optimize your workflow with CI/CD Pipelines');
     });
 
-    it('renders the file nav', () => {
-      expect(findFileNav().exists()).toBe(true);
-    });
-
-    it('renders a CTA button', () => {
-      expect(findConfirmButton().exists()).toBe(true);
-      expect(findConfirmButton().text()).toBe(wrapper.vm.$options.i18n.btnText);
+    it('renders the correct instructions', () => {
+      expect(findEmptyState().text()).toContain(
+        'Create a new .gitlab-ci.yml file at the root of the repository to get started.',
+      );
     });
 
     it('emits an event when clicking on the CTA', async () => {