1 files changed, 19 insertions, 1 deletions
diff --git a/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js b/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
index 327f6d81905..d59c3184e4e 100644
--- a/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
+++ b/spec/frontend/packages_and_registries/package_registry/components/details/package_title_spec.js
@@ -1,5 +1,6 @@
 import { GlIcon, GlSprintf } from '@gitlab/ui';
 import { GlBreakpointInstance } from '@gitlab/ui/dist/utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import PackageTags from '~/packages/shared/components/package_tags.vue';
 import PackageTitle from '~/packages_and_registries/package_registry/components/details/package_title.vue';
@@ -30,6 +31,9 @@ describe('PackageTitle', () => {
         TitleArea,
         GlSprintf,
       },
+      directives: {
+        GlResizeObserver: createMockDirective(),
+      },
     });
     return wrapper.vm.$nextTick();
   }
@@ -51,7 +55,7 @@ describe('PackageTitle', () => {
 
   describe('renders', () => {
     it('without tags', async () => {
-      await createComponent();
+      await createComponent({ ...packageData(), packageFiles: { nodes: packageFiles() } });
 
       expect(wrapper.element).toMatchSnapshot();
     });
@@ -64,12 +68,26 @@ describe('PackageTitle', () => {
 
     it('with tags on mobile', async () => {
       jest.spyOn(GlBreakpointInstance, 'isDesktop').mockReturnValue(false);
+
       await createComponent();
 
       await wrapper.vm.$nextTick();
 
       expect(findPackageBadges()).toHaveLength(packageTags().length);
     });
+
+    it('when the page is resized', async () => {
+      await createComponent();
+
+      expect(findPackageBadges()).toHaveLength(0);
+
+      jest.spyOn(GlBreakpointInstance, 'isDesktop').mockReturnValue(false);
+      const { value } = getBinding(wrapper.element, 'gl-resize-observer');
+      value();
+
+      await wrapper.vm.$nextTick();
+      expect(findPackageBadges()).toHaveLength(packageTags().length);
+    });
   });
 
   describe('package title', () => {