Pest browser testing with a select field

Sure! Let's break it down:

You are using Laravel Pest with browser testing (likely Laravel Dusk or Pest's browser plugin) and you have a custom Blade component for your select field:

<x-ui.select field="unit_id" :items="$units" selected="{{ $material->unit_id }}" :error="$errors" :required="true">
    Unité
    @slot('options')
        <option value="{{ null }}">Sélectionner une unité</option>
    @endslot
</x-ui.select>

You are running this test:

test('user can create a material', function () {
    $this->actingAs($this->user);

    $family = Family::factory()->create();
    $unit = Unit::factory()->create();

    $page = visit('/admin/materials')->on()->desktop();

    $page
        ->click('@create-material')
        ->check('family_ids', $family->id) // THIS LINE
        ->type('code', 'HFKSDYF')
        ->type('name', 'Tuile')
        ->select('unit_id', $unit->id)
        ->press('Enregistrer')
        ->assertSee('Tuile')
        ->assertNoJavascriptErrors();
});

Main Issue

You said: "The test fails, the family seems to not be created. I wonder if it's a problem with the select field."

The likely issue is with the way your form fields are named or structured in Blade, or with your test not interacting with the custom Blade component as expected.

1. Check the field names in your HTML

Inspect the generated HTML in the browser for your form elements. The test uses:

• ->check('family_ids', $family->id) // expects a checkbox named "family_ids[]" or "family_ids"
• ->select('unit_id', $unit->id) // expects a select field with name="unit_id"

Make sure your Blade component generates a select with exactly name="unit_id" and that your checkboxes have exactly name="family_ids[]" (or similar).

2. Custom Select components

If your x-ui.select component doesn't wrap its options in a standard <select> tag, or changes the name attribute, ->select() might not work because Laravel Dusk (or Pest browser) is looking for a normal select.

• Double check that your custom select is rendered as:

  <select name="unit_id" ...>
      <option value="...">...</option>
      ...
  </select>
  

If you use a JavaScript-driven virtual/select component, you may have to interact with it differently in the test.

3. Checkbox field

Make sure your family checkbox renders as:

<input type="checkbox" name="family_ids[]" value="{{ $family->id }}">

How to Debug

• Open the page in your browser, right-click and inspect the relevant form fields. Check that all name attributes are as expected.
• If your select does not have the expected name, update the component or pass name="unit_id" explicitly.

Sample Blade for Reference

<x-ui.select field="unit_id" name="unit_id" :items="$units" ...>
    <!-- ... -->
</x-ui.select>

Ensure your custom component does:

<select name="{{ $field }}" ...>
    @foreach($items as $id => $label)
        <option value="{{ $id }}" @if(old($field, $selected) == $id) selected @endif>{{ $label }}</option>
    @endforeach
    @if(isset($options)) {!! $options !!} @endif
</select>

If you use a JS-enhanced select

If you're using Vue/React to "pretty up" your select box, the underlying <select> might not exist. In that case, you cannot use ->select(), and you must:

• Either make the underlying <select> visible and enabled for tests, or
• Simulate JS events (such as clicking dropdowns etc.), which is more complex.

Final Checklist

• Make sure your checkbox and select name attributes match what your test expects.
• Make sure the select is a regular HTML <select>, not only a custom component that JS renders.
• If using JS, adapt your selectors/methods to Bootstrap/etc.

---

TL;DR Solution

Check the final HTML to ensure you have:

<input type="checkbox" name="family_ids[]" value="1"> <!-- for families -->
<select name="unit_id">
  <option value="1">...</option>
</select>

If your x-ui.select doesn't generate <select name="unit_id">, update the component.

---

Example of Checking HTML in Test

You can temporarily add this to your test to print the page's HTML after clicking @create-material:

file_put_contents('test.html', $page->driver->getPageSource());

Open test.html and verify the field names.

---

Summary

It's likely not the select field, but a mismatch in the field names between the form and your test code, or the use of a non-standard custom select that isn't a native HTML <select> element.

Check the rendered HTML, adjust as needed, and the test should start working!

Let me know if you need more help debugging your custom Blade component.