4 files changed, 162 insertions, 0 deletions
diff --git a/spec/frontend/admin/users/components/app_spec.js b/spec/frontend/admin/users/components/app_spec.js
new file mode 100644
index 00000000000..65b13e3a40d
--- /dev/null
+++ b/spec/frontend/admin/users/components/app_spec.js
@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+
+import AdminUsersApp from '~/admin/users/components/app.vue';
+import AdminUsersTable from '~/admin/users/components/users_table.vue';
+import { users, paths } from '../mock_data';
+
+describe('AdminUsersApp component', () => {
+  let wrapper;
+
+  const initComponent = (props = {}) => {
+    wrapper = shallowMount(AdminUsersApp, {
+      propsData: {
+        users,
+        paths,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when initialized', () => {
+    beforeEach(() => {
+      initComponent();
+    });
+
+    it('renders the admin users table with props', () => {
+      expect(wrapper.find(AdminUsersTable).props()).toEqual({
+        users,
+        paths,
+      });
+    });
+  });
+});
diff --git a/spec/frontend/admin/users/components/users_table_spec.js b/spec/frontend/admin/users/components/users_table_spec.js
new file mode 100644
index 00000000000..ba36e1e32ef
--- /dev/null
+++ b/spec/frontend/admin/users/components/users_table_spec.js
@@ -0,0 +1,61 @@
+import { GlTable } from '@gitlab/ui';
+import { mount } from '@vue/test-utils';
+
+import AdminUsersTable from '~/admin/users/components/users_table.vue';
+import { users, paths } from '../mock_data';
+
+describe('AdminUsersTable component', () => {
+  let wrapper;
+
+  const getCellByLabel = (trIdx, label) => {
+    return wrapper
+      .find(GlTable)
+      .find('tbody')
+      .findAll('tr')
+      .at(trIdx)
+      .find(`[data-label="${label}"][role="cell"]`);
+  };
+
+  const initComponent = (props = {}) => {
+    wrapper = mount(AdminUsersTable, {
+      propsData: {
+        users,
+        paths,
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('when there are users', () => {
+    const user = users[0];
+
+    beforeEach(() => {
+      initComponent();
+    });
+
+    it.each`
+      key                 | label
+      ${'name'}           | ${'Name'}
+      ${'projectsCount'}  | ${'Projects'}
+      ${'createdAt'}      | ${'Created on'}
+      ${'lastActivityOn'} | ${'Last activity'}
+    `('renders users.$key for $label', ({ key, label }) => {
+      expect(getCellByLabel(0, label).text()).toBe(`${user[key]}`);
+    });
+  });
+
+  describe('when users is an empty array', () => {
+    beforeEach(() => {
+      initComponent({ users: [] });
+    });
+
+    it('renders a "No users found" message', () => {
+      expect(wrapper.text()).toContain('No users found');
+    });
+  });
+});
diff --git a/spec/frontend/admin/users/index_spec.js b/spec/frontend/admin/users/index_spec.js
new file mode 100644
index 00000000000..171d54c8f4f
--- /dev/null
+++ b/spec/frontend/admin/users/index_spec.js
@@ -0,0 +1,35 @@
+import { createWrapper } from '@vue/test-utils';
+import initAdminUsers from '~/admin/users';
+import AdminUsersApp from '~/admin/users/components/app.vue';
+import { users, paths } from './mock_data';
+
+describe('initAdminUsersApp', () => {
+  let wrapper;
+  let el;
+
+  const findApp = () => wrapper.find(AdminUsersApp);
+
+  beforeEach(() => {
+    el = document.createElement('div');
+    el.setAttribute('data-users', JSON.stringify(users));
+    el.setAttribute('data-paths', JSON.stringify(paths));
+
+    document.body.appendChild(el);
+
+    wrapper = createWrapper(initAdminUsers(el));
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+    el.remove();
+    el = null;
+  });
+
+  it('parses and passes props', () => {
+    expect(findApp().props()).toMatchObject({
+      users,
+      paths,
+    });
+  });
+});
diff --git a/spec/frontend/admin/users/mock_data.js b/spec/frontend/admin/users/mock_data.js
new file mode 100644
index 00000000000..62fa9469638
--- /dev/null
+++ b/spec/frontend/admin/users/mock_data.js
@@ -0,0 +1,29 @@
+export const users = [
+  {
+    id: 2177,
+    name: 'Nikki',
+    createdAt: '2020-11-13T12:26:54.177Z',
+    email: 'nikki@example.com',
+    username: 'nikki',
+    lastActivityOn: '2020-12-09',
+    avatarUrl:
+      'https://secure.gravatar.com/avatar/054f062d8b1a42b123f17e13a173cda8?s=80\\u0026d=identicon',
+    badges: [],
+    projectsCount: 0,
+    actions: [],
+  },
+];
+
+export const paths = {
+  edit: '/admin/users/id/edit',
+  approve: '/admin/users/id/approve',
+  reject: '/admin/users/id/reject',
+  unblock: '/admin/users/id/unblock',
+  block: '/admin/users/id/block',
+  deactivate: '/admin/users/id/deactivate',
+  activate: '/admin/users/id/activate',
+  unlock: '/admin/users/id/unlock',
+  delete: '/admin/users/id',
+  deleteWithContributions: '/admin/users/id',
+  adminUser: '/admin/users/id',
+};