Refactor VPN proxy client implementation
This commit is contained in:
@@ -3,29 +3,35 @@ import fs from 'node:fs';
|
||||
import path from 'node:path';
|
||||
import test from 'node:test';
|
||||
|
||||
import { readStyleSource } from './style-source.js';
|
||||
|
||||
const root = path.resolve(import.meta.dirname, '../..');
|
||||
const component = fs.readFileSync(path.join(root, 'src/web/components/ClientOverviewPage.jsx'), 'utf8');
|
||||
const popup = fs.readFileSync(path.join(root, 'src/web/components/ConfirmationPopup.jsx'), 'utf8');
|
||||
const styles = fs.readFileSync(path.join(root, 'src/web/styles.css'), 'utf8');
|
||||
const component = fs.readFileSync(path.join(root, 'src/web/components/ClientOverviewPage.tsx'), 'utf8');
|
||||
const connection = fs.readFileSync(path.join(root, 'src/web/features/connection/ConnectionPanel.tsx'), 'utf8');
|
||||
const subscription = fs.readFileSync(path.join(root, 'src/web/features/subscription/SubscriptionFeature.tsx'), 'utf8');
|
||||
const routing = fs.readFileSync(path.join(root, 'src/web/features/routing/RoutingFeature.tsx'), 'utf8');
|
||||
const instructions = fs.readFileSync(path.join(root, 'src/web/features/instructions/InstructionsFeature.tsx'), 'utf8');
|
||||
const dialog = fs.readFileSync(path.join(root, 'src/web/ui/ConfirmationDialog.tsx'), 'utf8');
|
||||
const styles = readStyleSource(root);
|
||||
|
||||
test('rule editor add latency stays constant and dirty exits are guarded', () => {
|
||||
const rowRule = /\.client-local-rule \{([\s\S]*?)\n\}/.exec(styles)?.[1] || '';
|
||||
assert.doesNotMatch(rowRule, /--rule-index|calc\(/);
|
||||
assert.match(component, /addEventListener\('beforeunload', warnBeforeUnload\)/);
|
||||
assert.match(component, /requestCloseLocalRules\(\)/);
|
||||
assert.match(component, /localRulesPendingRestart/);
|
||||
assert.match(component, /activeLocalRules/);
|
||||
assert.match(component, /localRulesRevision/);
|
||||
assert.match(component, /Не сохранено/);
|
||||
assert.match(component, /if \(!runtimeActive\) return \['saved', 'Сохранено'\]/);
|
||||
assert.match(component, /Ждёт перезапуска/);
|
||||
assert.match(component, /Перезапустить VPN/);
|
||||
assert.match(component, /const localRulesPendingRestart = connected && state\?\.route\?\.localRulesPendingRestart === true/);
|
||||
assert.match(component, /if \(!connected \|\| !result\.state\.route\.localRulesPendingRestart\) setLocalRulesOpen\(false\)/);
|
||||
assert.match(component, /client-deletable-row/);
|
||||
assert.match(component, /className="client-delete-strike"[\s\S]*onAnimationEnd/);
|
||||
assert.doesNotMatch(component, /client-rule-delete-cross/);
|
||||
assert.match(component, /className="client-local-rule-delete"/);
|
||||
assert.match(routing, /addEventListener\('beforeunload', warnBeforeUnload\)/);
|
||||
assert.match(routing, /requestClose\(\)/);
|
||||
assert.match(routing, /pendingRestart/);
|
||||
assert.match(routing, /activeLocalRules/);
|
||||
assert.match(routing, /localRulesRevision/);
|
||||
assert.match(routing, /Не сохранено/);
|
||||
assert.match(routing, /if \(!runtimeActive\) return \['saved', 'Сохранено'\]/);
|
||||
assert.match(routing, /Ждёт перезапуска/);
|
||||
assert.match(routing, /Перезапустить VPN/);
|
||||
assert.match(routing, /const pendingRestart = connected && route\?\.localRulesPendingRestart === true/);
|
||||
assert.match(routing, /if \(!connected \|\| !result\.localRulesPendingRestart\) setIsOpen\(false\)/);
|
||||
assert.match(routing, /client-deletable-row/);
|
||||
assert.match(routing, /className="client-delete-strike"[\s\S]*onAnimationEnd/);
|
||||
assert.doesNotMatch(routing, /client-rule-delete-cross/);
|
||||
assert.match(routing, /className="client-local-rule-delete"/);
|
||||
assert.match(styles, /\.client-deletable-row\.is-removing > \.client-delete-strike[\s\S]*client-delete-strike/);
|
||||
assert.match(styles, /\.client-delete-strike \{[\s\S]*z-index: 100[\s\S]*background: transparent/);
|
||||
assert.match(styles, /\.client-deletable-row\.is-removing > :not\(\.client-delete-strike\)[\s\S]*z-index: 0/);
|
||||
@@ -40,37 +46,52 @@ test('rule editor add latency stays constant and dirty exits are guarded', () =>
|
||||
});
|
||||
|
||||
test('critical confirmations share one accessible blocking popup', () => {
|
||||
assert.match(component, /id="stop-connection"/);
|
||||
assert.match(component, /id="discard-local-rules"/);
|
||||
assert.match(component, /id="delete-subscription"/);
|
||||
assert.equal(fs.existsSync(path.join(root, 'src/web/components/ConfirmationPopup.jsx')), false);
|
||||
assert.equal(
|
||||
(component.match(/<ConfirmationDialog/g) || []).length
|
||||
+ (connection.match(/<ConfirmationDialog/g) || []).length
|
||||
+ (subscription.match(/<ConfirmationDialog/g) || []).length
|
||||
+ (routing.match(/<ConfirmationDialog/g) || []).length,
|
||||
3,
|
||||
);
|
||||
assert.match(connection, /id="stop-connection"/);
|
||||
assert.match(routing, /id="discard-local-rules"/);
|
||||
assert.match(subscription, /id="delete-subscription"/);
|
||||
assert.doesNotMatch(component, /client-local-rules-discard|client-delete-confirmation/);
|
||||
assert.match(popup, /role="alertdialog"/);
|
||||
assert.match(popup, /aria-modal="true"/);
|
||||
assert.match(popup, /querySelectorAll\(FOCUSABLE\)/);
|
||||
assert.match(popup, /element\.inert = true/);
|
||||
assert.match(popup, /requestAnimationFrame\(\(\) => cancelRef\.current\?\.focus\(\)\)/);
|
||||
assert.match(dialog, /role="alertdialog"/);
|
||||
assert.match(dialog, /aria-modal="true"/);
|
||||
assert.match(dialog, /aria-hidden=\{!open\}[\s\S]*inert=\{!open \? true : undefined\}/);
|
||||
assert.match(dialog, /querySelectorAll<HTMLElement>\(FOCUSABLE\)/);
|
||||
assert.match(dialog, /element\.inert = true/);
|
||||
assert.match(dialog, /requestAnimationFrame\(\(\) => cancelRef\.current\?\.focus\(\)\)/);
|
||||
assert.match(dialog, /event\.key === 'Escape' && !busyRef\.current/);
|
||||
assert.match(dialog, /event\.target === event\.currentTarget && !busy/);
|
||||
assert.match(dialog, /background\.forEach\(\(\{ element, inert \}\) => \{ element\.inert = inert; \}\)/);
|
||||
assert.match(dialog, /document\.body\.style\.overflow = previousOverflow/);
|
||||
assert.match(dialog, /requestAnimationFrame\(\(\) => previousFocus\?\.focus\?\.\(\)\)/);
|
||||
assert.match(dialog, /document\.querySelector\('\.app\.client-app'\) \|\| document\.body/);
|
||||
assert.match(styles, /\.client-confirmation-popup\.is-open[\s\S]*backdrop-filter: blur\(18px\)/);
|
||||
});
|
||||
|
||||
test('power click and native Enter cannot stop VPN without a separate confirmation', () => {
|
||||
assert.match(component, /className="client-power"[\s\S]*type="button"[\s\S]*onClick=\{toggleConnection\}/);
|
||||
assert.match(component, /if \(action\?\.type === 'stop'\) \{[\s\S]*setConfirmingStop\(true\);[\s\S]*return;[\s\S]*\}/);
|
||||
assert.doesNotMatch(component, /if \(action\?\.type === 'stop'\) return onStop\(\)/);
|
||||
assert.match(component, /id="stop-connection"[\s\S]*cancelLabel="Оставить включённым"[\s\S]*confirmLabel="Отключить VPN"[\s\S]*onConfirm=\{stopConnection\}/);
|
||||
assert.match(connection, /className="client-power"[\s\S]*type="button"[\s\S]*onClick=\{toggleConnection\}/);
|
||||
assert.match(connection, /if \(action\?\.type === 'stop'\) \{[\s\S]*setConfirmingStop\(true\);[\s\S]*return;[\s\S]*\}/);
|
||||
assert.doesNotMatch(connection, /if \(action\?\.type === 'stop'\) return onStop\(\)/);
|
||||
assert.match(connection, /id="stop-connection"[\s\S]*cancelLabel="Оставить включённым"[\s\S]*confirmLabel="Отключить VPN"[\s\S]*onConfirm=\{stopConnection\}/);
|
||||
});
|
||||
|
||||
test('copy feedback, drawers and Gateway access actions expose complete semantics', () => {
|
||||
assert.match(component, /className="client-live-region" role="status" aria-live="polite" aria-atomic="true"/);
|
||||
assert.match(component, /Не удалось скопировать/);
|
||||
assert.match(component, /Скопировано/);
|
||||
assert.match(component, /client-copy-feedback[^\n]*\{copyFeedback\.failed \? 'Ошибка' : 'Скопировано'\}/);
|
||||
assert.match(connection, /client-copy-feedback[^\n]*\{copyFeedback\.failed \? 'Ошибка' : 'Скопировано'\}/);
|
||||
assert.doesNotMatch(component, /ГОТОВО/);
|
||||
assert.doesNotMatch(component, />Error<|>Copied</);
|
||||
assert.match(component, /aria-label="Закрыть инструкции"/);
|
||||
assert.match(component, /aria-label="Закрыть локальные правила"/);
|
||||
assert.match(component, /instructionsCloseRef\.current\?\.focus\(\)/);
|
||||
assert.match(component, /localRulesCloseRef\.current\?\.focus\(\)/);
|
||||
assert.match(component, /aria-label={`Скопировать \$\{label\}: \$\{kind === 'gateway' \? gatewayAddress : proxyUrls\[kind\]\}`}/);
|
||||
assert.match(instructions, /aria-label="Закрыть инструкции"/);
|
||||
assert.match(routing, /aria-label="Закрыть локальные правила"/);
|
||||
assert.match(instructions, /closeRef\.current\?\.focus\(\)/);
|
||||
assert.match(routing, /closeRef\.current\?\.focus\(\)/);
|
||||
assert.match(connection, /aria-label={`Скопировать \$\{label\}: \$\{kind === 'gateway' \? gatewayAddress : proxyUrls\[kind\]\}`}/);
|
||||
assert.doesNotMatch(component, /client-access-tabs|role="tab"|role="tabpanel"/);
|
||||
assert.match(styles, /\.client-drawer-close \{[\s\S]*width: 44px;[\s\S]*height: 44px/);
|
||||
assert.match(styles, /@media \(max-width: 560px\)[\s\S]*\.client-copy-button \{[\s\S]*min-height: 44px/);
|
||||
|
||||
Reference in New Issue
Block a user