1 files changed, 57 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/dismissible_alert_spec.js b/spec/frontend/vue_shared/components/dismissible_alert_spec.js
new file mode 100644
index 00000000000..17905254292
--- /dev/null
+++ b/spec/frontend/vue_shared/components/dismissible_alert_spec.js
@@ -0,0 +1,57 @@
+import { shallowMount } from '@vue/test-utils';
+import { GlAlert } from '@gitlab/ui';
+import DismissibleAlert from '~/vue_shared/components/dismissible_alert.vue';
+
+const TEST_HTML = 'Hello World! <strong>Foo</strong>';
+
+describe('vue_shared/components/dismissible_alert', () => {
+  const testAlertProps = {
+    primaryButtonText: 'Lorem ipsum',
+    primaryButtonLink: '/lorem/ipsum',
+  };
+
+  let wrapper;
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(DismissibleAlert, {
+      propsData: {
+        html: TEST_HTML,
+        ...testAlertProps,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  const findAlert = () => wrapper.find(GlAlert);
+
+  describe('with default', () => {
+    beforeEach(() => {
+      createComponent();
+    });
+
+    it('shows alert', () => {
+      const alert = findAlert();
+
+      expect(alert.exists()).toBe(true);
+      expect(alert.props()).toEqual(expect.objectContaining(testAlertProps));
+    });
+
+    it('shows given HTML', () => {
+      expect(findAlert().html()).toContain(TEST_HTML);
+    });
+
+    describe('when dismissed', () => {
+      beforeEach(() => {
+        findAlert().vm.$emit('dismiss');
+      });
+
+      it('hides the alert', () => {
+        expect(findAlert().exists()).toBe(false);
+      });
+    });
+  });
+});