diff --git a/packages/brisa/src/utils/client-build-plugin/integration.test.tsx b/packages/brisa/src/utils/client-build-plugin/integration.test.tsx index 46ba5213f..cdec83fc2 100644 --- 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 ( +
+ {foo ? ( + <> +
+ U +

+ {foo} {bar} +

+
+ {message.value ? ( +
+ Opened +
+ ) : ( +
+ Closed +
+ )} +
+
+ +
+
Foo
+
Bar
+
+ + ) : ( +
+ Foo +
+ )} +
+ ); + } + `; + + defineBrisaWebComponent(code, 'src/web-components/chat-example.tsx'); + + document.body.innerHTML = ''; + 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(` +
+
+ U +

+ bar baz +

+
+
+ Closed +
+
+
+ +
+
+ Foo +
+
+ Bar +
+
+
+ `), + ); + + button.click(); + await Bun.sleep(0); + + expect(normalizeHTML(chatExample.shadowRoot!.innerHTML)).toBe( + normalizeHTML(` +
+
+ U +

+ bar baz +

+
+
+ Opened +
+
+
+ +
+
+ Foo +
+
+ Bar +
+
+
+ `), + ); + + chatExample.setAttribute('foo', 'baz'); + await Bun.sleep(0); + + expect(normalizeHTML(chatExample.shadowRoot!.innerHTML)).toBe( + normalizeHTML(` +
+
+ U +

+ baz baz +

+
+
+ Opened +
+
+
+ +
+
+ Foo +
+
+ Bar +
+
+
+ `), + ); + }); + // 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', () => {