[ONL-7918] migrate ec-table-sort

jest.config.js

@@ -16,6 +16,7 @@ module.exports = {
   errorOnDeprecated: true,
   maxWorkers: '100%',
   transform: {
+    // Fix to use Vue 3.3 props from imported types
     '^.+\\.vue$': './vue3-jest.js',
     '^.+\\.(j|t)sx?$': '@swc/jest',
   },

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/sort-direction';
 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 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,28 @@
   </a>
 </template>
 
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 
-import * as SortDirection from '../../enums/sort-direction';
+import { SortDirection } from '../../enums/sort-direction';
 import EcIcon from '../ec-icon';
+import { IconName } from '../ec-icon/types';
+import type { TableSortEvent, TableSortEvents, TableSortProps } 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);
-    },
-  },
-});
+const props = defineProps<TableSortProps>();
 
 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,8 +57,9 @@ const directionTitle = computed(() => {
   return 'Not sorted';
 });
 
-function onSort() {
-  emit('sort', props.direction);
+function onSort(): void {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  emit('sort', props.direction!);
 }
 </script>
 

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

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

vue3-jest.js

@@ -1,6 +1,8 @@
 // With Vue 3.3 we get the possibility to use imported types to declare props. However,
-// this new method cause unit tests to fail due to the @vue/vue3-jest package didn't
+// this new method cause unit tests to fail due to the `@vue/vue3-jest` package didn't
 // support it yet. This is a hacky fix that solves the issue.
+// If jest transformer mantainers fix it on their side just remove this file
+// and replace the fix for the original transformer in `jest.config.js`.
 // More info here: https://github.com/vuejs/core/issues/8301
 
 /* eslint-disable import/no-extraneous-dependencies */