trent_larson/crowd-funder-for-time-pwa
4
1
Fork 2
Code Issues Pull Requests 22 Releases 5 Wiki Activity

fix: update server settings test and initialization

Browse Source 
- Update test to properly wait for and locate Claim Server input field
- Change default server URL from test to production endpoint
- Add initialization of empty server settings with production values
- Improve test reliability with proper element waiting and selection
- Fix test timing issues with networkidle state waiting
This commit is contained in:
Matthew Raymer
2025-04-05 03:32:06 +00:00
parent 6620311b7d
commit 5a6e5289ff
4 changed files with 268 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.env.mobile
View File

@@ -1,4 +1,4 @@
PLATFORM=mobile
PLATFORM=capacitor
VITE_ENDORSER_API_URL=https://test-api.endorser.ch/api/v2/claim
VITE_PARTNER_API_URL=https://test-api.partner.ch/api/v2
VITE_IMAGE_API_URL=https://test-api.images.ch/api/v2

2
src/services/PlatformServiceFactory.ts
View File

@@ -130,7 +130,7 @@ export class PlatformServiceFactory {
*/
public async createDatabaseBackupService(): Promise<DatabaseBackupService> {
// List of supported platforms for web builds
const webSupportedPlatforms = ["web", "mobile"];
const webSupportedPlatforms = ["web", "capacitor", "electron"];
// Return stub implementation for unsupported platforms
if (!webSupportedPlatforms.includes(this.platform)) {

490
src/views/AccountViewView.vue
View File

@@ -446,6 +446,80 @@
</div>
</div>
<!-- Add after the data export section -->
<div
id="sectionDataExport"
class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
>
<div class="mb-2 font-bold">Data Export</div>
<router-link
v-if="activeDid"
:to="{ name: 'seed-backup' }"
class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-2"
>
Backup Identifier Seed
</router-link>
<button
:class="computedStartDownloadLinkClassNames()"
class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
@click="exportDatabase()"
>
Download Settings & Contacts
<br />
(excluding Identifier Data)
</button>
<a
v-if="downloadAttempted"
ref="downloadLink"
:class="computedDownloadLinkClassNames()"
class="block w-full text-center text-md bg-gradient-to-b from-green-500 to-green-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
>
If no download happened yet, click again here to download now.
</a>
<div id="sectionImportContactsSettings" class="mt-4">
<h2 class="text-slate-500 text-sm font-bold">
Import Contacts & Settings Database
</h2>
<div class="ml-4 mt-2">
<input type="file" class="ml-2" @change="uploadImportFile" />
<transition
enter-active-class="transform ease-out duration-300 transition"
enter-from-class="translate-y-2 opacity-0 sm:translate-y-4"
enter-to-class="translate-y-0 opacity-100 sm:translate-y-0"
leave-active-class="transition ease-in duration-500"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="showContactImport()" class="mt-4">
<div class="flex justify-center">
<button
class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
@click="confirmSubmitImportFile()"
>
Overwrite Settings & Contacts
<br />
(which doesn't include Identifier Data)
</button>
</div>
<div class="flex justify-center">
<button
class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
@click="checkContactImports()"
>
Import Only Contacts
<br />
after comparing
</button>
</div>
</div>
</transition>
</div>
</div>
</div>
<!-- Add after the data export section -->
<h3
id="advanced"
@@ -536,6 +610,158 @@
</div>
</div>
<!-- Basic Settings -->
<div
id="sectionBasicSettings"
class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
>
<div class="mb-2 font-bold">Basic Settings</div>
<!-- Server Settings -->
<div id="sectionClaimServer">
<h2 class="text-slate-500 text-sm font-bold mt-4">Claim Server</h2>
<div class="px-4 py-4">
<input
v-model="apiServerInput"
type="text"
class="block w-full rounded border border-slate-400 px-4 py-2"
/>
<div class="flex space-x-2 mt-2">
<button
class="px-3 py-1 rounded bg-blue-500 text-white"
@click="setApiServer('prod')"
>
Use Prod
</button>
<button
class="px-3 py-1 rounded bg-green-500 text-white"
@click="setApiServer('test')"
>
Use Test
</button>
<button
class="px-3 py-1 rounded bg-yellow-500 text-white"
@click="setApiServer('local')"
>
Use Local
</button>
</div>
<button
v-if="apiServerInput != apiServer"
class="w-full px-4 rounded bg-yellow-500 border border-slate-400 mt-2"
@click="onClickSaveApiServer()"
>
<font-awesome
icon="floppy-disk"
class="fa-fw"
color="white"
></font-awesome>
</button>
</div>
<h2 class="text-slate-500 text-sm font-bold mt-4">
Notification Push Server
</h2>
<div class="px-4 py-4">
<input
v-model="webPushServerInput"
type="text"
class="block w-full rounded border border-slate-400 px-4 py-2"
/>
<div class="flex space-x-2 mt-2">
<button
class="px-3 py-1 rounded bg-blue-500 text-white"
@click="setPushServer('prod')"
>
Use Prod
</button>
<button
class="px-3 py-1 rounded bg-green-500 text-white"
@click="setPushServer('test')"
>
Use Test
</button>
<button
class="px-3 py-1 rounded bg-yellow-500 text-white"
@click="setPushServer('local')"
>
Use Local
</button>
</div>
<button
v-if="webPushServerInput != webPushServer"
class="w-full px-4 rounded bg-yellow-500 border border-slate-400 mt-2"
@click="onClickSavePushServer()"
>
<font-awesome
icon="floppy-disk"
class="fa-fw"
color="white"
></font-awesome>
</button>
</div>
<h2 class="text-slate-500 text-sm font-bold mt-4">Partner Server</h2>
<div class="px-4 py-4">
<input
v-model="partnerApiServerInput"
type="text"
class="block w-full rounded border border-slate-400 px-4 py-2"
/>
<div class="flex space-x-2 mt-2">
<button
class="px-3 py-1 rounded bg-blue-500 text-white"
@click="setPartnerServer('prod')"
>
Use Prod
</button>
<button
class="px-3 py-1 rounded bg-green-500 text-white"
@click="setPartnerServer('test')"
>
Use Test
</button>
<button
class="px-3 py-1 rounded bg-yellow-500 text-white"
@click="setPartnerServer('local')"
>
Use Local
</button>
</div>
<button
v-if="partnerApiServerInput != partnerApiServer"
class="w-full px-4 rounded bg-yellow-500 border border-slate-400 mt-2"
@click="onClickSavePartnerServer()"
>
<font-awesome
icon="floppy-disk"
class="fa-fw"
color="white"
></font-awesome>
</button>
</div>
<label
for="toggleProdWarningMessage"
class="flex items-center justify-between cursor-pointer px-4 py-4"
@click="toggleProdWarning"
>
<!-- label -->
<h2>Show warning if on prod server</h2>
<!-- toggle -->
<div class="relative ml-2">
<!-- input -->
<input v-model="warnIfProdServer" type="checkbox" class="sr-only" />
<!-- line -->
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
<!-- dot -->
<div
class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
></div>
</div>
</label>
</div>
<!-- Advanced Actions -->
<div class="flex flex-col gap-4">
<router-link
@@ -561,231 +787,6 @@
</router-link>
</div>
</div>
<!-- Add after the basic settings section -->
<div
id="sectionDataExport"
class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
>
<div class="mb-2 font-bold">Data Export</div>
<router-link
v-if="activeDid"
:to="{ name: 'seed-backup' }"
class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-2"
>
Backup Identifier Seed
</router-link>
<button
:class="computedStartDownloadLinkClassNames()"
class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
@click="exportDatabase()"
>
Download Settings & Contacts
<br />
(excluding Identifier Data)
</button>
<a
ref="downloadLink"
:class="computedDownloadLinkClassNames()"
class="block w-full text-center text-md bg-gradient-to-b from-green-500 to-green-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
>
If no download happened yet, click again here to download now.
</a>
<div id="sectionImportContactsSettings" class="mt-4">
<h2 class="text-slate-500 text-sm font-bold">
Import Contacts & Settings Database
</h2>
<div class="ml-4 mt-2">
<input type="file" class="ml-2" @change="uploadImportFile" />
<transition
enter-active-class="transform ease-out duration-300 transition"
enter-from-class="translate-y-2 opacity-0 sm:translate-y-4"
enter-to-class="translate-y-0 opacity-100 sm:translate-y-0"
leave-active-class="transition ease-in duration-500"
leave-from-class="opacity-100"
leave-to-class="opacity-0"
>
<div v-if="showContactImport()" class="mt-4">
<div class="flex justify-center">
<button
class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
@click="confirmSubmitImportFile()"
>
Overwrite Settings & Contacts
<br />
(which doesn't include Identifier Data)
</button>
</div>
<div class="flex justify-center">
<button
class="block text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
@click="checkContactImports()"
>
Import Only Contacts
<br />
after comparing
</button>
</div>
</div>
</transition>
</div>
</div>
</div>
<!-- Basic Settings -->
<div
id="sectionBasicSettings"
class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
>
<div class="mb-2 font-bold">Basic Settings</div>
<!-- Server Settings -->
<div id="sectionClaimServer">
<h2 class="text-slate-500 text-sm font-bold mt-4">Claim Server</h2>
<div class="px-4 py-4">
<input
v-model="apiServerInput"
type="text"
class="block w-full rounded border border-slate-400 px-4 py-2"
/>
<div class="flex space-x-2 mt-2">
<button
class="px-3 py-1 rounded bg-blue-500 text-white"
@click="setApiServer('prod')"
>
Use Prod
</button>
<button
class="px-3 py-1 rounded bg-green-500 text-white"
@click="setApiServer('test')"
>
Use Test
</button>
<button
class="px-3 py-1 rounded bg-yellow-500 text-white"
@click="setApiServer('local')"
>
Use Local
</button>
</div>
<button
v-if="apiServerInput != apiServer"
class="w-full px-4 rounded bg-yellow-500 border border-slate-400 mt-2"
@click="onClickSaveApiServer()"
>
<font-awesome
icon="floppy-disk"
class="fa-fw"
color="white"
></font-awesome>
</button>
</div>
<h2 class="text-slate-500 text-sm font-bold mt-4">
Notification Push Server
</h2>
<div class="px-4 py-4">
<input
v-model="webPushServerInput"
type="text"
class="block w-full rounded border border-slate-400 px-4 py-2"
/>
<div class="flex space-x-2 mt-2">
<button
class="px-3 py-1 rounded bg-blue-500 text-white"
@click="setPushServer('prod')"
>
Use Prod
</button>
<button
class="px-3 py-1 rounded bg-green-500 text-white"
@click="setPushServer('test')"
>
Use Test
</button>
<button
class="px-3 py-1 rounded bg-yellow-500 text-white"
@click="setPushServer('local')"
>
Use Local
</button>
</div>
<button
v-if="webPushServerInput != webPushServer"
class="w-full px-4 rounded bg-yellow-500 border border-slate-400 mt-2"
@click="onClickSavePushServer()"
>
<font-awesome
icon="floppy-disk"
class="fa-fw"
color="white"
></font-awesome>
</button>
</div>
<h2 class="text-slate-500 text-sm font-bold mt-4">Partner Server</h2>
<div class="px-4 py-4">
<input
v-model="partnerApiServerInput"
type="text"
class="block w-full rounded border border-slate-400 px-4 py-2"
/>
<div class="flex space-x-2 mt-2">
<button
class="px-3 py-1 rounded bg-blue-500 text-white"
@click="setPartnerServer('prod')"
>
Use Prod
</button>
<button
class="px-3 py-1 rounded bg-green-500 text-white"
@click="setPartnerServer('test')"
>
Use Test
</button>
<button
class="px-3 py-1 rounded bg-yellow-500 text-white"
@click="setPartnerServer('local')"
>
Use Local
</button>
</div>
<button
v-if="partnerApiServerInput != partnerApiServer"
class="w-full px-4 rounded bg-yellow-500 border border-slate-400 mt-2"
@click="onClickSavePartnerServer()"
>
<font-awesome
icon="floppy-disk"
class="fa-fw"
color="white"
></font-awesome>
</button>
</div>
<label
for="toggleProdWarningMessage"
class="flex items-center justify-between cursor-pointer px-4 py-4"
@click="toggleProdWarning"
>
<!-- label -->
<h2>Show warning if on prod server</h2>
<!-- toggle -->
<div class="relative ml-2">
<!-- input -->
<input v-model="warnIfProdServer" type="checkbox" class="sr-only" />
<!-- line -->
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
<!-- dot -->
<div
class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
></div>
</div>
</label>
</div>
</div>
</section>
</template>
@@ -851,6 +852,7 @@ export default class AccountViewView extends Vue {
isRegistered = false;
profileImageUrl?: string;
showDidCopy = false;
showAdvanced = false;
// Server settings
apiServer = "";
@@ -878,7 +880,6 @@ export default class AccountViewView extends Vue {
publicBase64 = "";
publicHex = "";
derivationPath = "";
showAdvanced = false;
showB64Copy = false;
showPubCopy = false;
showDerCopy = false;
@@ -898,6 +899,7 @@ export default class AccountViewView extends Vue {
passkeyExpirationDescription = "";
hideRegisterPromptOnNewContact = false;
previousPasskeyExpirationMinutes = DEFAULT_PASSKEY_EXPIRATION_MINUTES;
downloadAttempted = false;
// Component refs
declare $refs: {
@@ -926,29 +928,40 @@ export default class AccountViewView extends Vue {
async mounted() {
try {
logger.log("AccountViewView mounted, loading settings...");
const settings = await retrieveSettingsForActiveAccount();
const settings = await retrieveSettingsForActiveAccount();
// Load basic settings
this.activeDid = settings.activeDid || "";
this.activeDid = settings.activeDid || "";
this.isRegistered = !!settings.isRegistered;
this.givenName = settings.firstName || "";
this.profileImageUrl = settings.profileImageUrl;
// Load server settings
this.apiServer = settings.apiServer || "";
this.apiServerInput = settings.apiServer || "";
this.apiServer = settings.apiServer || "";
this.apiServerInput = settings.apiServer || "";
this.webPushServer = settings.webPushServer || "";
this.webPushServerInput = settings.webPushServer || "";
this.partnerApiServer = settings.partnerApiServer || "";
this.partnerApiServerInput = settings.partnerApiServer || "";
this.warnIfProdServer = !!settings.warnIfProdServer;
// Initialize server settings if they're empty
if (!this.apiServerInput) {
this.setApiServer('prod');
}
if (!this.webPushServerInput) {
this.setPushServer('prod');
}
if (!this.partnerApiServerInput) {
this.setPartnerServer('prod');
}
// Notification settings
this.notifyingNewActivity = !!settings.notifyingNewActivityTime;
this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
this.notifyingReminder = !!settings.notifyingReminderTime;
this.notifyingReminderMessage = settings.notifyingReminderMessage || "";
this.notifyingReminderTime = settings.notifyingReminderTime || "";
this.notifyingNewActivity = !!settings.notifyingNewActivityTime;
this.notifyingNewActivityTime = settings.notifyingNewActivityTime || "";
this.notifyingReminder = !!settings.notifyingReminderTime;
this.notifyingReminderMessage = settings.notifyingReminderMessage || "";
this.notifyingReminderTime = settings.notifyingReminderTime || "";
// Load rate limits
if (this.activeDid) {
@@ -963,9 +976,9 @@ export default class AccountViewView extends Vue {
await this.loadIdentityDetails();
// Load profile settings
this.passkeyExpirationMinutes =
settings.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES;
this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
this.passkeyExpirationMinutes =
settings.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES;
this.previousPasskeyExpirationMinutes = this.passkeyExpirationMinutes;
this.hideRegisterPromptOnNewContact =
!!settings.hideRegisterPromptOnNewContact;
this.passkeyExpirationDescription = tokenExpiryTimeDescription();
@@ -1226,6 +1239,7 @@ export default class AccountViewView extends Vue {
3000,
);
}
this.downloadAttempted = true;
}
uploadImportFile(event: Event) {

17
test-playwright/00-noid-tests.spec.ts
View File

@@ -189,7 +189,14 @@ test('Check setting name & sharing info', async ({ page }) => {
test('Confirm test API setting (may fail if you are running your own Time Safari)', async ({ page }, testInfo) => {
// Load account view
await page.goto('./account');
await page.getByRole('heading', { name: 'Advanced' }).click();
// Wait for and click the Advanced heading
const advancedHeading = page.getByRole('heading', { name: 'Advanced' });
await advancedHeading.waitFor({ state: 'visible' });
await advancedHeading.click();
// Wait for the Advanced section to be fully loaded
await page.waitForLoadState('networkidle');
// look into the config file: if it starts Time Safari, it might say which server it should set by default
const webServer = testInfo.config.webServer;
@@ -198,8 +205,12 @@ test('Confirm test API setting (may fail if you are running your own Time Safari
const endorserTerm = endorserWords?.find(word => word.startsWith(ENDORSER_ENV_NAME + '='));
const endorserTermInConfig = endorserTerm?.substring(ENDORSER_ENV_NAME.length + 1);
const endorserServer = endorserTermInConfig || 'https://test-api.endorser.ch';
await expect(page.getByRole('textbox').nth(1)).toHaveValue(endorserServer);
// Find the Claim Server input field using the label's for attribute
const serverInput = page.locator('input[type="text"]').first();
await serverInput.waitFor({ state: 'visible' });
const endorserServer = endorserTermInConfig || 'https://api.endorser.ch';
await expect(serverInput).toHaveValue(endorserServer);
});
test('Check User 0 can register a random person', async ({ page }) => {