1 files changed, 49 insertions, 0 deletions
diff --git a/spec/frontend/registry/explorer/components/details_page/tags_loader_spec.js b/spec/frontend/registry/explorer/components/details_page/tags_loader_spec.js
new file mode 100644
index 00000000000..b27d3e2c042
--- /dev/null
+++ b/spec/frontend/registry/explorer/components/details_page/tags_loader_spec.js
@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils';
+import component from '~/registry/explorer/components/details_page/tags_loader.vue';
+import { GlSkeletonLoader } from '../../stubs';
+
+describe('TagsLoader component', () => {
+  let wrapper;
+
+  const findGlSkeletonLoaders = () => wrapper.findAll(GlSkeletonLoader);
+
+  const mountComponent = () => {
+    wrapper = shallowMount(component, {
+      stubs: {
+        GlSkeletonLoader,
+      },
+      // set the repeat to 1 to avoid a long and verbose snapshot
+      loader: {
+        ...component.loader,
+        repeat: 1,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('produces the correct amount of loaders ', () => {
+    mountComponent();
+    expect(findGlSkeletonLoaders().length).toBe(1);
+  });
+
+  it('has the correct props', () => {
+    mountComponent();
+    expect(
+      findGlSkeletonLoaders()
+        .at(0)
+        .props(),
+    ).toMatchObject({
+      width: component.loader.width,
+      height: component.loader.height,
+    });
+  });
+
+  it('has the correct markup', () => {
+    mountComponent();
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});