GroupMemberContributions Table Header

ee/app/assets/javascripts/group_member_contributions/components/table_header.vue

+<script>
+import { __ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+
+export default {
+  components: {
+    Icon,
+  },
+  props: {
+    columns: {
+      type: Array,
+      required: true,
+    },
+    sortOrders: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    const columnIconMeta = this.columns.reduce(
+      (acc, column) => ({
+        ...acc,
+        [column.name]: this.getColumnIconMeta(column.name, this.sortOrders),
+      }),
+      {},
+    );
+
+    return { columnIconMeta };
+  },
+  methods: {
+    getColumnIconMeta(columnName, sortOrders) {
+      const isAsc = sortOrders[columnName] > 0;
+      return {
+        sortIcon: isAsc ? 'angle-up' : 'angle-down',
+        iconTooltip: isAsc ? __('Ascending') : __('Descending'),
+      };
+    },
+    getColumnSortIcon(columnName) {
+      return this.columnIconMeta[columnName].sortIcon;
+    },
+    getColumnSortTooltip(columnName) {
+      return this.columnIconMeta[columnName].iconTooltip;
+    },
+    onColumnClick(columnName) {
+      this.$emit('onColumnClick', columnName);
+      this.columnIconMeta[columnName] = this.getColumnIconMeta(columnName, this.sortOrders);
+    },
+  },
+};
+</script>
+
+<template>
+  <thead>
+    <tr>
+      <th
+        v-for="(column, index) in columns"
+        :key="index"
+        class="header"
+        :title="getColumnSortTooltip(column.name)"
+        @click="onColumnClick(column.name)"
+      >
+        {{ column.text }}
+        <icon
+          :size="12"
+          :name="getColumnSortIcon(column.name)"
+        />
+      </th>
+    </tr>
+  </thead>
+</template>

spec/javascripts/group_member_contributions/components/table_header_spec.js

+import Vue from 'vue';
+
+import mountComponent from 'spec/helpers/vue_mount_component_helper';
+
+import TableHeaderComponent from 'ee/group_member_contributions/components/table_header.vue';
+import defaultColumns from 'ee/group_member_contributions/constants';
+
+import { mockSortOrders } from '../mock_data';
+
+const createComponent = (columns = defaultColumns, sortOrders = mockSortOrders) => {
+  const Component = Vue.extend(TableHeaderComponent);
+
+  return mountComponent(Component, { columns, sortOrders });
+};
+
+describe('TableHeaderComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('data', () => {
+    it('returns data with columnIconMeta prop initialized', () => {
+      defaultColumns.forEach(column => {
+        expect(vm.columnIconMeta[column.name].sortIcon).toBe('angle-up');
+        expect(vm.columnIconMeta[column.name].iconTooltip).toBe('Ascending');
+      });
+    });
+  });
+
+  describe('methods', () => {
+    const columnName = 'fullname';
+
+    describe('getColumnIconMeta', () => {
+      it('returns `angle-up` and `Ascending` for sortIcon and iconTooltip respectively when provided columnName in sortOrders has value greater than 0', () => {
+        const iconMeta = vm.getColumnIconMeta(columnName, { fullname: 1 });
+        expect(iconMeta.sortIcon).toBe('angle-up');
+        expect(iconMeta.iconTooltip).toBe('Ascending');
+      });
+
+      it('returns `angle-down` and `Descending` for sortIcon and iconTooltip respectively when provided columnName in sortOrders has value less than 0', () => {
+        const iconMeta = vm.getColumnIconMeta(columnName, { fullname: -1 });
+        expect(iconMeta.sortIcon).toBe('angle-down');
+        expect(iconMeta.iconTooltip).toBe('Descending');
+      });
+    });
+
+    describe('getColumnSortIcon', () => {
+      it('returns value of sortIcon for provided columnName', () => {
+        expect(vm.getColumnSortIcon(columnName)).toBe('angle-up');
+      });
+    });
+
+    describe('getColumnSortTooltip', () => {
+      it('returns value of iconTooltip for provided columnName', () => {
+        expect(vm.getColumnSortTooltip(columnName)).toBe('Ascending');
+      });
+    });
+
+    describe('onColumnClick', () => {
+      it('emits `onColumnClick` event with columnName param on component instance', () => {
+        spyOn(vm, '$emit');
+        vm.onColumnClick(columnName);
+        expect(vm.$emit).toHaveBeenCalledWith('onColumnClick', columnName);
+      });
+
+      it('updates columnIconMeta prop for provided columnName', () => {
+        spyOn(vm, 'getColumnIconMeta');
+        vm.onColumnClick(columnName);
+        expect(vm.getColumnIconMeta).toHaveBeenCalledWith(columnName, vm.sortOrders);
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders table column header with sort order icon', () => {
+      const headerItemEl = vm.$el.querySelector('tr th');
+      expect(headerItemEl).not.toBeNull();
+      expect(headerItemEl.innerText.trim()).toBe('Name');
+      expect(headerItemEl.querySelector('svg use').getAttribute('xlink:href')).toContain(
+        'angle-up',
+      );
+    });
+  });
+});