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\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',
        ]);

        $parent = Comment::query()->create([
            'ticket_id' => $ticket->id,
            'user_id' => $user->id,
            'parent_id' => null,
            'title' => 'Browser canned response',
            'body' => '<p>Hello Response Browser User</p><p>Inserted canned browser response for ' . $ticket->reference . '</p>',
            'is_internal' => false,
        ]);

        Comment::query()->create([
            'ticket_id' => $ticket->id,
            'user_id' => $user->id,
            'parent_id' => $parent->id,
            'title' => 'RE: Browser canned response',
            'body' => 'Nested browser response',
            'is_internal' => false,
        ]);

        $this->browse(function (Browser $browser) use ($user, $ticket): void {
            $browser->loginAs($user)
                ->visitRoute('helpdesk.tickets.show', ['ticket' => $ticket->getKey()])
                ->waitForText('Browser response ticket', 10)
                ->assertSee('Browser response ticket')
                ->assertDontSee('UNID')
                ->assertDontSee('GUID');
        });

        $this->assertDatabaseHas('helpdesk_comments', [
            'ticket_id' => $ticket->id,
            'parent_id' => null,
            'body' => '<p>Hello Response Browser User</p><p>Inserted canned browser response for ' . $ticket->reference . '</p>',
        ]);

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

    private function submitNestedCommentThroughBrowser(Browser $browser, int|string $ticketId, int|string $parentId): void
    {
        $action = route('helpdesk.tickets.comments.store', ['ticket' => $ticketId]);
        $encodedAction = json_encode($action, JSON_THROW_ON_ERROR);
        $encodedParentId = json_encode((string) $parentId, JSON_THROW_ON_ERROR);

        $browser->script(<<<JS
const action = {$encodedAction};
const parentId = {$encodedParentId};
const token = document.querySelector('meta[name="csrf-token"]')?.getAttribute('content')
    || document.querySelector('input[name="_token"]')?.value;

const form = document.createElement('form');
form.method = 'POST';
form.action = action;
form.style.display = 'none';

const fields = {
    _token: token,
    parent_id: parentId,
    subject: 'RE: Browser canned response',
    commentBody: 'Nested browser response'
};

Object.entries(fields).forEach(([name, value]) => {
    const input = document.createElement('input');
    input.type = 'hidden';
    input.name = name;
    input.value = value || '';
    form.appendChild(input);
});

document.body.appendChild(form);
form.submit();
JS);

        $browser->waitForLocation('/helpdesk/tickets/' . $ticketId, 10);
    }

    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);
    }
}