Add more specs to cover all logic

Make sure badge count is rendered properly when
value is null / present.

spec/frontend/integrations/overrides/components/integration_overrides_spec.js

@@ -5,6 +5,8 @@ import MockAdapter from 'axios-mock-adapter';
 import waitForPromises from 'helpers/wait_for_promises';
 import { DEFAULT_PER_PAGE } from '~/api';
 import IntegrationOverrides from '~/integrations/overrides/components/integration_overrides.vue';
+import IntegrationTabs from '~/integrations/overrides/components/integration_tabs.vue';
+
 import axios from '~/lib/utils/axios_utils';
 import httpStatus from '~/lib/utils/http_status';
 import ProjectAvatar from '~/vue_shared/components/project_avatar.vue';
@@ -49,6 +51,7 @@ describe('IntegrationOverrides', () => {
 
   const findGlTable = () => wrapper.findComponent(GlTable);
   const findPagination = () => wrapper.findComponent(GlPagination);
+  const findIntegrationTabs = () => wrapper.findComponent(IntegrationTabs);
   const findRowsAsModel = () =>
     findGlTable()
       .findAllComponents(GlLink)
@@ -72,6 +75,12 @@ describe('IntegrationOverrides', () => {
       expect(table.exists()).toBe(true);
       expect(table.attributes('busy')).toBe('true');
     });
+
+    it('renders IntegrationTabs with count as `null`', () => {
+      createComponent();
+
+      expect(findIntegrationTabs().props('projectOverridesCount')).toBe(null);
+    });
   });
 
   describe('when initial request is successful', () => {
@@ -84,6 +93,13 @@ describe('IntegrationOverrides', () => {
       expect(table.attributes('busy')).toBeFalsy();
     });
 
+    it('renders IntegrationTabs with count', async () => {
+      createComponent();
+      await waitForPromises();
+
+      expect(findIntegrationTabs().props('projectOverridesCount')).toBe(mockOverrides.length);
+    });
+
     describe('table template', () => {
       beforeEach(async () => {
         createComponent({ mountFn: mount });

spec/frontend/integrations/overrides/components/integration_tabs_spec.js

 import { mount, shallowMount } from '@vue/test-utils';
-import { GlTab } from '@gitlab/ui';
+import { GlBadge, GlTab } from '@gitlab/ui';
 
 import IntegrationTabs from '~/integrations/overrides/components/integration_tabs.vue';
 import { settingsTabTitle, overridesTabTitle } from '~/integrations/constants';
@@ -25,6 +25,7 @@ describe('IntegrationTabs', () => {
     wrapper.destroy();
   });
 
+  const findGlBadge = () => wrapper.findComponent(GlBadge);
   const findGlTab = () => wrapper.findComponent(GlTab);
   const findSettingsLink = () => wrapper.find('a');
 
@@ -47,6 +48,17 @@ describe('IntegrationTabs', () => {
       expect(findGlTab().text()).toMatchInterpolatedText(
         `${overridesTabTitle} ${projectOverridesCount}`,
       );
+      expect(findGlBadge().text()).toBe(projectOverridesCount);
+    });
+
+    describe('when count is `null', () => {
+      it('renders "Projects using custom settings" tab without count', () => {
+        createComponent();
+
+        expect(findGlTab().exists()).toBe(true);
+        expect(findGlTab().text()).toMatchInterpolatedText(overridesTabTitle);
+        expect(findGlBadge().exists()).toBe(false);
+      });
     });
   });
 });