Add latest changes from gitlab-org/gitlab@13-8-stable-eev13.8.0-rc42

3 files changed, 74 insertions, 3 deletions

diff --git a/spec/frontend/admin/users/components/user_avatar_spec.js b/spec/frontend/admin/users/components/user_avatar_spec.js
new file mode 100644
index 00000000000..ba4e83690d0
--- /dev/null
+++ b/spec/frontend/admin/users/components/user_avatar_spec.js
@@ -0,0 +1,63 @@
+import { GlAvatarLink, GlAvatarLabeled, GlBadge } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+
+import AdminUserAvatar from '~/admin/users/components/user_avatar.vue';
+import { users, paths } from '../mock_data';
+
+describe('AdminUserAvatar component', () => {
+  let wrapper;
+  const user = users[0];
+  const adminUserPath = paths.adminUser;
+
+  const findAvatar = () => wrapper.find(GlAvatarLabeled);
+  const findAvatarLink = () => wrapper.find(GlAvatarLink);
+  const findAllBadges = () => wrapper.findAll(GlBadge);
+
+  const initComponent = (props = {}) => {
+    wrapper = mount(AdminUserAvatar, {
+      propsData: {
+        user,
+        adminUserPath,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when initialized', () => {
+    beforeEach(() => {
+      initComponent();
+    });
+
+    it("links to the user's admin path", () => {
+      expect(findAvatarLink().attributes()).toMatchObject({
+        href: adminUserPath.replace('id', user.username),
+        'data-user-id': user.id.toString(),
+        'data-username': user.username,
+      });
+    });
+
+    it("renders the user's name", () => {
+      expect(findAvatar().props('label')).toBe(user.name);
+    });
+
+    it("renders the user's email", () => {
+      expect(findAvatar().props('subLabel')).toBe(user.email);
+    });
+
+    it("renders the user's avatar image", () => {
+      expect(findAvatar().attributes('src')).toBe(user.avatarUrl);
+    });
+
+    it("renders the user's badges", () => {
+      findAllBadges().wrappers.forEach((badge, idx) => {
+        expect(badge.text()).toBe(user.badges[idx].text);
+        expect(badge.props('variant')).toBe(user.badges[idx].variant);
+      });
+    });
+  });
+});
diff --git a/spec/frontend/admin/users/components/users_table_spec.js b/spec/frontend/admin/users/components/users_table_spec.js
index ba36e1e32ef..b79d2d4d39d 100644
--- a/spec/frontend/admin/users/components/users_table_spec.js
+++ b/spec/frontend/admin/users/components/users_table_spec.js
@@ -2,6 +2,7 @@ import { GlTable } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
 
 import AdminUsersTable from '~/admin/users/components/users_table.vue';
+import AdminUserAvatar from '~/admin/users/components/user_avatar.vue';
 import { users, paths } from '../mock_data';
 
 describe('AdminUsersTable component', () => {
@@ -44,8 +45,12 @@ describe('AdminUsersTable component', () => {
       ${'projectsCount'}  | ${'Projects'}
       ${'createdAt'}      | ${'Created on'}
       ${'lastActivityOn'} | ${'Last activity'}
-    `('renders users.$key for $label', ({ key, label }) => {
-      expect(getCellByLabel(0, label).text()).toBe(`${user[key]}`);
+    `('renders users.$key in column $label', ({ key, label }) => {
+      expect(getCellByLabel(0, label).text()).toContain(`${user[key]}`);
+    });
+
+    it('renders an AdminUserAvatar component', () => {
+      expect(getCellByLabel(0, 'Name').find(AdminUserAvatar).exists()).toBe(true);
     });
   });
 
diff --git a/spec/frontend/admin/users/mock_data.js b/spec/frontend/admin/users/mock_data.js
index 62fa9469638..860994a9152 100644
--- a/spec/frontend/admin/users/mock_data.js
+++ b/spec/frontend/admin/users/mock_data.js
@@ -8,7 +8,10 @@ export const users = [
     lastActivityOn: '2020-12-09',
     avatarUrl:
       'https://secure.gravatar.com/avatar/054f062d8b1a42b123f17e13a173cda8?s=80\\u0026d=identicon',
-    badges: [],
+    badges: [
+      { text: 'Admin', variant: 'success' },
+      { text: "It's you!", variant: null },
+    ],
     projectsCount: 0,
     actions: [],
   },