1 files changed, 66 insertions, 0 deletions
diff --git a/spec/frontend/releases/components/releases_sort_spec.js b/spec/frontend/releases/components/releases_sort_spec.js
new file mode 100644
index 00000000000..c089ee3cc38
--- /dev/null
+++ b/spec/frontend/releases/components/releases_sort_spec.js
@@ -0,0 +1,66 @@
+import Vuex from 'vuex';
+import { GlSorting, GlSortingItem } from '@gitlab/ui';
+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import ReleasesSort from '~/releases/components/releases_sort.vue';
+import createStore from '~/releases/stores';
+import createListModule from '~/releases/stores/modules/list';
+
+const localVue = createLocalVue();
+localVue.use(Vuex);
+
+describe('~/releases/components/releases_sort.vue', () => {
+  let wrapper;
+  let store;
+  let listModule;
+  const projectId = 8;
+
+  const createComponent = () => {
+    listModule = createListModule({ projectId });
+
+    store = createStore({
+      modules: {
+        list: listModule,
+      },
+    });
+
+    store.dispatch = jest.fn();
+
+    wrapper = shallowMount(ReleasesSort, {
+      store,
+      stubs: {
+        GlSortingItem,
+      },
+      localVue,
+    });
+  };
+
+  const findReleasesSorting = () => wrapper.find(GlSorting);
+  const findSortingItems = () => wrapper.findAll(GlSortingItem);
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  it('has all the sortable items', () => {
+    expect(findSortingItems()).toHaveLength(wrapper.vm.sortOptions.length);
+  });
+
+  it('on sort change set sorting in vuex and emit event', () => {
+    findReleasesSorting().vm.$emit('sortDirectionChange');
+    expect(store.dispatch).toHaveBeenCalledWith('list/setSorting', { sort: 'asc' });
+    expect(wrapper.emitted('sort:changed')).toBeTruthy();
+  });
+
+  it('on sort item click set sorting and emit event', () => {
+    const item = findSortingItems().at(0);
+    const { orderBy } = wrapper.vm.sortOptions[0];
+    item.vm.$emit('click');
+    expect(store.dispatch).toHaveBeenCalledWith('list/setSorting', { orderBy });
+    expect(wrapper.emitted('sort:changed')).toBeTruthy();
+  });
+});