test: add test for QwikDev#5662 issue

gioboa · Mar 5, 2024 · f681a39 · f681a39
1 parent 248b2a6
commit f681a39
Showing 1 changed file with 83 additions and 25 deletions.
diff --git a/packages/qwik/src/core/v2/use-store.unit.tsx b/packages/qwik/src/core/v2/use-store.unit.tsx
@@ -26,17 +26,18 @@ Error.stackTraceLimit = 100;
     it('should render value', async () => {
       const Cmp = component$(() => {
         const store = useStore({ items: [{ num: 0 }] });
-        return (<>
-          {store.items.map((item, key) => (
-            <div key={key}>{item.num}</div>
-          ))}
-        </>
+        return (
+          <>
+            {store.items.map((item, key) => (
+              <div key={key}>{item.num}</div>
+            ))}
+          </>
         );
       });
 
       const { vNode } = await render(<Cmp />, { debug });
       expect(vNode).toMatchVDOM(
-        <Component >
+        <Component>
           <Fragment>
             <div key="0">0</div>
           </Fragment>
@@ -310,12 +311,16 @@ Error.stackTraceLimit = 100;
         return (
           <>
             <button
-              onClick$={inlinedQrl(() => {
-                const [count, store] = useLexicalScope();
-                count.value++;
-                store.items = store.items.map((i: { num: number }) => ({ num: i.num + 1 }));
-                clicks++;
-              }, 's_onClick', [count, store])}
+              onClick$={inlinedQrl(
+                () => {
+                  const [count, store] = useLexicalScope();
+                  count.value++;
+                  store.items = store.items.map((i: { num: number }) => ({ num: i.num + 1 }));
+                  clicks++;
+                },
+                's_onClick',
+                [count, store]
+              )}
             >
               Count: {count.value}!
             </button>
@@ -362,23 +367,28 @@ Error.stackTraceLimit = 100;
       const Cmp = component$(() => {
         const count = useSignal(0);
         const store = useStore({ items: [{ num: 0 }] });
-        useTaskQrl(inlinedQrl(({ cleanup }) => {
-          const [count, store] = useLexicalScope();
+        useTaskQrl(
+          inlinedQrl(
+            ({ cleanup }) => {
+              const [count, store] = useLexicalScope();
 
-          const intervalId = setInterval(() => {
-            count.value++;
-            store.items = store.items.map((i: { num: number }) => ({ num: i.num + 1 }));
-          }, 500);
+              const intervalId = setInterval(() => {
+                count.value++;
+                store.items = store.items.map((i: { num: number }) => ({ num: i.num + 1 }));
+              }, 500);
 
-          cleanup(() => clearInterval(intervalId));
-        }, 's_useTask', [count, store]), {
-          eagerness: 'visible',
-        });
+              cleanup(() => clearInterval(intervalId));
+            },
+            's_useTask',
+            [count, store]
+          ),
+          {
+            eagerness: 'visible',
+          }
+        );
         return (
           <>
-            <div>
-              Count: {count.value}!
-            </div>
+            <div>Count: {count.value}!</div>
             {store.items.map((item, key) => (
               <div key={key}>{item.num}</div>
             ))}
@@ -427,5 +437,53 @@ Error.stackTraceLimit = 100;
       );
       vi.useRealTimers();
     });
+
+    it('#5662 - should update value in the list', async () => {
+      const Cmp = component$(() => {
+        const store = useStore<{ users: { name: string }[] }>({ users: [{ name: 'Giorgio' }] });
+
+        return (
+          <div>
+            {store.users.map((user, key) => (
+              <span
+                key={key}
+                onClick$={inlinedQrl(
+                  () => {
+                    const [store] = useLexicalScope();
+                    store.users = store.users.map(({ name }: { name: string }) => ({
+                      name: name === user.name ? name + '!' : name,
+                    }));
+                  },
+                  's_onClick',
+                  [store]
+                )}
+              >
+                {user.name}
+              </span>
+            ))}
+          </div>
+        );
+      });
+      const { vNode, container } = await render(<Cmp />, { debug });
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <div>
+            <span key="0">{'Giorgio'}</span>
+          </div>
+        </Component>
+      );
+      await trigger(container.element, 'span:first-of-type', 'click');
+      await trigger(container.element, 'span:first-of-type', 'click');
+      await trigger(container.element, 'span:first-of-type', 'click');
+      await trigger(container.element, 'span:first-of-type', 'click');
+      await trigger(container.element, 'span:first-of-type', 'click');
+      expect(vNode).toMatchVDOM(
+        <Component>
+          <div>
+            <span key="0">{'Giorgio!!!!!'}</span>
+          </div>
+        </Component>
+      );
+    });
   });
 });