From 9fc10e2052a8150a5dbff81986b2c6486b3624d1 Mon Sep 17 00:00:00 2001
From: Robby6Strings <rausten93@gmail.com>
Date: Sun, 30 Jun 2024 18:12:01 +1200
Subject: [PATCH] add e2e test for reordering + component state persistence
 case

---
 e2e/cypress/e2e/reactivity.cy.ts | 6 ++++++
 e2e/src/App.tsx                  | 5 +++++
 2 files changed, 11 insertions(+)

diff --git a/e2e/cypress/e2e/reactivity.cy.ts b/e2e/cypress/e2e/reactivity.cy.ts
index 39b73916..7493f09e 100644
--- a/e2e/cypress/e2e/reactivity.cy.ts
+++ b/e2e/cypress/e2e/reactivity.cy.ts
@@ -14,6 +14,12 @@ describe("basic reactivity & state", () => {
     cy.get("main #counter button").click().click()
     cy.get("main #counter p").should("exist")
   })
+
+  it("correctly persists component state when order of children changes", () => {
+    cy.get("main #counter button").click().click()
+    cy.get("main #toggle-btn").click()
+    cy.get("main #counter span").should("have.text", "2")
+  })
 })
 
 describe("hooks & data", () => {
diff --git a/e2e/src/App.tsx b/e2e/src/App.tsx
index b1fefbbf..c9312b71 100644
--- a/e2e/src/App.tsx
+++ b/e2e/src/App.tsx
@@ -2,13 +2,18 @@ import { Link, Route, Router, memo, useModel, useState } from "kaioken"
 import { Counter } from "./Counter"
 
 export function App() {
+  const [toggled, setToggled] = useState(false)
   return (
     <main>
       <header>
         <h1>Hello World</h1>
       </header>
+      {toggled && <p>Toggled</p>}
       <Counter />
       <TodoList />
+      <button id="toggle-btn" onclick={() => setToggled(!toggled)}>
+        toggle
+      </button>
       <nav>
         <ul>
           <li>