1 files changed, 19 insertions, 4 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 6206a0f6aed..3a40ce32a24 100644
--- a/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js
+++ b/spec/frontend/pipeline_editor/components/ui/editor_tab_spec.js
@@ -1,4 +1,4 @@
-import { GlAlert, GlTabs } from '@gitlab/ui';
+import { GlAlert, GlBadge, GlTabs } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import EditorTab from '~/pipeline_editor/components/ui/editor_tab.vue';
@@ -30,10 +30,10 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
     },
     template: `
         <gl-tabs>
-          <editor-tab :title-link-attributes="{ 'data-testid': 'tab1-btn' }" :lazy="true">
+          <editor-tab title="Tab 1" :title-link-attributes="{ 'data-testid': 'tab1-btn' }" :lazy="true">
             <mock-child content="${mockContent1}"/>
           </editor-tab>
-          <editor-tab :title-link-attributes="{ 'data-testid': 'tab2-btn' }" :lazy="true">
+          <editor-tab title="Tab 2" :title-link-attributes="{ 'data-testid': 'tab2-btn' }" :lazy="true" badge-title="NEW">
             <mock-child content="${mockContent2}"/>
           </editor-tab>
         </gl-tabs>
@@ -46,7 +46,10 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
 
   const createWrapper = ({ props } = {}) => {
     wrapper = mount(EditorTab, {
-      propsData: props,
+      propsData: {
+        title: 'Tab 1',
+        ...props,
+      },
       slots: {
         default: MockSourceEditor,
       },
@@ -55,6 +58,7 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
 
   const findSlotComponent = () => wrapper.findComponent(MockSourceEditor);
   const findAlert = () => wrapper.findComponent(GlAlert);
+  const findBadges = () => wrapper.findAll(GlBadge);
 
   beforeEach(() => {
     mockChildMounted = jest.fn();
@@ -182,4 +186,15 @@ describe('~/pipeline_editor/components/ui/editor_tab.vue', () => {
       expect(mockChildMounted).toHaveBeenNthCalledWith(2, mockContent2);
     });
   });
+
+  describe('valid state', () => {
+    beforeEach(() => {
+      createMockedWrapper();
+    });
+
+    it('renders correct number of badges', async () => {
+      expect(findBadges()).toHaveLength(1);
+      expect(findBadges().at(0).text()).toBe('NEW');
+    });
+  });
 });