From fff5c3a4f6bb00da25eb1e51db8f00659a5b7bdf Mon Sep 17 00:00:00 2001
From: Simone Todaro <simo.todaro@gmail.com>
Date: Fri, 29 Nov 2024 22:03:33 +0000
Subject: [PATCH] Add failing test

---
 .../integration/directives/x-ignore.spec.js   | 24 +++++++++++++++++--
 1 file changed, 22 insertions(+), 2 deletions(-)

diff --git a/tests/cypress/integration/directives/x-ignore.spec.js b/tests/cypress/integration/directives/x-ignore.spec.js
index b69ed6cc1..491bb3c8c 100644
--- a/tests/cypress/integration/directives/x-ignore.spec.js
+++ b/tests/cypress/integration/directives/x-ignore.spec.js
@@ -1,4 +1,4 @@
-import { haveText, html, notHaveClasses, notHaveText, test } from '../../utils'
+import { haveClasses, haveText, html, notHaveClasses, notHaveText, test } from '../../utils'
 
 test('x-ignore',
     html`
@@ -8,7 +8,9 @@ test('x-ignore',
             </div>
         </div>
     `,
-    ({ get }) => get('span').should(notHaveText('bar'))
+    ({ get }) => {
+        get('span').should(notHaveText('bar'))
+    }
 )
 
 test('x-ignore.self',
@@ -24,3 +26,21 @@ test('x-ignore.self',
         get('h1').should(notHaveClasses(['bar']))
     }
 )
+
+test('can lazyload component',
+    html`
+        <div x-data="{ lazyLoad() {$el.querySelector('#lazy').removeAttribute('x-ignore'); Alpine.nextTick(() => Alpine.initTree($el.querySelector('#lazy')))} }">
+            <button @click="lazyLoad">Load</button>
+            <div x-data="{ foo: 'bar' }" id="lazy" x-ignore :class="foo">
+                <span x-text="foo"></span>
+            </div>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(notHaveText('bar'))
+        get('div#lazy').should(notHaveClasses(['bar']))
+        get('button').click()
+        get('span').should(haveText('bar'))
+        get('div#lazy').should(haveClasses(['bar']))
+    }
+)