Skip to content

Commit

Permalink
update tests for the new functionalities as well
Browse files Browse the repository at this point in the history
  • Loading branch information
@EshaanAgg
EshaanAgg committed Nov 19, 2024
1 parent 91ba761 commit 720921f
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 42 deletions.
10 changes: 5 additions & 5 deletions docs/pages/ktable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@
</ul>
</p>
</DocsPageSection>

<DocsPageSection title="Usage" anchor="#usage">
<!--Non-Sortable Table-->
<h3>Table without sorting functionality</h3>
<p>
This is an example to show how <code>KTable</code> can be used without any sorting functionality, as a simple table.
</p>

<DocsShowCode language="html">
<KTable
:headers="headers"
Expand Down Expand Up @@ -154,7 +154,7 @@
};
},
</DocsShowCode>

<DocsShow block>
<KTable
:headers="slotHeaders"
Expand Down Expand Up @@ -471,9 +471,9 @@
const newRows = rows.reverse();
return {
rows: newRows,
sortOrder: currentSortOrder === "asc" ? "desc" : "asc",
sortOrder: currentSortOrder === 'asc' ? 'desc' : 'asc',
sortKey: columnIndex,
}
};
},
},
};
Expand Down
22 changes: 9 additions & 13 deletions lib/KTable/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -143,18 +143,14 @@
if (props.disableBuiltinSorting && props.sortable) {
// Emit the event to the parent to notify that the sorting has been requested
emit(
'changeSort',
index,
sortOrder.value === SORT_ORDER_ASC ? SORT_ORDER_DESC : SORT_ORDER_ASC
);
emit('changeSort', index, sortOrder.value);
if (props.customSort) {
const { sortedRows: newSortedRows, sortOrder: newSortOrder, sortKey: newSortKey } = props.customSort(
rows.value,
index,
sortOrder.value
);
const {
sortedRows: newSortedRows,
sortOrder: newSortOrder,
sortKey: newSortKey,
} = props.customSort(rows.value, index, sortOrder.value);
rows.value = newSortedRows;
sortOrder.value = newSortOrder;
Expand Down Expand Up @@ -268,13 +264,13 @@
required: false,
},
/*
* A function that is called when the user sorts the table. The function recieves the current rows, the column index and the current sort order as arguments. This function is called only when `disableBuiltinSorting` is set to `true` and the table is sortable.
*/
* A function that is called when the user sorts the table. The function recieves the current rows, the column index and the current sort order as arguments. This function is called only when `disableBuiltinSorting` is set to `true` and the table is sortable.
*/
customSort: {
type: Function,
required: false,
default: undefined,
}
},
},
data() {
return {
Expand Down
64 changes: 42 additions & 22 deletions lib/KTable/useSorting/__tests__/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import useSorting, {
} from '../';

describe('useSorting', () => {
let headers, rows, defaultSort, useLocalSorting;
let headers, rows, defaultSort, disableBuiltinSorting;

beforeEach(() => {
headers = ref([
Expand All @@ -30,7 +30,7 @@ describe('useSorting', () => {
index: -1,
});

useLocalSorting = ref(true);
disableBuiltinSorting = ref(false);
});

describe('default sorting', () => {
Expand All @@ -39,7 +39,7 @@ describe('useSorting', () => {
index: -1,
};

const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
expect(sortedRows.value).toEqual(rows.value);
});

Expand All @@ -49,7 +49,7 @@ describe('useSorting', () => {
direction: 'asc',
};

const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
expect(sortedRows.value).toEqual([
['Alice', 28, new Date(1992, 8, 10)],
['Jane', 25, new Date(1995, 10, 20)],
Expand All @@ -63,7 +63,7 @@ describe('useSorting', () => {
direction: 'desc',
};

const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
expect(sortedRows.value).toEqual([
['John', 30, new Date(1990, 5, 15)],
['Jane', 25, new Date(1995, 10, 20)],
Expand All @@ -77,7 +77,7 @@ describe('useSorting', () => {
direction: 'asc',
};

const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
expect(sortedRows.value).toEqual([
['Jane', 25, new Date(1995, 10, 20)],
['Alice', 28, new Date(1992, 8, 10)],
Expand All @@ -91,7 +91,7 @@ describe('useSorting', () => {
direction: 'asc',
};

const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
expect(sortedRows.value).toEqual([
['John', 30, new Date(1990, 5, 15)],
['Alice', 28, new Date(1992, 8, 10)],
Expand All @@ -100,36 +100,46 @@ describe('useSorting', () => {
});
});

describe('useLocalSorting is set to false', () => {
it('should return rows unsorted when useLocalSorting is false', () => {
useLocalSorting.value = false;
describe('disableBuiltinSorting is set to true', () => {
it('should return rows unsorted when disableBuiltinSorting is true', () => {
disableBuiltinSorting.value = true;

const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
expect(sortedRows.value).toEqual(rows.value);
});

it('should return the rows unsorted even when default sorting is enabled', () => {
useLocalSorting.value = false;
disableBuiltinSorting.value = true;
defaultSort.value = {
index: 0,
direction: 'asc',
};

const { sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
const { sortedRows } = useSorting(headers, rows, defaultSort, disableBuiltinSorting);
expect(sortedRows.value).toEqual(rows.value);
});

it('should not sort rows even when a column is clicked', () => {
useLocalSorting.value = false;

const { handleSort, sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
disableBuiltinSorting.value = true;

const { handleSort, sortedRows } = useSorting(
headers,
rows,
defaultSort,
disableBuiltinSorting
);
handleSort(0); // Sort by 'Name'
expect(sortedRows.value).toEqual(rows.value);
});
});

it('should sort rows by string column in ascending order', () => {
const { handleSort, sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
const { handleSort, sortedRows } = useSorting(
headers,
rows,
defaultSort,
disableBuiltinSorting
);

handleSort(0); // Sort by 'Name'
expect(sortedRows.value).toEqual([
Expand All @@ -144,7 +154,7 @@ describe('useSorting', () => {
headers,
rows,
defaultSort,
useLocalSorting
disableBuiltinSorting
);

handleSort(1); // Sort by 'Age'
Expand Down Expand Up @@ -173,7 +183,12 @@ describe('useSorting', () => {
});

it('should sort rows by date column in ascending order', () => {
const { handleSort, sortedRows } = useSorting(headers, rows, defaultSort, useLocalSorting);
const { handleSort, sortedRows } = useSorting(
headers,
rows,
defaultSort,
disableBuiltinSorting
);

handleSort(2); // Sort by 'Birthdate'
expect(sortedRows.value).toEqual([
Expand All @@ -188,7 +203,7 @@ describe('useSorting', () => {
headers,
rows,
defaultSort,
useLocalSorting
disableBuiltinSorting
);

handleSort(3); // Attempt to sort by 'Other'
Expand All @@ -197,7 +212,12 @@ describe('useSorting', () => {
});

it('should return correct aria-sort attribute based on current sorting', () => {
const { handleSort, getAriaSort } = useSorting(headers, rows, defaultSort, useLocalSorting);
const { handleSort, getAriaSort } = useSorting(
headers,
rows,
defaultSort,
disableBuiltinSorting
);

expect(getAriaSort(0)).toBe('none');

Expand All @@ -213,7 +233,7 @@ describe('useSorting', () => {
headers,
rows,
defaultSort,
useLocalSorting
disableBuiltinSorting
);

handleSort(0); // Sort by 'Name'
Expand Down
92 changes: 90 additions & 2 deletions lib/__tests__/KTable.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ describe('KTable.vue', () => {
const headers = [
{ label: 'Name', dataType: 'string', columnId: 'name' },
{ label: 'Age', dataType: 'number', columnId: 'age' },
{ label: 'City', dataType: 'string', columnId: 'city' },
{ label: 'Date', dataType: 'date', columnId: 'date' },
];
const rows = [
['John', 30, '2023-01-01'],
Expand Down Expand Up @@ -94,8 +94,8 @@ describe('KTable.vue', () => {
await wrapper.vm.$nextTick();
const expectedRows = [
['Alice', 25, 'Los Angeles'],
['Bob', 35, 'San Francisco'],
['John', 30, 'New York'],
['Bob', 35, 'San Francisco'],
];
assertTableContent(wrapper, expectedRows);
});
Expand All @@ -120,6 +120,94 @@ describe('KTable.vue', () => {
});
});

describe('should handle disableBuiltinSorting correctly', () => {
const headers = [
{ label: 'Name', dataType: 'string', columnId: 'name' },
{ label: 'Age', dataType: 'number', columnId: 'age' },
{ label: 'City', dataType: 'string', columnId: 'city' },
];

const rows = [
['John', 30, 'New York'],
['Alice', 25, 'Los Angeles'],
['Bob', 35, 'San Francisco'],
];

const renderWrapper = async props => {
const wrapper = mount(KTable, {
propsData: {
headers,
rows,
caption: 'Test Table',
disableBuiltinSorting: true,
sortable: true,
...props,
},
});

await wrapper.vm.$nextTick();
return wrapper;
};

it('should not sort the rows', async () => {
const wrapper = await renderWrapper();
assertTableContent(wrapper, rows);
});

it('should not sort even if default sort is provided', async () => {
const wrapper = await renderWrapper({ defaultSort: { columnId: 'age', direction: 'asc' } });
assertTableContent(wrapper, rows);
});

it('should emit changeSort event when sortable column is clicked', async () => {
const wrapper = await renderWrapper();

const headerCells = wrapper.findAll('thead th');
await headerCells.at(1).trigger('click');

expect(wrapper.emitted('changeSort')).toBeTruthy();
const eventPayload = wrapper.emitted('changeSort')[0];
expect(eventPayload).toEqual([1, null]);
});

it('should call the custom sort function when sortable column is clicked', async () => {
const mockSortFunction = jest.fn();

const wrapper = await renderWrapper({ customSort: mockSortFunction });

const headerCells = wrapper.findAll('thead th');
await headerCells.at(1).trigger('click');

expect(mockSortFunction).toHaveBeenCalled();
expect(mockSortFunction).toHaveBeenCalledWith(rows, 1, null);
});

it('should change the table rows based on the custom sort function', async () => {
// Sort the rows by the second column in ascending order
const customSortFunction = jest.fn().mockImplementation(rows => {
return {
rows: rows.sort((a, b) => a[1] - b[1]),
sortKey: 1,
sortOrder: 'desc',
};
});

const wrapper = await renderWrapper({ customSort: customSortFunction });
const headerCells = wrapper.findAll('thead th');
await headerCells.at(1).trigger('click');

const sortedRows = [
['Alice', 25, 'Los Angeles'],
['John', 30, 'New York'],
['Bob', 35, 'San Francisco'],
];
assertTableContent(wrapper, sortedRows);

await headerCells.at(1).trigger('click');
expect(customSortFunction).toHaveBeenCalledWith(sortedRows, 1, 'desc');
});
});

it('should handle sticky headers and columns', async () => {
const headers = [
{ label: 'Name', dataType: 'string', columnId: 'name' },
Expand Down

0 comments on commit 720921f

Please sign in to comment.