1 files changed, 51 insertions, 6 deletions

diff --git a/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js
index 291468c5229..8def83d578b 100644
--- a/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js
+++ b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js
@@ -1,12 +1,15 @@
-import { GlTabs } from '@gitlab/ui';
+import { GlAlert, GlTabs } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
-
 import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
 
 const mockContent1 = 'MOCK CONTENT 1';
 const mockContent2 = 'MOCK CONTENT 2';
 
+const MockEditorLite = {
+  template: '<div>EDITOR</div>',
+};
+
 describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
   let wrapper;
   let mockChildMounted = jest.fn();
@@ -37,22 +40,34 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
       `,
   };
 
-  const createWrapper = () => {
+  const createMockedWrapper = () => {
     wrapper = mount(MockTabbedContent);
   };
 
+  const createWrapper = ({ props } = {}) => {
+    wrapper = mount(EditorTab, {
+      propsData: props,
+      slots: {
+        default: MockEditorLite,
+      },
+    });
+  };
+
+  const findSlotComponent = () => wrapper.findComponent(MockEditorLite);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+
   beforeEach(() => {
     mockChildMounted = jest.fn();
   });
 
   it('tabs are mounted lazily', async () => {
-    createWrapper();
+    createMockedWrapper();
 
     expect(mockChildMounted).toHaveBeenCalledTimes(0);
   });
 
   it('first tab is only mounted after nextTick', async () => {
-    createWrapper();
+    createMockedWrapper();
 
     await nextTick();
 
@@ -60,6 +75,36 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
     expect(mockChildMounted).toHaveBeenCalledWith(mockContent1);
   });
 
+  describe('showing the tab content depending on `isEmpty` and `isInvalid`', () => {
+    it.each`
+      isEmpty      | isInvalid    | showSlotComponent | text
+      ${undefined} | ${undefined} | ${true}           | ${'renders'}
+      ${false}     | ${false}     | ${true}           | ${'renders'}
+      ${undefined} | ${true}      | ${false}          | ${'hides'}
+      ${true}      | ${false}     | ${false}          | ${'hides'}
+      ${false}     | ${true}      | ${false}          | ${'hides'}
+    `(
+      '$text the slot component when isEmpty:$isEmpty and isInvalid:$isInvalid',
+      ({ isEmpty, isInvalid, showSlotComponent }) => {
+        createWrapper({
+          props: { isEmpty, isInvalid },
+        });
+        expect(findSlotComponent().exists()).toBe(showSlotComponent);
+        expect(findAlert().exists()).toBe(!showSlotComponent);
+      },
+    );
+
+    it('can have a custom empty message', () => {
+      const text = 'my custom alert message';
+      createWrapper({ props: { isEmpty: true, emptyMessage: text } });
+
+      const alert = findAlert();
+
+      expect(alert.exists()).toBe(true);
+      expect(alert.text()).toBe(text);
+    });
+  });
+
   describe('user interaction', () => {
     const clickTab = async (testid) => {
       wrapper.find(`[data-testid="${testid}"]`).trigger('click');
@@ -67,7 +112,7 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
     };
 
     beforeEach(() => {
-      createWrapper();
+      createMockedWrapper();
     });
 
     it('mounts a tab once after selecting it', async () => {