Improve UI performance by optimizing reactivity
- Replace `ref`s with `shallowRef` when deep reactivity is not needed. - Replace `readonly`s with `shallowReadonly` where the goal is to only prevent `.value` mutation. - Remove redundant `ref` in `SizeObserver.vue`. - Remove redundant nested `ref` in `TooltipWrapper.vue`. - Remove redundant `events` export from `UseCollectionState.ts`. - Remove redundant `computed` from `UseCollectionState.ts`. - Remove `timestamp` from `TreeViewFilterEvent` that becomes unnecessary after using `shallowRef`. - Add missing unit tests for `UseTreeViewFilterEvent`. - Add missing stub for `FilterChangeDetails`.
This commit is contained in:
@@ -1,6 +1,6 @@
|
||||
import { describe, it, expect } from 'vitest';
|
||||
import {
|
||||
ref, defineComponent, WatchSource, nextTick,
|
||||
shallowRef, defineComponent, WatchSource, nextTick,
|
||||
} from 'vue';
|
||||
import { shallowMount } from '@vue/test-utils';
|
||||
import { TreeRoot } from '@/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot';
|
||||
@@ -15,7 +15,7 @@ describe('useCurrentTreeNodes', () => {
|
||||
it('should set nodes on immediate invocation', () => {
|
||||
// arrange
|
||||
const expectedNodes = new QueryableNodesStub();
|
||||
const treeWatcher = ref<TreeRoot>(new TreeRootStub().withCollection(
|
||||
const treeWatcher = shallowRef<TreeRoot>(new TreeRootStub().withCollection(
|
||||
new TreeNodeCollectionStub().withNodes(expectedNodes),
|
||||
));
|
||||
// act
|
||||
@@ -27,7 +27,7 @@ describe('useCurrentTreeNodes', () => {
|
||||
it('should update nodes when treeWatcher changes', async () => {
|
||||
// arrange
|
||||
const initialNodes = new QueryableNodesStub();
|
||||
const treeWatcher = ref(
|
||||
const treeWatcher = shallowRef(
|
||||
new TreeRootStub().withCollection(new TreeNodeCollectionStub().withNodes(initialNodes)),
|
||||
);
|
||||
const { returnObject } = mountWrapperComponent(treeWatcher);
|
||||
@@ -45,7 +45,7 @@ describe('useCurrentTreeNodes', () => {
|
||||
// arrange
|
||||
const initialNodes = new QueryableNodesStub();
|
||||
const treeCollectionStub = new TreeNodeCollectionStub().withNodes(initialNodes);
|
||||
const treeWatcher = ref(new TreeRootStub().withCollection(treeCollectionStub));
|
||||
const treeWatcher = shallowRef(new TreeRootStub().withCollection(treeCollectionStub));
|
||||
|
||||
const { returnObject } = mountWrapperComponent(treeWatcher);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user