1 files changed, 37 insertions, 0 deletions
diff --git a/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js b/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js
new file mode 100644
index 00000000000..b37813cdb3d
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/user_avatar_size_mixin_spec.js
@@ -0,0 +1,37 @@
+import Vue from 'vue';
+import UserAvatarSizeMixin from '~/vue_shared/components/user_avatar/user_avatar_size_mixin';
+
+describe('User Avatar Size Mixin', () => {
+  beforeEach(() => {
+    this.vueInstance = new Vue({
+      data: {
+        size: 99,
+      },
+      mixins: [UserAvatarSizeMixin],
+    });
+  });
+
+  describe('#avatarSizeClass', () => {
+    it('should be a defined computed value', () => {
+      expect(this.vueInstance.avatarSizeClass).toBeDefined();
+    });
+
+    it('should correctly transform size into the class name', () => {
+      expect(this.vueInstance.avatarSizeClass).toBe('s99');
+    });
+  });
+
+  describe('#avatarSizeStylesMap', () => {
+    it('should be a defined computed value', () => {
+      expect(this.vueInstance.avatarSizeStylesMap).toBeDefined();
+    });
+
+    it('should return a correctly formatted styles width', () => {
+      expect(this.vueInstance.avatarSizeStylesMap.width).toBe('99px');
+    });
+
+    it('should return a correctly formatted styles height', () => {
+      expect(this.vueInstance.avatarSizeStylesMap.height).toBe('99px');
+    });
+  });
+});