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.

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) => {

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;

tests/e2e/tsconfig.json

@@ -13,6 +13,6 @@
     "sourceMap": false,
   },
   "include": [
-    "**/*.ts"
+    "**/*.ts",
   ]
 }