1 files changed, 45 insertions, 0 deletions
diff --git a/spec/javascripts/vue_shared/components/callout_spec.js b/spec/javascripts/vue_shared/components/callout_spec.js
new file mode 100644
index 00000000000..e62bd86f4ca
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/callout_spec.js
@@ -0,0 +1,45 @@
+import Vue from 'vue';
+import callout from '~/vue_shared/components/callout.vue';
+import createComponent from 'spec/helpers/vue_mount_component_helper';
+
+describe('Callout Component', () => {
+  let CalloutComponent;
+  let vm;
+  const exampleMessage = 'This is a callout message!';
+
+  beforeEach(() => {
+    CalloutComponent = Vue.extend(callout);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render the appropriate variant of callout', () => {
+    vm = createComponent(CalloutComponent, {
+      category: 'info',
+      message: exampleMessage,
+    });
+
+    expect(vm.$el.getAttribute('class')).toEqual('bs-callout bs-callout-info');
+
+    expect(vm.$el.tagName).toEqual('DIV');
+  });
+
+  it('should render accessibility attributes', () => {
+    vm = createComponent(CalloutComponent, {
+      message: exampleMessage,
+    });
+
+    expect(vm.$el.getAttribute('role')).toEqual('alert');
+    expect(vm.$el.getAttribute('aria-live')).toEqual('assertive');
+  });
+
+  it('should render the provided message', () => {
+    vm = createComponent(CalloutComponent, {
+      message: exampleMessage,
+    });
+
+    expect(vm.$el.innerHTML.trim()).toEqual(exampleMessage);
+  });
+});