feat: 更新手机号验证设置UI，优化显示逻辑并添加相关测试
This commit is contained in:
QLHazyCoder
@@ -62,6 +62,18 @@ test('sidepanel html exposes phone verification toggle and multi-provider SMS ro
|
||||
assert.match(html, /id="row-signup-method"/);
|
||||
assert.match(html, /id="row-signup-phone"/);
|
||||
assert.match(html, /id="input-signup-phone"/);
|
||||
assert.ok(
|
||||
html.indexOf('id="row-signup-phone"') > html.indexOf('id="phone-verification-section"'),
|
||||
'signup phone runtime row should live inside the phone verification card'
|
||||
);
|
||||
assert.ok(
|
||||
html.indexOf('id="row-signup-phone"') > html.indexOf('id="row-hero-sms-runtime-pair"'),
|
||||
'signup phone runtime row should sit below the SMS order runtime row'
|
||||
);
|
||||
assert.ok(
|
||||
html.indexOf('id="row-signup-phone"') > html.indexOf('hero-sms-runtime-grid'),
|
||||
'signup phone runtime row should not be embedded in the SMS order runtime grid'
|
||||
);
|
||||
assert.match(html, /data-signup-method="email"/);
|
||||
assert.match(html, /data-signup-method="phone"/);
|
||||
assert.match(html, /id="row-phone-sms-provider"/);
|
||||
@@ -229,12 +241,13 @@ return {
|
||||
|
||||
test('updatePhoneVerificationSettingsUI toggles SMS rows from the sms switch and provider selection', () => {
|
||||
const api = new Function(`
|
||||
const phoneVerificationSectionExpanded = true;
|
||||
let phoneVerificationSectionExpanded = false;
|
||||
let latestState = {};
|
||||
const inputPhoneVerificationEnabled = { checked: false };
|
||||
const rowPhoneVerificationEnabled = { style: { display: 'none' } };
|
||||
const rowPhoneVerificationFold = { style: { display: 'none' } };
|
||||
const rowSignupMethod = { style: { display: 'none' } };
|
||||
const rowSignupPhone = { style: { display: 'none' } };
|
||||
const rowPhoneSmsProvider = { style: { display: 'none' } };
|
||||
const rowPhoneSmsProviderOrder = { style: { display: 'none' } };
|
||||
const rowPhoneSmsProviderOrderActions = { style: { display: 'none' } };
|
||||
@@ -289,6 +302,7 @@ const rowNexSmsApiKey = { style: { display: 'none' } };
|
||||
const rowNexSmsCountry = { style: { display: 'none' } };
|
||||
const rowNexSmsCountryFallback = { style: { display: 'none' } };
|
||||
const rowNexSmsServiceCode = { style: { display: 'none' } };
|
||||
const rowHeroSmsRuntimePair = { style: { display: 'none' } };
|
||||
const rowHeroSmsCurrentNumber = { style: { display: 'none' } };
|
||||
const rowHeroSmsCurrentCountdown = { style: { display: 'none' } };
|
||||
const rowHeroSmsPriceTiers = { style: { display: 'none' } };
|
||||
@@ -309,14 +323,19 @@ function updateHeroSmsPlatformDisplay() {}
|
||||
function updateSignupMethodUI() {
|
||||
rowSignupMethod.style.display = inputPhoneVerificationEnabled.checked ? '' : 'none';
|
||||
}
|
||||
function syncSignupPhoneInputFromState() {
|
||||
rowSignupPhone.style.display = inputPhoneVerificationEnabled.checked && latestState.signupPhoneNumber ? '' : 'none';
|
||||
}
|
||||
|
||||
${extractFunction('updatePhoneVerificationSettingsUI')}
|
||||
|
||||
return {
|
||||
setExpanded(value) { phoneVerificationSectionExpanded = Boolean(value); },
|
||||
setLatestState: (state) => { latestState = state || {}; },
|
||||
rowPhoneVerificationEnabled,
|
||||
rowPhoneVerificationFold,
|
||||
rowSignupMethod,
|
||||
rowSignupPhone,
|
||||
rowPhoneSmsProvider,
|
||||
rowPhoneSmsProviderOrder,
|
||||
rowPhoneSmsProviderOrderActions,
|
||||
@@ -338,6 +357,7 @@ return {
|
||||
rowNexSmsCountry,
|
||||
rowNexSmsCountryFallback,
|
||||
rowNexSmsServiceCode,
|
||||
rowHeroSmsRuntimePair,
|
||||
rowHeroSmsCurrentNumber,
|
||||
rowHeroSmsCurrentCountdown,
|
||||
rowHeroSmsPriceTiers,
|
||||
@@ -358,12 +378,14 @@ return {
|
||||
assert.equal(api.rowPhoneVerificationEnabled.style.display, '');
|
||||
assert.equal(api.rowPhoneVerificationFold.style.display, 'none');
|
||||
assert.equal(api.rowSignupMethod.style.display, 'none');
|
||||
assert.equal(api.rowSignupPhone.style.display, 'none');
|
||||
assert.equal(api.rowPhoneSmsProvider.style.display, 'none');
|
||||
assert.equal(api.rowPhoneSmsProviderOrder.style.display, 'none');
|
||||
assert.equal(api.rowPhoneSmsProviderOrderActions.style.display, 'none');
|
||||
assert.equal(api.btnTogglePhoneVerificationSection.disabled, true);
|
||||
assert.equal(api.btnTogglePhoneVerificationSection.textContent, '展开设置');
|
||||
assert.equal(api.rowHeroSmsPlatform.style.display, '');
|
||||
assert.equal(api.rowHeroSmsRuntimePair.style.display, 'none');
|
||||
assert.equal(api.rowHeroSmsCountry.style.display, 'none');
|
||||
assert.equal(api.rowHeroSmsCountryFallback.style.display, 'none');
|
||||
assert.equal(api.rowHeroSmsAcquirePriority.style.display, 'none');
|
||||
@@ -392,6 +414,19 @@ return {
|
||||
assert.equal(api.rowNexSmsServiceCode.style.display, 'none');
|
||||
|
||||
api.inputPhoneVerificationEnabled.checked = true;
|
||||
api.setLatestState({ signupPhoneNumber: '66959916439' });
|
||||
api.updatePhoneVerificationSettingsUI();
|
||||
assert.equal(api.rowPhoneVerificationFold.style.display, 'none');
|
||||
assert.equal(api.rowSignupMethod.style.display, '');
|
||||
assert.equal(api.rowSignupPhone.style.display, '');
|
||||
assert.equal(api.rowPhoneSmsProvider.style.display, 'none');
|
||||
assert.equal(api.rowHeroSmsRuntimePair.style.display, '');
|
||||
assert.equal(api.rowHeroSmsCurrentNumber.style.display, '');
|
||||
assert.equal(api.rowHeroSmsCurrentCountdown.style.display, '');
|
||||
assert.equal(api.rowHeroSmsCurrentCode.style.display, '');
|
||||
assert.equal(api.rowHeroSmsPreferredActivation.style.display, '');
|
||||
|
||||
api.setExpanded(true);
|
||||
api.updatePhoneVerificationSettingsUI();
|
||||
assert.equal(api.rowPhoneVerificationFold.style.display, '');
|
||||
assert.equal(api.rowSignupMethod.style.display, '');
|
||||
|
||||
@@ -331,7 +331,7 @@ let latestState = {
|
||||
plusManualConfirmationStep: 7,
|
||||
plusManualConfirmationMethod: 'gopay-otp',
|
||||
plusManualConfirmationTitle: 'GPC OTP 验证',
|
||||
plusManualConfirmationMessage: '请输入 OTP。',
|
||||
plusManualConfirmationMessage: '',
|
||||
};
|
||||
let activePlusManualConfirmationRequestId = '';
|
||||
let plusManualConfirmationDialogInFlight = false;
|
||||
@@ -364,6 +364,7 @@ return { events, syncPlusManualConfirmationDialog };
|
||||
await api.syncPlusManualConfirmationDialog();
|
||||
|
||||
assert.equal(api.events[0].type, 'form');
|
||||
assert.equal(api.events[0].options.message, '请在WhatsApp里面获取验证码（耐心等待三十秒左右）');
|
||||
assert.equal(api.events[0].options.confirmLabel, '提交 OTP');
|
||||
const sendEvent = api.events.find((event) => event.type === 'send');
|
||||
assert.deepEqual(sendEvent.message.payload, {
|
||||
|
||||
@@ -709,6 +709,9 @@ const countryButton = {
|
||||
get textContent() {
|
||||
return selectValueNode.textContent;
|
||||
},
|
||||
getBoundingClientRect() {
|
||||
return { width: 240, height: 48 };
|
||||
},
|
||||
};
|
||||
|
||||
const form = {
|
||||
@@ -862,20 +865,33 @@ ${extractFunction('normalizePhoneDigits')}
|
||||
${extractFunction('extractDialCodeFromText')}
|
||||
${extractFunction('dispatchSignupPhoneFieldEvents')}
|
||||
${extractFunction('normalizeSignupCountryLabel')}
|
||||
${extractFunction('getSignupCountryLabelAliases')}
|
||||
${extractFunction('getSignupPhoneOptionLabel')}
|
||||
${extractFunction('normalizeSignupCountryOptionValue')}
|
||||
${extractFunction('getSignupRegionDisplayName')}
|
||||
${extractFunction('getSignupPhoneCountryMatchLabels')}
|
||||
${extractFunction('isSameSignupCountryOption')}
|
||||
${extractFunction('getSignupPhoneForm')}
|
||||
${extractFunction('getSignupPhoneControlRoots')}
|
||||
${extractFunction('querySignupPhoneCountryElements')}
|
||||
${extractFunction('isSignupPhoneCountrySelect')}
|
||||
${extractFunction('getSignupPhoneCountrySelect')}
|
||||
${extractFunction('getSignupPhoneSelectedCountryOption')}
|
||||
${extractFunction('getSignupPhoneCountryButtonText')}
|
||||
${extractFunction('getSignupPhoneCountryButton')}
|
||||
${extractFunction('getSignupPhoneDisplayedDialCode')}
|
||||
${extractFunction('getSignupPhoneHiddenNumberInput')}
|
||||
${extractFunction('resolveSignupPhoneDialCodeFromNumber')}
|
||||
${extractFunction('resolveSignupPhoneTargetDialCode')}
|
||||
${extractFunction('getSignupPhoneCountryTargetLabels')}
|
||||
${extractFunction('doesSignupPhoneCountryTextMatchTarget')}
|
||||
${extractFunction('isSignupPhoneCountrySelectionSynced')}
|
||||
${extractFunction('findSignupPhoneCountryOptionByLabel')}
|
||||
${extractFunction('findSignupPhoneCountryOptionByPhoneNumber')}
|
||||
${extractFunction('trySelectSignupPhoneCountryOption')}
|
||||
${extractFunction('getVisibleSignupPhoneCountryListboxOptions')}
|
||||
${extractFunction('findSignupPhoneCountryListboxOption')}
|
||||
${extractFunction('trySelectSignupPhoneCountryListboxOption')}
|
||||
${extractFunction('ensureSignupPhoneCountrySelected')}
|
||||
${extractFunction('toNationalPhoneNumber')}
|
||||
${extractFunction('toE164PhoneNumber')}
|
||||
@@ -918,6 +934,584 @@ return {
|
||||
]);
|
||||
});
|
||||
|
||||
test('submitSignupPhoneNumberAndContinue clicks the visible country listbox when the hidden select does not update the button', async () => {
|
||||
const api = new Function(`
|
||||
const logs = [];
|
||||
const clicks = [];
|
||||
const filled = [];
|
||||
const selectEvents = [];
|
||||
let now = 0;
|
||||
let listboxOpen = false;
|
||||
let visibleCountryValue = 'AU';
|
||||
|
||||
const continueButton = {
|
||||
textContent: 'Continue',
|
||||
value: '',
|
||||
disabled: false,
|
||||
getAttribute(name) {
|
||||
if (name === 'type') return 'submit';
|
||||
if (name === 'aria-disabled') return 'false';
|
||||
return '';
|
||||
},
|
||||
getBoundingClientRect() {
|
||||
return { width: 200, height: 48 };
|
||||
},
|
||||
};
|
||||
|
||||
const countryOptions = [
|
||||
{ value: 'AU', textContent: 'Australia (+61)', buttonText: '澳大利亚 (+61)' },
|
||||
{ value: 'GB', textContent: 'United Kingdom (+44)', buttonText: '英国 (+44)' },
|
||||
];
|
||||
|
||||
const countrySelect = {
|
||||
options: countryOptions,
|
||||
selectedIndex: 0,
|
||||
dispatchEvent(event) {
|
||||
selectEvents.push(event?.type || '');
|
||||
return true;
|
||||
},
|
||||
};
|
||||
|
||||
Object.defineProperty(countrySelect, 'value', {
|
||||
get() {
|
||||
return countryOptions[countrySelect.selectedIndex]?.value || '';
|
||||
},
|
||||
set(nextValue) {
|
||||
const nextIndex = countryOptions.findIndex((option) => option.value === String(nextValue || ''));
|
||||
if (nextIndex >= 0) {
|
||||
countrySelect.selectedIndex = nextIndex;
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const hiddenPhoneInput = {
|
||||
kind: 'hidden-phone',
|
||||
value: '',
|
||||
getAttribute() {
|
||||
return '';
|
||||
},
|
||||
};
|
||||
|
||||
const phoneInput = {
|
||||
kind: 'phone',
|
||||
value: '',
|
||||
getAttribute(name) {
|
||||
if (name === 'type') return 'tel';
|
||||
return '';
|
||||
},
|
||||
closest(selector) {
|
||||
if (selector === 'form') {
|
||||
return form;
|
||||
}
|
||||
return form;
|
||||
},
|
||||
};
|
||||
|
||||
const selectValueNode = {
|
||||
get textContent() {
|
||||
return countryOptions.find((option) => option.value === visibleCountryValue)?.buttonText || '';
|
||||
},
|
||||
};
|
||||
|
||||
const countryButton = {
|
||||
querySelector(selector) {
|
||||
return selector === '.react-aria-SelectValue' ? selectValueNode : null;
|
||||
},
|
||||
get textContent() {
|
||||
return selectValueNode.textContent;
|
||||
},
|
||||
};
|
||||
|
||||
const gbOption = {
|
||||
textContent: '英国 (+44)',
|
||||
value: '',
|
||||
getAttribute() {
|
||||
return '';
|
||||
},
|
||||
};
|
||||
|
||||
const form = {
|
||||
querySelector(selector) {
|
||||
if (selector === 'select') return countrySelect;
|
||||
if (selector === 'input[name="phoneNumber"]') return hiddenPhoneInput;
|
||||
if (selector === 'button[aria-haspopup="listbox"]') return countryButton;
|
||||
return null;
|
||||
},
|
||||
};
|
||||
|
||||
const document = {
|
||||
documentElement: {
|
||||
lang: 'zh-CN',
|
||||
getAttribute(name) {
|
||||
return name === 'lang' ? 'zh-CN' : '';
|
||||
},
|
||||
},
|
||||
querySelector(selector) {
|
||||
if (selector === SIGNUP_PHONE_INPUT_SELECTOR) {
|
||||
return phoneInput;
|
||||
}
|
||||
if (selector === 'button[type="submit"], input[type="submit"]') {
|
||||
return continueButton;
|
||||
}
|
||||
return null;
|
||||
},
|
||||
querySelectorAll(selector) {
|
||||
if (selector === 'button, a, [role="button"], [role="link"]') {
|
||||
return [];
|
||||
}
|
||||
if (selector === 'a, button, [role="button"], [role="link"]') {
|
||||
return [];
|
||||
}
|
||||
if (selector === 'button, a, [role="button"], [role="link"], input[type="button"], input[type="submit"]') {
|
||||
return [continueButton];
|
||||
}
|
||||
if (selector === 'input') {
|
||||
return [phoneInput];
|
||||
}
|
||||
if (selector.includes('[role="option"]')) {
|
||||
return listboxOpen ? [gbOption] : [];
|
||||
}
|
||||
return [];
|
||||
},
|
||||
};
|
||||
|
||||
const location = {
|
||||
href: 'https://chatgpt.com/',
|
||||
};
|
||||
|
||||
const window = {
|
||||
setTimeout(fn) {
|
||||
fn();
|
||||
},
|
||||
};
|
||||
|
||||
const Date = {
|
||||
now() {
|
||||
return now;
|
||||
},
|
||||
};
|
||||
|
||||
class Event {
|
||||
constructor(type) {
|
||||
this.type = type;
|
||||
}
|
||||
}
|
||||
|
||||
function isVisibleElement(el) {
|
||||
return Boolean(el);
|
||||
}
|
||||
|
||||
function isActionEnabled(el) {
|
||||
return Boolean(el) && !el.disabled && el.getAttribute('aria-disabled') !== 'true';
|
||||
}
|
||||
|
||||
function getActionText(el) {
|
||||
return [el?.textContent, el?.value, el?.getAttribute?.('aria-label'), el?.getAttribute?.('title')]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
.replace(/\\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
|
||||
function getSignupPasswordInput() {
|
||||
return null;
|
||||
}
|
||||
|
||||
function isSignupPasswordPage() {
|
||||
return false;
|
||||
}
|
||||
|
||||
function getSignupPasswordSubmitButton() {
|
||||
return null;
|
||||
}
|
||||
|
||||
function findSignupEntryTrigger() {
|
||||
return null;
|
||||
}
|
||||
|
||||
function getSignupPasswordDisplayedEmail() {
|
||||
return '';
|
||||
}
|
||||
|
||||
function getPageTextSnapshot() {
|
||||
return countryButton.textContent;
|
||||
}
|
||||
|
||||
function throwIfStopped() {}
|
||||
function isStopError() { return false; }
|
||||
|
||||
function log(message, level = 'info') {
|
||||
logs.push({ message, level });
|
||||
}
|
||||
|
||||
async function humanPause() {}
|
||||
|
||||
function simulateClick(target) {
|
||||
clicks.push(getActionText(target));
|
||||
if (target === countryButton) {
|
||||
listboxOpen = true;
|
||||
}
|
||||
if (target === gbOption) {
|
||||
visibleCountryValue = 'GB';
|
||||
countrySelect.value = 'GB';
|
||||
listboxOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
function fillInput(target, value) {
|
||||
target.value = value;
|
||||
filled.push({ target: target.kind, value });
|
||||
}
|
||||
|
||||
async function sleep(ms) {
|
||||
now += ms;
|
||||
}
|
||||
|
||||
${extractConst('SIGNUP_ENTRY_TRIGGER_PATTERN')}
|
||||
${extractConst('SIGNUP_EMAIL_INPUT_SELECTOR')}
|
||||
${extractConst('SIGNUP_PHONE_INPUT_SELECTOR')}
|
||||
${extractConst('SIGNUP_SWITCH_TO_EMAIL_PATTERN')}
|
||||
${extractConst('SIGNUP_SWITCH_ACTION_PATTERN')}
|
||||
${extractConst('SIGNUP_EMAIL_ACTION_PATTERN')}
|
||||
${extractConst('SIGNUP_WORK_EMAIL_PATTERN')}
|
||||
${extractConst('SIGNUP_PHONE_ACTION_PATTERN')}
|
||||
${extractConst('SIGNUP_SWITCH_TO_PHONE_PATTERN')}
|
||||
${extractConst('SIGNUP_MORE_OPTIONS_PATTERN')}
|
||||
|
||||
${extractFunction('getSignupEmailInput')}
|
||||
${extractFunction('getSignupPhoneInput')}
|
||||
${extractFunction('findSignupUseEmailTrigger')}
|
||||
${extractFunction('findSignupUsePhoneTrigger')}
|
||||
${extractFunction('findSignupMoreOptionsTrigger')}
|
||||
${extractFunction('getSignupEmailContinueButton')}
|
||||
${extractFunction('inspectSignupEntryState')}
|
||||
${extractFunction('getSignupEntryStateSummary')}
|
||||
function getSignupEntryDiagnostics() { return {}; }
|
||||
${extractFunction('normalizePhoneDigits')}
|
||||
${extractFunction('extractDialCodeFromText')}
|
||||
${extractFunction('dispatchSignupPhoneFieldEvents')}
|
||||
${extractFunction('normalizeSignupCountryLabel')}
|
||||
${extractFunction('getSignupCountryLabelAliases')}
|
||||
${extractFunction('getSignupPhoneOptionLabel')}
|
||||
${extractFunction('normalizeSignupCountryOptionValue')}
|
||||
${extractFunction('getSignupRegionDisplayName')}
|
||||
${extractFunction('getSignupPhoneCountryMatchLabels')}
|
||||
${extractFunction('isSameSignupCountryOption')}
|
||||
${extractFunction('getSignupPhoneForm')}
|
||||
${extractFunction('getSignupPhoneControlRoots')}
|
||||
${extractFunction('querySignupPhoneCountryElements')}
|
||||
${extractFunction('isSignupPhoneCountrySelect')}
|
||||
${extractFunction('getSignupPhoneCountrySelect')}
|
||||
${extractFunction('getSignupPhoneSelectedCountryOption')}
|
||||
${extractFunction('getSignupPhoneCountryButtonText')}
|
||||
${extractFunction('getSignupPhoneCountryButton')}
|
||||
${extractFunction('getSignupPhoneDisplayedDialCode')}
|
||||
${extractFunction('getSignupPhoneHiddenNumberInput')}
|
||||
${extractFunction('resolveSignupPhoneDialCodeFromNumber')}
|
||||
${extractFunction('resolveSignupPhoneTargetDialCode')}
|
||||
${extractFunction('getSignupPhoneCountryTargetLabels')}
|
||||
${extractFunction('doesSignupPhoneCountryTextMatchTarget')}
|
||||
${extractFunction('isSignupPhoneCountrySelectionSynced')}
|
||||
${extractFunction('findSignupPhoneCountryOptionByLabel')}
|
||||
${extractFunction('findSignupPhoneCountryOptionByPhoneNumber')}
|
||||
${extractFunction('trySelectSignupPhoneCountryOption')}
|
||||
${extractFunction('getVisibleSignupPhoneCountryListboxOptions')}
|
||||
${extractFunction('findSignupPhoneCountryListboxOption')}
|
||||
${extractFunction('trySelectSignupPhoneCountryListboxOption')}
|
||||
${extractFunction('ensureSignupPhoneCountrySelected')}
|
||||
${extractFunction('toNationalPhoneNumber')}
|
||||
${extractFunction('toE164PhoneNumber')}
|
||||
${extractFunction('resolveSignupPhoneDialCode')}
|
||||
${extractFunction('waitForSignupPhoneEntryState')}
|
||||
${extractFunction('submitSignupPhoneNumberAndContinue')}
|
||||
|
||||
return {
|
||||
async run() {
|
||||
return submitSignupPhoneNumberAndContinue({
|
||||
phoneNumber: '+447859232013',
|
||||
countryLabel: 'United Kingdom',
|
||||
});
|
||||
},
|
||||
getClicks() {
|
||||
return clicks.slice();
|
||||
},
|
||||
getFilled() {
|
||||
return filled.slice();
|
||||
},
|
||||
getSelectValue() {
|
||||
return countrySelect.value;
|
||||
},
|
||||
getVisibleCountryText() {
|
||||
return countryButton.textContent;
|
||||
},
|
||||
getSelectEvents() {
|
||||
return selectEvents.slice();
|
||||
},
|
||||
};
|
||||
`)();
|
||||
|
||||
const result = await api.run();
|
||||
|
||||
assert.equal(result.submitted, true);
|
||||
assert.equal(result.phoneInputValue, '7859232013');
|
||||
assert.equal(api.getSelectValue(), 'GB');
|
||||
assert.equal(api.getVisibleCountryText(), '英国 (+44)');
|
||||
assert.deepEqual(api.getSelectEvents(), ['input', 'change']);
|
||||
assert.deepEqual(api.getClicks(), ['澳大利亚 (+61)', '英国 (+44)', 'Continue']);
|
||||
assert.deepEqual(api.getFilled(), [
|
||||
{ target: 'phone', value: '7859232013' },
|
||||
{ target: 'hidden-phone', value: '+447859232013' },
|
||||
]);
|
||||
});
|
||||
|
||||
test('submitSignupPhoneNumberAndContinue can select country by phone dial code without country label or hidden select', async () => {
|
||||
const api = new Function(`
|
||||
const clicks = [];
|
||||
const filled = [];
|
||||
let now = 0;
|
||||
let listboxOpen = false;
|
||||
let visibleCountryText = '印度尼西亚 +(62)';
|
||||
|
||||
const continueButton = {
|
||||
textContent: 'Continue',
|
||||
value: '',
|
||||
disabled: false,
|
||||
getAttribute(name) {
|
||||
if (name === 'type') return 'submit';
|
||||
if (name === 'aria-disabled') return 'false';
|
||||
return '';
|
||||
},
|
||||
getBoundingClientRect() {
|
||||
return { width: 200, height: 48 };
|
||||
},
|
||||
};
|
||||
|
||||
const phoneInput = {
|
||||
kind: 'phone',
|
||||
value: '',
|
||||
parentElement: null,
|
||||
getAttribute(name) {
|
||||
if (name === 'type') return 'tel';
|
||||
return '';
|
||||
},
|
||||
closest() {
|
||||
return null;
|
||||
},
|
||||
};
|
||||
|
||||
const countryButton = {
|
||||
textContent: '',
|
||||
querySelector(selector) {
|
||||
return selector === '.react-aria-SelectValue' ? { textContent: visibleCountryText } : null;
|
||||
},
|
||||
getAttribute(name) {
|
||||
if (name === 'aria-haspopup') return 'listbox';
|
||||
return '';
|
||||
},
|
||||
getBoundingClientRect() {
|
||||
return { width: 240, height: 48 };
|
||||
},
|
||||
};
|
||||
|
||||
const gbOption = {
|
||||
textContent: '英国 +(44)',
|
||||
getAttribute() {
|
||||
return '';
|
||||
},
|
||||
getBoundingClientRect() {
|
||||
return { width: 200, height: 36 };
|
||||
},
|
||||
};
|
||||
|
||||
const idOption = {
|
||||
textContent: '印度尼西亚 +(62)',
|
||||
getAttribute() {
|
||||
return '';
|
||||
},
|
||||
getBoundingClientRect() {
|
||||
return { width: 200, height: 36 };
|
||||
},
|
||||
};
|
||||
|
||||
const document = {
|
||||
documentElement: {
|
||||
lang: 'zh-CN',
|
||||
getAttribute(name) {
|
||||
return name === 'lang' ? 'zh-CN' : '';
|
||||
},
|
||||
},
|
||||
querySelector(selector) {
|
||||
if (selector === SIGNUP_PHONE_INPUT_SELECTOR) return phoneInput;
|
||||
if (selector === 'button[type="submit"], input[type="submit"]') return continueButton;
|
||||
return null;
|
||||
},
|
||||
querySelectorAll(selector) {
|
||||
if (selector === 'button, a, [role="button"], [role="link"]') return [];
|
||||
if (selector === 'a, button, [role="button"], [role="link"]') return [];
|
||||
if (selector === 'button, a, [role="button"], [role="link"], input[type="button"], input[type="submit"]') return [continueButton];
|
||||
if (selector === 'input') return [phoneInput];
|
||||
if (selector === 'select') return [];
|
||||
if (selector.includes('aria-haspopup="listbox"') || selector.includes('aria-expanded')) return [countryButton];
|
||||
if (selector.includes('[role="option"]')) return listboxOpen ? [idOption, gbOption] : [];
|
||||
return [];
|
||||
},
|
||||
};
|
||||
|
||||
const location = {
|
||||
href: 'https://chatgpt.com/',
|
||||
};
|
||||
|
||||
const window = {
|
||||
setTimeout(fn) {
|
||||
fn();
|
||||
},
|
||||
};
|
||||
|
||||
const Date = {
|
||||
now() {
|
||||
return now;
|
||||
},
|
||||
};
|
||||
|
||||
class Event {
|
||||
constructor(type) {
|
||||
this.type = type;
|
||||
}
|
||||
}
|
||||
|
||||
function isVisibleElement(el) {
|
||||
return Boolean(el) && (!el.getBoundingClientRect || el.getBoundingClientRect().width > 0);
|
||||
}
|
||||
|
||||
function isActionEnabled(el) {
|
||||
return Boolean(el) && !el.disabled && el.getAttribute('aria-disabled') !== 'true';
|
||||
}
|
||||
|
||||
function getActionText(el) {
|
||||
return [el?.textContent, el?.value, el?.getAttribute?.('aria-label'), el?.getAttribute?.('title')]
|
||||
.filter(Boolean)
|
||||
.join(' ')
|
||||
.replace(/\\s+/g, ' ')
|
||||
.trim();
|
||||
}
|
||||
|
||||
function getSignupPasswordInput() { return null; }
|
||||
function isSignupPasswordPage() { return false; }
|
||||
function getSignupPasswordSubmitButton() { return null; }
|
||||
function findSignupEntryTrigger() { return null; }
|
||||
function getSignupPasswordDisplayedEmail() { return ''; }
|
||||
function getPageTextSnapshot() { return visibleCountryText; }
|
||||
function throwIfStopped() {}
|
||||
function isStopError() { return false; }
|
||||
function log() {}
|
||||
async function humanPause() {}
|
||||
|
||||
function simulateClick(target) {
|
||||
clicks.push(getActionText(target) || visibleCountryText);
|
||||
if (target === countryButton) {
|
||||
listboxOpen = true;
|
||||
}
|
||||
if (target === gbOption) {
|
||||
visibleCountryText = '英国 +(44)';
|
||||
listboxOpen = false;
|
||||
}
|
||||
}
|
||||
|
||||
function fillInput(target, value) {
|
||||
target.value = value;
|
||||
filled.push({ target: target.kind, value });
|
||||
}
|
||||
|
||||
async function sleep(ms) {
|
||||
now += ms;
|
||||
}
|
||||
|
||||
${extractConst('SIGNUP_ENTRY_TRIGGER_PATTERN')}
|
||||
${extractConst('SIGNUP_EMAIL_INPUT_SELECTOR')}
|
||||
${extractConst('SIGNUP_PHONE_INPUT_SELECTOR')}
|
||||
${extractConst('SIGNUP_SWITCH_TO_EMAIL_PATTERN')}
|
||||
${extractConst('SIGNUP_SWITCH_ACTION_PATTERN')}
|
||||
${extractConst('SIGNUP_EMAIL_ACTION_PATTERN')}
|
||||
${extractConst('SIGNUP_WORK_EMAIL_PATTERN')}
|
||||
${extractConst('SIGNUP_PHONE_ACTION_PATTERN')}
|
||||
${extractConst('SIGNUP_SWITCH_TO_PHONE_PATTERN')}
|
||||
${extractConst('SIGNUP_MORE_OPTIONS_PATTERN')}
|
||||
|
||||
${extractFunction('getSignupEmailInput')}
|
||||
${extractFunction('getSignupPhoneInput')}
|
||||
${extractFunction('findSignupUseEmailTrigger')}
|
||||
${extractFunction('findSignupUsePhoneTrigger')}
|
||||
${extractFunction('findSignupMoreOptionsTrigger')}
|
||||
${extractFunction('getSignupEmailContinueButton')}
|
||||
${extractFunction('inspectSignupEntryState')}
|
||||
${extractFunction('getSignupEntryStateSummary')}
|
||||
function getSignupEntryDiagnostics() { return {}; }
|
||||
${extractFunction('normalizePhoneDigits')}
|
||||
${extractFunction('extractDialCodeFromText')}
|
||||
${extractFunction('dispatchSignupPhoneFieldEvents')}
|
||||
${extractFunction('normalizeSignupCountryLabel')}
|
||||
${extractFunction('getSignupCountryLabelAliases')}
|
||||
${extractFunction('getSignupPhoneOptionLabel')}
|
||||
${extractFunction('normalizeSignupCountryOptionValue')}
|
||||
${extractFunction('getSignupRegionDisplayName')}
|
||||
${extractFunction('getSignupPhoneCountryMatchLabels')}
|
||||
${extractFunction('isSameSignupCountryOption')}
|
||||
${extractFunction('getSignupPhoneForm')}
|
||||
${extractFunction('getSignupPhoneControlRoots')}
|
||||
${extractFunction('querySignupPhoneCountryElements')}
|
||||
${extractFunction('isSignupPhoneCountrySelect')}
|
||||
${extractFunction('getSignupPhoneCountrySelect')}
|
||||
${extractFunction('getSignupPhoneSelectedCountryOption')}
|
||||
${extractFunction('getSignupPhoneCountryButtonText')}
|
||||
${extractFunction('getSignupPhoneCountryButton')}
|
||||
${extractFunction('getSignupPhoneDisplayedDialCode')}
|
||||
${extractFunction('getSignupPhoneHiddenNumberInput')}
|
||||
${extractFunction('resolveSignupPhoneDialCodeFromNumber')}
|
||||
${extractFunction('resolveSignupPhoneTargetDialCode')}
|
||||
${extractFunction('getSignupPhoneCountryTargetLabels')}
|
||||
${extractFunction('doesSignupPhoneCountryTextMatchTarget')}
|
||||
${extractFunction('isSignupPhoneCountrySelectionSynced')}
|
||||
${extractFunction('findSignupPhoneCountryOptionByLabel')}
|
||||
${extractFunction('findSignupPhoneCountryOptionByPhoneNumber')}
|
||||
${extractFunction('trySelectSignupPhoneCountryOption')}
|
||||
${extractFunction('getVisibleSignupPhoneCountryListboxOptions')}
|
||||
${extractFunction('findSignupPhoneCountryListboxOption')}
|
||||
${extractFunction('trySelectSignupPhoneCountryListboxOption')}
|
||||
${extractFunction('ensureSignupPhoneCountrySelected')}
|
||||
${extractFunction('toNationalPhoneNumber')}
|
||||
${extractFunction('toE164PhoneNumber')}
|
||||
${extractFunction('resolveSignupPhoneDialCode')}
|
||||
${extractFunction('waitForSignupPhoneEntryState')}
|
||||
${extractFunction('submitSignupPhoneNumberAndContinue')}
|
||||
|
||||
return {
|
||||
async run() {
|
||||
return submitSignupPhoneNumberAndContinue({
|
||||
phoneNumber: '447423278610',
|
||||
countryLabel: '',
|
||||
});
|
||||
},
|
||||
getClicks() {
|
||||
return clicks.slice();
|
||||
},
|
||||
getFilled() {
|
||||
return filled.slice();
|
||||
},
|
||||
getVisibleCountryText() {
|
||||
return visibleCountryText;
|
||||
},
|
||||
};
|
||||
`)();
|
||||
|
||||
const result = await api.run();
|
||||
|
||||
assert.equal(result.submitted, true);
|
||||
assert.equal(result.phoneInputValue, '7423278610');
|
||||
assert.equal(api.getVisibleCountryText(), '英国 +(44)');
|
||||
assert.deepEqual(api.getClicks(), ['印度尼西亚 +(62)', '英国 +(44)', 'Continue']);
|
||||
assert.deepEqual(api.getFilled(), [{ target: 'phone', value: '7423278610' }]);
|
||||
});
|
||||
|
||||
test('submitSignupPhoneNumberAndContinue switches from email mode to phone mode and submits local number', async () => {
|
||||
const api = new Function(`
|
||||
const logs = [];
|
||||
@@ -1110,20 +1704,33 @@ ${extractFunction('normalizePhoneDigits')}
|
||||
${extractFunction('extractDialCodeFromText')}
|
||||
${extractFunction('dispatchSignupPhoneFieldEvents')}
|
||||
${extractFunction('normalizeSignupCountryLabel')}
|
||||
${extractFunction('getSignupCountryLabelAliases')}
|
||||
${extractFunction('getSignupPhoneOptionLabel')}
|
||||
${extractFunction('normalizeSignupCountryOptionValue')}
|
||||
${extractFunction('getSignupRegionDisplayName')}
|
||||
${extractFunction('getSignupPhoneCountryMatchLabels')}
|
||||
${extractFunction('isSameSignupCountryOption')}
|
||||
${extractFunction('getSignupPhoneForm')}
|
||||
${extractFunction('getSignupPhoneControlRoots')}
|
||||
${extractFunction('querySignupPhoneCountryElements')}
|
||||
${extractFunction('isSignupPhoneCountrySelect')}
|
||||
${extractFunction('getSignupPhoneCountrySelect')}
|
||||
${extractFunction('getSignupPhoneSelectedCountryOption')}
|
||||
${extractFunction('getSignupPhoneCountryButtonText')}
|
||||
${extractFunction('getSignupPhoneCountryButton')}
|
||||
${extractFunction('getSignupPhoneDisplayedDialCode')}
|
||||
${extractFunction('getSignupPhoneHiddenNumberInput')}
|
||||
${extractFunction('resolveSignupPhoneDialCodeFromNumber')}
|
||||
${extractFunction('resolveSignupPhoneTargetDialCode')}
|
||||
${extractFunction('getSignupPhoneCountryTargetLabels')}
|
||||
${extractFunction('doesSignupPhoneCountryTextMatchTarget')}
|
||||
${extractFunction('isSignupPhoneCountrySelectionSynced')}
|
||||
${extractFunction('findSignupPhoneCountryOptionByLabel')}
|
||||
${extractFunction('findSignupPhoneCountryOptionByPhoneNumber')}
|
||||
${extractFunction('trySelectSignupPhoneCountryOption')}
|
||||
${extractFunction('getVisibleSignupPhoneCountryListboxOptions')}
|
||||
${extractFunction('findSignupPhoneCountryListboxOption')}
|
||||
${extractFunction('trySelectSignupPhoneCountryListboxOption')}
|
||||
${extractFunction('ensureSignupPhoneCountrySelected')}
|
||||
${extractFunction('toNationalPhoneNumber')}
|
||||
${extractFunction('toE164PhoneNumber')}
|
||||
|
||||
@@ -115,6 +115,7 @@ function fillInput(el, value) {
|
||||
filledValues.push(value);
|
||||
}
|
||||
async function sleep() {}
|
||||
async function waitForDocumentLoadComplete() {}
|
||||
function isStep5Ready() { return false; }
|
||||
function isStep8Ready() { return false; }
|
||||
function isAddPhonePageReady() { return false; }
|
||||
@@ -177,6 +178,7 @@ function is405MethodNotAllowedPage() { return false; }
|
||||
async function handle405ResendError() {}
|
||||
function fillInput() {}
|
||||
async function sleep() {}
|
||||
async function waitForDocumentLoadComplete() {}
|
||||
function isStep5Ready() { return true; }
|
||||
function isStep8Ready() { return false; }
|
||||
function isAddPhonePageReady() { return false; }
|
||||
@@ -336,6 +338,7 @@ function fillInput(el, value) {
|
||||
filledValues.push({ target: el === nameInput ? 'name' : (el === ageInput ? 'age' : 'code'), value });
|
||||
}
|
||||
async function sleep() {}
|
||||
async function waitForDocumentLoadComplete() {}
|
||||
function isStep5Ready() { return true; }
|
||||
function isStep8Ready() { return false; }
|
||||
function isAddPhonePageReady() { return false; }
|
||||
@@ -531,6 +534,7 @@ function fillInput(el, value) {
|
||||
el.value = value;
|
||||
}
|
||||
async function sleep() {}
|
||||
async function waitForDocumentLoadComplete() {}
|
||||
function isStep5Ready() { return false; }
|
||||
function isStep8Ready() { return false; }
|
||||
function isAddPhonePageReady() { return false; }
|
||||
@@ -614,3 +618,102 @@ return {
|
||||
assert.equal(snapshot.submitClicked, true);
|
||||
assert.equal(snapshot.nameQueryCount >= 3, true);
|
||||
});
|
||||
|
||||
test('prepareSignupVerificationFlow waits for complete verification page before reporting ready', async () => {
|
||||
const api = new Function(`
|
||||
const logs = [];
|
||||
let now = 0;
|
||||
let sleepCalls = 0;
|
||||
let targetChecks = 0;
|
||||
const location = {
|
||||
href: 'https://auth.openai.com/email-verification',
|
||||
pathname: '/email-verification',
|
||||
};
|
||||
const document = {
|
||||
readyState: 'loading',
|
||||
title: '',
|
||||
body: {
|
||||
textContent: 'Enter the verification code we just sent',
|
||||
innerText: 'Enter the verification code we just sent',
|
||||
},
|
||||
querySelector(selector) {
|
||||
if (selector === 'form[action*="email-verification" i]') {
|
||||
return {};
|
||||
}
|
||||
return null;
|
||||
},
|
||||
querySelectorAll(selector) {
|
||||
if (selector === 'button, a, [role="button"], [role="link"], input[type="button"], input[type="submit"]') {
|
||||
return [];
|
||||
}
|
||||
return [];
|
||||
},
|
||||
};
|
||||
|
||||
Date.now = () => now;
|
||||
function throwIfStopped() {}
|
||||
function log(message, level = 'info') { logs.push({ message, level }); }
|
||||
async function sleep(ms = 0) {
|
||||
sleepCalls += 1;
|
||||
now += ms || 200;
|
||||
if (sleepCalls >= 3) {
|
||||
document.readyState = 'complete';
|
||||
}
|
||||
}
|
||||
function isVisibleElement() { return true; }
|
||||
function isActionEnabled() { return true; }
|
||||
function getActionText(el) { return el?.textContent || ''; }
|
||||
function getCurrentAuthRetryPageState() { return null; }
|
||||
function isPhoneVerificationPageReady() { return false; }
|
||||
function findResendVerificationCodeTrigger() { return null; }
|
||||
function isEmailVerificationPage() { return true; }
|
||||
function getPageTextSnapshot() { return document.body.textContent; }
|
||||
function getVerificationCodeTarget() {
|
||||
targetChecks += 1;
|
||||
return document.readyState === 'complete'
|
||||
? { type: 'single', element: { value: '' } }
|
||||
: null;
|
||||
}
|
||||
function is405MethodNotAllowedPage() { return false; }
|
||||
async function recoverCurrentAuthRetryPage() {}
|
||||
function createSignupUserAlreadyExistsError() { return new Error('user already exists'); }
|
||||
function getSignupPasswordInput() { return null; }
|
||||
function getSignupPasswordSubmitButton() { return null; }
|
||||
function isSignupEmailAlreadyExistsPage() { return false; }
|
||||
function isSignupPasswordErrorPage() { return false; }
|
||||
function getSignupPasswordTimeoutErrorPageState() { return null; }
|
||||
function isStep5Ready() { return false; }
|
||||
|
||||
const VERIFICATION_PAGE_PATTERN = /verification code/i;
|
||||
|
||||
${extractFunction('getDocumentReadyStateSnapshot')}
|
||||
${extractFunction('isDocumentLoadComplete')}
|
||||
${extractFunction('waitForDocumentLoadComplete')}
|
||||
${extractFunction('isSignupVerificationPageInteractiveReady')}
|
||||
${extractFunction('isVerificationPageStillVisible')}
|
||||
${extractFunction('isSignupProfilePageUrl')}
|
||||
${extractFunction('isLikelyLoggedInChatgptHomeUrl')}
|
||||
${extractFunction('getStep4PostVerificationState')}
|
||||
${extractFunction('inspectSignupVerificationState')}
|
||||
${extractFunction('waitForVerificationCodeTarget')}
|
||||
${extractFunction('waitForSignupVerificationTransition')}
|
||||
${extractFunction('prepareSignupVerificationFlow')}
|
||||
|
||||
return {
|
||||
run() {
|
||||
return prepareSignupVerificationFlow({ prepareLogLabel: '步骤 4 执行' }, 10000);
|
||||
},
|
||||
snapshot() {
|
||||
return { logs, sleepCalls, targetChecks, readyState: document.readyState };
|
||||
},
|
||||
};
|
||||
`)();
|
||||
|
||||
const result = await api.run();
|
||||
const snapshot = api.snapshot();
|
||||
|
||||
assert.equal(result.ready, true);
|
||||
assert.equal(snapshot.readyState, 'complete');
|
||||
assert.equal(snapshot.sleepCalls >= 3, true);
|
||||
assert.equal(snapshot.targetChecks >= 1, true);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user