add test for new name-entry & copy-to-clipboard flow

playwright.config-local.ts

@@ -74,7 +74,7 @@ export default defineConfig({
 
   /* Configure global timeout; default is 30000 milliseconds */
   // the image upload will often not succeed at 5 seconds
-  // timeout: 10000,
+  // timeout: 5000,
 
   /* Run your local dev server before starting the tests */
   /**

src/views/AccountViewView.vue

@@ -57,14 +57,14 @@
         v-else
         class="block w-full text-center text-md bg-amber-200 border border-dashed border-slate-400 px-1.5 py-2 rounded-md mb-2"
       >
-        <span
+        <button
           @click="
             () => $refs.userNameDialog.open((name) => (this.givenName = name))
           "
           class="inline-block text-md uppercase 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-4 py-2 rounded-md"
         >
           Set Your Name
-        </span>
+        </button>
         <UserNameDialog ref="userNameDialog" />
       </span>
       <div class="flex justify-center mt-4">

src/views/HomeView.vue

@@ -86,12 +86,14 @@
           >
             <!-- activeDid && !isRegistered -->
             To share, someone must register you.
-            <div
+            <div class="block text-center">
-              @click="showNameDialog()"
+              <button
-              class="block text-center text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
+                @click="showNameDialog()"
-            >
+                class="text-md font-bold bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white mt-2 px-2 py-3 rounded-md"
-              Show Them {{ PASSKEYS_ENABLED ? "Default" : "Your" }} Identifier
+              >
-              Info
+                Show them {{ PASSKEYS_ENABLED ? "default" : "your" }} identifier
+                info
+              </button>
             </div>
             <UserNameDialog ref="userNameDialog" />
             <div v-if="PASSKEYS_ENABLED" class="flex justify-end w-full">

test-playwright/00-noid-tests.spec.ts

@@ -1,22 +1,6 @@
 import { test, expect } from '@playwright/test';
 import { generateEthrUser, importUser } from './testUtils';
 
-test('Confirm usage of test API (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();
-
-  // 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;
-  const endorserWords = webServer?.command.split(' ');
-  const ENDORSER_ENV_NAME = 'VITE_DEFAULT_ENDORSER_API_SERVER';
-  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);
-});
-
 test('Check activity feed', async ({ page }) => {
   // Load app homepage
   await page.goto('./');
@@ -39,14 +23,6 @@ test('Check discover results', async ({ page }) => {
   await page.locator('ul#listDiscoverResults li.border-b:nth-child(20)').scrollIntoViewIfNeeded();
 });
 
-test('Check no-ID messaging in homepage', async ({ page }) => {
-  // Load app homepage
-  await page.goto('./');
-
-  // Check 'someone must register you' notice
-  await expect(page.getByText('To share, someone must register you.')).toBeVisible();
-});
-
 test('Check no-ID messaging in account', async ({ page }) => {
   // Load account view
   await page.goto('./account');
@@ -74,6 +50,9 @@ test('Check ID generation', async ({ page }) => {
   // Wait for activity feed to start loading, as a delay
   await expect(page.locator('ul#listLatestActivity li:nth-child(10)')).toBeVisible();
 
+  // Check 'someone must register you' notice
+  await expect(page.getByText('To share, someone must register you.')).toBeVisible();
+
   // Go back to Account view
   await page.goto('./account');
 
@@ -81,7 +60,46 @@ test('Check ID generation', async ({ page }) => {
   await expect(page.locator('#sectionIdentityDetails code.truncate')).toContainText('did:ethr:');
 });
 
-test('Check User 0 can register random person', async ({ page }) => {
+
+test('Check setting name & sharing info', async ({ page }) => {
+  // Load homepage to trigger ID generation (?)
+  await page.goto('./');
+  // Check 'someone must register you' notice
+  await expect(page.getByText('someone must register you.')).toBeVisible();
+  await page.getByRole('button', { name: /Show them/}).click();
+  // fill in a name
+  await expect(page.getByText('Set Your Name')).toBeVisible();
+  await page.getByRole('textbox').fill('Me Test User');
+  await page.locator('button:has-text("Save")').click();
+  await expect(page.getByText('share another way')).toBeVisible();
+  await page.getByRole('button', { name: /share another way/ }).click();
+  await expect(page.getByRole('button', { name: 'copy to clipboard' })).toBeVisible();
+  await page.getByRole('button', { name: 'copy to clipboard' }).click();
+  await expect(page.getByText('contact info was copied')).toBeVisible();
+  // dismiss alert and wait for it to go away
+  await page.locator('div[role="alert"] button > svg.fa-xmark').click();
+  await expect(page.getByText('contact info was copied')).toBeHidden();
+  // check that they're on the Contacts screen
+  await expect(page.getByText('your contacts')).toBeVisible();
+});
+
+test('Confirm usage of test API (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();
+
+  // 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;
+  const endorserWords = webServer?.command.split(' ');
+  const ENDORSER_ENV_NAME = 'VITE_DEFAULT_ENDORSER_API_SERVER';
+  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);
+});
+
+test('Check User 0 can register a random person', async ({ page }) => {
   await importUser(page, '00');
   const newDid = await generateEthrUser(page);
   expect(newDid).toContain('did:ethr:');

test-playwright/10-check-usage-limits.spec.ts

@@ -20,9 +20,9 @@ test('Check usage limits', async ({ page }) => {
   await expect(page.getByRole('button', { name: 'Recheck Limits' })).toBeVisible();
 
   // Set name
-  await page.getByRole('link', { name: 'Set Your Name' }).click();
+  await page.getByRole('button', { name: 'Set Your Name' }).click();
   const name = 'User ' + did.slice(11, 14);
   await page.getByPlaceholder('Name').fill(name);
-  await page.getByRole('button', { name: 'Save Changes' }).click();
+  await page.getByRole('button', { name: 'Save' }).click();
 
 });