From 3457fe18cf8193883f45b50ecbc9638c91ace2fb Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Thu, 14 Dec 2023 09:51:42 +0100
Subject: [PATCH] Fix OS switching not working on tree view UI

This commit resolves a rendering bug in the tree view component.
Previously, updating the tree collection prior to node updates led to
rendering errors due to the presence of non-existent nodes in the new
collection.

Changes:

- Implement manual control over the rendering process in tree view. This
  includes clearing the rendering queue and currently rendered nodes
  before updates, aligning the rendering process with the updated
  collection.
- Add Cypress E2E tests to test switching between all operating systems
  and script views, ensuring no uncaught errors and preventing
  regression.
- Replace hardcoded operating system lists in the download URL list view
  with a unified `getSupportedOsList()` method from the application,
  reducing duplication and simplifying future updates.
- Rename `initial-nodes` to `nodes` in `TreeView.vue` to reflect their
  mutable nature.
- Centralize the function for getting operating system names into
  `OperatingSystemNames.ts`, improving reusability in E2E tests.
---
 .../components/Scripts/Menu/TheOsChanger.vue  | 18 ++---
 .../Scripts/View/Tree/ScriptsTree.vue         |  6 +-
 .../Rendering/UseGradualNodeRendering.ts      | 35 +++++++--
 .../Scripts/View/Tree/TreeView/TreeView.vue   | 41 +++++++++--
 .../components/Shared/OperatingSystemNames.ts | 15 ++++
 .../components/TheFooter/DownloadUrlList.vue  | 13 ++--
 .../TheFooter/DownloadUrlListItem.vue         | 17 +----
 tests/e2e/code-highlighting.cy.ts             |  2 +-
 tests/e2e/operating-system-selector.cy.ts     | 72 +++++++++++++++++++
 tests/e2e/tsconfig.json                       |  2 +-
 .../Tree/Shared/OperatingSystemNames.spec.ts  | 24 +++++++
 .../View/Tree/TreeView/TreeView.spec.ts       | 58 +++++++++++----
 .../Rendering/UseGradualNodeRendering.spec.ts | 58 +++++++++++++--
 13 files changed, 285 insertions(+), 76 deletions(-)
 create mode 100644 src/presentation/components/Shared/OperatingSystemNames.ts
 create mode 100644 tests/e2e/operating-system-selector.cy.ts
 create mode 100644 tests/integration/presentation/components/Scripts/View/Tree/Shared/OperatingSystemNames.spec.ts

diff --git a/src/presentation/components/Scripts/Menu/TheOsChanger.vue b/src/presentation/components/Scripts/Menu/TheOsChanger.vue
index 6bebcacb..e0cf643a 100644
--- a/src/presentation/components/Scripts/Menu/TheOsChanger.vue
+++ b/src/presentation/components/Scripts/Menu/TheOsChanger.vue
@@ -14,10 +14,11 @@
 import { defineComponent, computed } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
+import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
 import MenuOptionList from './MenuOptionList.vue';
 import MenuOptionListItem from './MenuOptionListItem.vue';
 
-interface IOsViewModel {
+interface OperatingSystemOption {
   readonly name: string;
   readonly os: OperatingSystem;
 }
@@ -31,12 +32,12 @@ export default defineComponent({
     const { modifyCurrentContext, currentState } = injectKey((keys) => keys.useCollectionState);
     const { application } = injectKey((keys) => keys.useApplication);
 
-    const allOses = computed<ReadonlyArray<IOsViewModel>>(
+    const allOses = computed<ReadonlyArray<OperatingSystemOption>>(
       () => application
         .getSupportedOsList()
-        .map((os) : IOsViewModel => ({
+        .map((os) : OperatingSystemOption => ({
           os,
-          name: renderOsName(os),
+          name: getOperatingSystemDisplayName(os),
         })),
     );
 
@@ -57,13 +58,4 @@ export default defineComponent({
     };
   },
 });
-
-function renderOsName(os: OperatingSystem): string {
-  switch (os) {
-    case OperatingSystem.Windows: return 'Windows';
-    case OperatingSystem.macOS: return 'macOS';
-    case OperatingSystem.Linux: return 'Linux (preview)';
-    default: throw new RangeError(`Cannot render os name: ${OperatingSystem[os]}`);
-  }
-}
 </script>
diff --git a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
index 8bf044be..7cc1b647 100644
--- a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
+++ b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
@@ -5,9 +5,9 @@
       'top-padding': hasTopPadding,
     }"
   >
-    <template v-if="initialNodes.length">
+    <template v-if="nodes.length">
       <TreeView
-        :initial-nodes="initialNodes"
+        :nodes="nodes"
         :selected-leaf-node-ids="selectedScriptNodeIds"
         :latest-filter-event="latestFilterEvent"
         @node-state-changed="handleNodeChangedEvent($event)"
@@ -61,7 +61,7 @@ export default defineComponent({
     }
 
     return {
-      initialNodes: treeViewInputNodes,
+      nodes: treeViewInputNodes,
       selectedScriptNodeIds,
       latestFilterEvent,
       handleNodeChangedEvent,
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.ts b/src/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.ts
index 2cfd3e75..877f7022 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.ts
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.ts
@@ -5,12 +5,19 @@ import { ReadOnlyTreeNode } from '../Node/TreeNode';
 import { useNodeStateChangeAggregator } from '../UseNodeStateChangeAggregator';
 import { TreeRoot } from '../TreeRoot/TreeRoot';
 import { useCurrentTreeNodes } from '../UseCurrentTreeNodes';
+import { QueryableNodes } from '../TreeRoot/NodeCollection/Query/QueryableNodes';
 import { NodeRenderingStrategy } from './Scheduling/NodeRenderingStrategy';
 import { DelayScheduler } from './DelayScheduler';
 import { TimeoutDelayScheduler } from './Scheduling/TimeoutDelayScheduler';
 import { RenderQueueOrderer } from './Ordering/RenderQueueOrderer';
 import { CollapsedParentOrderer } from './Ordering/CollapsedParentOrderer';
 
+export interface NodeRenderingControl {
+  readonly renderingStrategy: NodeRenderingStrategy;
+  clearRenderingStates(): void;
+  notifyRenderingUpdates(): void;
+}
+
 /**
  * Renders tree nodes gradually to prevent UI freeze when loading large amounts of nodes.
  */
@@ -22,7 +29,7 @@ export function useGradualNodeRendering(
   initialBatchSize = 30,
   subsequentBatchSize = 5,
   orderer: RenderQueueOrderer = new CollapsedParentOrderer(),
-): NodeRenderingStrategy {
+): NodeRenderingControl {
   const nodesToRender = new Set<ReadOnlyTreeNode>();
   const nodesBeingRendered = shallowRef(new Set<ReadOnlyTreeNode>());
   let isRenderingInProgress = false;
@@ -31,6 +38,10 @@ export function useGradualNodeRendering(
   const { onNodeStateChange } = useChangeAggregator(treeRootRef);
   const { nodes } = useTreeNodes(treeRootRef);
 
+  function notifyRenderingUpdates() {
+    triggerRef(nodesBeingRendered);
+  }
+
   function updateNodeRenderQueue(node: ReadOnlyTreeNode, isVisible: boolean) {
     if (isVisible
         && !nodesToRender.has(node)
@@ -43,16 +54,20 @@ export function useGradualNodeRendering(
       }
       if (nodesBeingRendered.value.has(node)) {
         nodesBeingRendered.value.delete(node);
-        triggerRef(nodesBeingRendered);
+        notifyRenderingUpdates();
       }
     }
   }
 
-  watch(nodes, (newNodes) => {
+  function clearRenderingStates() {
     nodesToRender.clear();
     nodesBeingRendered.value.clear();
+  }
+
+  function initializeAndRenderNodes(newNodes: QueryableNodes) {
+    clearRenderingStates();
     if (!newNodes || newNodes.flattenedNodes.length === 0) {
-      triggerRef(nodesBeingRendered);
+      notifyRenderingUpdates();
       return;
     }
     newNodes
@@ -60,6 +75,10 @@ export function useGradualNodeRendering(
       .filter((node) => node.state.current.isVisible)
       .forEach((node) => nodesToRender.add(node));
     beginRendering();
+  }
+
+  watch(nodes, (newNodes) => {
+    initializeAndRenderNodes(newNodes);
   }, { immediate: true });
 
   onNodeStateChange((change) => {
@@ -91,7 +110,7 @@ export function useGradualNodeRendering(
       nodesToRender.delete(node);
       nodesBeingRendered.value.add(node);
     });
-    triggerRef(nodesBeingRendered);
+    notifyRenderingUpdates();
     scheduler.scheduleNext(
       () => renderNextBatch(subsequentBatchSize),
       renderingDelayInMs,
@@ -103,6 +122,10 @@ export function useGradualNodeRendering(
   }
 
   return {
-    shouldRender: shouldNodeBeRendered,
+    renderingStrategy: {
+      shouldRender: shouldNodeBeRendered,
+    },
+    clearRenderingStates,
+    notifyRenderingUpdates,
   };
 }
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue b/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
index daf61739..2f84c2ed 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
@@ -3,7 +3,7 @@
     ref="treeContainerElement"
     class="tree"
   >
-    <TreeRoot :tree-root="tree" :rendering-strategy="nodeRenderingScheduler">
+    <TreeRoot :tree-root="tree" :rendering-strategy="renderingStrategy">
       <template #default="slotProps">
         <slot name="node-content" v-bind="slotProps" />
       </template>
@@ -15,6 +15,7 @@
 import {
   defineComponent, onMounted, watch,
   shallowRef, toRef, shallowReadonly,
+  nextTick,
 } from 'vue';
 import { TreeRootManager } from './TreeRoot/TreeRootManager';
 import TreeRoot from './TreeRoot/TreeRoot.vue';
@@ -27,7 +28,7 @@ import { useLeafNodeCheckedStateUpdater } from './UseLeafNodeCheckedStateUpdater
 import { TreeNodeStateChangedEmittedEvent } from './Bindings/TreeNodeStateChangedEmittedEvent';
 import { useAutoUpdateParentCheckState } from './UseAutoUpdateParentCheckState';
 import { useAutoUpdateChildrenCheckState } from './UseAutoUpdateChildrenCheckState';
-import { useGradualNodeRendering } from './Rendering/UseGradualNodeRendering';
+import { useGradualNodeRendering, NodeRenderingControl } from './Rendering/UseGradualNodeRendering';
 import type { PropType } from 'vue';
 
 export default defineComponent({
@@ -35,7 +36,7 @@ export default defineComponent({
     TreeRoot,
   },
   props: {
-    initialNodes: {
+    nodes: {
       type: Array as PropType<readonly TreeInputNodeData[]>,
       default: () => [],
     },
@@ -65,7 +66,7 @@ export default defineComponent({
     useLeafNodeCheckedStateUpdater(treeRef, toRef(props, 'selectedLeafNodeIds'));
     useAutoUpdateParentCheckState(treeRef);
     useAutoUpdateChildrenCheckState(treeRef);
-    const nodeRenderingScheduler = useGradualNodeRendering(treeRef);
+    const nodeRenderer = useGradualNodeRendering(treeRef);
 
     const { onNodeStateChange } = useNodeStateChangeAggregator(treeRef);
 
@@ -78,18 +79,44 @@ export default defineComponent({
     });
 
     onMounted(() => {
-      watch(() => props.initialNodes, (nodes) => {
-        tree.collection.updateRootNodes(nodes);
+      watch(() => props.nodes, async (nodes) => {
+        await forceRerenderNodes(
+          nodeRenderer,
+          () => tree.collection.updateRootNodes(nodes),
+        );
       }, { immediate: true });
     });
 
     return {
       treeContainerElement,
-      nodeRenderingScheduler,
+      renderingStrategy: nodeRenderer.renderingStrategy,
       tree,
     };
   },
 });
+
+/**
+ * This function is used to manually trigger a re-render of the tree nodes.
+ * In Vue, manually controlling the rendering process is typically an anti-pattern,
+ * as Vue's reactivity system is designed to handle updates efficiently. However,
+ * in this specific case, it's necessary to ensure the correct order of rendering operations.
+ * This function first clears the rendering queue and the currently rendered nodes,
+ * ensuring that UI elements relying on outdated node states are removed. This is needed
+ * in scenarios where the collection is updated before the nodes, which can lead to errors
+ * if nodes that no longer exist in the collection are still being rendered.
+ * Using this function, we ensure a clean state before updating the nodes, aligning with
+ * the updated collection.
+ */
+async function forceRerenderNodes(
+  renderer: NodeRenderingControl,
+  nodeUpdater: () => void,
+) {
+  renderer.clearRenderingStates();
+  renderer.notifyRenderingUpdates();
+  await nextTick();
+  nodeUpdater();
+}
+
 </script>
 
 <style scoped lang="scss">
diff --git a/src/presentation/components/Shared/OperatingSystemNames.ts b/src/presentation/components/Shared/OperatingSystemNames.ts
new file mode 100644
index 00000000..35886725
--- /dev/null
+++ b/src/presentation/components/Shared/OperatingSystemNames.ts
@@ -0,0 +1,15 @@
+import { OperatingSystem } from '@/domain/OperatingSystem';
+
+export function getOperatingSystemDisplayName(os: OperatingSystem): string {
+  const displayName = OperatingSystemNames[os];
+  if (!displayName) {
+    throw new RangeError(`Unsupported operating system ID: ${os}`);
+  }
+  return displayName;
+}
+
+const OperatingSystemNames: Partial<Record<OperatingSystem, string>> = {
+  [OperatingSystem.Windows]: 'Windows',
+  [OperatingSystem.macOS]: 'macOS',
+  [OperatingSystem.Linux]: 'Linux (preview)',
+};
diff --git a/src/presentation/components/TheFooter/DownloadUrlList.vue b/src/presentation/components/TheFooter/DownloadUrlList.vue
index b78ff132..1f318274 100644
--- a/src/presentation/components/TheFooter/DownloadUrlList.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlList.vue
@@ -24,17 +24,10 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { OperatingSystem } from '@/domain/OperatingSystem';
 import { injectKey } from '@/presentation/injectionSymbols';
 import AppIcon from '@/presentation/components/Shared/Icon/AppIcon.vue';
 import DownloadUrlListItem from './DownloadUrlListItem.vue';
 
-const supportedOperativeSystems: readonly OperatingSystem[] = [
-  OperatingSystem.Windows,
-  OperatingSystem.Linux,
-  OperatingSystem.macOS,
-];
-
 export default defineComponent({
   components: {
     DownloadUrlListItem,
@@ -42,8 +35,12 @@ export default defineComponent({
   },
   setup() {
     const { os: currentOs } = injectKey((keys) => keys.useRuntimeEnvironment);
+    const { application } = injectKey((keys) => keys.useApplication);
+
+    const supportedOperativeSystems = application.getSupportedOsList();
+
     const supportedDesktops = [
-      ...supportedOperativeSystems,
+      ...application.getSupportedOsList(),
     ].sort((os) => (os === currentOs ? 0 : 1));
 
     const hasCurrentOsDesktopVersion = currentOs === undefined
diff --git a/src/presentation/components/TheFooter/DownloadUrlListItem.vue b/src/presentation/components/TheFooter/DownloadUrlListItem.vue
index 16d01dea..0d5e5602 100644
--- a/src/presentation/components/TheFooter/DownloadUrlListItem.vue
+++ b/src/presentation/components/TheFooter/DownloadUrlListItem.vue
@@ -16,6 +16,7 @@ import {
 } from 'vue';
 import { injectKey } from '@/presentation/injectionSymbols';
 import { OperatingSystem } from '@/domain/OperatingSystem';
+import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
 
 export default defineComponent({
   props: {
@@ -33,7 +34,7 @@ export default defineComponent({
     });
 
     const operatingSystemName = computed<string>(() => {
-      return getOperatingSystemName(props.operatingSystem);
+      return getOperatingSystemDisplayName(props.operatingSystem);
     });
 
     const hasCurrentOsDesktopVersion = computed<boolean>(() => {
@@ -58,20 +59,6 @@ function hasDesktopVersion(os: OperatingSystem): boolean {
     || os === OperatingSystem.Linux
     || os === OperatingSystem.macOS;
 }
-
-function getOperatingSystemName(os: OperatingSystem): string {
-  switch (os) {
-    case OperatingSystem.Linux:
-      return 'Linux (preview)';
-    case OperatingSystem.macOS:
-      return 'macOS';
-    case OperatingSystem.Windows:
-      return 'Windows';
-    default:
-      throw new Error(`Unsupported os: ${OperatingSystem[os]}`);
-  }
-}
-
 </script>
 
 <style scoped lang="scss">
diff --git a/tests/e2e/code-highlighting.cy.ts b/tests/e2e/code-highlighting.cy.ts
index 9a9b82ff..10ccf9f5 100644
--- a/tests/e2e/code-highlighting.cy.ts
+++ b/tests/e2e/code-highlighting.cy.ts
@@ -2,8 +2,8 @@ import { expectExists } from '@tests/shared/Assertions/ExpectExists';
 import { openCard } from './support/interactions/card';
 
 describe('script selection highlighting', () => {
+  // Regression test for a bug where selecting multiple scripts only highlighted the last one.
   it('highlights more when multiple scripts are selected', () => {
-    // Regression test for a bug where selecting multiple scripts only highlighted the last one.
     cy.visit('/');
     selectLastScript();
     getCurrentHighlightRange((lastScriptHighlightRange) => {
diff --git a/tests/e2e/operating-system-selector.cy.ts b/tests/e2e/operating-system-selector.cy.ts
new file mode 100644
index 00000000..119852b0
--- /dev/null
+++ b/tests/e2e/operating-system-selector.cy.ts
@@ -0,0 +1,72 @@
+import { ViewType } from '@/presentation/components/Scripts/Menu/View/ViewType';
+import { getEnumValues } from '@/application/Common/Enum';
+import { OperatingSystem } from '@/domain/OperatingSystem';
+import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
+
+describe('operating system selector', () => {
+  // Regression test for a bug where switching between operating systems caused uncaught exceptions.
+  describe('allows user to switch between supported operating systems', () => {
+    getEnumValues(ViewType).forEach((viewType) => {
+      it(`switches to ${ViewType[viewType]} view successfully`, () => {
+        // arrange
+        cy.visit('/');
+        selectViewType(viewType);
+        getSupportedOperatingSystemsList().forEach((operatingSystem) => {
+          // act
+          selectOperatingSystem(operatingSystem);
+          // assert
+          assertExpectedActions();
+        });
+      });
+    });
+  });
+});
+
+function getSupportedOperatingSystemsList() {
+  /*
+    Marked: refactor-with-aot-compilation
+      The operating systems list is hardcoded due to the challenge of loading
+      the application within Cypress, as its compilation is tightly coupled with Vite.
+      Ideally, this should dynamically fetch the list from the compiled application.
+  */
+  return [
+    OperatingSystem.Windows,
+    OperatingSystem.Linux,
+    OperatingSystem.macOS,
+  ];
+}
+
+function assertExpectedActions() {
+  /*
+    Marked: refactor-with-aot-compilation
+      Assertions are currently hardcoded due to the inability to load the application within
+      Cypress, as compilation is tightly coupled with Vite. Future refactoring should dynamically
+      assert the visibility of all actions (e.g., `actions.map((a) => cy.contains(a.title))`)
+      once the application's compilation process is decoupled from Vite.
+  */
+  cy.contains('Privacy cleanup');
+}
+
+function selectOperatingSystem(operatingSystem: OperatingSystem) {
+  const operatingSystemLabel = getOperatingSystemDisplayName(operatingSystem);
+  if (!operatingSystemLabel) {
+    throw new Error(`Label does not exist for operating system: ${OperatingSystem[operatingSystem]}`);
+  }
+  cy.log(`Visiting operating system: ${operatingSystemLabel}`);
+  cy
+    .contains('span', operatingSystemLabel)
+    .click();
+}
+
+function selectViewType(viewType: ViewType): void {
+  const viewTypeLabel = ViewTypeLabels[viewType];
+  cy.log(`Selecting view: ${ViewType[viewType]}`);
+  cy
+    .contains('span', viewTypeLabel)
+    .click();
+}
+
+const ViewTypeLabels: Record<ViewType, string> = {
+  [ViewType.Cards]: 'Cards',
+  [ViewType.Tree]: 'Tree',
+} as const;
diff --git a/tests/e2e/tsconfig.json b/tests/e2e/tsconfig.json
index b1e5c3dd..dc85afd1 100644
--- a/tests/e2e/tsconfig.json
+++ b/tests/e2e/tsconfig.json
@@ -13,6 +13,6 @@
     "sourceMap": false,
   },
   "include": [
-    "**/*.ts"
+    "**/*.ts",
   ]
 }
\ No newline at end of file
diff --git a/tests/integration/presentation/components/Scripts/View/Tree/Shared/OperatingSystemNames.spec.ts b/tests/integration/presentation/components/Scripts/View/Tree/Shared/OperatingSystemNames.spec.ts
new file mode 100644
index 00000000..115ce5bd
--- /dev/null
+++ b/tests/integration/presentation/components/Scripts/View/Tree/Shared/OperatingSystemNames.spec.ts
@@ -0,0 +1,24 @@
+import {
+  describe, it, expect,
+} from 'vitest';
+import { ApplicationFactory } from '@/application/ApplicationFactory';
+import { getOperatingSystemDisplayName } from '@/presentation/components/Shared/OperatingSystemNames';
+import { OperatingSystem } from '@/domain/OperatingSystem';
+
+describe('OperatingSystemNames', () => {
+  describe('getOperatingSystemDisplayName', () => {
+    describe('retrieving display names for supported operating systems', async () => {
+      // arrange
+      const application = await ApplicationFactory.Current.getApp();
+      const supportedOperatingSystems = application.getSupportedOsList();
+      supportedOperatingSystems.forEach((supportedOperatingSystem) => {
+        it(`should return a non-empty name for ${OperatingSystem[supportedOperatingSystem]}`, () => {
+          // act
+          const displayName = getOperatingSystemDisplayName(supportedOperatingSystem);
+          // assert
+          expect(displayName).to.have.length.greaterThanOrEqual(1);
+        });
+      });
+    });
+  });
+});
diff --git a/tests/integration/presentation/components/Scripts/View/Tree/TreeView/TreeView.spec.ts b/tests/integration/presentation/components/Scripts/View/Tree/TreeView/TreeView.spec.ts
index fc06dd62..1833044e 100644
--- a/tests/integration/presentation/components/Scripts/View/Tree/TreeView/TreeView.spec.ts
+++ b/tests/integration/presentation/components/Scripts/View/Tree/TreeView/TreeView.spec.ts
@@ -9,23 +9,43 @@ import { provideDependencies } from '@/presentation/bootstrapping/DependencyProv
 import { ApplicationContextStub } from '@tests/unit/shared/Stubs/ApplicationContextStub';
 
 describe('TreeView', () => {
-  it('should render all provided root nodes correctly', async () => {
+  it('renders all provided root nodes correctly', async () => {
     // arrange
     const nodes = createSampleNodes();
     const wrapper = createTreeViewWrapper(nodes);
+
     // act
     await waitForStableDom(wrapper.element);
+
     // assert
     const expectedTotalRootNodes = nodes.length;
     expect(wrapper.findAll('.node').length).to.equal(expectedTotalRootNodes, wrapper.html());
-    const rootNodeTexts = nodes.map((node) => node.data.label);
+    const rootNodeTexts = nodes.map((node) => (node.data as TreeInputMetadata).label);
     rootNodeTexts.forEach((label) => {
       expect(wrapper.text()).to.include(label);
     });
   });
+
+  // Regression test for a bug where updating the nodes prop caused uncaught exceptions.
+  it('updates nodes correctly when props change', async () => {
+    // arrange
+    const firstNodeLabel = 'Node 1';
+    const secondNodeLabel = 'Node 2';
+    const initialNodes: TreeInputNodeDataWithMetadata[] = [{ id: 'node1', data: { label: firstNodeLabel } }];
+    const updatedNodes: TreeInputNodeDataWithMetadata[] = [{ id: 'node2', data: { label: secondNodeLabel } }];
+    const wrapper = createTreeViewWrapper(initialNodes);
+
+    // act
+    await wrapper.setProps({ nodes: updatedNodes });
+    await waitForStableDom(wrapper.element);
+
+    // assert
+    expect(wrapper.text()).toContain(secondNodeLabel);
+    expect(wrapper.text()).not.toContain(firstNodeLabel);
+  });
 });
 
-function createTreeViewWrapper(initialNodeData: readonly TreeInputNodeData[]) {
+function createTreeViewWrapper(initialNodeData: readonly TreeInputNodeDataWithMetadata[]) {
   return mount(defineComponent({
     components: {
       TreeView,
@@ -33,26 +53,34 @@ function createTreeViewWrapper(initialNodeData: readonly TreeInputNodeData[]) {
     setup() {
       provideDependencies(new ApplicationContextStub());
 
-      const initialNodes = shallowRef(initialNodeData);
+      const nodes = shallowRef(initialNodeData);
       const selectedLeafNodeIds = shallowRef<readonly string[]>([]);
+
       return {
-        initialNodes,
+        nodes,
         selectedLeafNodeIds,
       };
     },
     template: `
-    <TreeView
-      :initialNodes="initialNodes"
-      :selectedLeafNodeIds="selectedLeafNodeIds"
-    >
-      <template v-slot:node-content="{ nodeMetadata }">
-        {{ nodeMetadata.label }}
-      </template>
-    </TreeView>`,
+      <TreeView
+        :nodes="nodes"
+        :selectedLeafNodeIds="selectedLeafNodeIds"
+      >
+        <template v-slot:node-content="{ nodeMetadata }">
+          {{ nodeMetadata.label }}
+        </template>
+      </TreeView>
+    `,
   }));
 }
 
-function createSampleNodes() {
+interface TreeInputMetadata {
+  readonly label: string;
+}
+
+type TreeInputNodeDataWithMetadata = TreeInputNodeData & { readonly data?: TreeInputMetadata };
+
+function createSampleNodes(): TreeInputNodeDataWithMetadata[] {
   return [
     {
       id: 'root1',
@@ -93,7 +121,7 @@ function createSampleNodes() {
 
 function waitForStableDom(rootElement, timeout = 3000, interval = 200): Promise<void> {
   return new Promise((resolve, reject) => {
-    let lastTimeoutId;
+    let lastTimeoutId: ReturnType<typeof setTimeout>;
     const observer = new MutationObserver(() => {
       if (lastTimeoutId) {
         clearTimeout(lastTimeoutId);
diff --git a/tests/unit/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.spec.ts b/tests/unit/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.spec.ts
index d757f0f5..cde30de0 100644
--- a/tests/unit/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.spec.ts
+++ b/tests/unit/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering.spec.ts
@@ -1,5 +1,7 @@
 import { describe, it, expect } from 'vitest';
-import { type Ref, shallowRef } from 'vue';
+import {
+  type Ref, shallowRef, watch, nextTick,
+} from 'vue';
 import { useGradualNodeRendering } from '@/presentation/components/Scripts/View/Tree/TreeView/Rendering/UseGradualNodeRendering';
 import { TreeRoot } from '@/presentation/components/Scripts/View/Tree/TreeView/TreeRoot/TreeRoot';
 import { TreeRootStub } from '@tests/unit/shared/Stubs/TreeRootStub';
@@ -70,9 +72,9 @@ describe('useGradualNodeRendering', () => {
             .withOldState(new TreeNodeStateDescriptorStub().withVisibility(oldVisibilityState))
             .withNewState(new TreeNodeStateDescriptorStub().withVisibility(newVisibilityState));
           // act
-          const strategy = builder.call();
+          const { renderingStrategy } = builder.call();
           aggregatorStub.notifyChange(change);
-          const actualRenderStatus = strategy.shouldRender(node);
+          const actualRenderStatus = renderingStrategy.shouldRender(node);
           // assert
           expect(actualRenderStatus).to.equal(expectedRenderStatus);
         });
@@ -186,11 +188,11 @@ describe('useGradualNodeRendering', () => {
             .withSubsequentBatchSize(subsequentBatchSize)
             .withDelayScheduler(delaySchedulerStub);
           // act
-          const strategy = builder.call();
+          const { renderingStrategy } = builder.call();
           Array.from({ length: schedulerTicks }).forEach(
             () => delaySchedulerStub.runNextScheduled(),
           );
-          const actualRenderStatuses = nodes.map((node) => strategy.shouldRender(node));
+          const actualRenderStatuses = nodes.map((node) => renderingStrategy.shouldRender(node));
           // expect
           expect(actualRenderStatuses).to.deep.equal(expectedRenderStatuses);
         });
@@ -218,9 +220,9 @@ describe('useGradualNodeRendering', () => {
       const actualOrder = new Set<ReadOnlyTreeNode>();
       // act
       ordererStub.orderNodes = () => expectedNodes[0];
-      const strategy = builder.call();
+      const { renderingStrategy } = builder.call();
       const updateOrder = () => allNodes
-        .filter((node) => strategy.shouldRender(node))
+        .filter((node) => renderingStrategy.shouldRender(node))
         .forEach((node) => actualOrder.add(node));
       updateOrder();
       for (let i = 1; i < expectedNodes.length; i++) {
@@ -247,6 +249,48 @@ describe('useGradualNodeRendering', () => {
     // assert
     expect(delaySchedulerStub.nextCallback).toBeUndefined();
   });
+  describe('clearRenderingStates', () => {
+    it('clears all nodes from rendering states', () => {
+      // arrange
+      const nodesStub = [new TreeNodeStub(), new TreeNodeStub()];
+      const rendering = new UseGradualNodeRenderingBuilder()
+        .withCurrentTreeNodes(new UseCurrentTreeNodesStub()
+          .withQueryableNodes(new QueryableNodesStub().withFlattenedNodes(nodesStub)))
+        .call();
+
+      // act
+      rendering.clearRenderingStates();
+
+      // assert
+      const isAnyRendered = nodesStub
+        .map((node) => rendering.renderingStrategy.shouldRender(node))
+        .some(Boolean);
+      expect(isAnyRendered).to.equal(false);
+    });
+  });
+  describe('notifyRenderingUpdates', () => {
+    it('triggers Vue reactivity update', async () => {
+      // arrange
+      const nodes = createNodesWithVisibility(true, 1);
+      const rendering = new UseGradualNodeRenderingBuilder()
+        .withCurrentTreeNodes(new UseCurrentTreeNodesStub()
+          .withQueryableNodes(new QueryableNodesStub().withFlattenedNodes(nodes)))
+        .withInitialBatchSize(nodes.length)
+        .call();
+      let isVueReactivityTriggered = false;
+      watch(() => rendering.renderingStrategy.shouldRender(nodes[0]), () => {
+        isVueReactivityTriggered = true;
+      });
+
+      // act
+      rendering.clearRenderingStates();
+      rendering.notifyRenderingUpdates();
+      await nextTick();
+
+      // assert
+      expect(isVueReactivityTriggered).toEqual(true);
+    });
+  });
 });
 
 function createNodesWithVisibility(