1 files changed, 63 insertions, 0 deletions
diff --git a/spec/frontend/artifacts/components/feedback_banner_spec.js b/spec/frontend/artifacts/components/feedback_banner_spec.js
new file mode 100644
index 00000000000..3421486020a
--- /dev/null
+++ b/spec/frontend/artifacts/components/feedback_banner_spec.js
@@ -0,0 +1,63 @@
+import { GlBanner } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import FeedbackBanner from '~/artifacts/components/feedback_banner.vue';
+import { makeMockUserCalloutDismisser } from 'helpers/mock_user_callout_dismisser';
+import {
+  I18N_FEEDBACK_BANNER_TITLE,
+  I18N_FEEDBACK_BANNER_BUTTON,
+  FEEDBACK_URL,
+} from '~/artifacts/constants';
+
+const mockBannerImagePath = 'banner/image/path';
+
+describe('Artifacts management feedback banner', () => {
+  let wrapper;
+  let userCalloutDismissSpy;
+
+  const findBanner = () => wrapper.findComponent(GlBanner);
+
+  const createComponent = ({ shouldShowCallout = true } = {}) => {
+    userCalloutDismissSpy = jest.fn();
+
+    wrapper = shallowMount(FeedbackBanner, {
+      provide: {
+        artifactsManagementFeedbackImagePath: mockBannerImagePath,
+      },
+      stubs: {
+        UserCalloutDismisser: makeMockUserCalloutDismisser({
+          dismiss: userCalloutDismissSpy,
+          shouldShowCallout,
+        }),
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('is displayed with the correct props', () => {
+    createComponent();
+
+    expect(findBanner().props()).toMatchObject({
+      title: I18N_FEEDBACK_BANNER_TITLE,
+      buttonText: I18N_FEEDBACK_BANNER_BUTTON,
+      buttonLink: FEEDBACK_URL,
+      svgPath: mockBannerImagePath,
+    });
+  });
+
+  it('dismisses the callout when closed', () => {
+    createComponent();
+
+    findBanner().vm.$emit('close');
+
+    expect(userCalloutDismissSpy).toHaveBeenCalled();
+  });
+
+  it('is not displayed once it has been dismissed', () => {
+    createComponent({ shouldShowCallout: false });
+
+    expect(findBanner().exists()).toBe(false);
+  });
+});