Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[LiveComponent] Add Documentation for testing with LiveCollectionType #2517

Open
wants to merge 6 commits into
base: 2.x
Choose a base branch
from
Open
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 52 additions & 0 deletions src/LiveComponent/doc/index.rst
Original file line number Diff line number Diff line change
Expand Up @@ -3689,6 +3689,9 @@ Test Helper

The test helper was added in LiveComponents 2.11.

Interact With Live-Components
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

For testing, you can use the ``InteractsWithLiveComponents`` trait which
uses Symfony's test client to render and make requests to your components::

Expand Down Expand Up @@ -3775,6 +3778,55 @@ uses Symfony's test client to render and make requests to your components::
The ``InteractsWithLiveComponents`` trait can only be used in tests that extend
``Symfony\Bundle\FrameworkBundle\Test\KernelTestCase``.

Test Live Collection Type
yalit marked this conversation as resolved.
Show resolved Hide resolved
~~~~~~~~~~~~~~~~~~~~~~~~~

yalit marked this conversation as resolved.
Show resolved Hide resolved
To test the submission of a form within a Live Component (with the above `submitForm` helper) containing a `LiveCollectionType`, you first need to physically add the number of entries that you want to test in your component (as if you would click on the "Add" button on the screen).
yalit marked this conversation as resolved.
Show resolved Hide resolved

So, if the following are the forms used::

// Parent FormType used in the Live Component
use Symfony\UX\LiveComponent\Form\Type\LiveCollectionType;

class LiveCollectionFormType extends AbstractType
yalit marked this conversation as resolved.
Show resolved Hide resolved
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder->add('children', LiveCollectionType::class, [
'entry_type' => ChildFormType::class,
])
;
}
}

// Child Form Type used in the parent form type
yalit marked this conversation as resolved.
Show resolved Hide resolved
class ChildFormType extends AbstractType
{
public function buildForm(FormBuilderInterface $builder, array $options): void
{
$builder
->add('name', TextType::class)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
->add('name', TextType::class)
->add('firstName', TextType::class)

->add('age', IntegerType::class)
;
}
}

The test of the submission of such form would be with the TestHelper::
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
The test of the submission of such form would be with the TestHelper::
Use the addCollectionItem method from the LiveCollectionTrait to dynamically add entries to the children field of the form:

Copy link
Contributor Author

@yalit yalit Jan 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Indeed more descriptive and I would add at the end of your updated comment : "before submitting it"


// calling the addCollectionItem from the LiveCollectionTrait with the name of field in the form
yalit marked this conversation as resolved.
Show resolved Hide resolved
$component->call('addCollectionItem', ['name' => 'children']);
$component->call('addCollectionItem', ['name' => 'children']);
//... can be called as many times as you need entries in your 'children' field

// and then submit the form
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
// and then submit the form
// ... then submit the form by providing data for all the fields in the ChildFormType:

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at the next review, I would add at the end of your updated comment for each added entry or something of sort

$component->submitForm([ 'live_collection_form' => [
'children' => [
// submission of 2 children as created above with the fields of the ChildFormType
yalit marked this conversation as resolved.
Show resolved Hide resolved
['name' => 'childName1', 'age' => 10],
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
['name' => 'childName1', 'age' => 10],
['firstName' => 'childName1', 'age' => 10],
['firstName' => 'childName2', 'age' => 15],

['name' => 'childName2', 'age' => 15]
yalit marked this conversation as resolved.
Show resolved Hide resolved
]
]]);

Backward Compatibility promise
------------------------------

Expand Down
Loading