Filament•5mo ago

How to test Header/Footer Actions in a Section Form Component

callFormComponentAction fails with error "Call to a member function getKey() on null" when attempting to test calling a section header action. Can callFormComponentAction() be used to test Header/Footer actions on Form Sections. Test Code:

it('can toggle form edit', function () {
    $order = $this->getOrders(1);

    // Arrange
    livewire(OrderRentalHistory::class, ['record' => $order->id])
        ->assertFormFieldIsDisabled('address')
        ->callFormComponentAction('rental-history', 'edit-form')
        ->assertFormFieldIsEnabled('address');

});

it('can toggle form edit', function () {
    $order = $this->getOrders(1);

    // Arrange
    livewire(OrderRentalHistory::class, ['record' => $order->id])
        ->assertFormFieldIsDisabled('address')
        ->callFormComponentAction('rental-history', 'edit-form')
        ->assertFormFieldIsEnabled('address');

});

Form Code:

Section::make('Rental History')
                ->key('rental-history')
                ->headerActions([
                    Action::make('edit-form')
                        ->label('Edit')
                        ->button()
                        ->icon('mdi-pencil')
                        ->action(fn (Get $get, Set $set) => $set('form-editable', ! $get('form-editable'))),
                ])
                ->schema([
                    Hidden::make('form-editable')
                        ->live(),
                    TextInput::make('address')
                        ->prefixIcon('mdi-map-marker')
                        ->disabled(fn (Get $get) => ! $get('form-editable')),

                ]),

Section::make('Rental History')
                ->key('rental-history')
                ->headerActions([
                    Action::make('edit-form')
                        ->label('Edit')
                        ->button()
                        ->icon('mdi-pencil')
                        ->action(fn (Get $get, Set $set) => $set('form-editable', ! $get('form-editable'))),
                ])
                ->schema([
                    Hidden::make('form-editable')
                        ->live(),
                    TextInput::make('address')
                        ->prefixIcon('mdi-map-marker')
                        ->disabled(fn (Get $get) => ! $get('form-editable')),

                ]),

1 Reply

RonOP•5mo ago

I was able to solve this with a change to the key string used with the Section form component. In my case i was rendering the form from a custom page with a "data" statePath. When using the livewire test helper function "callFormComponentAction" , the code is looking for the component using the statePath and the key name. Custom page form function

public function form(Form $form): Form
    {
        return $form->schema([
            ...
        ])
            ->model($this->record)
            ->statePath('data')
            ->operation('edit');
    }

public function form(Form $form): Form
    {
        return $form->schema([
            ...
        ])
            ->model($this->record)
            ->statePath('data')
            ->operation('edit');
    }

I was able to call the Header Action in a Section by prefixing the key with the state path in the schema but using the non-state path key in the test.

Section::make('Rental History')
                ->key('data.rental-history')
                ->headerActions([
                    ...
                ])
                ->schema([
                    ...
                ]),

Section::make('Rental History')
                ->key('data.rental-history')
                ->headerActions([
                    ...
                ])
                ->schema([
                    ...
                ]),

Test Code

livewire(OrderRentalHistory::class, ['record' => $order->id])
        ->callFormComponentAction('rental-history', 'edit-form')

livewire(OrderRentalHistory::class, ['record' => $order->id])
        ->callFormComponentAction('rental-history', 'edit-form')

Gaming

Programming

How to test Header/Footer Actions in a Section Form Component