Pruebas Parte 2: Pruebas funcionales

Right after composer require symfony/panther --dev I had to run composer require --dev dbrekelmans/bdi && vendor/bin/bdi detect drivers

If you enable autocomplete=true for the planet field in the VoyageType form (It's works great with Live Components at the moment), your Panther test might not work, because for selecting planet field (selectFieldOption('Planet', 'Earth')), crawler detects html input field instead of select field, and throws an exception.

To fix this, set autocomplete=false for testing:

class VoyageType extends AbstractType
{
    public function __construct(private ParameterBagInterface $parameterBag) {}

    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder = new DynamicFormBuilder($builder);

        $builder
            ...
            ->add('planet', null, [
                ...
                'autocomplete' => $this->parameterBag->get('kernel.environment') !== 'test',
            ])

I have issues with test execution speed :/

It looks like that waitForTurboFrameLoadcheck for any turbo-frame[aria-busy="true"] in the page is executed before Turbo adds the aria-busy="true" attribute to the frame.

I had similar issue with the modal loading. The tests complain about not finding the Purpose input. I added a wait for the form[name="voyage"] before calling fillField.

Does anyone have an idea of what can be done to get proper waiting?

Hey everyone

If anyone tries to get this whole Panther system working in the context of a containerized environment (in my case: a DDEV wrapper around Docker), you will need to jump through some extra hoops. And read some stackoverflow stuff. And documentation entries. Blergh...

Anyway, here's the idea: we want to get Panther working with Chromium in a DDEV context, and if you try that just using your "standard" DDEV config, you will be greeted by the following error:

1) App\Tests\Functional\VoyageControllerTest::testCreateVoyage
RuntimeException: "chromedriver" binary not found. Install it using the package manager of your operating system or by running "composer require --dev dbrekelmans/bdi && vendor/bin/bdi detect drivers".

Seems obvious enough; just run that entire suggestion, right? Except vendor/bin/bdi detect drivers does not do anything. That is because our web container is lacking Chromium. Let's fix that:

// Get into the container if you exited it before
ddev ssh
// Install chromium
sudo apt-get update
sudo apt-get install chromium -y

Awesome, lots of installation text. Run vendor/bin/bdi detect drivers again, and hooray:

                                                                                                                        
 [OK] chromedriver 120.0.6099.109 installed to drivers/chromedriver                                                     
                                                                                                                        

Try to run the tests again: php ./vendor/bin/simple-phpunit. I do so from within the DDEV web container as I am already there, but you could of course also run it from outside. But, alas:

1) App\Tests\Functional\VoyageControllerTest::testCreateVoyage
Facebook\WebDriver\Exception\SessionNotCreatedException: session not created: Chrome failed to start: exited normally.
  (session not created: DevToolsActivePort file doesn't exist)
  (The process started from chrome location /usr/bin/chromium is no longer running, so ChromeDriver is assuming that Chrome has crashed.)

If you Google that error a bit, you will find a whole bunch of expert tech talk on configuring Selenium in the context of Python or Java or whatever, all of which is more or less impossible for me to understand properly. But apparently it might be solved by starting the chromium instance with a --no-sandbox argument. And luckily, the Panther docs cover that topic specifically here: https://symfony.com/doc/current/testing/end_to_end.html#chrome-specific-environment-variables. Use PANTHER_NO_SANDBOX to "Disable Chrome's sandboxing (unsafe, but allows to use Panther in containers)" - that sounds like it is exactly what we need. Add this to your .env.test.local:

PANTHER_NO_SANDBOX=true

If you now run the tests again, things will appear to work. Hooray, right? Except the browser that is running here is not finding your assets. It is explained in the main script how you need to use the tests/router.php to get this to work, but you also need to start the Chromium browser with the extra environment argument --disable-dev-shm-usage. This can be added to .env.test.local as well:

PANTHER_CHROME_ARGUMENTS="--disable-dev-shm-usage"

Note: these .env things can of course also be added to phpunit.xml.dist as <server> tags under <php>, but since we are assuming DDEV to be a purely local develoment environment, we do not want to activate all this stuff in a version controlled file.

TLDR: let us automate a great deal of this process in DDEV by working with a custom Dockerfile and a custom phpunit DDEV command.

File: .ddev/web-build/Dockerfile.chromium:

RUN apt-get update
RUN apt-get install chromium -y

File: .ddev/commands/web/phpunit

#!/bin/bash

## Description: Run phpunit CLI inside the web container, but do a check on Chromium driver first
## Usage: phpunit [flags] [args]
## Example: "ddev phpunit --group=focus"
## ExecRaw: true

FILE=./drivers/chromedriver
if [ -f "$FILE" ]; then
  echo "Chromium Driver $FILE exists - skipping bdi driver detect"
else
  echo "Chromium Driver $FILE does not exist - run bdi driver detect"
  php ./vendor/bin/bdi detect drivers
fi
php ./vendor/bin/simple-phpunit "$@"

You may also want to add /drivers to your local .gitignore, as this is probably only useful for local development. No need to pester your non-containered colleagues with it.

Do not forget our .env.test.local file:

# To let the Panther browser run inside the DDEV container context, we have to set no sandbox to true.
# See: https://symfony.com/doc/current/testing/end_to_end.html#chrome-specific-environment-variables
PANTHER_NO_SANDBOX=true
PANTHER_CHROME_ARGUMENTS="--disable-dev-shm-usage"

And finally, remember to have dbrekelmans/bdi as a composer dev package through composer require dbrekelmans/bdi --dev.

With these things in place, all you need to do to get started on an otherwise standard DDEV config is:

ddev start
ddev composer install
ddev phpunit

Your initial DDEV start-up will take some time due to Chromium installation, but I haven't found a way around using the full Chrome and that takes a while to install... Maybe some other glorious fooltech hero can figure that out.

I was struggling a bit with issues with the ->click('New Voyage') resulting in the dialog not opening.
Eventually, it turned out that the first line $this->client()->waitFor('html[aria-busy="true"]'); in the waitForPageLoad() method was preventing this from working. Any ideas why?
Anyway, I've commented it out and the dialog is displaying and tests are all green again.