Put the reply composer at the bottom of the conversation card so the timeline and composer form one viewport-height panel; the send button is visible on load and Ctrl/Cmd+Enter submits. Internal notes now open in a dialog instead of expanding inline, so the sidebar no longer grows. Remove the shared ticket_composer helper and the inline note expansion CSS; both dialogs share ticket_dialog_head. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
144 lines
8.1 KiB
JavaScript
144 lines
8.1 KiB
JavaScript
'use strict';
|
|
const assert = require('node:assert/strict');
|
|
const path = require('node:path');
|
|
const { spawnSync } = require('node:child_process');
|
|
const test = require('node:test');
|
|
let fixture;
|
|
function rendered() {
|
|
if (!fixture) {
|
|
const run = spawnSync(process.env.PHP_BINARY || 'php', [path.join(__dirname, 'ticket-native-render-harness.php')], { encoding: 'utf8' });
|
|
assert.equal(run.status, 0, run.stderr || run.stdout);
|
|
fixture = JSON.parse(run.stdout);
|
|
}
|
|
return fixture;
|
|
}
|
|
|
|
test('list view links rows to the workspace and offers creation only as a dialog', () => {
|
|
const { list, initial } = rendered();
|
|
assert.equal((list.match(/<dialog /g) || []).length, 1, 'only the create dialog');
|
|
assert.match(list, /aksrt-native-header__actions[^]*data-aksrt-dialog-open="aksrt-ticket-create-dialog"/);
|
|
assert.doesNotMatch(list, /view=new/);
|
|
assert.match(list, /<a class="row-title" href="[^"]*page=aksrt_tickets&id=21&status=handling&ticket_type_id=1&s=needle&paged=2"/);
|
|
assert.doesNotMatch(list, /data-aksrt-ticket-detail=|data-aksrt-ticket-form="(?:reply|status|note)"/);
|
|
assert.equal(initial.detail_reads, 0);
|
|
assert.equal(initial.reply_reads, 0);
|
|
assert.equal(initial.queries.at(-1).offset, 20);
|
|
assert.equal(initial.queries.at(-1).limit, 20);
|
|
assert.deepEqual(initial.counts[0], { status: ['pending', 'handling', 'closed', 'archived'], ticket_type_id: 1, keywords: 'needle' });
|
|
assert.match(list, /status=closed&ticket_type_id=1&s=needle/);
|
|
});
|
|
|
|
test('workspace loads by ID independent of list filters and keeps the list context for going back', () => {
|
|
const { open, closed, detail_list_queries: listQueries } = rendered();
|
|
assert.equal(listQueries, 0, 'workspace must not query the list');
|
|
assert.match(open, /<h1 class="aksrt-native-header__title">[^]*Question <svg onload=alert\(1\)><\/h1>/);
|
|
assert.match(open, /href="[^"]*page=aksrt_tickets&status=pending&s=not\+in\+list&paged=3"[^>]*>[^]*返回工单列表/);
|
|
assert.match(open, /data-aksrt-ticket-detail="21"/);
|
|
for (const action of ['reply', 'status', 'note']) assert.ok(open.includes(`data-aksrt-ticket-form="${action}"`));
|
|
assert.match(open, /action="https:\/\/example.test\/wp-json\/aksrt\/v1\/admin\/tickets\/21\/notes"/);
|
|
assert.match(open, /data-aksrt-ticket-close-confirm/);
|
|
assert.match(open, /value="closed" data-closed="1"/);
|
|
assert.match(open, /<dt>工单号<\/dt><dd>TK-00021<\/dd>/);
|
|
assert.match(open, /data-aksrt-ticket-feedback/);
|
|
assert.match(closed, /data-aksrt-ticket-detail="99"/);
|
|
assert.match(closed, /aksrt-ticket-detail__closed/);
|
|
assert.match(closed, /data-aksrt-ticket-form="note"/);
|
|
assert.doesNotMatch(closed, /data-aksrt-ticket-form="(?:reply|status)"/);
|
|
// 回复框是会话卡片的底部,不是独立卡片;工作区唯一的弹窗是内部备注。
|
|
const conversation = open.match(/<section class="aksrt-ticket-conversation"[^]*?<\/section>/)?.[0] || '';
|
|
assert.match(conversation, /aksrt-ticket-conversation__scroll[^]*data-aksrt-ticket-form="reply"/);
|
|
assert.match(conversation, /data-aksrt-ticket-send-shortcut/);
|
|
assert.match(conversation, /<button type="submit" class="button button-primary">[^]*发送回复<\/button>/);
|
|
for (const html of [open, closed]) {
|
|
assert.equal((html.match(/<dialog /g) || []).length, 1);
|
|
assert.match(html, /<dialog id="aksrt-ticket-note-dialog"[^]*data-aksrt-ticket-form="note"[^]*<\/dialog>/);
|
|
assert.match(html, /data-aksrt-dialog-open="aksrt-ticket-note-dialog"/);
|
|
}
|
|
const sidebar = open.match(/<aside\b[^]*?<\/aside>/)?.[0] || '';
|
|
assert.doesNotMatch(sidebar, /<textarea|data-aksrt-ticket-form="note"/, 'note input lives only in the dialog');
|
|
});
|
|
|
|
test('result codes render as one native notice and unknown codes are ignored', () => {
|
|
const { open, closed, bogus_notice: bogus } = rendered();
|
|
assert.match(open, /<div class="notice notice-success is-dismissible"><p>回复已发送,用户将收到通知。<\/p><\/div>/);
|
|
assert.doesNotMatch(closed, /notice-success/);
|
|
assert.doesNotMatch(bogus, /class="notice\b/);
|
|
assert.doesNotMatch(bogus, /<script>/);
|
|
});
|
|
|
|
test('ticket information owns the only status editor and closed tickets stay read-only', () => {
|
|
const { open, closed } = rendered();
|
|
const sidebarCards = html => {
|
|
const sidebar = html.match(/<aside\b[^>]*>([\s\S]*?)<\/aside>/)?.[1] || '';
|
|
return [...sidebar.matchAll(/<section class="aksrt-ticket-detail__card(?: [^"]+)?">([\s\S]*?)<\/section>/g)].map(match => match[1]);
|
|
};
|
|
const cards = sidebarCards(open);
|
|
assert.equal(cards.length, 2, 'only ticket information and internal notes remain');
|
|
const info = cards[0];
|
|
assert.match(info, /<h3>工单信息<\/h3>/);
|
|
assert.match(info, /data-aksrt-ticket-form="status"/);
|
|
assert.match(info, /data-aksrt-ticket-assign/);
|
|
assert.match(info, /保存工单信息/);
|
|
assert.doesNotMatch(info, /aksrt-ticket-badge/);
|
|
for (const [name, label] of [['status', '状态'], ['ticket_type_id', '部门'], ['admin_id', '跟进人']]) {
|
|
const id = `aksrt-ticket-${name}-21`;
|
|
assert.ok(info.includes(`<label for="${id}">${label}</label>`));
|
|
assert.ok(info.includes(`<select id="${id}" name="${name}"`));
|
|
assert.equal((open.match(new RegExp(`name="${name}"`, 'g')) || []).length, 1);
|
|
}
|
|
assert.match(cards[1], /内部备注/);
|
|
const closedInfo = sidebarCards(closed)[0];
|
|
assert.match(closedInfo, /<h3>工单信息<\/h3>/);
|
|
assert.match(closedInfo, /aksrt-ticket-badge/);
|
|
assert.doesNotMatch(closedInfo, /<form|<select|data-aksrt-ticket-assign|保存工单信息/);
|
|
});
|
|
|
|
test('missing ticket renders an empty state with a way back and no forms', () => {
|
|
const { missing } = rendered();
|
|
assert.match(missing, /工单不存在/);
|
|
assert.match(missing, /返回工单列表/);
|
|
assert.doesNotMatch(missing, /data-aksrt-ticket-form|data-aksrt-ticket-detail/);
|
|
});
|
|
|
|
test('create dialog is a labelled REST form with its own feedback and close controls', () => {
|
|
const { list } = rendered();
|
|
const dialog = list.match(/<dialog id="aksrt-ticket-create-dialog"[^]*?<\/dialog>/)?.[0] || '';
|
|
assert.match(dialog, /aria-labelledby="aksrt-ticket-create-title"/);
|
|
assert.match(dialog, /<form method="post" action="https:\/\/example.test\/wp-json\/aksrt\/v1\/admin\/tickets" class="aksrt-ticket-dialog__frame" data-aksrt-ticket-form="create">/);
|
|
for (const name of ['user_id', 'ticket_type_id', 'title', 'order_number', 'content']) assert.ok(dialog.includes(`name="${name}"`), name);
|
|
assert.match(dialog, /data-aksrt-ticket-feedback/);
|
|
assert.equal((dialog.match(/data-aksrt-dialog-close/g) || []).length, 2, 'header X and footer cancel');
|
|
});
|
|
|
|
test('real rendering escapes user content, quotes and metadata', () => {
|
|
const { list, open } = rendered();
|
|
const all = list + open;
|
|
assert.match(all, /Question <svg onload=alert\(1\)>/);
|
|
assert.match(all, /Description <script>alert\(1\)<\/script>/);
|
|
assert.match(all, /Secret <script>alert\(1\)<\/script>/);
|
|
assert.match(all, /原回复已删除/);
|
|
assert.match(all, /target="_blank" rel="noopener noreferrer"/);
|
|
assert.doesNotMatch(all, /<script>|<svg onload|<img>/);
|
|
assert.doesNotMatch(all, /admin-post.php|name="ticket_action"|name="_wpnonce"/);
|
|
});
|
|
|
|
test('missing departments and disabled order links have explicit creation states', () => {
|
|
const { no_types: noTypes, no_orders: noOrders } = rendered();
|
|
assert.match(noTypes, /尚未配置工单部门/);
|
|
assert.doesNotMatch(noTypes, /data-aksrt-ticket-form="create"/);
|
|
assert.match(noTypes, /前往工单配置/);
|
|
assert.match(noOrders, /data-aksrt-ticket-form="create"/);
|
|
assert.doesNotMatch(noOrders, /name="order_number"/);
|
|
});
|
|
|
|
test('query builder excludes every terminal state and filtered counts use the same conditions', () => {
|
|
const { where, count_sql: sql, count_params: params, statistic } = rendered();
|
|
assert.match(where[0], /status NOT IN \(%s, %s\)/);
|
|
assert.deepEqual(where[1], ['closed', 'archived']);
|
|
assert.match(sql, /status IN \(%s, %s, %s, %s\)/);
|
|
assert.match(sql, /ticket_type_id = %d/);
|
|
assert.match(sql, /ticket_num LIKE %s OR title LIKE %s/);
|
|
assert.deepEqual(params, ['pending', 'handling', 'closed', 'archived', 1, '%needle%', '%needle%']);
|
|
assert.equal(statistic.closed, 2);
|
|
});
|