test: add failing test of #686

brisa-build · Dec 20, 2024 · a8a4e1e · a8a4e1e
1 parent 8f02779
commit a8a4e1e
Showing 1 changed file with 143 additions and 0 deletions.
diff --git a/packages/brisa/src/utils/client-build-plugin/integration.test.tsx b/packages/brisa/src/utils/client-build-plugin/integration.test.tsx
@@ -6322,6 +6322,149 @@ describe('integration', () => {
       expect(testComponent?.shadowRoot?.innerHTML).toBe('last number = 10');
     });
 
+    it('should not duplicate "Open" button after change state + change prop signal #686', async () => {
+      const code = `
+        export default async function Chat({ foo, bar }, { state }) {
+          const message = state(false);
+
+          return (
+            <div>
+              {foo ? (
+                <>
+                  <div>
+                    U
+                    <h3 class="text-sm">
+                      {foo} {bar}
+                    </h3>
+                  </div>
+                  {message.value ? (
+                    <div>
+                      Opened
+                    </div>
+                  ) : (
+                    <div>
+                      Closed
+                    </div>
+                  )}
+                  <div>
+                    <div>
+                      <button
+                        type="button"
+                        onClick={() => (message.value = !message.value)}
+                      >
+                        Open
+                      </button>
+                    </div>
+                    <div>Foo</div>
+                    <div>Bar</div>
+                  </div>
+                </>
+              ) : (
+                <div>
+                Foo
+                </div>
+              )}
+            </div>
+          );
+        }
+      `;
+
+      defineBrisaWebComponent(code, 'src/web-components/chat-example.tsx');
+
+      document.body.innerHTML = '<chat-example foo="bar" bar="baz" />';
+      await Bun.sleep(0);
+
+      const chatExample = document.querySelector('chat-example') as HTMLElement;
+      const button = chatExample.shadowRoot!.querySelector('button') as HTMLButtonElement;
+
+      expect(normalizeHTML(chatExample.shadowRoot!.innerHTML)).toBe(
+        normalizeHTML(`
+        <div>
+          <div>
+            U
+            <h3 class="text-sm">
+              bar baz
+            </h3>
+          </div>
+          <div>
+            Closed
+          </div>
+          <div>
+            <div>
+              <button type="button">Open</button>
+            </div>
+            <div>
+              Foo
+            </div>
+            <div>
+              Bar
+            </div>
+          </div>
+        </div>  
+      `),
+      );
+
+      button.click();
+      await Bun.sleep(0);
+
+      expect(normalizeHTML(chatExample.shadowRoot!.innerHTML)).toBe(
+        normalizeHTML(`
+        <div>
+          <div>
+            U
+            <h3 class="text-sm">
+              bar baz
+            </h3>
+          </div>
+          <div>
+            Opened
+          </div>
+          <div>
+            <div>
+              <button type="button">Open</button>
+            </div>
+            <div>
+              Foo
+            </div>
+            <div>
+              Bar
+            </div>
+          </div>
+        </div>  
+      `),
+      );
+
+      chatExample.setAttribute('foo', 'baz');
+      await Bun.sleep(0);
+
+      expect(normalizeHTML(chatExample.shadowRoot!.innerHTML)).toBe(
+        normalizeHTML(`
+        <div>
+          <div>
+            U
+            <h3 class="text-sm">
+              baz baz
+            </h3>
+          </div>
+          <div>
+            Opened
+          </div>
+          <div>
+            <div>
+              <button type="button">Open</button>
+            </div>
+            <div>
+              Foo
+            </div>
+            <div>
+              Bar
+            </div>
+          </div>
+        </div>  
+      `),
+      );
+    });
+
     // TODO: This test should work after this happydom feat about ElementInternals
     // https://github.com/capricorn86/happy-dom/issues/1419
     it.todo('it should work associating a form to the custom element', () => {