kate522
008e63524d
The badge inherited AKSRT's modern system font stack (--font-body) and the html reset's antialiased/optimizeLegibility rendering, while the reference theme renders its body in bootstrap's "Helvetica Neue", Helvetica, Arial, sans-serif with browser defaults. Same 14px size but a different typeface and smoothing, so the badge text still read as off-theme after the gradient fix. Pin font-family, -webkit-font-smoothing and text-rendering to the reference body values on the existing scoped badge rule (alongside the line-height pin) and extend the contract test.
85 lines
3.8 KiB
JavaScript
85 lines
3.8 KiB
JavaScript
'use strict'
|
|
|
|
const assert = require('node:assert/strict')
|
|
const fs = require('node:fs')
|
|
const path = require('node:path')
|
|
const test = require('node:test')
|
|
|
|
const root = path.resolve(__dirname, '..', '..')
|
|
const read = (file) => fs.readFileSync(path.join(root, file), 'utf8')
|
|
|
|
// Reference theme (zibll css/main.css): .jb-yellow sets --this-bg-b: #f59f54 and
|
|
// --this-bg: linear-gradient(135deg, #f59f54 10%, #ff6922 100%). build/public.min.css
|
|
// is enqueued after main.min.css, so the legacy .jb-* compat layer in core/buttons.css
|
|
// overrides main.css there; the two must agree or every .jb-yellow surface (the
|
|
// user-card check-in badge first of all) paints the wrong gradient.
|
|
const referenceGradient = /--this-bg:\s*linear-gradient\(135deg,\s*#f59f54 10%,\s*#ff6922 100%\)/
|
|
const staleHexes = /#f99d4d|#f7631d/
|
|
|
|
test('buttons.css legacy .jb-yellow gradient matches the reference theme', () => {
|
|
const buttons = read('assets/css/core/buttons.css')
|
|
const start = buttons.indexOf('.jb-yellow {')
|
|
assert.notEqual(start, -1, 'missing the legacy .jb-yellow rule')
|
|
const block = buttons.slice(start, buttons.indexOf('}', start))
|
|
assert.match(block, referenceGradient)
|
|
assert.doesNotMatch(block, staleHexes)
|
|
})
|
|
|
|
test('the built public bundle carries the reference .jb-yellow gradient', () => {
|
|
const bundle = read('assets/css/build/public.min.css')
|
|
assert.match(
|
|
bundle,
|
|
/\.jb-yellow\{--this-bg: linear-gradient\(135deg, #f59f54 10%, #ff6922 100%\)\}/
|
|
)
|
|
assert.doesNotMatch(
|
|
bundle,
|
|
/\.jb-yellow\{--this-bg: linear-gradient\(135deg, #f99d4d 10%, #f7631d 100%\)\}/
|
|
)
|
|
})
|
|
|
|
test('main.css still owns the reference .jb-yellow gradient', () => {
|
|
const main = read('assets/css/main.css')
|
|
assert.match(main, referenceGradient)
|
|
assert.doesNotMatch(main, staleHexes)
|
|
})
|
|
|
|
test('the badge typography is pinned to the reference bootstrap body values', () => {
|
|
const main = read('assets/css/main.css')
|
|
const start = main.indexOf('.user-card .card-content .img-badge')
|
|
assert.notEqual(start, -1, 'missing the user-card img-badge adaptation rule')
|
|
const block = main.slice(start, main.indexOf('}', start))
|
|
assert.match(block, /line-height:\s*1\.42857143/)
|
|
// Reference body font stack (zibll bootstrap.min.css; zibll main.css does not
|
|
// override it), while AKSRT's reset imposes the modern --font-body stack.
|
|
assert.match(block, /font-family:\s*"Helvetica Neue", Helvetica, Arial, sans-serif/)
|
|
// The AKSRT html reset forces antialiased + optimizeLegibility; the badge
|
|
// restores the browser defaults the reference renders with.
|
|
assert.match(block, /-webkit-font-smoothing:\s*auto/)
|
|
assert.match(block, /text-rendering:\s*auto/)
|
|
|
|
const min = read('assets/css/main.min.css')
|
|
assert.match(
|
|
min,
|
|
/\.user-card \.card-content \.img-badge\{line-height:1\.42857143;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;-webkit-font-smoothing:auto;text-rendering:auto\}/
|
|
)
|
|
})
|
|
|
|
test('the user-card check-in badge renders without the dead is-done class and bare span', () => {
|
|
const userbox = read('inc/helpers/aksrt-header-userbox.php')
|
|
const fnStart = userbox.indexOf('function aksrt_header_user_checkin_btn')
|
|
assert.notEqual(fnStart, -1, 'missing aksrt_header_user_checkin_btn')
|
|
const fnEnd = userbox.indexOf('if (!function_exists', fnStart)
|
|
assert.notEqual(fnEnd, -1)
|
|
const fn = userbox.slice(fnStart, fnEnd)
|
|
|
|
// Signed card badge: the badge class passes through untouched and the done
|
|
// label is bare text after the icon, matching the reference markup.
|
|
assert.match(fn, /aksrt_get_user_checkin_details_link\(\s*\$class,/)
|
|
assert.doesNotMatch(fn, /\$class \. ' is-done'/)
|
|
assert.doesNotMatch(fn, /'<span>'/)
|
|
|
|
// The idle badge keeps the data-signin-label hook the sign-in controller
|
|
// uses to swap labels in place.
|
|
assert.match(fn, /<span data-signin-label>/)
|
|
})
|