From 842fbefb16d6f6d2c63bc8bd5fabc9c5e46a4bf7 Mon Sep 17 00:00:00 2001
From: Alik del Risco <alik.delrisco@rideco.com>
Date: Fri, 23 Jun 2023 15:11:55 -0400
Subject: [PATCH 1/2] Add tests for row tracking

- Show the usage of the  new props in Client.vue
---
 src/modes/Client.vue   | 47 ++++++++++++++++++++++++--------------
 test/DataTable.spec.js | 51 ++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 81 insertions(+), 17 deletions(-)

diff --git a/src/modes/Client.vue b/src/modes/Client.vue
index bdbe259..1552038 100644
--- a/src/modes/Client.vue
+++ b/src/modes/Client.vue
@@ -9,6 +9,7 @@
   <span>search value: </span>
   <input type="text" v-model="searchValue">
   <div>
+    <button @click="refresh">Refresh</button>
     <DataTable
       table-node-id="my-table"
       v-model:items-selected="itemsSelected"
@@ -44,6 +45,8 @@
       @update-page-items="updateItems"
       @update-total-items="updateTotalItems"
       show-index-symbol="$"
+      items-key="id"
+      v-model:items-expanded="expandedItems"
     >
      <!-- <template #customize-headers>
         <thead class="my-static-header">
@@ -138,6 +141,7 @@ const switchToNested = () => {
   items.value = mockClientNestedItems(100);
 };
 const headers: Header[] = [
+  { text: "ID", value: "id" },
   { text: "Name", value: "name" },
   { text: "TEAM", value: "team"},
   { text: "NUMBER", value: "number", sortable: true},
@@ -146,6 +150,7 @@ const headers: Header[] = [
   { text: "WEIGHT (lbs)", value: "indicator.weight", sortable: true},
   { text: "LAST ATTENDED", value: "lastAttended", width: 200},
   { text: "COUNTRY", value: "country"},
+  { text: "LAST UPDATE", value: "updated"},
 ];
 
 // const headers: Header[] = headersMocked;
@@ -164,24 +169,31 @@ const updateTotalItems = (items: Item[]) => {
   console.log('total items');
   console.log(JSON.stringify(items));
 };
+const initialItems = [
+  { id: '1', name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
+  { id: '2', name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
+  { id: '3', name: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
+  { id: '4', name: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
+  { id: '5', name: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: "Greece"},
+  { id: '6', name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
+  { id: '7', name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
+  { id: '8', name: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
+  { id: '9', name: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
+  { id: '10', name: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: "Greece"},
+  { id: '11', name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
+  { id: '12', name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
+  { id: '13', name: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
+  { id: '14', name: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
+  { id: '15', name: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: "Greece"},
+]
+function getItems() {
+  return initialItems.map(item => ({...item, updated: new Date() }))
+}
+const items = ref<Item[]>(getItems());
+async function refresh() {
+  items.value = getItems()
+}
 
-const items = ref<Item[]>([
-  { name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
-  { name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
-  { name: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
-  { name: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
-  { name: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: "Greece"},
-  { name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
-  { name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
-  { name: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
-  { name: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
-  { name: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: "Greece"},
-  { name: "Stephen Curry", firstName: "GSW", number: 30, position: 'G', indicator: {"height": '6-2', "weight": 185}, lastAttended: "Davidson", country: "USA"},
-  { name: "Kevin Durant", firstName: "BKN", number: 7, position: 'F', indicator: {"height": '6-10', "weight": 240}, lastAttended: "Texas-Austin", country: "USA"},
-  { name: "Lebron James", firstName: "LAL", number: 7, position: 'F', indicator: {"height": '6-9', "weight": 185}, lastAttended: "St. Vincent-St. Mary HS (OH)", country: "USA"},
-  { name: "Giannis Antetokounmpo", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 242}, lastAttended: "Filathlitikos", country: "Greece"},
-  { name: "HC", firstName: "MIL", number: 34, position: 'F', indicator: {"height": '6-11', "weight": 243}, lastAttended: "Filathlitikos", country: "Greece"},
-]);
 
 // const items = ref<Item[]>(mockClientItems());
 
@@ -196,6 +208,7 @@ const items = ref<Item[]>([
 // ];
 
 const itemsSelected = ref<Item[]>([items.value[1]]);
+const expandedItems = ref<Item[]>([items.value[1]]);
 
 const showItem = (item: ClickRowArgument) => {
   console.log('item 111');
diff --git a/test/DataTable.spec.js b/test/DataTable.spec.js
index 083fc24..a50a4c8 100644
--- a/test/DataTable.spec.js
+++ b/test/DataTable.spec.js
@@ -219,3 +219,54 @@ describe('Server side paginate and sort', () => {
     }]);
   });
 });
+
+describe('Row Tracking', () => {
+  it('should select the first item',  async () => {
+    // Arrange
+    const rowsPerPage = 2
+    const mockItems = mockClientItems(rowsPerPage);
+    const firstItem = {...mockItems[0], address: 'New ADDRESS !@#!'}
+    const wrapper = mount(DataTable, {
+      props: {
+        itemsSelected: [firstItem],
+        items: mockItems,
+        headers: headersMocked,
+        rowsPerPage,
+        itemsKey: 'name'
+      },
+    });
+    
+    // Act
+    let checkboxes = wrapper.findAll('.easy-checkbox input');
+
+    // Assert
+    expect(checkboxes).toHaveLength(rowsPerPage + 1)
+    const checkedList = checkboxes.map(checkbox => checkbox.element.checked)
+    expect(checkedList).toEqual([false, true, false]);
+  })
+
+  it('should expand the first item',  async () => {
+    // Arrange
+    const rowsPerPage = 2
+    const mockItems = mockClientItems(rowsPerPage);
+    const firstItem = {...mockItems[0], address: 'New ADDRESS !@#!'}
+    const wrapper = mount(DataTable, {
+      props: {
+        itemsExpanded: [firstItem],
+        items: mockItems,
+        headers: headersMocked,
+        rowsPerPage,
+        itemsKey: 'name',
+      },
+      slots: {
+        expand: `<template #expand="item"> Hello expanded row </template>`
+      } 
+    });
+
+    // Act
+    let expandedIcons = wrapper.findAll('.expand-icon.expanding');
+
+    // Assert
+    expect(expandedIcons).toHaveLength(1)
+  })
+})

From a6a16170183d4067f1abc6801433e66395199ac3 Mon Sep 17 00:00:00 2001
From: Alik del Risco <alik.delrisco92@gmail.com>
Date: Fri, 23 Jun 2023 13:20:56 -0400
Subject: [PATCH 2/2] Add 'itemsKey' prop and items-expanded v-model

- The 'itemsKey' prop was introduced to improve row items tracking,
The previous implementation was using JSON.stringify, it can introduce
issues with non-static data.

- The 'items-expanded' v-model was introduced to handle the expanded
rows, we can track what are the expanded rows, expand all rows or
specific rows.
---
 src/components/DataTable.vue  |  9 +++++++-
 src/hooks/useExpandableRow.ts | 27 ++++++++++++++++++++---
 src/hooks/usePageItems.ts     | 22 +++++++------------
 src/hooks/useTotalItems.ts    |  9 ++++----
 src/propsWithDefault.ts       | 15 ++++++++++++-
 src/types/internal.d.ts       |  2 +-
 src/types/main.d.ts           |  3 +++
 src/utils.ts                  | 23 +++++++++++++++++++-
 test/utils.spec.ts            | 40 +++++++++++++++++++++++++++++++++++
 9 files changed, 125 insertions(+), 25 deletions(-)
 create mode 100644 test/utils.spec.ts

diff --git a/src/components/DataTable.vue b/src/components/DataTable.vue
index e51b2ab..fd95630 100644
--- a/src/components/DataTable.vue
+++ b/src/components/DataTable.vue
@@ -369,6 +369,8 @@ const {
   themeColor,
   rowsOfPageSeparatorMessage,
   showIndexSymbol,
+  itemsExpanded,
+  itemsKey,
   preventContextMenuRow
 } = toRefs(props);
 
@@ -411,7 +413,8 @@ const emits = defineEmits([
   'update:serverOptions',
   'updatePageItems',
   'updateTotalItems',
-  'selectAll'
+  'selectAll',
+  'update:itemsExpanded',
 ]);
 
 const isMultipleSelectable = computed((): boolean => itemsSelected.value !== null);
@@ -485,6 +488,7 @@ const {
   serverItemsLength,
   multiSort,
   emits,
+  itemsKey,
 );
 
 const {
@@ -521,6 +525,7 @@ const {
   showIndex,
   totalItems,
   totalItemsLength,
+  itemsKey,
 );
 
 const prevPageEndIndex = computed(() => {
@@ -536,6 +541,8 @@ const {
   pageItems,
   prevPageEndIndex,
   emits,
+  itemsExpanded,
+  itemsKey,
 );
 
 const {
diff --git a/src/hooks/useExpandableRow.ts b/src/hooks/useExpandableRow.ts
index 38bec72..97744e7 100644
--- a/src/hooks/useExpandableRow.ts
+++ b/src/hooks/useExpandableRow.ts
@@ -1,11 +1,14 @@
-import { ref, Ref, ComputedRef } from 'vue';
-import type { Item } from '../types/main';
+import { ref, Ref, ComputedRef, watchEffect } from 'vue';
+import type { Item, ItemKey } from '../types/main';
 import type { EmitsEventName } from '../types/internal';
+import { getItemIndex } from '../utils';
 
 export default function useExpandableRow(
   items: Ref<Item[]>,
   prevPageEndIndex: ComputedRef<number>,
   emits: (event: EmitsEventName, ...args: any[]) => void,
+  itemsExpanded: Ref<Item[]>,
+  itemsKey: Ref<ItemKey>
 ) {
   const expandingItemIndexList = ref<number[]>([]);
 
@@ -14,10 +17,12 @@ export default function useExpandableRow(
     const index = expandingItemIndexList.value.indexOf(expandingItemIndex);
     if (index !== -1) {
       expandingItemIndexList.value.splice(index, 1);
+      emitItemsExpanded();
     } else {
-      const currentPageExpandIndex = items.value.findIndex((item) => JSON.stringify(item) === JSON.stringify(expandingItem));
+      const currentPageExpandIndex = getItemIndex(items.value, expandingItem, itemsKey.value)
       emits('expandRow', prevPageEndIndex.value + currentPageExpandIndex, expandingItem);
       expandingItemIndexList.value.push(prevPageEndIndex.value + currentPageExpandIndex);
+      emitItemsExpanded();
     }
   };
 
@@ -25,6 +30,22 @@ export default function useExpandableRow(
     expandingItemIndexList.value = [];
   };
 
+  watchEffect(() => {
+    const indexList = itemsExpanded.value.reduce<number[]>((itemsExpandedIndex, expandedItem) => {
+      const index = getItemIndex(items.value, expandedItem, itemsKey.value)
+      if (index !== -1) {
+        itemsExpandedIndex.push(index + prevPageEndIndex.value)
+      }
+      return itemsExpandedIndex
+    }, [])
+    expandingItemIndexList.value = indexList
+  })
+
+
+  function emitItemsExpanded() {
+    emits('update:itemsExpanded', expandingItemIndexList.value.map(index => items.value[index - prevPageEndIndex.value]))
+  }
+
   return {
     expandingItemIndexList,
     updateExpandingItemIndexList,
diff --git a/src/hooks/usePageItems.ts b/src/hooks/usePageItems.ts
index dab08ca..84010cf 100644
--- a/src/hooks/usePageItems.ts
+++ b/src/hooks/usePageItems.ts
@@ -1,8 +1,9 @@
 import {
   Ref, computed, ComputedRef, WritableComputedRef,
 } from 'vue';
-import type { Item } from '../types/main';
+import type { Item, ItemKey } from '../types/main';
 import type { MultipleSelectStatus } from '../types/internal';
+import { areItemsEqual, getItemIndex } from '../utils';
 
 export default function usePageItems(
   currentPaginationNumber: Ref<number>,
@@ -14,6 +15,7 @@ export default function usePageItems(
   showIndex: Ref<boolean>,
   totalItems: ComputedRef<Item[]>,
   totalItemsLength: ComputedRef<number>,
+  itemsKey: Ref<ItemKey>
 ) {
   const currentPageFirstIndex = computed((): number => (currentPaginationNumber.value - 1)
     * rowsPerPageRef.value + 1);
@@ -45,21 +47,13 @@ export default function usePageItems(
     if (selectItemsComputed.value.length === 0) {
       return 'noneSelected';
     }
-    const isNoneSelected = selectItemsComputed.value.every((itemSelected) => {
-      if (totalItems.value.findIndex((item) => JSON.stringify(itemSelected) === JSON.stringify(item)) !== -1) {
-        return false;
-      }
-      return true;
-    });
+    const isNoneSelected = selectItemsComputed.value
+      .every((itemSelected) => getItemIndex(totalItems.value, itemSelected, itemsKey.value) === -1);
     if (isNoneSelected) return 'noneSelected';
 
     if (selectItemsComputed.value.length === totalItems.value.length) {
-      const isAllSelected = selectItemsComputed.value.every((itemSelected) => {
-        if (totalItems.value.findIndex((item) => JSON.stringify(itemSelected) === JSON.stringify(item)) === -1) {
-          return false;
-        }
-        return true;
-      });
+      const isAllSelected = selectItemsComputed.value
+        .every((itemSelected) => (getItemIndex(totalItems.value, itemSelected, itemsKey.value) !== -1));
       return isAllSelected ? 'allSelected' : 'partSelected';
     }
 
@@ -79,7 +73,7 @@ export default function usePageItems(
       const isSelected = selectItemsComputed.value.findIndex((selectItem) => {
         const itemDeepCloned = { ...item };
         delete itemDeepCloned.index;
-        return JSON.stringify(selectItem) === JSON.stringify(itemDeepCloned);
+        return areItemsEqual(selectItem, itemDeepCloned, itemsKey.value)
       }) !== -1;
       return { checkbox: isSelected, ...item };
     });
diff --git a/src/hooks/useTotalItems.ts b/src/hooks/useTotalItems.ts
index 5c2cc41..261166a 100644
--- a/src/hooks/useTotalItems.ts
+++ b/src/hooks/useTotalItems.ts
@@ -1,9 +1,9 @@
 import {
   Ref, computed, ComputedRef, watch,
 } from 'vue';
-import type { Item, FilterOption } from '../types/main';
+import type { Item, FilterOption, ItemKey } from '../types/main';
 import type { ClientSortOptions, EmitsEventName } from '../types/internal';
-import { getItemValue } from '../utils';
+import { areItemsEqual, getItemValue } from '../utils';
 
 export default function useTotalItems(
   clientSortOptions: Ref<ClientSortOptions | null>,
@@ -16,6 +16,7 @@ export default function useTotalItems(
   serverItemsLength: Ref<number>,
   multiSort: Ref<boolean>,
   emits: (event: EmitsEventName, ...args: any[]) => void,
+  itemsKey: Ref<ItemKey>
 ) {
   const generateSearchingTarget = (item: Item): string => {
     if (typeof searchField.value === 'string' && searchField.value !== '') return getItemValue(searchField.value, item);
@@ -152,8 +153,8 @@ export default function useTotalItems(
       selectItemsComputed.value = selectItemsArr;
       emits('selectRow', item);
     } else {
-      selectItemsComputed.value = selectItemsComputed.value.filter((selectedItem) => JSON.stringify(selectedItem)
-        !== JSON.stringify(item));
+      selectItemsComputed.value = selectItemsComputed.value
+        .filter((selectedItem) => !areItemsEqual(selectedItem, item, itemsKey.value));
       emits('deselectRow', item);
     }
   };
diff --git a/src/propsWithDefault.ts b/src/propsWithDefault.ts
index b6d2298..2566a5f 100644
--- a/src/propsWithDefault.ts
+++ b/src/propsWithDefault.ts
@@ -3,6 +3,7 @@ import type {
   SortType, Item, ServerOptions, FilterOption,
   HeaderItemClassNameFunction, BodyItemClassNameFunction, BodyRowClassNameFunction,
   TextDirection,
+  ItemKeyFn,
 } from './types/main';
 import type { ClickEventType } from './types/internal';
 
@@ -195,8 +196,20 @@ export default {
     type: String,
     default: '#',
   },
+  itemsExpanded: {
+    type: Array as PropType<Item[]>,
+    default: [],
+  },
+  /** String object key('id' it's the most common)
+   * or Function that returns a unique value for a row.
+   * It improves the tracking of expanded and checked rows.
+  */
+  itemsKey: {
+    type: [Function as PropType<ItemKeyFn>, String],
+    default: undefined,
+  },
   preventContextMenuRow: {
     type: Boolean,
     default: true
-  }
+  },
 };
diff --git a/src/types/internal.d.ts b/src/types/internal.d.ts
index f16e893..6f63a8a 100644
--- a/src/types/internal.d.ts
+++ b/src/types/internal.d.ts
@@ -26,4 +26,4 @@ export type ClickEventType = 'single' | 'double'
 export type MultipleSelectStatus = 'allSelected' | 'noneSelected' | 'partSelected'
 
 // eslint-disable-next-line max-len
-export type EmitsEventName = 'clickRow' | 'selectRow' | 'deselectRow' | 'expandRow' | 'updateSort' | 'update:itemsSelected' | 'update:serverOptions' | 'updateFilter' | 'updatePageItems' | 'updateTotalItems' | 'selectAll'
+export type EmitsEventName = 'clickRow' | 'selectRow' | 'deselectRow' | 'expandRow' | 'updateSort' | 'update:itemsSelected' | 'update:serverOptions' | 'updateFilter' | 'updatePageItems' | 'updateTotalItems' | 'selectAll' | 'update:itemsExpanded'
diff --git a/src/types/main.d.ts b/src/types/main.d.ts
index 880ab5f..314f740 100644
--- a/src/types/main.d.ts
+++ b/src/types/main.d.ts
@@ -56,3 +56,6 @@ export type BodyRowClassNameFunction = (item: Item, rowNumber: number) => string
 export type BodyItemClassNameFunction = (column: string, rowNumber: number) => string
 
 export type TextDirection = 'center' | 'left' | 'right'
+
+export type ItemKeyFn = (item: Item) => string | number
+export type ItemKey = ItemKeyFn | string | undefined
diff --git a/src/utils.ts b/src/utils.ts
index d4a3075..d06781c 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -1,4 +1,4 @@
-import type { Item } from './types/main';
+import type { Item, ItemKey } from './types/main';
 
 export function getItemValue(column: string, item: Item) {
   if (column.includes('.')) {
@@ -28,3 +28,24 @@ export function generateColumnContent(column: string, item: Item) {
   const content = getItemValue(column, item);
   return Array.isArray(content) ? content.join(',') : content;
 }
+
+function getComparatorFn(itemToCompare: Item, key: ItemKey) {
+ let comparatorFunction = (item: Item) => JSON.stringify(item) === JSON.stringify(itemToCompare)
+    
+    if (key && typeof key === 'function') {
+      comparatorFunction = (item: Item) => key(item) === key(itemToCompare)
+    }
+    if (key && typeof key === 'string') {
+      comparatorFunction = (item: Item) => getItemValue(key, item) === getItemValue(key, itemToCompare)
+    }
+    return comparatorFunction
+} 
+
+export function getItemIndex(allItems: Item[], item: Item, key: ItemKey) {
+  return allItems.findIndex(getComparatorFn(item, key));
+}
+
+export function areItemsEqual(item: Item, itemToCompare: Item, key: ItemKey) {
+ const areEqualsFn = getComparatorFn(item, key)
+  return areEqualsFn(itemToCompare);
+}
diff --git a/test/utils.spec.ts b/test/utils.spec.ts
new file mode 100644
index 0000000..a187620
--- /dev/null
+++ b/test/utils.spec.ts
@@ -0,0 +1,40 @@
+import { describe, it, expect } from 'vitest';
+import { areItemsEqual, getItemIndex } from '../src/utils';
+
+interface User {
+  id: string;
+  name: string;
+  lastName: string;
+}
+
+describe('Utils functions', () => {
+  describe('areItemsEqual()', () => {
+    it('should return true using the object key', () => {
+      const leftItem: User = { id: '1', name: 'John', lastName: 'Doe' };
+      const rightItem: User = { id: '1', name: 'John', lastName: 'Does' };
+      expect(areItemsEqual(leftItem, rightItem, 'id')).toBe(true);
+    });
+
+    it('should return true using the function key', () => {
+      const leftItem: User = { id: '1', name: 'John', lastName: 'Doe' };
+      const rightItem: User = { id: '2', name: 'John', lastName: 'Doe' };
+      const keyFn = (item: User) => item.name + item.lastName;
+      expect(areItemsEqual(leftItem, rightItem, keyFn as any)).toBe(true);
+    });
+
+    it('should return true using an undefined key', () => {
+      const leftItem: User = { id: '1', name: 'John', lastName: 'Doe' };
+      const rightItem: User = { id: '1', name: 'John', lastName: 'Doe' };
+      expect(areItemsEqual(leftItem, rightItem, undefined)).toBe(true);
+    });
+  });
+
+  it('getItemIndex()', () => {
+    const users: User[] = [
+      { id: '1', name: 'John', lastName: 'Doe' },
+      { id: '2', name: 'Ana', lastName: 'Wick' },
+      { id: '3', name: 'Xuxu', lastName: 'Bar' },
+    ];
+    expect(getItemIndex(users, { id: '2' }, 'id')).toBe(1);
+  });
+});