From 8cb52394924673d02bdce4e49f3ae011ea5e2d33 Mon Sep 17 00:00:00 2001
From: Alexander Schranz <alexander@sulu.io>
Date: Wed, 20 Jul 2022 22:01:28 +0200
Subject: [PATCH 1/3] Add some basic test cases

---
 .../Resources/assets/src/controller.ts        |   1 -
 .../Resources/assets/test/controller.test.ts  | 119 ++++++++++++++++--
 2 files changed, 112 insertions(+), 8 deletions(-)

diff --git a/src/Collection/Resources/assets/src/controller.ts b/src/Collection/Resources/assets/src/controller.ts
index b5c3ea8d981..c83e9d4eeb5 100644
--- a/src/Collection/Resources/assets/src/controller.ts
+++ b/src/Collection/Resources/assets/src/controller.ts
@@ -44,7 +44,6 @@ export default class extends Controller {
     createButton(collectionEl: HTMLElement, buttonType: ButtonType): HTMLElement | null {
         const attributeName = `${ButtonType[buttonType].toLowerCase()}Button`;
         const button = collectionEl.dataset[attributeName] ?? (this.element as HTMLElement).dataset[attributeName];
-        console.log(button);
 
         // Button explicitly disabled through data attribute
         if ('' === button) return null;
diff --git a/src/Collection/Resources/assets/test/controller.test.ts b/src/Collection/Resources/assets/test/controller.test.ts
index da9f6ae16ae..7cbe7f97822 100644
--- a/src/Collection/Resources/assets/test/controller.test.ts
+++ b/src/Collection/Resources/assets/test/controller.test.ts
@@ -10,7 +10,7 @@
 'use strict';
 
 import { Application } from '@hotwired/stimulus';
-import { getByTestId } from '@testing-library/dom';
+import {fireEvent, getByTestId, getByText, waitFor} from '@testing-library/dom';
 import { clearDOM, mountDOM } from '@symfony/stimulus-testing';
 import CollectionController from '../src/controller';
 
@@ -19,22 +19,127 @@ const startStimulus = () => {
     application.register('symfony--ux-collection--collection', CollectionController);
 };
 
+const emptyCollection = '<div data-testid="collection" data-controller="symfony--ux-collection--collection"></div>';
+
+const simpleCollectionWithoutButtons = '' +
+    '<form name="game" method="post" data-controller="symfony--ux-collection--collection">' +
+    '   <div id="game">' +
+    '       <div>' +
+    '           <label class="required">Teams</label>' +
+    '           <div id="game_teams" data-prototype="&lt;div class=&quot;team-entry&quot;&gt;&lt;label class=&quot;required&quot;&gt;__name__label__&lt;/label&gt;&lt;div id=&quot;game_teams___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;game_teams___name___name&quot; class=&quot;required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;game_teams___name___name&quot; name=&quot;game[teams][__name__][name]&quot; required=&quot;required&quot; data-controller=&quot;test&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">' +
+    '           </div>' +
+    '       </div>' +
+    '   <div>' +
+    '   <button type="submit" id="game_submit" name="game[submit]">Submit</button>' +
+    '   </div>' +
+    '</form>'
+
+const simpleCollection = '' +
+    '    <template id="addButton">' +
+    '        <button type="button" class="add-button">Add button</button>' +
+    '    </template>' +
+    '' +
+    '    <template id="deleteButton">' +
+    '        <button type="button" class="delete-button">Delete button</button>' +
+    '    </template>' +
+    '' +
+    '<form name="game" method="post" data-controller="symfony--ux-collection--collection" data-add-button="addButton" data-delete-button="deleteButton">' +
+    '   <div id="game">' +
+    '       <div>' +
+    '           <label class="required">Teams</label>' +
+    '           <div id="game_teams" data-prototype="&lt;div class=&quot;team-entry&quot;&gt;&lt;label class=&quot;required&quot;&gt;__name__label__&lt;/label&gt;&lt;div id=&quot;game_teams___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;game_teams___name___name&quot; class=&quot;required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;game_teams___name___name&quot; name=&quot;game[teams][__name__][name]&quot; required=&quot;required&quot; data-controller=&quot;test&quot; /&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">' +
+    '           </div>' +
+    '       </div>' +
+    '   <div>' +
+    '   <button type="submit" id="game_submit" name="game[submit]">Submit</button>' +
+    '   </div>' +
+    '</form>'
+
+const nestedCollection = '' +
+    '    <template id="addButton">' +
+    '        <button type="button" class="add-button">Add button</button>' +
+    '    </template>' +
+    '' +
+    '    <template id="deleteButton">' +
+    '        <button type="button" class="delete-button">Delete button</button>' +
+    '    </template>' +
+    '' +
+    '<form name="game" method="post" data-controller="symfony--ux-collection--collection" data-add-button="addButton" data-delete-button="deleteButton">' +
+    '   <div id="game">' +
+    '       <div>' +
+    '           <label class="required">Teams</label>' +
+    '           <div id="game_teams" data-prototype="&lt;div&gt;&lt;label class=&quot;required&quot;&gt;__name__label__&lt;/label&gt;&lt;div id=&quot;game_teams___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;game_teams___name___name&quot; class=&quot;required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;game_teams___name___name&quot; name=&quot;game[teams][__name__][name]&quot; required=&quot;required&quot; data-controller=&quot;test&quot; /&gt;&lt;/div&gt;&lt;div&gt;&lt;label class=&quot;required&quot;&gt;Players&lt;/label&gt;&lt;div id=&quot;game_teams___name___players&quot; data-prototype=&quot;&amp;lt;div&amp;gt;&amp;lt;label class=&amp;quot;required&amp;quot;&amp;gt;__name__label__&amp;lt;/label&amp;gt;&amp;lt;div id=&amp;quot;game_teams___name___players___name__&amp;quot;&amp;gt;&amp;lt;div&amp;gt;&amp;lt;label for=&amp;quot;game_teams___name___players___name___firstName&amp;quot; class=&amp;quot;required&amp;quot;&amp;gt;First name&amp;lt;/label&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;game_teams___name___players___name___firstName&amp;quot; name=&amp;quot;game[teams][__name__][players][__name__][firstName]&amp;quot; required=&amp;quot;required&amp;quot; /&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div&amp;gt;&amp;lt;label for=&amp;quot;game_teams___name___players___name___lastName&amp;quot; class=&amp;quot;required&amp;quot;&amp;gt;Last name&amp;lt;/label&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;game_teams___name___players___name___lastName&amp;quot; name=&amp;quot;game[teams][__name__][players][__name__][lastName]&amp;quot; required=&amp;quot;required&amp;quot; /&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">' +
+    '           </div>' +
+    '       </div>' +
+    '   <div>' +
+    '   <button type="submit" id="game_submit" name="game[submit]">Submit</button>' +
+    '   </div>' +
+    '</form>'
+
 /* eslint-disable no-undef */
 describe('CollectionController', () => {
-    let container: any;
-
-    beforeEach(() => {
-        container = mountDOM('<div data-testid="collection" data-controller="symfony--ux-collection--collection"></div>');
-    });
+    startStimulus();
 
     afterEach(() => {
         clearDOM();
     });
 
     it('connects', async () => {
-        startStimulus();
+        const container = mountDOM(emptyCollection);
 
         // smoke test
         expect(getByTestId(container, 'collection')).toHaveAttribute('data-controller', 'symfony--ux-collection--collection');
     });
+
+    it('collection without add button should still create a button', async () => {
+        const container = mountDOM(simpleCollectionWithoutButtons);
+
+        const element = await waitFor(() => getByText(container, 'Add'));
+
+        expect(element).toBeInTheDocument();
+    });
+
+    it('click on add button should add a new collection', async () => {
+        const container = mountDOM(simpleCollection);
+
+        await waitFor(() => getByText(container, 'Add button'));
+
+        fireEvent(
+            getByText(container, 'Add button'),
+            new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+            }),
+        )
+
+        expect(container.querySelectorAll('.team-entry').length).toBe(1);
+    });
+
+    it('click on remove button should remove a collection', async () => {
+        const container = mountDOM(simpleCollection);
+
+        await waitFor(() => getByText(container, 'Add button'));
+
+        fireEvent(
+            getByText(container, 'Add button'),
+            new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+            }),
+        )
+
+        expect(container.querySelectorAll('.team-entry').length).toBe(1);
+
+        await waitFor(() => getByText(container, 'Delete button'));
+
+        fireEvent(
+            getByText(container, 'Delete button'),
+            new MouseEvent('click', {
+                bubbles: true,
+                cancelable: true,
+            }),
+        )
+
+        expect(container.querySelectorAll('.team-entry').length).toBe(0);
+    });
 });

From d6979dcb7cc6d7ffb2384c3f2fb31f4de06dcc4b Mon Sep 17 00:00:00 2001
From: Alexander Schranz <alexander@sulu.io>
Date: Wed, 20 Jul 2022 22:04:10 +0200
Subject: [PATCH 2/3] Update basic test cases

---
 .../Resources/assets/test/controller.test.ts       | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/Collection/Resources/assets/test/controller.test.ts b/src/Collection/Resources/assets/test/controller.test.ts
index 7cbe7f97822..ae96e727c8f 100644
--- a/src/Collection/Resources/assets/test/controller.test.ts
+++ b/src/Collection/Resources/assets/test/controller.test.ts
@@ -91,7 +91,7 @@ describe('CollectionController', () => {
         expect(getByTestId(container, 'collection')).toHaveAttribute('data-controller', 'symfony--ux-collection--collection');
     });
 
-    it('collection without add button should still create a button', async () => {
+    it('should create a add button when no button given', async () => {
         const container = mountDOM(simpleCollectionWithoutButtons);
 
         const element = await waitFor(() => getByText(container, 'Add'));
@@ -99,7 +99,15 @@ describe('CollectionController', () => {
         expect(element).toBeInTheDocument();
     });
 
-    it('click on add button should add a new collection', async () => {
+    it('should create a add button when button is given', async () => {
+        const container = mountDOM(simpleCollection);
+
+        const element = await waitFor(() => getByText(container, 'Add button'));
+
+        expect(element).toBeInTheDocument();
+    });
+
+    it('should create new collection on click on add button', async () => {
         const container = mountDOM(simpleCollection);
 
         await waitFor(() => getByText(container, 'Add button'));
@@ -115,7 +123,7 @@ describe('CollectionController', () => {
         expect(container.querySelectorAll('.team-entry').length).toBe(1);
     });
 
-    it('click on remove button should remove a collection', async () => {
+    it('should remove collection on click on delete button', async () => {
         const container = mountDOM(simpleCollection);
 
         await waitFor(() => getByText(container, 'Add button'));

From 71963ebbc1a90231da4888febbbbc837984712ef Mon Sep 17 00:00:00 2001
From: Alexander Schranz <alexander@sulu.io>
Date: Wed, 20 Jul 2022 22:07:10 +0200
Subject: [PATCH 3/3] Update nested collection code snippet

---
 src/Collection/Resources/assets/test/controller.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Collection/Resources/assets/test/controller.test.ts b/src/Collection/Resources/assets/test/controller.test.ts
index ae96e727c8f..67d5a1d139f 100644
--- a/src/Collection/Resources/assets/test/controller.test.ts
+++ b/src/Collection/Resources/assets/test/controller.test.ts
@@ -68,7 +68,7 @@ const nestedCollection = '' +
     '   <div id="game">' +
     '       <div>' +
     '           <label class="required">Teams</label>' +
-    '           <div id="game_teams" data-prototype="&lt;div&gt;&lt;label class=&quot;required&quot;&gt;__name__label__&lt;/label&gt;&lt;div id=&quot;game_teams___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;game_teams___name___name&quot; class=&quot;required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;game_teams___name___name&quot; name=&quot;game[teams][__name__][name]&quot; required=&quot;required&quot; data-controller=&quot;test&quot; /&gt;&lt;/div&gt;&lt;div&gt;&lt;label class=&quot;required&quot;&gt;Players&lt;/label&gt;&lt;div id=&quot;game_teams___name___players&quot; data-prototype=&quot;&amp;lt;div&amp;gt;&amp;lt;label class=&amp;quot;required&amp;quot;&amp;gt;__name__label__&amp;lt;/label&amp;gt;&amp;lt;div id=&amp;quot;game_teams___name___players___name__&amp;quot;&amp;gt;&amp;lt;div&amp;gt;&amp;lt;label for=&amp;quot;game_teams___name___players___name___firstName&amp;quot; class=&amp;quot;required&amp;quot;&amp;gt;First name&amp;lt;/label&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;game_teams___name___players___name___firstName&amp;quot; name=&amp;quot;game[teams][__name__][players][__name__][firstName]&amp;quot; required=&amp;quot;required&amp;quot; /&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div&amp;gt;&amp;lt;label for=&amp;quot;game_teams___name___players___name___lastName&amp;quot; class=&amp;quot;required&amp;quot;&amp;gt;Last name&amp;lt;/label&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;game_teams___name___players___name___lastName&amp;quot; name=&amp;quot;game[teams][__name__][players][__name__][lastName]&amp;quot; required=&amp;quot;required&amp;quot; /&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">' +
+    '           <div id="game_teams" data-prototype="&lt;div class=&quot;team-entry&quot;&gt;&lt;label class=&quot;required&quot;&gt;__name__label__&lt;/label&gt;&lt;div id=&quot;game_teams___name__&quot;&gt;&lt;div&gt;&lt;label for=&quot;game_teams___name___name&quot; class=&quot;required&quot;&gt;Name&lt;/label&gt;&lt;input type=&quot;text&quot; id=&quot;game_teams___name___name&quot; name=&quot;game[teams][__name__][name]&quot; required=&quot;required&quot; data-controller=&quot;test&quot; /&gt;&lt;/div&gt;&lt;div&gt;&lt;label class=&quot;required&quot;&gt;Players&lt;/label&gt;&lt;div id=&quot;game_teams___name___players&quot; data-prototype=&quot;&amp;lt;div class=&amp;&quot;player-entry&amp;&quot;&amp;gt;&amp;lt;label class=&amp;quot;required&amp;quot;&amp;gt;__name__label__&amp;lt;/label&amp;gt;&amp;lt;div id=&amp;quot;game_teams___name___players___name__&amp;quot;&amp;gt;&amp;lt;div&amp;gt;&amp;lt;label for=&amp;quot;game_teams___name___players___name___firstName&amp;quot; class=&amp;quot;required&amp;quot;&amp;gt;First name&amp;lt;/label&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;game_teams___name___players___name___firstName&amp;quot; name=&amp;quot;game[teams][__name__][players][__name__][firstName]&amp;quot; required=&amp;quot;required&amp;quot; /&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;div&amp;gt;&amp;lt;label for=&amp;quot;game_teams___name___players___name___lastName&amp;quot; class=&amp;quot;required&amp;quot;&amp;gt;Last name&amp;lt;/label&amp;gt;&amp;lt;input type=&amp;quot;text&amp;quot; id=&amp;quot;game_teams___name___players___name___lastName&amp;quot; name=&amp;quot;game[teams][__name__][players][__name__][lastName]&amp;quot; required=&amp;quot;required&amp;quot; /&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&amp;lt;/div&amp;gt;&quot;&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;">' +
     '           </div>' +
     '       </div>' +
     '   <div>' +