[ONL-7918] ec-table-sort to TS (#1690)

* [ONL-7918] fix unit test when using imported types for props

* [ONL-7918] migrate sort direction enum

* [ONL-7918] migrate ec-table-sort

* [ONL-7918] fix broken tests due to fix

* [ONL-7918] add missing default value

* [ONL-7918] revert comment in props interface eslint rule

* [ONL-7918] remove jest fix and use prop interface in component

* [ONL-7918] ts fix in unit test

* [ONL-7918] rename sort-direction.ts to index.ts

* 2.2.45

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.2.44",
+  "version": "2.2.45",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-smart-table/ec-smart-table.spec.js

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 import { h, markRaw } from 'vue';
 
-import * as SortDirection from '../../enums/sort-direction';
+import { SortDirection } from '../../enums';
 import EcSmartTable from './ec-smart-table.vue';
 
 describe('EcSmartTable', () => {

src/components/ec-smart-table/ec-smart-table.story.js

@@ -4,7 +4,7 @@ import {
   computed, markRaw, onBeforeUnmount, ref,
 } from 'vue';
 
-import * as SortDirection from '../../enums/sort-direction';
+import { SortDirection } from '../../enums';
 import * as SortDirectionCycle from '../../enums/sort-direction-cycle';
 import EcDateRangeFilter from '../ec-date-range-filter';
 import EcIcon from '../ec-icon';

src/components/ec-smart-table/ec-smart-table.vue

@@ -123,7 +123,7 @@ import {
 
 import useEcPagination from '../../composables/use-ec-pagination';
 import useEcSorting from '../../composables/use-ec-sorting';
-import * as SortDirection from '../../enums/sort-direction';
+import { SortDirection } from '../../enums';
 import * as SortDirectionCycle from '../../enums/sort-direction-cycle';
 import EcLoading from '../ec-loading';
 import EcSmartTableHeading from '../ec-smart-table-heading';
@@ -225,3 +225,4 @@ function getEcTableSlots() {
   return tableSlots;
 }
 </script>
+../../enums

src/components/ec-table-head/ec-table-head.spec.js

@@ -1,7 +1,7 @@
 import { mount } from '@vue/test-utils';
 
 import { withMockedConsole } from '../../../tests/utils/console';
-import * as SortDirection from '../../enums/sort-direction';
+import { SortDirection } from '../../enums';
 import EcTableHead from './ec-table-head.vue';
 
 describe('EcTableHead', () => {

src/components/ec-table-sort/ec-table-sort.spec.js → src/components/ec-table-sort/ec-table-sort.spec.ts

@@ -1,15 +1,16 @@
-import { mount } from '@vue/test-utils';
+import { type ComponentMountingOptions, mount } from '@vue/test-utils';
 
-import { withMockedConsole } from '../../../tests/utils/console';
-import * as SortDirection from '../../enums/sort-direction';
+import type { CVueWrapper } from '../../../tests/utils/global';
+import { SortDirection } from '../../enums';
 import EcTableSort from './ec-table-sort.vue';
+import type { TableSortProps } from './types';
 
 describe('EcTableSort', () => {
-  function mountEcTableSort(props, mountOpts) {
+  function mountEcTableSort(props?: TableSortProps, mountOpts?: ComponentMountingOptions<TableSortProps>) {
     return mount(EcTableSort, {
       props,
       ...mountOpts,
-    });
+    }) as unknown as CVueWrapper;
   }
 
   it('should render as expected', () => {
@@ -37,14 +38,6 @@ describe('EcTableSort', () => {
       const wrapper = mountEcTableSort({ direction: SortDirection.DESC });
       expect(wrapper.element).toMatchSnapshot();
     });
-
-    it('should validate direction prop', () => {
-      withMockedConsole((errorSpy, warnSpy) => {
-        mountEcTableSort({ direction: 'invalid' });
-        expect(warnSpy).toHaveBeenCalledTimes(1);
-        expect(warnSpy.mock.calls[0][0]).toContain('Invalid prop: custom validator check failed for prop "direction"');
-      });
-    });
   });
 
   describe('@events', () => {

src/components/ec-table-sort/ec-table-sort.vue

@@ -23,32 +23,34 @@
   </a>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 
-import * as SortDirection from '../../enums/sort-direction';
+import { SortDirection } from '../../enums';
 import EcIcon from '../ec-icon';
+import { IconName } from '../ec-icon/types';
+import type { SortDirectionType, TableSortEvent, TableSortEvents } from './types';
 
-const emit = defineEmits(['sort']);
+const emit = defineEmits<{
+  'sort': [value: TableSortEvents[TableSortEvent.SORT]],
+}>();
 
-const props = defineProps({
-  direction: {
-    type: String,
-    default: null,
-    validator(value) {
-      return value === null || value === '' || [SortDirection.ASC, SortDirection.DESC].includes(value);
-    },
-  },
+interface TableSortProps {
+  direction?: SortDirectionType,
+}
+
+const props = withDefaults(defineProps<TableSortProps>(), {
+  direction: null,
 });
 
 const isAsc = computed(() => props.direction === SortDirection.ASC);
 const isDesc = computed(() => props.direction === SortDirection.DESC);
 
 const icon = computed(() => {
   if (isAsc.value || isDesc.value) {
-    return 'simple-arrow-drop-down';
+    return IconName.SimpleArrowDropDown;
   }
-  return 'simple-arrow-up-down';
+  return IconName.SimpleArrowUpDown;
 });
 
 const directionTitle = computed(() => {
@@ -61,7 +63,7 @@ const directionTitle = computed(() => {
   return 'Not sorted';
 });
 
-function onSort() {
+function onSort(): void {
   emit('sort', props.direction);
 }
 </script>
@@ -94,3 +96,4 @@ function onSort() {
   }
 }
 </style>
+../../enums

src/components/ec-table-sort/types.ts

@@ -0,0 +1,15 @@
+import type { SortDirection } from '../../enums';
+
+export type SortDirectionType = SortDirection | '' | null;
+
+export enum TableSortEvent {
+  SORT = 'sort',
+}
+
+export interface TableSortEvents {
+  [TableSortEvent.SORT]: SortDirectionType,
+}
+
+export interface TableSortProps {
+  direction?: SortDirectionType,
+}

src/components/ec-table/ec-table.spec.js

@@ -2,7 +2,7 @@ import { mount } from '@vue/test-utils';
 import { defineComponent, h } from 'vue';
 
 import { withMockedConsole } from '../../../tests/utils/console';
-import * as SortDirection from '../../enums/sort-direction';
+import { SortDirection } from '../../enums';
 import EcTable from './ec-table.vue';
 
 function mountEcTable(props, mountOpts) {

src/components/ec-table/ec-table.story.js

@@ -1,6 +1,6 @@
 import { action } from '@storybook/addon-actions';
 
-import * as SortDirection from '../../enums/sort-direction';
+import { SortDirection } from '../../enums';
 import EcIcon from '../ec-icon/ec-icon.vue';
 import EcOptionCard from '../ec-option-card';
 import EcTable from './ec-table.vue';

src/composables/use-ec-sorting/use-ec-sorting.js

@@ -1,6 +1,6 @@
 import { ref, unref } from 'vue';
 
-import * as SortDirection from '../../enums/sort-direction';
+import { SortDirection } from '../../enums';
 import * as SortDirectionCycle from '../../enums/sort-direction-cycle';
 
 export default function useEcSorting({

src/composables/use-ec-sorting/use-ec-sorting.spec.js

@@ -1,4 +1,4 @@
-import * as SortDirection from '../../enums/sort-direction';
+import { SortDirection } from '../../enums';
 import * as SortDirectionCycle from '../../enums/sort-direction-cycle';
 import useEcSorting from './use-ec-sorting';
 

src/enums/index.ts

@@ -0,0 +1,4 @@
+export enum SortDirection {
+  ASC = 'asc',
+  DESC = 'desc',
+}

src/enums/sort-direction-cycle.js

@@ -1,4 +1,4 @@
-import * as SortDirection from './sort-direction';
+import { SortDirection } from '.';
 
 export const LOWEST_FIRST = [SortDirection.ASC, SortDirection.DESC];
 export const HIGHEST_FIRST = [SortDirection.DESC, SortDirection.ASC];

src/main.js

@@ -1,4 +1,4 @@
-import * as SortDirection from './enums/sort-direction';
+import { SortDirection } from './enums';
 import * as SortDirectionCycle from './enums/sort-direction-cycle';
 import * as TooltipPlacement from './enums/tooltip-placement';