1 files changed, 91 insertions, 0 deletions
diff --git a/spec/frontend/admin/topics/components/topic_select_spec.js b/spec/frontend/admin/topics/components/topic_select_spec.js
new file mode 100644
index 00000000000..f61af6203f0
--- /dev/null
+++ b/spec/frontend/admin/topics/components/topic_select_spec.js
@@ -0,0 +1,91 @@
+import { GlAvatarLabeled, GlDropdown, GlDropdownItem } from '@gitlab/ui';
+import { shallowMount } from '@vue/test-utils';
+import TopicSelect from '~/admin/topics/components/topic_select.vue';
+
+const mockTopics = [
+  { id: 1, name: 'topic1', title: 'Topic 1', avatarUrl: 'avatar.com/topic1.png' },
+  { id: 2, name: 'GitLab', title: 'GitLab', avatarUrl: 'avatar.com/GitLab.png' },
+];
+
+describe('TopicSelect', () => {
+  let wrapper;
+
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
+
+  function createComponent(props = {}) {
+    wrapper = shallowMount(TopicSelect, {
+      propsData: props,
+      data() {
+        return {
+          topics: mockTopics,
+          search: '',
+        };
+      },
+      mocks: {
+        $apollo: {
+          queries: {
+            topics: { loading: false },
+          },
+        },
+      },
+    });
+  }
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('mounts', () => {
+    createComponent();
+
+    expect(wrapper.exists()).toBe(true);
+  });
+
+  it('`selectedTopic` prop defaults to `{}`', () => {
+    createComponent();
+
+    expect(wrapper.props('selectedTopic')).toEqual({});
+  });
+
+  it('`labelText` prop defaults to `null`', () => {
+    createComponent();
+
+    expect(wrapper.props('labelText')).toBe(null);
+  });
+
+  it('renders default text if no selected topic', () => {
+    createComponent();
+
+    expect(findDropdown().props('text')).toBe('Select a topic');
+  });
+
+  it('renders selected topic', () => {
+    createComponent({ selectedTopic: mockTopics[0] });
+
+    expect(findDropdown().props('text')).toBe('topic1');
+  });
+
+  it('renders label', () => {
+    createComponent({ labelText: 'my label' });
+
+    expect(wrapper.find('label').text()).toBe('my label');
+  });
+
+  it('renders dropdown items', () => {
+    createComponent();
+
+    const dropdownItems = findAllDropdownItems();
+
+    expect(dropdownItems.at(0).findComponent(GlAvatarLabeled).props('label')).toBe('Topic 1');
+    expect(dropdownItems.at(1).findComponent(GlAvatarLabeled).props('label')).toBe('GitLab');
+  });
+
+  it('emits `click` event when topic selected', () => {
+    createComponent();
+
+    findAllDropdownItems().at(0).vm.$emit('click');
+
+    expect(wrapper.emitted('click')).toEqual([[mockTopics[0]]]);
+  });
+});