test: adding failing test (#1616)

* test: adding failing test * Update packages/core/src/__tests__/builder.test.ts --------- Co-authored-by: Steve Sewell <[email protected]>
BuilderIO · Oct 29, 2024 · fae4687 · fae4687
1 parent bd9c123
commit fae4687
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git a/packages/core/src/__tests__/builder.test.ts b/packages/core/src/__tests__/builder.test.ts
@@ -13,6 +13,7 @@ import columns from './data/blocks/columns.raw.tsx?raw';
 import customCode from './data/blocks/custom-code.raw.tsx?raw';
 import embed from './data/blocks/embed.raw.tsx?raw';
 import image from './data/blocks/image.raw.tsx?raw';
+import indexInFor from './data/blocks/index-in-for.raw.tsx?raw';
 import stamped from './data/blocks/stamped-io.raw.tsx?raw';
 import booleanContent from './data/builder/boolean.json?raw';
 import customComponentSlotPropertyContent from './data/builder/custom-component-slot-property.json?raw';
@@ -21,7 +22,6 @@ import slotsContent from './data/builder/slots.json?raw';
 import slots2Content from './data/builder/slots2.json?raw';
 import textBindings from './data/builder/text-bindings.json?raw';
 import show from './data/show/show-expressions.raw.tsx?raw';
-
 const mitosisOptions: ToMitosisOptions = {
   format: 'legacy',
 };
@@ -92,6 +92,14 @@ describe('Builder', () => {
     expect(mitosis).toMatchSnapshot();
   });
 
+  test.fails('Index inside For', () => {
+    const component = parseJsx(indexInFor);
+    const builderJson = componentToBuilder()({ component });
+    const backToMitosis = builderContentToMitosisComponent(builderJson);
+    const mitosis = componentToMitosis()({ component: backToMitosis });
+    expect(mitosis).toMatchSnapshot();
+  });
+
   test('Image', () => {
     const component = parseJsx(image);
     const builderJson = componentToBuilder()({ component });

diff --git a/packages/core/src/__tests__/data/blocks/index-in-for.raw.tsx b/packages/core/src/__tests__/data/blocks/index-in-for.raw.tsx
@@ -0,0 +1,27 @@
+import { useState } from '@builder.io/mitosis';
+
+export default function MyComponent(props) {
+  const [todos, setTodos] = useState([
+    { id: 1, completed: false },
+    { id: 2, completed: false },
+  ]);
+
+  return (
+    <div>
+      {todos.map((todo) => (
+        <div>
+          {state.todos.map((todo) => (
+            <input
+              type="checkbox"
+              checked={todo.completed}
+              onChange={(event) => {
+                const index = state.todos.findIndex((t) => t.id === todo.id);
+                state.todos[index].completed = event.target.checked;
+              }}
+            />
+          ))}
+        </div>
+      ))}
+    </div>
+  );
+}