From f262c785aa8f8a9ff89f7433c6475cda684db718 Mon Sep 17 00:00:00 2001
From: sokol <sokol@HP>
Date: Wed, 18 Feb 2026 14:26:46 +0300
Subject: [PATCH] =?UTF-8?q?test:=20=D0=B4=D0=BE=D0=B1=D0=B0=D0=B2=D0=B8?=
 =?UTF-8?q?=D1=82=D1=8C=20E2E-=D1=82=D0=B5=D1=81=D1=82=20=D0=B4=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=BC=D0=BD=D0=BE=D0=B6=D0=B5=D1=81=D1=82=D0=B2=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BD=D1=8B=D1=85=20=D0=BE=D0=BA=D1=80=D1=83=D0=B6=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B9=20=D0=B8=20=D0=B8=D1=81=D0=BF=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B2=D0=B8=D1=82=D1=8C=20=D1=81=D0=B8=D0=BD=D1=85=D1=80=D0=BE?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B7=D0=B0=D1=86=D0=B8=D1=8E=20AppState?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 e2e/environment.spec.ts | 35 ++++++++++++++++++++++++++++++++++
 src/App.tsx             | 42 ++++++++++++++++++++++++++++++++---------
 2 files changed, 68 insertions(+), 9 deletions(-)

diff --git a/e2e/environment.spec.ts b/e2e/environment.spec.ts
index 630005d..31289fe 100644
--- a/e2e/environment.spec.ts
+++ b/e2e/environment.spec.ts
@@ -70,4 +70,39 @@ test.describe('Environment Management', () => {
     await expect(page.locator('#environments')).toBeVisible();
     await expect(page.locator('#environments option')).toHaveCount(2);
   });
+
+  test('should create multiple environments and switch between them', async ({ page }) => {
+    await page.goto('/');
+    await page.click('button:has-text("Create new")');
+
+    // Create env1
+    page.once('dialog', async dialog => {
+      await dialog.accept('env1');
+    });
+    await page.click('button.btn-success[title="Add environment"]');
+    await page.waitForTimeout(500);
+
+    // Create env2
+    page.once('dialog', async dialog => {
+      await dialog.accept('env2');
+    });
+    await page.click('button.btn-success[title="Add environment"]');
+    await page.waitForTimeout(500);
+
+    // Verify we have 3 envs (DEFAULT + env1 + env2)
+    await expect(page.locator('#environments option')).toHaveCount(3);
+
+    // Switch to each env and verify page doesn't crash
+    await page.locator('#environments').selectOption({ index: 0 });
+    await page.waitForTimeout(200);
+    await expect(page.locator('#environments')).toBeVisible();
+
+    await page.locator('#environments').selectOption('env1');
+    await page.waitForTimeout(200);
+    await expect(page.locator('#environments')).toBeVisible();
+
+    await page.locator('#environments').selectOption('env2');
+    await page.waitForTimeout(200);
+    await expect(page.locator('#environments')).toBeVisible();
+  });
 });
diff --git a/src/App.tsx b/src/App.tsx
index 17a6d07..6dc88a8 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -18,17 +18,18 @@ class AppState {
   static readonly Instance = new AppState();
 
   public loadConfig(cfg: Config) {
-    this.envs = [...cfg.envs];
     this.config = cfg;
+    this.envs = cfg.envs; // Reference the same array as config
   }
 
   public addEnv(env: Env): number {
     this.envs.push(env);
+    // Also update config.envs since they reference the same array
+    this.config.envs = this.envs;
     return this.envs.length - 1;
   }
 
   public async saveEnv(env: Env): Promise<number> {
-
     // Create a promise that resolves after 1 second
     return await new Promise<number>((resolve) => {
       setTimeout(() => {
@@ -41,6 +42,21 @@ class AppState {
       }, 1000);
     });
   }
+
+  public removeEnv(envId: number) {
+    const idx = this.envs.findIndex(x => x.id === envId);
+    if (idx > -1) {
+      this.envs.splice(idx, 1);
+      // Also update config.envs since they reference the same array
+      this.config.envs = this.envs;
+    }
+  }
+
+  // Update the internal envs reference to match React state
+  public syncEnvs(newEnvs: Env[]) {
+    this.envs = newEnvs;
+    this.config.envs = newEnvs;
+  }
 }
 
 function App() {
@@ -57,7 +73,12 @@ function App() {
     let idx = AppState.Instance.envs.findIndex(x => x.id === env.id);
     if (idx > -1) {
       AppState.Instance.envs[idx] = env;
-      setEnvs([...AppState.Instance.envs]);
+      // Also update config.envs since they reference the same array
+      AppState.Instance.config.envs = AppState.Instance.envs;
+      const newEnvs = [...AppState.Instance.envs];
+      setEnvs(newEnvs);
+      AppState.Instance.syncEnvs(newEnvs); // Keep AppState in sync with React state
+      setConfig(AppState.Instance.config); // Trigger re-render for config
     }
 
     // Then do the async save (for consistency with existing behavior)
@@ -70,16 +91,19 @@ function App() {
 
   function handleEnvAdded(env: Env): number {
     const idx = AppState.Instance.addEnv(env);
-    setEnvs([...AppState.Instance.envs]);
+    const newEnvs = [...AppState.Instance.envs];
+    setEnvs(newEnvs);
+    AppState.Instance.syncEnvs(newEnvs); // Keep AppState in sync with React state
+    setConfig(AppState.Instance.config); // Trigger re-render for config
     return idx;
   }
 
   function handleEnvRemoved(envId: number) {
-    const idx = AppState.Instance.envs.findIndex(x => x.id === envId);
-    if (idx > -1) {
-      AppState.Instance.envs.splice(idx, 1);
-      setEnvs([...AppState.Instance.envs]);
-    }
+    AppState.Instance.removeEnv(envId);
+    const newEnvs = [...AppState.Instance.envs];
+    setEnvs(newEnvs);
+    AppState.Instance.syncEnvs(newEnvs); // Keep AppState in sync with React state
+    setConfig(AppState.Instance.config); // Trigger re-render for config
   }
 
   return (