1 files changed, 81 insertions, 0 deletions
diff --git a/spec/frontend/pages/import/fogbugz/new_user_map/components/user_select_spec.js b/spec/frontend/pages/import/fogbugz/new_user_map/components/user_select_spec.js
new file mode 100644
index 00000000000..c1e1545944b
--- /dev/null
+++ b/spec/frontend/pages/import/fogbugz/new_user_map/components/user_select_spec.js
@@ -0,0 +1,81 @@
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
+import { GlListbox } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import searchUsersQuery from '~/graphql_shared/queries/users_search_all.query.graphql';
+
+import createMockApollo from 'helpers/mock_apollo_helper';
+import UserSelect from '~/pages/import/fogbugz/new_user_map/components/user_select.vue';
+
+Vue.use(VueApollo);
+
+const USERS_RESPONSE = {
+  data: {
+    users: {
+      nodes: [
+        {
+          id: 'gid://gitlab/User/44',
+          avatarUrl: '/avatar1',
+          webUrl: '/reported_user_22',
+          name: 'Birgit Steuber',
+          username: 'reported_user_22',
+          __typename: 'UserCore',
+        },
+        {
+          id: 'gid://gitlab/User/43',
+          avatarUrl: '/avatar2',
+          webUrl: '/reported_user_21',
+          name: 'Luke Spinka',
+          username: 'reported_user_21',
+          __typename: 'UserCore',
+        },
+      ],
+      __typename: 'UserCoreConnection',
+    },
+  },
+};
+
+describe('fogbugz user select component', () => {
+  let wrapper;
+  const searchQueryHandlerSuccess = jest.fn().mockResolvedValue(USERS_RESPONSE);
+
+  const createComponent = (propsData = { name: 'demo' }) => {
+    const fakeApollo = createMockApollo([[searchUsersQuery, searchQueryHandlerSuccess]]);
+
+    wrapper = shallowMount(UserSelect, {
+      apolloProvider: fakeApollo,
+      propsData,
+    });
+  };
+
+  it('renders hidden input with name from props', () => {
+    const name = 'test';
+    createComponent({ name });
+    expect(wrapper.find('input').attributes('name')).toBe(name);
+  });
+
+  it('syncs input value with value emitted from listbox', async () => {
+    createComponent();
+
+    const id = 8;
+
+    wrapper.findComponent(GlListbox).vm.$emit('select', `gid://gitlab/User/${id}`);
+    await nextTick();
+
+    expect(wrapper.get('input').attributes('value')).toBe(id.toString());
+  });
+
+  it('filters users when search is performed in listbox', async () => {
+    createComponent();
+    jest.runOnlyPendingTimers();
+
+    wrapper.findComponent(GlListbox).vm.$emit('search', 'test');
+    await nextTick();
+    jest.runOnlyPendingTimers();
+
+    expect(searchQueryHandlerSuccess).toHaveBeenCalledWith({
+      first: expect.anything(),
+      search: 'test',
+    });
+  });
+});