WMS/Modules/Helpdesk/Tests/Browser/HelpdeskTicketBrowserTest.php

<?php

declare(strict_types=1);

namespace Modules\Helpdesk\Tests\Browser;

use Laravel\Dusk\Browser;
use Modules\Helpdesk\Models\CannedResponse;
use Modules\Helpdesk\Models\Comment;
use Modules\Helpdesk\Tests\Concerns\BuildsHelpdeskFixtures;
use Tests\DuskTestCase;

final class HelpdeskTicketBrowserTest extends DuskTestCase
{
    use BuildsHelpdeskFixtures;

    public function test_user_can_create_and_view_ticket_in_browser(): void
    {
        $fixtures = $this->seedLookupData();
        $user = $this->user(['name' => 'Ticket Browser User']);

        $subject = 'Browser created helpdesk ticket '.uniqid();

        $this->browse(function (Browser $browser) use ($user, $fixtures, $subject): void {
            $browser->loginAs($user)
                ->visitRoute('helpdesk.tickets.create')
                ->waitFor('@helpdesk-ticket-create')
                ->assertSee('Create ticket')
                ->type('@ticket-subject', $subject);

            $this->setHelpdeskEditor($browser, 'ticket-body-editor', '<p>This browser ticket proves the form saves correctly.</p>');
            $this->setHelpdeskSelect($browser, 'board_id', $fixtures['board']->id);
            $this->setHelpdeskSelect($browser, 'priority_id', $fixtures['high']->id);
            $this->setHelpdeskSelect($browser, 'category_id', $fixtures['category']->id);
            $this->setHelpdeskSelect($browser, 'team_id', $fixtures['team']->id);
            $this->setHelpdeskSelect($browser, 'project_id', $fixtures['project']->id);

            $browser->pause(500)
                ->press('@ticket-create-submit')
                ->waitFor('@helpdesk-ticket-index', 10)
                ->assertSee($subject)
                ->assertSee('High')
                ->assertSee('Support');
        });
    }

    public function test_user_can_add_nested_response_in_browser(): void
    {
        $fixtures = $this->seedLookupData();
        $user = $this->user(['name' => 'Response Browser User']);

        $ticket = $this->ticket([
            'owner' => $user,
            'status_id' => $fixtures['open']->id,
            'board_id' => $fixtures['board']->id,
            'priority_id' => $fixtures['normal']->id,
            'category_id' => $fixtures['category']->id,
            'team_id' => $fixtures['team']->id,
            'project_id' => $fixtures['project']->id,
            'subject' => 'Browser response ticket',
        ]);

        $cannedResponse = CannedResponse::query()->create([
            'name' => 'Browser canned response',
            'slug' => 'browser-canned-response',
            'visibility' => 'agents',
            'body' => '<p>Inserted canned browser response</p>',
            'is_active' => true,
            'sort_order' => 1,
        ]);

        $this->browse(function (Browser $browser) use ($user, $ticket, $cannedResponse): void {
            $browser->loginAs($user)
                ->visitRoute('helpdesk.tickets.show', $ticket)
                ->waitFor('@helpdesk-ticket-show')
                ->assertSee('Browser response ticket')
                ->select('canned_response_id', (string) $cannedResponse->id)
                ->press('@insert-canned-response')
                ->assertInputValue('commentBody', '<p>Inserted canned browser response</p>');

            $this->setHelpdeskEditor($browser, 'ticket-comment-editor', '<p>First browser response</p>');

            $browser
                ->press('@post-comment')
                ->waitForText('First browser response', 10)
                ->assertSee('First browser response');

            $comment = Comment::query()
                ->where('ticket_id', $ticket->id)
                ->whereNull('parent_id')
                ->where('body', '<p>First browser response</p>')
                ->firstOrFail();

            $browser->press('@reply-to-comment-'.$comment->id)
                ->waitFor('@reply-body-'.$comment->id)
                ->type('@reply-body-'.$comment->id, 'Nested browser response')
                ->press('@post-reply-'.$comment->id)
                ->waitForText('Nested browser response', 10)
                ->assertSee('Nested browser response');
        });

        $this->assertDatabaseHas('helpdesk_comments', [
            'ticket_id' => $ticket->id,
            'parent_id' => null,
            'body' => '<p>First browser response</p>',
        ]);

        $parentId = Comment::query()
            ->where('ticket_id', $ticket->id)
            ->whereNull('parent_id')
            ->where('body', '<p>First browser response</p>')
            ->value('id');

        $this->assertDatabaseHas('helpdesk_comments', [
            'ticket_id' => $ticket->id,
            'parent_id' => $parentId,
            'body' => 'Nested browser response',
        ]);
    }

    private function setHelpdeskEditor(Browser $browser, string $dusk, string $html): void
    {
        $encodedDusk = json_encode($dusk, JSON_THROW_ON_ERROR);
        $encodedHtml = json_encode($html, JSON_THROW_ON_ERROR);

        $browser->script(<<<JS
const key = {$encodedDusk};
const html = {$encodedHtml};
const root = document.querySelector('[dusk="' + key + '"]') || document.querySelector('[data-dusk="' + key + '"]');

if (! root) {
    throw new Error('Helpdesk editor ' + key + ' was not found.');
}

const editor = root.matches('textarea, input, [contenteditable="true"]')
    ? root
    : root.querySelector('textarea, input, [contenteditable="true"]');

if (! editor) {
    throw new Error('Helpdesk editor content area ' + key + ' was not found.');
}

editor.focus();

if (editor.matches('textarea, input')) {
    editor.value = html.replace(/^<p>/, '').replace(/<\/p>$/, '');
} else {
    editor.innerHTML = html;
}

editor.dispatchEvent(new InputEvent('input', {
    bubbles: true,
    composed: true,
    inputType: 'insertText',
    data: editor.value || editor.textContent || ' ',
}));

editor.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
editor.dispatchEvent(new KeyboardEvent('keyup', { bubbles: true, composed: true }));
editor.dispatchEvent(new Event('blur', { bubbles: true, composed: true }));

const model = root.getAttribute('wire:model')
    || root.getAttribute('wire:model.live')
    || root.getAttribute('wire:model.defer')
    || root.getAttribute('data-wire-model');

const componentRoot = root.closest('[wire\\\\:id]');

if (model && componentRoot && window.Livewire) {
    const component = window.Livewire.find(componentRoot.getAttribute('wire:id'));

    if (component) {
        component.set(model, html);
    }
}
JS);
    }

    private function setHelpdeskSelect(Browser $browser, string $model, int|string|null $value): void
    {
        $encodedModel = json_encode($model, JSON_THROW_ON_ERROR);
        $encodedValue = json_encode($value === null ? '' : (string) $value, JSON_THROW_ON_ERROR);

        $browser->script(<<<JS
const model = {$encodedModel};
const value = {$encodedValue};
const select = document.querySelector('[data-wire-model="' + model + '"]');
if (! select) {
    throw new Error('Helpdesk select '+model+' was not found.');
}
select.value = value;
select.dispatchEvent(new Event('change', { bubbles: true }));
if (window.jQuery) {
    window.jQuery(select).val(value).trigger('change.select2').trigger('change.helpdesk-select2').trigger('change');
}
JS);
    }
}