fix(frontend): align top navigation with reference theme
This commit is contained in:
kate522 committed
1 parent
1c501ff713
commit
9b27508a5b
12 files changed
+234
-607
No files matched your search
@@ -0,0 +1,111 @@
|
||||
'use strict';
|
||||
|
||||
const assert = require('node:assert/strict');
|
||||
const fs = require('node:fs');
|
||||
const path = require('node:path');
|
||||
const { spawnSync } = require('node:child_process');
|
||||
const test = require('node:test');
|
||||
|
||||
const root = path.resolve(__dirname, '..', '..');
|
||||
const read = (file) => fs.readFileSync(path.join(root, file), 'utf8');
|
||||
|
||||
function renderHeaderParts() {
|
||||
const php = String.raw`
|
||||
define('ABSPATH', __DIR__ . '/');
|
||||
$GLOBALS['aksrt_test_user_id'] = 0;
|
||||
function esc_attr($value) { return htmlspecialchars((string) $value, ENT_QUOTES); }
|
||||
function esc_html($value) { return htmlspecialchars((string) $value, ENT_QUOTES); }
|
||||
function esc_attr__($value, $domain = null) { return esc_attr($value); }
|
||||
function esc_html__($value, $domain = null) { return esc_html($value); }
|
||||
function esc_url($value) { return $value; }
|
||||
function esc_url_raw($value) { return $value; }
|
||||
function home_url($path = '/') { return 'https://example.test' . $path; }
|
||||
function get_bloginfo($field = '') { return 'AKSRT'; }
|
||||
function get_current_user_id() { return (int) $GLOBALS['aksrt_test_user_id']; }
|
||||
function get_option($name, $default = false) { return $name === 'users_can_register'; }
|
||||
function aksrt_render_header_menu_buttons() { return '<a class="newadd-btns">发布</a>'; }
|
||||
function aksrt_get_translate_language_btn($class = '') { return '<a class="' . esc_attr($class) . '">语言</a>'; }
|
||||
function aksrt_header_user_box_html($ctx) { return '<div class="sub-user-box">账户</div>'; }
|
||||
function aksrt_get_avatar_html($userId, $size, $args = []) { return '<img class="avatar" width="' . (int) $size . '">'; }
|
||||
function has_nav_menu($location) { return false; }
|
||||
function is_super_admin() { return false; }
|
||||
function is_singular($type = '') { return false; }
|
||||
require __DIR__ . '/inc/helpers/header/aksrt-header-navbar.php';
|
||||
require __DIR__ . '/inc/helpers/header/aksrt-header-mobile.php';
|
||||
|
||||
$results = [];
|
||||
foreach (['1', '2', '3'] as $layout) {
|
||||
foreach ([0, 7] as $userId) {
|
||||
$GLOBALS['aksrt_test_user_id'] = $userId;
|
||||
$ctx = [
|
||||
'layout' => $layout,
|
||||
'user_id' => $userId,
|
||||
'theme_positions' => ['pc_nav', 'm_menu'],
|
||||
'message_icon_positions' => [],
|
||||
'messages_url' => '',
|
||||
'unread_count' => 0,
|
||||
'mobile_layout' => 'center',
|
||||
'brand_name' => 'AKSRT',
|
||||
'logo_html' => '',
|
||||
];
|
||||
ob_start(); aksrt_menu_button($ctx); $buttons = ob_get_clean();
|
||||
$results['desktop'][$layout][$userId] = $buttons;
|
||||
}
|
||||
}
|
||||
foreach (['center', 'left'] as $mobileLayout) {
|
||||
$ctx = [
|
||||
'mobile_layout' => $mobileLayout,
|
||||
'mobile_align' => 'left',
|
||||
'theme_positions' => [],
|
||||
'brand_name' => 'AKSRT',
|
||||
'logo_html' => '',
|
||||
'user_id' => 0,
|
||||
];
|
||||
ob_start(); aksrt_navbar_header($ctx); $results['mobile'][$mobileLayout]['header'] = ob_get_clean();
|
||||
ob_start(); aksrt_nav_mobile_content($ctx); $results['mobile'][$mobileLayout]['drawer'] = ob_get_clean();
|
||||
}
|
||||
echo json_encode($results, JSON_UNESCAPED_SLASHES);
|
||||
`;
|
||||
const result = spawnSync('php', ['-r', php], { cwd: root, encoding: 'utf8' });
|
||||
assert.equal(result.status, 0, result.stderr || result.stdout);
|
||||
return JSON.parse(result.stdout);
|
||||
}
|
||||
|
||||
test('rendered desktop layouts retain reference control order for guests and members', () => {
|
||||
const output = renderHeaderParts();
|
||||
for (const layout of ['1', '2', '3']) {
|
||||
for (const userId of ['0', '7']) {
|
||||
const html = output.desktop[layout][userId];
|
||||
assert.match(html, /class="but" aria-label=/, `layout ${layout} menu fold`);
|
||||
assert.match(html, /class="list-inline splitters relative"/, `layout ${layout} account list`);
|
||||
assert.doesNotMatch(html, /aksrt-navbar-account|aksrt-nav-avatar/);
|
||||
if (layout === '2' && userId === '0') assert.match(html, /class="signin-loader"/);
|
||||
else assert.match(html, /class="aksrt-nav-icon[^"]*"|class="navbar-avatar"/);
|
||||
const right = html.indexOf('list-inline splitters relative');
|
||||
const actions = html.indexOf('navbar-but');
|
||||
if (layout === '3' && actions !== -1) assert.ok(right < actions, 'layout 3 puts account group before actions');
|
||||
if (layout !== '3' && actions !== -1) assert.ok(actions < right, `layout ${layout} puts actions before account group`);
|
||||
}
|
||||
}
|
||||
assert.match(output.desktop['2']['0'], /signin-loader/);
|
||||
assert.match(output.desktop['2']['7'], /class="navbar-avatar"/);
|
||||
assert.match(output.desktop['1']['0'], /#icon-user/);
|
||||
assert.match(output.desktop['3']['7'], /#icon-user/);
|
||||
});
|
||||
|
||||
test('mobile search appears in the centered header or left drawer according to layout', () => {
|
||||
const output = renderHeaderParts();
|
||||
assert.match(output.mobile.center.header, /class="navbar-toggle main-search-btn"/);
|
||||
assert.doesNotMatch(output.mobile.center.drawer, /main-search-btn/);
|
||||
assert.doesNotMatch(output.mobile.left.header, /main-search-btn/);
|
||||
assert.match(output.mobile.left.drawer, /class="toggle-radius main-search-btn"/);
|
||||
});
|
||||
|
||||
test('header source restores the reference typography and Bootstrap control dimensions', () => {
|
||||
const css = read('assets/css/frontend/header-userbox.css');
|
||||
const mainCss = read('assets/css/main.css');
|
||||
assert.match(css, /\.header,\s*\.mobile-header,\s*\.navbar-search\s*\{[^}]*font-family:\s*"Helvetica Neue", Helvetica, Arial, sans-serif;[^}]*font-size:\s*14px;[^}]*font-weight:\s*400;[^}]*line-height:\s*1\.42857143;[^}]*-webkit-font-smoothing:\s*auto;[^}]*text-rendering:\s*auto;/s);
|
||||
assert.match(css, /\.navbar-top \.aksrt-nav-icon\s*\{[^}]*display:\s*inline-block;[^}]*padding:\s*6px 12px;[^}]*font-size:\s*14px;[^}]*line-height:\s*1\.42857143;[^}]*border:\s*1px solid transparent;[^}]*border-radius:\s*4px;/s);
|
||||
assert.match(mainCss, /\.navbar-avatar\s*\{[^}]*margin-top:\s*3px;[^}]*width:\s*29px;[^}]*height:\s*29px;/s);
|
||||
assert.doesNotMatch(css, /\.aksrt-navbar-account|\.aksrt-nav-avatar|\.navbar-form \.toggle-radius:not|navbar-form\.flex\.ac\s*\{[^}]*min-height|\.navbar-search(?:\.show)?\s*\{[^}]*transform:/s);
|
||||
});
|
||||
@@ -166,7 +166,8 @@ test('guest account member VIP and publish contracts share reference header DOM'
|
||||
assert.match(header, /nav_newposts/);
|
||||
assert.match(header, /navbar-form navbar-right navbar-but/);
|
||||
assert.match(header, /pay-vip/);
|
||||
assert.match(scripts, /\$enqueue_module\('header-userbox'\)/);
|
||||
assert.match(header, /fa far fa-toggle-theme/);
|
||||
assert.doesNotMatch(scripts, /\$enqueue_module\('header-userbox'\)/);
|
||||
assert.match(userboxCss, /\.header-user-href > a[\s\S]*?max-height: none/);
|
||||
assert.doesNotMatch(userboxCss, /user-dropdown|nav-user|html\.dark|theme-dark/);
|
||||
assert.doesNotMatch(userboxCss, /--(?:main|muted|key)-|@import/);
|
||||
@@ -180,21 +181,14 @@ test('guest account member VIP and publish contracts share reference header DOM'
|
||||
assert.match(userboxCss, /\.aksrt-header-userbox\s*>\s*\.mt6\.em09\s*>\s*\.but\.block\s*\{[^}]*display:\s*block;[^}]*box-sizing:\s*border-box;[^}]*width:\s*100%;/s);
|
||||
});
|
||||
|
||||
test('the top-nav midline chip rule leaves the popover social buttons alone', () => {
|
||||
test('the top navigation keeps the reference Bootstrap control geometry', () => {
|
||||
const userboxCss = read('assets/css/frontend/header-userbox.css');
|
||||
const publicCss = read('assets/css/build/public.css');
|
||||
|
||||
// The account-row chips, the theme toggle and the language toggle all want a
|
||||
// 29px midline circle. The popover's quick-login buttons are .toggle-radius
|
||||
// too and also live inside .navbar-form, but they must keep the
|
||||
// .social_loginbar geometry from main.css. flex-basis outranks width in a
|
||||
// flex container and the bare rule is (0,3,0) against (0,2,0), so an
|
||||
// unscoped selector collapses the buttons to 29px and zeroes their margins.
|
||||
assert.match(userboxCss, /\.navbar-top \.navbar-form \.toggle-radius:not\(\.social-login-item\):not\(\.xh-social-item\)\s*\{[^}]*flex:\s*0 0 29px;[^}]*margin:\s*0;/s);
|
||||
assert.doesNotMatch(userboxCss, /\.navbar-top \.navbar-form \.toggle-radius\s*\{/);
|
||||
// header-userbox.css is also folded into the public bundle, so the exemption
|
||||
// has to survive the build.
|
||||
assert.match(publicCss, /\.navbar-top \.navbar-form \.toggle-radius:not\(\.social-login-item\):not\(\.xh-social-item\)/);
|
||||
assert.match(userboxCss, /\.header,\s*\.mobile-header,\s*\.navbar-search\s*\{[^}]*font-family:\s*['"]Helvetica Neue['"],\s*Helvetica,\s*Arial,\s*sans-serif;[^}]*font-weight:\s*400;[^}]*line-height:\s*1\.42857143;/s);
|
||||
assert.match(userboxCss, /\.navbar-top \.aksrt-nav-icon\s*\{[^}]*display:\s*inline-block;[^}]*padding:\s*6px 12px;[^}]*font-size:\s*14px;[^}]*line-height:\s*1\.42857143;[^}]*border:\s*1px solid transparent;[^}]*border-radius:\s*4px;/s);
|
||||
assert.doesNotMatch(userboxCss, /\.aksrt-navbar-account|\.aksrt-nav-avatar|\.navbar-form \.toggle-radius:not|navbar-form\.flex\.ac\s*\{[^}]*min-height|\.aksrt-navbar-language\s*\{[^}]*margin:/);
|
||||
assert.doesNotMatch(publicCss, /\.navbar-top \.navbar-form \.toggle-radius:not\(\.social-login-item\)/);
|
||||
});
|
||||
|
||||
test('route and feature modules do not restyle the legacy top-nav chips', () => {
|
||||
@@ -278,14 +272,15 @@ test('the account popover rows match the reference user box structure', () => {
|
||||
|
||||
// Check-in entry is an anchor with the reference button classes.
|
||||
assert.match(header, /but block c-yellow/);
|
||||
assert.match(header, /but block c-yellow is-done/);
|
||||
assert.match(header, /aksrt_get_user_checkin_details_link\([\s\S]*?'but block c-yellow'/);
|
||||
assert.match(header, /checkin-details-link/);
|
||||
assert.match(buttonsCss, /\.but\.block\s*\{\s*display:\s*block;\s*\}/);
|
||||
assert.match(buttonsCss, /\.btn-block\s*\{\s*display:\s*block;\s*width:\s*100%;\s*\}/);
|
||||
// The reference selector is a descendant, so the VIP chip inside its hover-show
|
||||
// wrapper receives the same .but geometry (font-size, padding, margin) as the
|
||||
// publish chip instead of falling back to the bare .but defaults.
|
||||
// The hover wrapper uses the reference inline-block utility so the absolutely
|
||||
// positioned VIP card keeps its original static position.
|
||||
assert.match(read('inc/helpers/aksrt-header-menu-buttons.php'), /class="hover-show inline-block"/);
|
||||
assert.match(legacyMainCss, /\.navbar-top \.navbar-but \.but\s*\{[^}]*font-size:\s*0\.8em;[^}]*padding:\s*0\.3em 1em !important;[^}]*margin:\s*0\.4em;/s);
|
||||
assert.doesNotMatch(legacyMainCss, /\.navbar-top \.navbar-but > \.but\s*\{/);
|
||||
assert.doesNotMatch(read('assets/css/frontend/header-userbox.css'), /\.navbar-top \.navbar-but > \.hover-show/);
|
||||
assert.doesNotMatch(header, /but block c-yellow[^"']*btn-block/);
|
||||
assert.match(header, /<div class="mt6 em09" style="padding:2px;">' \. \$checkin \. '<\/div>/);
|
||||
assert.match(header, /data-signin-done-label[\s\S]{0,120}?今日已签到/);
|
||||
|
||||
Reference in new issue
Block a user