Merge branch '30286-vue-loadin-icon' into 'master'

Tech debt: Creates vue component for loading icon

Closes #31328

See merge request !11167

1 files changed, 53 insertions, 0 deletions

diff --git a/spec/javascripts/vue_shared/components/loading_icon_spec.js b/spec/javascripts/vue_shared/components/loading_icon_spec.js
new file mode 100644
index 00000000000..1baf3537741
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/loading_icon_spec.js
@@ -0,0 +1,53 @@
+import Vue from 'vue';
+import loadingIcon from '~/vue_shared/components/loading_icon.vue';
+
+describe('Loading Icon Component', () => {
+  let LoadingIconComponent;
+
+  beforeEach(() => {
+    LoadingIconComponent = Vue.extend(loadingIcon);
+  });
+
+  it('should render a spinner font awesome icon', () => {
+    const component = new LoadingIconComponent().$mount();
+
+    expect(
+      component.$el.querySelector('i').getAttribute('class'),
+    ).toEqual('fa fa-spin fa-spinner fa-1x');
+
+    expect(component.$el.tagName).toEqual('DIV');
+    expect(component.$el.classList.contains('text-center')).toEqual(true);
+  });
+
+  it('should render accessibility attributes', () => {
+    const component = new LoadingIconComponent().$mount();
+
+    const icon = component.$el.querySelector('i');
+    expect(icon.getAttribute('aria-hidden')).toEqual('true');
+    expect(icon.getAttribute('aria-label')).toEqual('Loading');
+  });
+
+  it('should render the provided label', () => {
+    const component = new LoadingIconComponent({
+      propsData: {
+        label: 'This is a loading icon',
+      },
+    }).$mount();
+
+    expect(
+      component.$el.querySelector('i').getAttribute('aria-label'),
+    ).toEqual('This is a loading icon');
+  });
+
+  it('should render the provided size', () => {
+    const component = new LoadingIconComponent({
+      propsData: {
+        size: '2',
+      },
+    }).$mount();
+
+    expect(
+      component.$el.querySelector('i').classList.contains('fa-2x'),
+    ).toEqual(true);
+  });
+});