255 lines
8.7 KiB
PHP
255 lines
8.7 KiB
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',
|
|
]);
|
|
|
|
$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,
|
|
]);
|
|
|
|
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)
|
|
->waitFor('@helpdesk-ticket-show', 10)
|
|
->assertSee('Browser response ticket');
|
|
|
|
$this->openHelpdeskConversation($browser);
|
|
|
|
$browser->waitForText('Browser canned response', 10)
|
|
->assertSee('Browser canned response')
|
|
->assertSee('Hello Response Browser User')
|
|
->assertSee('Inserted canned browser response')
|
|
->assertSee('Nested browser response')
|
|
->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 openHelpdeskConversation(Browser $browser): void
|
|
{
|
|
$browser->script(<<<'JS'
|
|
const conversation = document.querySelector('[data-helpdesk-conversation-section]');
|
|
if (conversation) {
|
|
conversation.open = true;
|
|
}
|
|
document.querySelectorAll('[data-helpdesk-comment-card]').forEach((card) => {
|
|
card.open = true;
|
|
});
|
|
const update = window.updateCommentToggleButtons;
|
|
if (typeof update === 'function') {
|
|
update();
|
|
}
|
|
JS);
|
|
$browser->pause(150);
|
|
}
|
|
|
|
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);
|
|
}
|
|
}
|