1 files changed, 139 insertions, 0 deletions
diff --git a/spec/frontend/profile/edit/components/user_avatar_spec.js b/spec/frontend/profile/edit/components/user_avatar_spec.js
new file mode 100644
index 00000000000..caa3356b49f
--- /dev/null
+++ b/spec/frontend/profile/edit/components/user_avatar_spec.js
@@ -0,0 +1,139 @@
+import { nextTick } from 'vue';
+import jQuery from 'jquery';
+import { GlAvatar, GlAvatarLink, GlSprintf } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { avatarI18n } from '~/profile/edit/constants';
+import { loadCSSFile } from '~/lib/utils/css_utils';
+
+import UserAvatar from '~/profile/edit/components/user_avatar.vue';
+
+const glCropDataMock = jest.fn().mockImplementation(() => ({
+  getBlob: jest.fn(),
+}));
+
+const jQueryMock = {
+  glCrop: jest.fn().mockReturnValue({
+    data: glCropDataMock,
+  }),
+};
+
+jest.mock(`~/lib/utils/css_utils`);
+jest.mock('jquery');
+
+describe('Edit User Avatar', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    jQuery.mockImplementation(() => jQueryMock);
+  });
+
+  const defaultProvides = {
+    avatarUrl: '/-/profile/avatarUrl',
+    brandProfileImageGuidelines: '',
+    cropperCssPath: '',
+    hasAvatar: true,
+    gravatarEnabled: true,
+    gravatarLink: {
+      hostname: 'gravatar.com',
+      url: 'gravatar.com',
+    },
+    profileAvatarPath: '/profile/avatar',
+  };
+
+  const createComponent = (provides = {}) => {
+    wrapper = shallowMountExtended(UserAvatar, {
+      provide: {
+        ...defaultProvides,
+        ...provides,
+      },
+    });
+  };
+
+  const findAvatar = () => wrapper.findComponent(GlAvatar);
+  const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
+  const findHelpText = () => wrapper.findComponent(GlSprintf).attributes('message');
+  const findRemoveAvatarButton = () => wrapper.findByTestId('remove-avatar-button');
+
+  describe('renders correctly', () => {
+    it('under default condition', async () => {
+      createComponent();
+      await nextTick();
+
+      expect(jQueryMock.glCrop).toHaveBeenCalledWith({
+        filename: '.js-avatar-filename',
+        previewImage: '.avatar-image .gl-avatar',
+        modalCrop: '.modal-profile-crop',
+        pickImageEl: '.js-choose-user-avatar-button',
+        uploadImageBtn: '.js-upload-user-avatar',
+        modalCropImg: '.modal-profile-crop-image',
+        onBlobChange: expect.any(Function),
+      });
+      expect(glCropDataMock).toHaveBeenCalledWith('glcrop');
+      expect(loadCSSFile).toHaveBeenCalledWith(defaultProvides.cropperCssPath);
+      const avatar = findAvatar();
+
+      expect(avatar.exists()).toBe(true);
+      expect(avatar.attributes('src')).toBe(defaultProvides.avatarUrl);
+      expect(findAvatarLink().attributes('href')).toBe(defaultProvides.avatarUrl);
+
+      const removeAvatarButton = findRemoveAvatarButton();
+      expect(removeAvatarButton.exists()).toBe(true);
+      expect(removeAvatarButton.attributes('href')).toBe(defaultProvides.profileAvatarPath);
+    });
+
+    describe('when user has avatar', () => {
+      describe('while gravatar is enabled', () => {
+        it('shows help text for change or remove avatar', () => {
+          createComponent({
+            gravatarEnabled: true,
+          });
+
+          expect(findHelpText()).toBe(avatarI18n.changeOrRemoveAvatar);
+        });
+      });
+      describe('while gravatar is disabled', () => {
+        it('shows help text for change avatar', () => {
+          createComponent({
+            gravatarEnabled: false,
+          });
+
+          expect(findHelpText()).toBe(avatarI18n.changeAvatar);
+        });
+      });
+    });
+
+    describe('when user does not have an avatar', () => {
+      describe('while gravatar is enabled', () => {
+        it('shows help text for upload or change avatar', () => {
+          createComponent({
+            gravatarEnabled: true,
+            hasAvatar: false,
+          });
+          expect(findHelpText()).toBe(avatarI18n.uploadOrChangeAvatar);
+        });
+      });
+
+      describe('while gravatar is disabled', () => {
+        it('shows help text for upload avatar', () => {
+          createComponent({
+            gravatarEnabled: false,
+            hasAvatar: false,
+          });
+          expect(findHelpText()).toBe(avatarI18n.uploadAvatar);
+          expect(findRemoveAvatarButton().exists()).toBe(false);
+        });
+      });
+    });
+  });
+
+  it('can render profile image guidelines', () => {
+    const brandProfileImageGuidelines = 'brandProfileImageGuidelines';
+    createComponent({
+      brandProfileImageGuidelines,
+    });
+
+    expect(wrapper.findByTestId('brand-profile-image-guidelines').text()).toBe(
+      brandProfileImageGuidelines,
+    );
+  });
+});