1 files changed, 62 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/usage_quotas/usage_banner_spec.js b/spec/frontend/vue_shared/components/usage_quotas/usage_banner_spec.js
new file mode 100644
index 00000000000..662c09d02bf
--- /dev/null
+++ b/spec/frontend/vue_shared/components/usage_quotas/usage_banner_spec.js
@@ -0,0 +1,62 @@
+import { GlSkeletonLoader } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import component from '~/vue_shared/components/usage_quotas/usage_banner.vue';
+
+describe('usage banner', () => {
+  let wrapper;
+
+  const findLeftPrimaryTextSlot = () => wrapper.findByTestId('left-primary-text');
+  const findLeftSecondaryTextSlot = () => wrapper.findByTestId('left-secondary-text');
+  const findRightPrimaryTextSlot = () => wrapper.findByTestId('right-primary-text');
+  const findRightSecondaryTextSlot = () => wrapper.findByTestId('right-secondary-text');
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+
+  const mountComponent = (propsData, slots) => {
+    wrapper = shallowMountExtended(component, {
+      propsData,
+      slots: {
+        'left-primary-text': '<div data-testid="left-primary-text" />',
+        'left-secondary-text': '<div data-testid="left-secondary-text" />',
+        'right-primary-text': '<div data-testid="right-primary-text" />',
+        'right-secondary-text': '<div data-testid="right-secondary-text" />',
+        ...slots,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe.each`
+    slotName                  | finderFunction
+    ${'left-primary-text'}    | ${findLeftPrimaryTextSlot}
+    ${'left-secondary-text'}  | ${findLeftSecondaryTextSlot}
+    ${'right-primary-text'}   | ${findRightPrimaryTextSlot}
+    ${'right-secondary-text'} | ${findRightSecondaryTextSlot}
+  `('$slotName slot', ({ finderFunction, slotName }) => {
+    it('exist when the slot is filled', () => {
+      mountComponent();
+
+      expect(finderFunction().exists()).toBe(true);
+    });
+
+    it('does not exist when the slot is empty', () => {
+      mountComponent({}, { [slotName]: '' });
+
+      expect(finderFunction().exists()).toBe(false);
+    });
+  });
+
+  it('should show a skeleton loader component', () => {
+    mountComponent({ loading: true });
+
+    expect(findSkeletonLoader().exists()).toBe(true);
+  });
+
+  it('should not show a skeleton loader component', () => {
+    mountComponent();
+
+    expect(findSkeletonLoader().exists()).toBe(false);
+  });
+});